JavaScript 笔记

JavaScript 是脚本语言

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

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

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

JavaScript脚本必须位于标签之间，可被放置在 HTML 页面的和部分中；

也可以把脚本保存到外部文件中，外部文件通常包含被多个网页使用的代码；外部 JavaScript 文件的文件扩展名是 .js；如需使用外部文件，需在\<script>标签的 “src” 属性中设置该 .js 文件。

JavaScript 数据类型：字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)；

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型；

Undefined 这个值表示变量不含有值，而将变量的值设置为 null 来清空变量。
<!--
JavaScript 用法
HTML 中的脚本必须位于 <script> 和 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中

JavaScript 输出
• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<h1>我的第一个 Web 页面</h1>
<p id="demoElement">我的第一个段落</p>

<button onclick="windowAlert()">弹出警告框</button>
<p></p>
<button onclick="testInnerHTML()">使用innerHTML写入数据</button>
<p></p>
<button onclick="documentWrite()">点击整个HTML页面将被覆盖</button>
<p></p>
<button onclick="testConsole()">输出到控制台</button>

<script>
    function windowAlert()
    {
        window.alert(3 + 5)
    }

    function testInnerHTML() {
        document.getElementById("demoElement").innerHTML = "段落已修改"
    }

    function documentWrite() {
        // 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖
        document.write("test document.write")
    }

    function testConsole() {
        console.log(3 + 5)
    }
</script>

</body>
</html>


<!--JavaScript 对大小写敏感
可以在文本字符串中使用反斜杠对代码行进行换行
JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
在执行过后面语句后，变量 carname 的值将是 undefined。    var carname;
Undefined 和 Null：Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量
如果重新声明 JavaScript 变量，该变量的值不会丢失：var carname="Volvo";var carname; carname仍然是Volvo

JavaScript 语法
JavaScript 字面量
数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。3.14 1001 123e5
字符串（String）字面量 可以使用单引号或双引号："John Doe" 'John Doe'
表达式字面量 用于计算：5 + 6
数组（Array）字面量 定义一个数组：[40, 100, 1, 5, 25, 10]
对象（Object）字面量 定义一个对象：{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
函数（Function）字面量 定义一个函数：function myFunction(a, b) { return a * b;}

JavaScript 变量
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：var x, length；x = 5

JavaScript 数据类型
字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）

JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除；全局变量会在页面关闭后被删除
如果把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。这条语句：carname="Volvo";
将声明一个全局变量 carname，即使它在函数内执行。

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象
你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。
局部变量，包括 window 对象可以覆盖全局变量和函数-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<h1>JavaScript 数据类型</h1>
<p id="testDynamicType">我的第一个段落</p>

<button onclick="testDynamicType()">testDynamicType</button>
<p></p>
<button onclick="testUndeclaredVar()">testUndeclaredVar</button>

<script>
    function testDynamicType() {
        // JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型
        var x;           // x 为 undefined
        x = 5;           // 现在 x 为数字
        x = "John";      // 现在 x 为字符串

        //创建数组 new Array() 或者 [...] 或者 new Array("Saab","Volvo","BMW")
        var cars = ["Saab", "Volvo", "BMW"];
        cars[0] = "Audi";

        //JavaScript对象
        //对象由花括号分隔。在括号内部，对象的属性以名称和值对(name : value)的形式来定义
        var person = {firstname:"John", lastname:"Doe", id:5566};
        //对象属性有两种寻址方式：
        name = person.lastname;
        name = person["lastname"];

        //如果把值赋给尚未声明的变量，该变量将被自动作为全局变量声明
        undeclaredVar  = "undeclaredVar";

        document.getElementById("testDynamicType").innerHTML = x;
    }

    function testUndeclaredVar() {
        document.getElementById("testDynamicType").innerHTML = undeclaredVar;
    }
</script>

</body>
</html>


<!--常见的HTML事件:
事件             描述
onchange       HTML 元素改变
onclick        用户点击 HTML 元素
onmouseover    用户在一个HTML元素上移动鼠标
onmouseout     用户从一个HTML元素上移开鼠标
onkeydown      用户按下键盘按键
onload         浏览器已完成页面的加载
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素:
<some-HTML-element some-event="some JavaScript">
eg:<button onclick = "displayDate()">time Now</button>

JavaScript 字符串：你可以使用索引位置来访问字符串中的每个字符
字符串可以是对象
通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John"
但我们也可以使用 new 关键字将字符串定义为一个对象：   var firstName = new String("John")
不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：
var x = "John";
var y = new String("John");
(x === y) // 结果为 false，因为是字符串，y 是对象
=== 为绝对相等，即数据类型与值都必须相等。

原始值字符串，如 "John", 没有属性和方法(因为他们不是对象)。
原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象

字符串属性：
属性          描述
constructor 返回创建字符串属性的函数
length      返回字符串的长度
prototype   允许您向对象添加属性和方法

字符串方法：
Method          描述
charAt()        返回指定索引位置的字符
charCodeAt()    返回指定索引位置字符的 Unicode 值
concat()        连接两个或多个字符串，返回连接后的字符串
fromCharCode()  将 Unicode 转换为字符串
indexOf()       返回字符串中检索指定字符第一次出现的位置
lastIndexOf()   返回字符串中检索指定字符最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match()         找到一个或多个正则表达式的匹配
replace()       替换与正则表达式匹配的子串
search()        检索与正则表达式相匹配的值
slice()         提取字符串的片断，并在新的字符串中返回被提取的部分
split()         把字符串分割为子字符串数组
substr()        从起始索引号提取字符串中指定数目的字符
substring()     提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()   把字符串转换为小写
toString()      返回字符串对象值
toUpperCase()   把字符串转换为大写
trim()          移除字符串首尾空白
valueOf()       返回某个字符串对象的原始值

+ 运算符用于把文本值或字符串变量加起来（连接起来）
如果把数字与字符串相加，结果将成为字符串！


JavaScript switch 语句：
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。
如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行


JavaScript 标签
如需标记 JavaScript 语句，请在语句之前加上冒号：
break 和 continue 语句仅仅是能够跳出代码块的语句
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<script>
    cars=["BMW","Volvo","Saab","Ford"];
    list:{
        document.write(cars[0] + "<br>");
        document.write(cars[1] + "<br>");
        document.write(cars[2] + "<br>");
        break list;
        document.write(cars[3] + "<br>");
        document.write(cars[4] + "<br>");
        document.write(cars[5] + "<br>");
    }
</script>

</body>
</html>


<!--JavaScript typeof, null, 和 undefined
使用 typeof 操作符来检测变量的数据类型
在 JavaScript 中 null 表示 "什么都没有"；null是一个只有一个值的特殊类型，表示一个空对象引用
用 typeof 检测 null 返回是object，你可以设置为 null 来清空对象
在 JavaScript 中, undefined 是一个没有设置值的变量-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

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

</body>
</html>


<!--JavaScript 数据类型:
在 JavaScript 中有 5 种不同的数据类型：string、number、boolean、object、function
3 种对象类型：Object、Date、Array
2 个不包含任何值的数据类型：null、undefined

请注意：
NaN 的数据类型是       number
数组(Array)的数据类型是 object
日期(Date)的数据类型为  object
null 的数据类型是      object
未定义变量的数据类型为   undefined

constructor 属性返回所有 JavaScript 变量的构造函数
可以使用 constructor 属性来查看是对象是否为数组

一元运算符 + 可用于将变量转化成数字
var y = "5";      // y 是一个字符串
var x = + y;      // x 是一个数字


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

test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false

exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<p>搜索字符串 "w3cSchool", 并显示匹配的起始位置：</p>
<p id="demo"></p>

<button onclick="searchStr()">搜索字符串位置</button>
<p></p>

<script>
    function searchStr() {
        var patt = /e/;
        var isOrNot = patt.test("The best things in life are free!");
        //你可以不用设置正则表达式的变量，以上两行代码可以合并为一行：
        ///e/.test("The best things in life are free!")

        var str = "Visit W3cSchool!";
        var n = str.search(/w3cSc(.*)l/i);
        document.getElementById("demo").innerHTML = n + "    " + isOrNot + "    "
            + /lif/.exec("The best things in life are free!");
    }
</script>

</body>
</html>


<!--JavaScript 错误 - throw、try 和 catch-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
    <script>
        function myFunction(){
            try{
                var x=document.getElementById("demo").value;
                if(x=="")    throw "值为空";
                if(isNaN(x)) throw "不是数字";
                if(x>10)     throw "太大";
                if(x<5)      throw "太小";
                document.getElementById("mess").innerHTML = null
            }
            catch(err){
                var y=document.getElementById("mess");
                y.innerHTML="错误：" + err + "。";
            }
        }
    </script>
</head>
<body>

<h1>JavaScript 错误 - throw、try 和 catch</h1>
<p>请输出一个 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</button>
<p id="mess"></p>

</body>
</html>


<!--debugger 关键字
debugger 关键字用于停止执行 JavaScript，并调用调试函数-->


<!--JavaScript 变量提升
JavaScript 中，函数及变量的声明都将被提升到函数的最顶部
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明
JavaScript 只有声明的变量会提升，初始化的不会-->


<!--JavaScript 严格模式(use strict):
支持严格模式的浏览器：Internet Explorer 10 +、 Firefox 4+ Chrome 13+、 Safari 5.1+、 Opera 12+
严格模式通过在脚本或函数的头部添加 "use strict"; 表达式来声明

为什么使用严格模式:
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向主流浏览器都已经支持它，许多大项目已经开始全面拥抱它。
另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，
在"严格模式"下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。

严格模式的限制：
不允许使用未声明的变量 "use strict";x = 3.14;                // 报错 (x 未定义)
对象也是一个变量      "use strict";x = {p1:10, p2:20};      // 报错 (x 未定义)
不允许删除变量或对象   "use strict";var x = 3.14;delete x;   // 报错
不允许删除函数
不允许变量重名
不允许使用八进制
不允许使用转义字符
不允许对只读属性赋值
不允许对一个使用getter方法读取的属性进行赋值
不允许删除一个不允许删除的属性
变量名不能使用 "eval" 字符串
变量名不能使用 "arguments" 字符串
不允许使用以下这种语句     "use strict";with (Math){x = cos(2)};   // 报错
由于一些安全原因，在作用域 eval() 创建的变量不能被调用
禁止this关键字指向全局对象-->


<!--浮点型数据使用注意事项：
JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。
所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定
var x = 0.1;var y = 0.2;var z = x + y;if (z == 0.3) //返回false-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<p id="demo"></p>
<script>
    var x = 0.1;
    var y = 0.2;
    var z = x + y;
    //0.30000000000000004
    document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>


<!--程序块作用域
在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的
以下代码的的变量 i 返回 10，而不是 undefined-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJS</title>
</head>
<body>

<p id="demo"></p>
<script>
    for (var i = 0; i < 10; i++) {
        // some code
    }
    document.getElementById("demo").innerHTML = i;
</script>

</body>
</html>


<!--JavaScript 表单
HTML 表单验证可以通过 JavaScript 来完成-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        function validateForm() {
            var x = document.forms["myForm"]["fname"].value;
            if (x == null || x == "") {
                alert("需要输入名字。");
                return false;
            }
        }
    </script>
</head>
<body>

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
    名字: <input type="text" name="fname" title="name">
    <input type="submit" value="提交">
</form>

</body>
</html>

<!--HTML 表单验证也可以通过浏览器来自动完成
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交
Internet Explorer 9 、Safari 及更早 IE 浏览器不支持表单自动验证-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>

<form action="javascript:void(0)" method="post">
    <input type="text" name="fname" required>
    <input type="submit" value="提交">
</form>

<p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息</p>

</body>
</html>


<!--JavaScript 验证 API
约束验证 DOM 属性
alidity             布尔属性值，返回 input 输入值是否合法
validationMessage   浏览器错误提示信息
willValidate        指定 input 是否需要验证

Validity 属性
input 元素的 validity 属性包含一系列关于 validity 数据属性:
customError         设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch     设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow       设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow      设置为 true, 如果元素的值小于它的最小值。
stepMismatch        设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong             设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch        设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing        设置为 true，如果元素 (required 属性) 没有值。
valid               设置为 true，如果元素的值是合法的。-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>

<p>输入数字并点击验证按钮:</p>

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>

<p>如果输入的数字小于 100 或大于300，会提示错误信息。</p>

<p id="demo"></p>

<script>
    function myFunction() {
        var inpObj = document.getElementById("id1");
        if (inpObj.checkValidity() == false) {
            document.getElementById("demo").innerHTML = inpObj.validationMessage;
        } else {
            document.getElementById("demo").innerHTML = "输入正确";
        }
    }
</script>

</body>
</html>


<!--JSON 字符串转换为 JavaScript 对象: var obj = JSON.parse(json);
将JavaScript 值转换为 JSON 字符串: JSON.stringify()-->


<!--javascript:void(0) 含义：
void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。
href="#"与href="javascript:void(0)"的区别
# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0)-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJS</title>
</head>
<body>

<p>点击以下链接查看结果：</p>
<a href="javascript:void(0)">单击此处什么也不会发生</a>
<p></p>
<a href="#">单击返回顶部</a>
<p></p>
<a href="javascript:void(alert('Warning!!!'))">单击显示警告</a>

</body>
</html>


<!--JavaScript 函数定义
JavaScript 使用关键字 function 定义函数
函数可以通过声明定义，也可以是一个表达式
函数表达式：
var x = function (a, b) {return a * b};
var z = x(4, 3);
以上函数实际上是一个 匿名函数 (函数没有名称)

Function() 构造函数
在以上实例中，我们了解到函数通过关键字 function 定义
函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义：
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
实际上，你不必使用构造函数。上面实例可以写成：
var myFunction = function (a, b) {return a * b}
var x = myFunction(4, 3);

函数提升（Hoisting）
提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的的行为
提升（Hoisting）应用在变量的声明与函数的声明
因此，函数可以在声明之前调用：
myFunction(5);
function myFunction(y) {
    return y * y;
}
使用表达式定义函数时无法提升

函数是对象
在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。
但是JavaScript 函数描述为一个对象更加准确。
JavaScript 函数有 属性 和 方法。
arguments.length 属性返回函数调用过程接收到的参数个数：-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<p> arguments.length 属性返回函数接收到参数的个数：</p>
<p id="demo"></p>
<script>
    function myFunction(a, b) {
        return arguments.length;
    }
    //2 function myFunction(a, b) { return arguments.length; } function
    document.getElementById("demo").innerHTML = myFunction(3, 4) +
        "   " + myFunction.toString() + "   " + typeof myFunction;
</script>

</body>
</html>


<!--JavaScript 函数参数
JavaScript 函数对参数的值没有进行任何的检查
函数显式参数(Parameters)与隐式参数(Arguments):
函数显式参数在函数定义时列出
函数隐式参数在函数调用时传递给函数真正的值

默认参数
如果函数在调用时未提供隐式参数，参数会默认设置为： undefined
有时这是可以接受的，但是建议最好为参数设置一个默认值：-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<p>设置参数的默认值。</p>
<p id="demo"></p>
<script>
    function myFunction(x, y) {
        if (y === undefined) {
            y = 0;
        }
        return x * y;
    }
    document.getElementById("demo").innerHTML = myFunction(4);
</script>

</body>
</html>

<!--Arguments 对象
如果函数调用时设置了过多的参数，参数将无法被引用，因为无法找到对应的参数名。 只能使用 arguments 对象来调用
JavaScript 函数有个内置的对象 arguments 对象。
argument 对象包含了函数调用的参数数组-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<p>查找最大的数。</p>
<p id="demo"></p>
<script>
    function findMax() {
        var i, max = 0;
        for(i = 0; i < arguments.length; i++) {
            if (arguments[i] > max) {
                max = arguments[i];
            }
        }
        return max;
    }
    document.getElementById("demo").innerHTML = findMax(4, 5, 6);
</script>

</body>
</html>


<!--JavaScript 函数调用
JavaScript 函数有 4 种调用方式
每种方式的不同方式在于 this 的初始化
作为一个函数调用
函数作为方法调用
使用构造函数调用函数
作为函数方法调用函数
call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身
function myFunction(a, b) {
    return a * b;
}
myFunction.call(myObject, 10, 2);      // 返回 20
myArray = [10,2];
myFunction.apply(myObject, myArray);   // 返回 20
两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数： apply传入的是一个参数数组
也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）-->


<!--JavaScript 闭包-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<p>局部变量计数</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
    var add = (function () {
        var counter = 0;
        return function () {return counter += 1;}
    })();
    function myFunction(){
        document.getElementById("demo").innerHTML = add();
    }
</script>

</body>
</html>


<!--JavaScript HTML DOM(文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
HTML DOM 模型被构造为对象的树：
Document -> Roote element:<html> -> Element:<head> -> Element:<title> -> Text:"My title"
                                  -> Element:<body>
                                                    -> Element:<h1> -> Text:"My header"
                                                    -> Element:<a>  -> Text:"My link"
                                                                    -> Attribute:"href"
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素，但必须首先找到该元素。有三种方法来做这件事：
• 通过 id 找到 HTML 元素: var x=document.getElementById("intro");
• 通过标签名找到 HTML 元素 : 本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<p>你好世界!</p>
<div id="main">
    <p> DOM 是非常有用的。</p>
    <p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
</div>
<script>
    var x=document.getElementById("main");
    var y=x.getElementsByTagName("p");
    document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>

</body>
</html>

<!--• 通过类名找到 HTML 元素-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJS</title>
</head>
<body>

<p class="intro">你好世界!</p>
<p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
<script>
    x=document.getElementsByClassName("intro");
    document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>
<p><b>注意：</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
</body>
</html>

<!--改变 HTML 输出流
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性:
document.getElementById(id).innerHTML = ""

改变 HTML 属性
document.getElementById(id).attribute = ""

改变 HTML 样式
document.getElementById(id).style.property=新样式-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
    document.getElementById("p2").style.color="purple";
    document.getElementById("p2").style.fontFamily="Arial";
    document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改</p>

</body>
</html>

<!--使用事件
HTML DOM 允许我们通过触发事件来执行代码
比如以下事件：
• 元素被点击。
• 页面加载完成。
• 输入框被修改。
• ……-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<h1 id="id1">我的标题</h1>
<button type="button" onclick="document.getElementById('id1').style.color='purple'">
    点我!</button>

</body>
</html>

<!--修改HTML样式-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<p id="p1">这是一个文本 这是一个文本 这是一个文本</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

</body>
</html>


<!--JavaScript HTML DOM 事件-->

<!--对事件做出反应-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

</body>
</html>

<!--本例从事件处理器调用一个函数：-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<head>
    <script>
        function changetext(id) {
            id.innerHTML="Ooops!";
        }
    </script>
</head>
<body>

<h1 onclick="changetext(this)">点击文本!</h1>

</body>
</html>

<!--使用 HTML DOM 来分配事件-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

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

</body>
</html>

<!--onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body onload="checkCookies()">

<script>
    function checkCookies(){
        if (navigator.cookieEnabled == true){
            alert("Cookies 可用")
        }
        else{
            alert("Cookies 不可用")
        }
    }
</script>
<p>弹窗-提示浏览器 cookie 是否可用</p>

</body>
</html>

<!--onchange 事件-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<head>
    <script>
        function myFunction(){
            var x=document.getElementById("fname");
            x.value=x.value.toUpperCase();
        }
    </script>
</head>
<body>

输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母</p>

</body>
</html>

<!--onmouseover 和 onmouseout 事件-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)"
     style="background-color:#D94A38;width:150px;height:20px;padding:50px;">Mouse Over Me</div>
<script>
    function mOver(obj){
        obj.innerHTML="Thank You"
    }
    function mOut(obj){
        obj.innerHTML="Mouse Over Me"
    }
</script>

</body>
</html>

<!--onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，
当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。-->


<!--JavaScript HTML DOM EventListener
addEventListener() 方法
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
    document.getElementById("myBtn").addEventListener("click", displayDate);
    document.getElementById("myBtn").addEventListener("click", changeTitle);

    function displayDate() {
        document.getElementById("demo").innerHTML = new Date();
    }

    function changeTitle() {
        if (document.getElementById("myBtn").innerHTML == "点击") {
            document.getElementById("myBtn").innerHTML = "点我"
        } else {
            document.getElementById("myBtn").innerHTML = "点击"
        }
    }
</script>

</body>
</html>

<!--向 Window 对象添加事件句柄-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<p>实例在 window 对象中使用 addEventListener() 方法。</p>
<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
    window.addEventListener("resize", function(){
        document.getElementById("demo").innerHTML = Math.random();
    });
</script>

</body>
</html>

<!--事件冒泡或事件捕获
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

浏览器支持
注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。
但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
element.attachEvent(event, function);
element.detachEvent(event, function);

跨浏览器解决方法:
var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}-->


<!--JavaScript HTML DOM 元素(节点)
创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
</div>
<script>
    var para=document.createElement("p");
    var node=document.createTextNode("这是一个新段落。");
    para.appendChild(node);
    var element=document.getElementById("div1");
    element.appendChild(para);
</script>

</body>
</html>

<!--删除已有的 HTML 元素-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
</div>
<script>
    var parent=document.getElementById("div1");
    var child=document.getElementById("p1");
    parent.removeChild(child);
</script>

</body>
</html>


<!--JavaScript 对象
对象只是一种特殊的数据。对象拥有属性和方法
JavaScript 类
JavaScript 是面向对象的语言，但 JavaScript 不使用类-->


<!--JavaScript Number 对象
所有 JavaScript 数字均为 64 位
JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。
在JavaScript中，数字不分为整数类型和浮点型类型，所有的数字都是 浮点型类型
整数（不使用小数点或指数计数法）最多为 15 位。
小数的最大位数是 17，但是浮点运算并不总是 100% 准确
var x = 0.2+0.1; // 输出结果为 0.30000000000000004
绝不要在数字前面写零，除非需要进行八进制转换

默认情况下，JavaScript 数字为十进制显示。
但是你可以使用 toString() 方法 输出16进制、8进制、2进制
var myNumber=128;
myNumber.toString(16);   // 返回 80
myNumber.toString(8);    // 返回 200
myNumber.toString(2);    // 返回 10000000

无穷大（Infinity）
当数字运算结果超过了JavaScript所能表示的数字上限（溢出），结果为一个特殊的无穷大（infinity）值，在JavaScript中以Infinity表示

NaN - 非数字值
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值

数字方法
toExponential()
toFixed()
toPrecision()
toString()
valueOf()-->


<!--JavaScript 字符串（String） 对象
一个字符串可以使用单引号或双引号
你使用位置（索引）可以访问字符串中任何的字符
var character = carname[7];

字符串（String）使用长度属性length来计算字符串的长度
字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置，如果没找到对应的字符函数返回-1
lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置
match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符
replace() 方法在字符串中用某些字符替换另一些字符
字符串大小写转换使用函数 toUpperCase() / toLowerCase()
字符串使用split()函数转为数组
Javascript 中可以使用反斜线（\）插入特殊符号，如：撇号,引号等其他特殊符号
字符串属性和方法
属性:length、prototype、constructor
方法:charAt()、charCodeAt()、concat()、fromCharCode()、indexOf()、lastIndexOf()、match()、
replace()、search()、slice()、split()、substr()、substring()、toLowerCase()、toUpperCase()、valueOf()-->


<!--JavaScript Date（日期） 对象
在网页上显示一个钟表-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
    <script>
        function startTime(){
            var today=new Date();
            var h=today.getHours();
            var m=today.getMinutes();
            var s=today.getSeconds();// 在小于10的数字钱前加一个‘0’
            m=checkTime(m);
            s=checkTime(s);
            document.getElementById('txt').innerHTML=h+":"+m+":"+s;
            setTimeout(function(){startTime()},1000);
        }
        function checkTime(i){
            if (i<10){
                i="0" + i;
            }
            return i;
        }
    </script>
</head>
<body onload="startTime()">

<div id="txt"></div>

</body>
</html>

<!--创建日期
有四种方式初始化日期:
new Date() // 当前日期和时间
new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

设置日期
var myDate=new Date();
myDate.setFullYear(2010,0,14);-->


<!--JavaScript Array（数组） 对象
创建一个数组
1: 常规方式:
var myCars = new Array();
myCars[0] = "Saab";
myCars[1] = "Volvo";
myCars[2] = "BMW";
2: 简洁方式:
var myCars = new Array("Saab","Volvo","BMW");
3: 字面:
var myCars = ["Saab","Volvo","BMW"];

在一个数组中你可以有不同的对象-->


<!--JavaScript Math（算数） 对象
Math（算数）对象的作用是：执行常见的算数任务
round()
使用 round()来四舍五入
random()
使用 random() 来返回 0 到 1 之间的随机数
max()
使用 max() 来返回两个给定的数中的较大的数。（在 ECMASCript v3 之前，该方法只有两个参数。）
min()
使用 min() 来返回两个给定的数中的较小的数。（在 ECMASCript v3 之前，该方法只有两个参数。）

使用Math的属性/方法的语法：
var x=Math.PI;
var y=Math.sqrt(16);-->


<!--JavaScript Window - 浏览器对象模型
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"

Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header");
与此相同：
document.getElementById("header");

Window 尺寸
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<p id="demo"></p>
<script>
    var w = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;
    var h = window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;
    x = document.getElementById("demo");
    x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
</script>

</body>
</html>

<!--其他 Window 方法
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸-->


<!--JavaScript Window Screen
• screen.availWidth - 可用的屏幕宽度
• screen.availHeight - 可用的屏幕高度-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<script>
    document.write("可用宽度: " + screen.availWidth);
</script>

</body>
</html>


<!--JavaScript Window Location
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面
window.location 对象在编写时可不使用 window 这个前缀。 一些例子：
• location.hostname 返回 web 主机的域名
• location.pathname 返回当前页面的路径和文件名
• location.port     返回 web 主机的端口 （80 或 443）
• location.protocol 返回所使用的 web 协议（http:// 或 https://）
• location.href     返回当前页面的 URL
• location.assign() 方法加载新的文档-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<head>
    <script>
        function newDoc(){
            window.location.assign("http://www.baidu.com");
        }
    </script>
</head>
<body>

<input type="button" value="加载新文档" onclick="newDoc()">
<p></p>
<h3 onclick="this.innerHTML = location.hostname">获取 web 主机的域名</h3>
<p></p>
<h3 onclick="this.innerHTML = location.pathname">获取当前页面的路径和文件名</h3>
<p></p>
<h3 onclick="this.innerHTML = location.port">获取 web 主机的端口</h3>
<p></p>
<h3 onclick="this.innerHTML = location.protocol">获取所使用的 web 协议</h3>
<p></p>
<h3 onclick="this.innerHTML = location.href">获取当前页面的 URL</h3>

</body>
</html>


<!--JavaScript Window History
window.history对象在编写时可不使用 window 这个前缀
为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。一些方法：
• history.back()    - 与在浏览器点击后退按钮相同
• history.forward() - 与在浏览器中点击按钮向前相同-->


<!--JavaScript Window Navigator
window.navigator 对象包含有关访问者浏览器的信息
window.navigator 对象在编写时可不使用 window 这个前缀-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<div id="example"></div>
<script>
    txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
    txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
    txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
    txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
    txt+= "<p>硬件平台: " + navigator.platform + "</p>";
    txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
    txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
    document.getElementById("example").innerHTML = txt;
</script>

</body>
</html>

<!--警告!!!
来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：
• navigator 数据可被浏览器使用者更改
• 一些浏览器对测试站点会识别错误
• 浏览器无法报告晚于浏览器发布的新操作系统

浏览器检测
由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。
由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。
例如，由于只有 Opera 支持属性 "window.opera"，可以据此识别出 Opera。-->


<!--JavaScript 弹窗
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框
警告框
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
window.alert("sometext");
确认框
确认框通常用于验证是否接受用户操作
window.confirm("sometext");-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
</head>
<body>

<p>点击按钮，显示确认框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
    var x;
    var r=confirm("按下按钮!");
    if (r==true){
        x="你按下了\"确定\"按钮!";
    }
    else{
        x="你按下了\"取消\"按钮!";
    }
    document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

<!--提示框
提示框经常用于提示用户在进入页面前输入某个值-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<body>

<p>点击按钮查看输入的对话框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
    function myFunction(){
        var x;
        var person=prompt("请输入你的名字","Harry Potter");
        if (person!=null && person!=""){
            x="你好 " + person + "! 今天感觉如何?";
            document.getElementById("demo").innerHTML=x;
        }
    }
</script>

</body>
</html>


<!--JavaScript 计时事件
通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，
而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
• setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
• setTimeout()  - 暂停指定的毫秒数后执行指定的代码
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码

Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法-->


<!--JavaScript Cookies
Cookies 用于存储 web 页面的用户信息
Cookies 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookies 的作用就是用于解决 "如何记录客户端的用户信息":
当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
Cookies 以名/值对形式存储，如下所示:
username=John Doe
当浏览器从服务器上请求 web 页面时， 属于该页面的 cookies 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

使用 JavaScript 创建Cookie
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies

document.cookie 属性看起来像一个普通的文本字符串，其实它不是。
即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。
如果您设置了新的 cookie，旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中，所以如果您重新读取document.cookie，
您将获得如下所示的数据：cookie1=value; cookie2=value;-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
</head>
<head>
    <script>
        function setCookie(cname,cvalue,exdays){
            var d = new Date();
            d.setTime(d.getTime()+(exdays*24*60*60*1000));
            var expires = "expires="+d.toGMTString();
            document.cookie = cname+"="+cvalue+"; "+expires;
        }
        function getCookie(cname){
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i=0; i<ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name)==0) return c.substring(name.length,c.length);
            }
            return "";
        }
        function checkCookie(){
            var user=getCookie("username");
            if (user!=""){
                alert("Welcome again " + user);
            }
            else {
                user = prompt("Please enter your name:","");
                if (user!="" && user!=null){
                    setCookie("username",user,30);
                }
            }
        }
    </script>
</head>

<body onload="checkCookie()"></body>

</html>


<!--JavaScript 库
JavaScript - 测试 jQuery
主要的 jQuery 函数是 $() 函数（jQuery 函数）。如果您向该函数传递 DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能。
jQuery 允许您通过 CSS 选择器来选取元素-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
    <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        function myFunction(){
            $("#h01").attr("style","color:purple").html("Hello jQuery")
        }
        $(document).ready(myFunction);
    </script>
</head>
<body>

<h1 id="h01"></h1>

</body>
</html>


<!--JavaScript - 测试 Prototype
Prototype 提供的函数可使 HTML DOM 编程更容易
Event.observe() 接受三个参数：
• 希望处理的 HTML DOM 或 BOM（浏览器对象模型）对象
• 希望处理的事件
• 希望调用的函数-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TestJs</title>
    <script src="https://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js"></script>
    <script>
        function myFunction(){
            $("h01").writeAttribute("style","color:purple").insert("Hello Prototype!");
        }
        Event.observe(window, "load", myFunction);
    </script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>