JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

应用

JavaScript：直接写入 HTML 输出流

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>直接写入HTML输出流</title>
    </head>
    <body>

        <p>
            JavaScript 能够直接写入 HTML 输出流中：
        </p>
        <script>
            document.write("<h1>这是一个标题</h1>");
            document.write("<p>这是一个段落。</p>");
        </script>
        <p>
            只能在 HTML 输出流中使用 <strong>document.write</strong>。
            如果在文档已加载后使用它（比如在函数中），会覆盖整个文档。
        </p>

    </body>
</html>

JavaScript：对事件的反应

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>对事件的反应(runoob.com)</title> 
    </head>
    <body>

        <h1>我的第一个 JavaScript</h1>
        <p>
            JavaScript 能够对事件作出反应。比如对按钮的点击：
        </p>
        <button type="button" onclick="alert('欢迎!')">点我!</button>

    </body>
</html>

JavaScript：改变 HTML 内容

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>改变HTML内容</title> 
    </head>
    <body>

        <h1>我的第一段 JavaScript</h1>
        <p id="demo">
            JavaScript 能改变 HTML 元素的内容。
        </p>
        <script>
            function myFunction()
            {
                x=document.getElementById("demo");  // 找到元素
                x.innerHTML="Hello JavaScript!";    // 改变内容
            }
        </script>
        <button type="button" onclick="myFunction()">点击这里</button>

    </body>
</html>

JavaScript：改变 HTML 图像

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>图片的更换</title> 
    </head>
    <body>

        <script>
            function changeImage()
            {
                element=document.getElementById('myimage')
                if (element.src.match("bulbon"))
                {
                    element.src="/images/pic_bulboff.gif";
                }
                else
                {
                    element.src="/images/pic_bulbon.gif";
                }
            }
        </script>
        <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
        <p>点击灯泡就可以打开或关闭这盏灯</p>

    </body>
</html>

JavaScript：改变 HTML 样式

<p id="demo">
    JavaScript 能改变 HTML 元素的样式。
</p>
<script>
    function myFunction()
    {
        x=document.getElementById("demo") // 找到元素
        x.style.color="#ff0000";          // 改变样式
    }
</script>
<button type="button" onclick="myFunction()">点击这里</button>

JavaScript：验证输入

<input id="demo" type="text">
<script>
    function myFunction()
    {
        var x=document.getElementById("demo").value;
        if(x==""||isNaN(x))
        {
            alert("不是数字");
        }
    }
</script>
<button type="button" onclick="myFunction()">点击这里</button>

一般都是对于外局js的引进来应用。

如下对于myFunction.js的引入

<!DOCTYPE html>
<html>
    <body>
        <script src="myScript.js"></script>
    </body>
</html>

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

javaScript输出

window.alert() 弹出警告框

<body>
	
    <h1>我的第一个页面</h1>
    <p>我的第一个段落。</p>
    <script>
        window.alert(5 + 6);
    </script>

</body>

document.write()方法将内容写到HTML文档中

<p id="demo">我的第一个段落。</p>
<script>
    document.getElementById("demo").innerHTML="段落已修改。";
</script>

innerHTML写入到HTML元素

<body>

    <h1>我的第一个 Web 页面</h1>
    <p>我的第一个段落。</p>
    <script>
        document.write(Date());
    </script>
</body>

console.log()写入到浏览器的控制台

<p>
    浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
    a = 5;
    b = 6;
    c = a + b;
    console.log(c);
</script>

JavaScript语法以及数据类型

var length = 16;                                  // Number 通过数字字面量赋值 
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值  通过变量名.属性名的方式可以访问属性值

HTML事件

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
    function displayDate(){
        document.getElementById("demo").innerHTML=Date();
    }
</script>
<p id="demo"></p>

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

字符串常用的方法：

<body>
	
<p id="demo"></p>
<script>
    var x = "John";              // x 是字符串
    var y = new String("John");  // y 是一个对象
    document.getElementById("demo").innerHTML = x===y;
</script>
<p>=== 为绝对相等，即数据类型与值都必须相等。</p>
	
</body>

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符

条件语句、循环语句……

<script type="text/javascript">
    var d = new Date();
    var time = d.getHours();
        if (time<10)                        //if...else if...else
        {
            document.write("<b>早上好</b>");
        }
        else if (time>=10 && time<16)
        {
            document.write("<b>今天好</b>");
        }
        else
        {
            document.write("<b>晚上好!</b>");
        }
</script>
<p>
这个例子演示了 if..else if...else 语句。
</p>

<p>点击下面的按钮，会显示出基于今日日期的消息：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var x;
	var d=new Date().getDay();
	switch (d)                           //switch语句
    {
  		case 6:x="今天是星期六";
    	break;
  		case 0:x="今天是星期日";
    	break;
  		default:
    	x="期待周末";
  	}
	document.getElementById("demo").innerHTML=x;
}
</script>

<body>
    <script>
        cars=["BMW","Volvo","Saab","Ford"];
        for (var i=0;i<cars.length;i++){     //for循环遍历数组
            document.write(cars[i] + "<br>");
        }
    </script>

</body>

<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction(){
        var x;
        var txt="";
        var person={fname:"Bill",lname:"Gates",age:56}; 
        for (x in person){                                   //for(in...)
            txt=txt + person[x];
        }
        document.getElementById("demo").innerHTML=txt;
    }
</script>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction(){                    //while循环
        var x="",i=0;
        while (i<5){
            x=x + "该数字为 " + i + "<br>";
            i++;
        }
        document.getElementById("demo").innerHTML=x;
    }
</script>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction(){
        var x="",i=0;
        do{                                     //do...while语句
            x=x + "该数字为 " + i + "<br>";
            i++;
        }
        while (i<5)  
        document.getElementById("demo").innerHTML=x;
    }
</script>

javaScript操作符

typeof

typeof "John"                // 返回 string 
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

null

<p>对象可以通过设置为 <b>null</b> 来清空。</p>
<p id="demo"></p>
<script>
    var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
    var person = null;
    document.getElementById("demo").innerHTML = typeof person;
</script>

undefined

<p>变量的值如果不存在则该变量值为 <b>undefined</b>。</p>
<p id="demo"></p>
<script>
    var person;
    document.getElementById("demo").innerHTML =
        person + "<br>" + typeof person;
</script>

null 和 undefined 的值相等，但类型不等：

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

javascript类型转换

在 JavaScript 中有 6 种不同的数据类型：

string
number
boolean
object
function
symbol

3 种对象类型：

Object
Date
Array

2 个不包含任何值的数据类型：

null
undefined

<p> String() 方法可以将数字转换为字符串。</p>
<p id="demo"></p>
<script>
    var x = 123;
    document.getElementById("demo").innerHTML =
        String(x) + "<br>" +
        String(123) + "<br>" +
        String(100 + 23);
</script>

同理还有----------------------toString的方式
<script>
var x = 123;
document.getElementById("demo").innerHTML =
    x.toString() + "<br>" +
   (123).toString() + "<br>" +
   (100 + 23).toString();
</script>

……其他各种类型的相互转换。

正则表达式

search方法是用正则表达式，同样还有replace

<p>搜索字符串 "runoob", 并显示匹配的起始位置：</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var str = "Visit Runoob!"; 
        var n = str.search(/Runoob/i);
        document.getElementById("demo").innerHTML = n;
    }
</script>

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x\|y)	查找任何以 \| 分隔的选项。

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串

JavaScript 错误 - throw、try 和 catch

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

<script>
    var txt="";
    function message(){
        try {
            adddlert("Welcome guest!");
        }
        catch(err) {
            txt="本页有一个错误。\n\n";
            txt+="错误描述：" + err.message + "\n\n";
            txt+="点击确定继续。\n\n";
            alert(txt);
        }
    }
</script>

JavaScript 调试工具

浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。

前端连载学习笔记概要一（JavaScript）