概述

引入方式1：内部脚本方式

<script type="text/javascript">
    JS代码
</script>

引入方式2：外部引入方式

<script src="test.js"></script>

script标签规范化位置：放在body结束标签前面。（这样可以保证html展示内容优先加载，最后加载脚本）

语法规则

变量

var varName; // 默认值为undefined
var varName = value;

var str = new String();
var str = new String; // JS独有的方式

基本数据类型：

string boolean number null undefined（注意 null==undefined）

引用数据类型：

引用数据类型都是对象

运算符

与Java的不同：

=== 全等（值和类型）

逻辑运算符：&& || ！

正则对象

RegExp对象创建方式：

var reg = new RegExp("表达式"); // 基本不用
var reg = /^表达式$/; // 最常用，适用于表单校验
var reg = /表达式/; // 有一个符合，就是true，适合字符串查找，替换

test方法：

    <script>
        var reg = /^\s*$/; // 多个空格
        alert(reg.test("   ")); // 匹配则返回true，不匹配则返回false
    </script>

数组对象

类似Java的ArrayList，可存放人意类型数据，长度自动修改

创建方式：

方式1：var arr = [1,2,3,"a",true];
方式2：var arr = new Array(); 长度默认为0
方式3：var arr = new Array(4); 长度为4，每个元素都是undefined // 不常用
方式4：var arr = new Array(1,2); 数组元素是1 2

属性：

length：返回元素个数

常用方法：

join()：把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔；
pop()：删除并返回数组的最后一个元素
push()：向数组的末尾添加一个或更多元素，并返回新的长度
reverse()：颠倒数组中元素的顺序

全局函数(global)

1、执行

eval() // 计算JavaScript字符串，并把它作为脚本代码来执行

2、编码和解码

encodeURI()：把字符串编码为URI
decodeURI()：解码某个编码的URI

3、字符串转数字

parseInt()：解析一个字符串并返回一个整数
    11.5a55-->11 a11-->NaN
parseFloat()：解析一个字符串并返回一个浮点数
    11.5a55-->11.5 a11-->NaN

自定义函数

语法：

function 方法名(参数列表){
  函数体;
}

同名的方法，后面的会覆盖前面的。形参未赋值，则使用默认值undefined。

add 引用的是函数对象，而 add() 引用的是函数结果。

自定义对象

1、function构造函数

无形参格式语法：

function 对象名(){
  函数体;
}

例子：

    <script>
        function Person() { // 声明一个对象
            this.name = "默认名字"; // 声明属性
            this.age = 18; // 声明属性
        }
        var person = new Person();
        alert(person); // [object Object]
        person.name = "haha";
        alert(person.name + "--" + person.age); // haha--18
    </script>

带参数格式语法：

function 对象名(参数列表){
  函数体;
}

例子：

    <script>
        function Person(name, age) { // 声明一个对象
            this.name = name; // 声明属性
            this.age = age; // 声明属性
        }
        var person = new Person("haha", 20);
        alert(person); // [object Object]
        alert(person.name + "--" + person.age); //haha--20
    </script>

2、对象直接创建

该方式直接创建出实例对象，无需构建函数，无需new创建实例对象

语法格式：

var 对象名 = {属性名1:"属性值1", 属性名2:"属性值2", 属性名3:"属性值3"...}

例子：

    <script>
        var person = {name:"哈哈", age:18, height:170};
        alert(person); // [object Object]
        alert(person.name + "-" + person.age + "-" + person.height); // 哈哈-18-170
    </script>

BOM对象

BOM（Browser Object Model）浏览器对象模型，用来执行浏览器的相关操作（例如：浏览器的地址、弹出消息等）。一般情况下，Window对象代表了BOM对象（用的最多），Window对象是JavaScript的内置对象，使用Window对象调用方法时，可以省略window不写。

消息框

alert()：警告框，用来弹出警告消息

confirm()：确认框，用户告知用户信息并收集用户的选择

定时器

1、循环定时器 setInterval()

循环定时器，调用一次就会创建并循环执行一个定时器

setInterval(调用方法, 毫秒值)； // 毫秒值是循环周期，指每隔多久执行一次

例子：

    <script>
        var id;
        function f() {
            alert("哈哈哈哈");
            // 取消循环定时器，定时器只会执行一次了
            clearInterval(id);
        }
        id = setInterval(f, 5000); // 5s后执行这一条
        alert("------"); // 先执行这一条
    </script>

2、一次性定时器 setTimeout()

一次性定时器，调用一次就会创建并执行一个定时器一次

setTimeout(调用方法, 毫秒值)； 

例子：

    <script>
        function f() {
            alert("哈哈哈哈");
        }
        setTimeout(f, 2000); // 每间隔2s执行一次f()
    </script>

location对象

location对象包含浏览器地址栏的信息

常用属性：href（设置或返回完整的URL）

    <script>
        // 获取当前地址
        var str = location.href;
        alert(str);
        // 设置 地址
        location.href = "http://wwww.baidu.com";
    </script>

DOM对象

DOM（Document Object Model）文档对象模型。

文档是指标记型文档（HTML等），DOM是将标记型文档中所有内容（标签、文本、属性）都封装成对象，通过操作对象的属性或者方法，来达到操作或改变HTML展示效果的目的

获取元素对象方式

DOM对象document的相关方法：

getElementById()：通过元素ID获取对应元素对象
getElementsByName()：通过元素的name属性获取符合要求的所有元素
getElementsByTagName()：通过元素的元素名属性获取符合要求的所有元素
getElementsByClassName()：通过元素的class属性获取符合要求的所有元素

元素对象常见属性

1、value:用来修改元素的值

元素对象.value           //获取元素对象的value属性值
元素对象.value = 属性值   //设置元素对象的value属性值

2、className:用来修改元素的样式

元素对象.className           //获取元素对象的class属性值
元素对象.className = 属性值   //设置元素对象的class属性值

3、checked：用来修改单选/复选的选中与否状态

元素对象.checked           //获取元素对象的checked属性值
元素对象.checked = 属性值   //设置元素对象的checked属性值

4、innerHTML：用来操作元素的内容体

元素对象.innerHTML           //获取元素对象的内容体
元素对象.innerHTML = 属性值   //设置元素对象的内容体

事件

鼠标或热键的动作称为事件（Event）

事件驱动机制

    <!--
        事件源（专门产生事件的组件）：按钮
        事件（由事件源所产生的动作或者事情）：点击
        监听器（专门处理事件源所产生的事件）：f()
        注册监听器（让监听器时刻监听事件源是否有指定事件产生，如果事件源产生指定事件，则调用监听器处理）：onclick
    -->
    <input type="button" value="点击" onclick="f()">
    <script>
        function f() {
            alert("已经点击");
        }
    </script>

常见事件

1、点击事件（onclick）

点击元素组件时触发

<input type="text" onclick="run()">

2、焦点事件（onblur onfocus）

获取焦点事件onfocus

<input type="text" onfocus="run()">

失去焦点事件onblur

<input type="text" onblur="run()">

3、域内容改变事件（onchange）

元素组件的值发生改变时触发

<select name="" id="" onchange="run()">
...
</select>

4、加载完毕事件（onload）

元素组件加载完毕时触发

<body onload="run()">
...
</body>

5、表单提交事件（onsubmit）

表单的提交按钮被点击时触发

注意：该事件需要返回boolean类型的值来执行 提交/阻止 表单数据的操作；事件得到true，提交表单数据；事件得到false，阻止表单数据提交。

    <form action="" onsubmit="return run()">
        <input type="text" name="uName"> <br>
        <input type="submit" value="提交">
    </form>
    <script>
        function run() {
            alert("提交按钮被点击");
            return false; // 阻止表单提交
        }
    </script>

6、键位弹起事件（onkeyup）

在组件中输入某些内容时，键盘键位弹起时触发该事件

 <input type="text" onkeyup="run()">

7、鼠标事件：鼠标移入（onmouseover）

鼠标移入某个元素组件时触发

8、鼠标事件：鼠标移出（onmouseout）

鼠标移出某个元素组件时触发

<input type="text" onmouseover="run1()" onmouseout="run2()">

事件绑定方式

1、元素事件句柄绑定

将元素以元素属性的方式写到标签内部，进而绑定对应函数

<input type="text" onmouseover="run1('鼠标移入哈哈哈'),run2()" onmouseout="run2()"> // 绑定顺序就是执行顺序

2、DOM绑定方式

使用DOM的属性方式绑定事件（优点：不和HTML代码融合）

    <script>
        function run() {
            alert("加载完毕");
        }
        // window.onload = run();
        window.onload = function () { // 匿名函数方式
            run();
            run1();
            run2();
        }
    </script>

存储（storage）

例子：

<body>
    <h2>Storage示例测试</h2>
    <input type="text" name="" id="input">
    是否使用Local Storage保存：<input type="checkbox" name="" id="local"> <br>
    展示数据区域：<div id="show"></div>
    <input type="button" value="保存数据" onclick="saveStorage('input');">
    <input type="button" value="展示数据" onclick="loadStorage('show');">

    <script>
        var saveStorage = function (id) {
            var checked = document.getElementById("local").checked;
            var storage = checked ? localStorage : sessionStorage;
            var target = document.getElementById(id);
            storage.setItem("message", target.value);
        }
        var loadStorage = function (id) {
            var checked = document.getElementById("local").checked;
            var storage = checked ? localStorage : sessionStorage;
            var target = document.getElementById(id);
            target.innerHTML = storage.getItem("message");
        }
    </script>
</body>

例子：客户端留言板

<body>
    <h2>客户端留言板</h2>
    留言标题：<input type="text" name="title" id="title" size="60" /> <br /><br />
    留言信息：<textarea name="content" id="content" cols="50" rows="10"></textarea><br /><br />
    留&nbsp;&nbsp;言&nbsp;&nbsp;人：<input type="text" name="user" id="user"> <br /><br />
    <input type="button" value="添加留言" onclick="addMsg();">
    <input type="button" value="清除留言" onclick="clearMsg();">
    <hr />
    <table style="width: 750px;">
        <tr>
            <th>留言标题</th>
            <th>留言内容</th>
            <th>留言人</th>
            <th>留言时间</th>
        </tr>
        <tbody id="show"></tbody>
    </table>

    <script>
        // 加载留言信息
        var loadMsg = function () {
            var tb = document.getElementById("show");
            tb.innerHTML = ""; // 清空原来的内容

            // 遍历所有留言信息
            for (var i = 0; i < localStorage.length; i++) {
                var key = localStorage.key(i);
                var date = new Date();
                date.setTime(key);
                // 获取留言时间
                var dateStr = date.toLocaleDateString() + "&nbsp;" + date.toLocaleTimeString();
                // 获取留言字符串
                var msgStr = localStorage.getItem(key);
                // JSON -- 对象
                var msg = JSON.parse(msgStr);

                var row = tb.insertRow(i);
                row.insertCell(0).innerHTML = msg.title;
                row.insertCell(1).innerHTML = msg.content;
                row.insertCell(2).innerHTML = msg.user;
                row.insertCell(3).innerHTML = dateStr;
            }
        }
        // 添加留言
        var addMsg = function () {
            var titleElement = document.getElementById("title");
            var contentElement = document.getElementById("content");
            var userElement = document.getElementById("user");
            // 封装成对象
            var msg = {
                title: titleElement.value,
                content: contentElement.value,
                user: userElement.value
            }
            var time = new Date().getTime();
            // 时间为key，保存信息
            localStorage.setItem(time, JSON.stringify(msg));
            titleElement.value = "";
            contentElement.value = "";
            userElement.value = "";
            alert("数据已保存。");
            loadMsg();
        }
        // 清除留言
        var clearMsg = function () {
            // 清空storage里面的保存的数据
            localStorage.clear();
            alert("全部留言信息已被删除。");
            loadMsg();
        }
        window.onload = loadMsg();
    </script>
</body>