JavaScript

JavaScript

1995年在网景公司，发明的JavaScript。一开始JavaScript叫做LiveScript，但是由于当时Java这个语言特别火，所以为了傍大牌，就改名为JavaScript。同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript打败，所以现在的浏览器中，只运行一种脚本语言就是JavaScript。

特点

1. 交互性：信息的动态交互
2. 安全性：不允许直接访问本地硬盘
3. 跨平台性：只要是可以解释JS的浏览器都可以执行，和平台无关

JavaScript和HTML结合的方式

1. 在head或body标签中引入script标签<script type="text/javascript></script>
2. 直接在script标签中的src属性引入对应的js文件<script type="text/javascript" src="name.js"></script>

变量

JavaScript的变量类型

• 数值类型：number
• 字符串类型：string
• 对象类型：object
• 布尔类型：boolean
• 函数类型：function

JavaScript里特殊的值：

• undefined：未定义，所有js变量未赋初值时，默认都是undefined
• null：空值
• NAN：全称是Not a number 非数字 非数值

JavaScript定义变量的格式

var 变量名;
var 变量名 = 值;

typeof()函数是用来获得变量的数据类型并返回

关系运算

• 等于：== 简单的做字面值的比较
• 全等于：=== 除了字面值的比较外，还会比较两个变量的数据类型是否相同

var n = 12;
var m = "12";
alert(n == m);  // true
alert(n === m); // false

逻辑运算

在JavaScript中，所有的变量，都可以做为一个boolean类型的变量去使用
0、null、undefined、""（空串）都认为是false

• 与运算：&&
  1. 当表达式全为真时，返回最后一个表达式的值
  2. 当表达式中为假时，返回第一个为假的表达式的值
• 或运算：||
  1. 当表达式全为假时，返回最后一个表达式的值
  2. 当表达式为真时，返回第一个为真的表达式的值
• 取反运算：!

&&和||运算都是短路的。

var a = true;
var b = "";
var c = "geekfx";
var d = undefined;
alert(a && c);      // "geekfx"
alert(a && b && c); // ""
alert(b || a || d); // true
alert(b || d);      // undefined

数组

var arr = [];   // 定义一个空数组
alert(arr.length);  // 0
arr[0] = "geekfx";
alert(arr.length);  // 1
// 通过下标赋值时，最大的下标值会为数组扩容
arr[2] = false;
alert(arr.length);  // 3
alert(arr[1]);      // undefined
// 数组的遍历
for(var i = 0; i < arr.length; i++) {
    alert(arr[i]);
}

函数

定义方式一

function 函数名(形参列表) {
    函数体;
    return 返回值;
}

// 定义无参函数
function fun1() {
    alert("无参函数 fun1() 被调用了");
}
// 调用函数
fun1();
// 定义有参函数
function fun2(a, b) {
    alert("有参函数 fun2(" + a + ", " + b + ") 被调用了");
}
fun2(600, 66);
// 定义有返回值的函数
function fun3(n, m) {
    var sum = n + m;
    // 直接使用 return 语句即可
    return sum;
}
alert(fun3(600, 66));   // 666

定义方式二

var 函数名 = function(形参列表) {
    函数体;
    return 返回值;
}

// 函数的第二种定义方式
// 定义无参函数
var fun1 = function() {
    alert("无参函数 fun1() 被调用了");
}
// 调用函数
fun1();
// 定义有参函数
var fun2 = function(a, b) {
    alert("有参函数 fun2(" + a + ", " + b + ") 被调用了");
}
fun2(600, 66);
// 定义有返回值的函数
var fun3 = function(n, m) {
    var sum = n + m;
    // 直接使用 return 语句即可
    return sum;
}
alert(fun3(600, 66));   // 666

关于函数重载

JS不允许函数重载，若定义重载函数会将上一次定义的函数覆盖

function fun() {
    alert("无参函数 fun() 被调用");
}
function fun(a, b) {
    // “函数重载”无效 将会覆盖上面的函数
    alert("有参函数 fun(" + a + ", " + b + ") 被调用");
}
fun();          // 有参函数 fun(undefined, undefined) 被调用
fun(600, 66);   // 有参函数 fun(600, 66) 被调用

隐形参数arguments

在函数中无需定义，可以直接用来获取所有参数的变量。
类似于Java的可变长参数一样。
操作类似于数组。

// 关于隐形参数arguments的使用
function fun(n, m) {
    // 在函数体内通过 arguments 调用传递的所有参数
    alert(arguments[0]);    // n 的值
    alert(arguments[1]);    // m 的值
    alert(arguments[2]);    // undefined
}
fun(6, 9);
// 表面上2个参数，实际上可以传任意多个
function sum(num1, num2) {
    var result = 0;
    for(var i = 0; i < arguments.length; i++) {
        // 防止小朋友搞破坏，传递非数值的参数
        // 使用 typeof() 函数过滤掉非数值的实参
        if(typeof(arguments[i]) == "number"){
            result += arguments[i];
        }
    }
    return result;
}
alert(sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));  // 55

对象

自定义方式一：Object形式

对象的定义
var 对象实例 = new Object();            // 对象实例（空对象）
对象实例.属性名 = 值;                   // 定义一个属性
对象实例.方法 = function(形参列表) {      // 定义一个函数 
    函数体;
    return 返回值;
}
对象的访问
对象实例.属性名;
var 函数返回值 = 对象实例.方法(实参列表);

// 对象的定义
var obj = new Object();
obj.name = "锋行";
obj.age = 18;
obj.info = function() {
    alert("{name = " + this.name + ", age = " + this.age + "}");
    alert("我永远18岁");
}
// 对象的访问
alert(typeof(obj)); // object
obj.info();

自定义方式二：大括号形式

// 对象的定义
var 对象实例 = {
    属性: 值,
    函数名: functino(形参列表) {
                方法体;
                return 返回值;
            }
};
// 对象的访问
对象实例.属性;
对象实例.函数名(实参列表);

// 对象的定义
var obj = {
    name: "锋行",
    age: 18,
    info: function() {
        alert("{name = " + this.name + ", age = " + this.age + "}");
        alert("我永远18岁");
    }
};
// 对象的访问
alert(typeof(obj)); // object
obj.info();

事件

电脑输入设备与页面进行交互的相应，称之为事件。

常用的事件

• onload：加载完成事件，常用于做页面js代码初始化操作
• onclick：单击事件，常用于按钮响应操作
• onblur：失去焦点事件，常用于输入框失去焦点后验证其输入内容是否合法
• onchange：内容发生改变事件，常用于下拉列表和输入框内容发生改变后的操作
• onsubmit：表单提交事件，常用于表单提交前，验证所有表单项是否合法

事件的注册（绑定）

当事件响应后要执行的操作代码，叫事件注册或事件绑定。

• 静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码的方式，叫做静态注册。
• 动态注册事件：先通过js代码得到标签的dom对象，然后通过 dom对象.事件名 = function(){} 赋予事件响应后的代码，叫做动态注册。
  基本步骤：
  1. 获取标签对象
  2. 标签对象.事件名 = fcuntion() {}

onload

• 静态注册

<script type="text/javascript">
    // 创建一个函数，用于静态注册事件
    function onLoadFun() {
        alert("静态注册 onload 事件...（此处省略1w行代码）");
    }
</script>
<!-- 使用静态注册事件的方式给页面主体绑定加载完成后的事件 -->
<bory onload="onLoadFun();">
    <!-- 网页内容 -->
</bory>

• 动态注册

window.onload = functino() {
                    alert("动态绑定 onload 事件");
                }

onclick

<script type="text/javascript">
    // 静态注册
    function onClickFun() {
        alert("静态注册 onclick 单击事件");
    }
    // 动态注册
    window.onload = function () {
        /*
            document 是JavaScript语言提供的一个对象 <br/>
            element 元素（就是标签）
            getElementById 通过 id 获取标签对象
         */
        // 1. 获取标签对象
        var element = document.getElementById("btn02");
        alert(element);         // [object HTMLButtonElement]
        alert(typeof(element)); // object
        // 2. 标签名.事件名 = function() {}
        element.onclick = function () {
            alert("动态注册 onclick 单击事件");
        }
    }
</script>
<body>
    <button onclick="onClickFun();" id="btn01">静态注册</button>
    <button id="btn02">动态注册</button>
</body>

onblur

<script type="text/javascript">
    // 静态注册失去焦点事件函数
    function onBlurFun() {
        alert("静态注册 onblur 事件函数");
    }
    window.onload = function () {
        // 动态注册失去焦点事件
        // 1. 获得标签对象
        var element = document.getElementById("pswd");
        // 2. 标签对象.事件名 = function() {}
        element.onblur = function () {
            alert("动态注册 onblur 事件");
        }
    }
</script>
<body>
    用户名：<input type="text" onblur="onBlurFun();"> <br>
    密码：<input type="password" id="pswd"> <br>
</body>

onchange

<script type="text/javascript">
function onchangeFun() {
    alert("女神发生了改变");
}
// 动态注册
window.onload = function () {
    // 1. 获取标签对象
    var slctObj = document.getElementById("slct01");
    // 2. 标签对象.事件名 = funtion() {}
    slctObj.onchange = function () {
        alert("男神发生了改变");
    }
}
</script>
<body>
    <!-- 静态注册 onchange 事件 -->
    <select onchange="onchangeFun();">
        <option value="gril1">女神1</option>
        <option value="gril2">女神2</option>
        <option value="gril3">女神3</option>
        <option value="gril4">女神4</option>
    </select>
    <!-- 动态注册的 onchange 事件 -->
    <select id="slct01">
        <option value="boy1">男神1</option>
        <option value="boy2">男神2</option>
        <option value="boy3">男神3</option>
        <option value="boy4">男神4</option>
    </select>
</body>

onsubmit

<script type="text/javascript">
function onsubmitFun() {
    alert("静态注册表单提交事件");
    // 通常用于验证所有表单项是否合法
    alert("发现表单项不合法");
    // 阻止表单提交
    return false;
}
// 动态注册表单提交事件
window.onload = function () {
    var formObj = document.getElementById("form01");
    formObj.onsubmit = function() {
        alert("动态注册表单提交事件");
        alert("表单项不合法");
        return false;
    }
}
</script>
<body>
    <!-- 静态注册表单提交事件 -->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="静态注册" name="static">
    </form>
    <!-- 动态注册表单提交事件 -->
    <form action="http://localhost:8080" method="get" id="form01">
        <input type="submit" value="动态注册" name="static">
    </form>
</body>

DOM模型

DOM 全称是 Document Object Model 文档对象模型。
把文档中的标签、属性、文本，转换成对象来管理。

Document对象

1. Document 对象代表整个 HTML 文档，可用来访问页面中的所有元素
2. Document是一种树形结构的文档，有层级关系
3. 让所有的标签都对象化
4. 可通过Document对象访问所有的标签对象

模拟对象化，相当于：

class Dom {
    private String id;          // id 属性
    private String tagName;     // 标签名
    private Dom parentNode;     // 父结点
    private List<Dom> children; // 孩子结点
    private String innerHTML;   // 起始标签和结束标签中间的内容
}

常用方法

• getElementById()
  返回对拥有指定 id 的第一个对象的引用。

<script type="text/javascript">
function buttonOnclickFun() {
    // 要操作一个标签的时，先获取对应标签对象
    var usernameObj = document.getElementById("username");
    // alert(usernameObj); // [object HTMLInputElement] dom 对象
    var usernameText = usernameObj.value;
    // alert(usernameText);    // 文本输入框中的内容
    // 验证输入框内容是否满足某个规则
    // 下面的规则为：由数字、字母、下划线组成的5~12位字符
    var patt = /^w{5,12}$/;
    var usernameSpanObj = document.getElementById("usernameSpan");
    // 验证字符串是否匹配patt的正则表达式
    if(patt.test(usernameText)) {
        // alert("输入框内容合法");
        // usernameSpanObj.innerHTML = "输入框内容合法";
        usernameSpanObj.innerHTML = "<img src='right.png' width='15' height='15'>";
    } else {
        // alert("输入框内容不合法");
        // usernameSpanObj.innerHTML = "输入框内容不合法";
        usernameSpanObj.innerHTML = "<img src='wrong.png' width='15' height='15'>";
    }
}
</script>
<body>
    用户名：<input type="text" id="username">
    <span id="usernameSpan" style="color: red"></span>
    <br>
    <button onclick="buttonOnclickFun();">验证</button>
</body>

• getElementsByName()
  返回带有指定名称的对象集合。

<script type="text/javascript">
// 全选
function checkAll() {
    // 根据 name 属性查询多个标签的对象集合
    // 这个集合的操作和数组一样
    // 集合中的每个元素都是 dom 对象
    // 集合中标签的顺序就是在 html 定义的顺序
    var hobbies = document.getElementsByName("hobby");
    // alert(hobbies); // [object NodeList]
    // alert(hobbies.length);  // 4
    // 遍历集合
    for(var i = 0; i < hobbies.length; i++) {
        hobbies[i].checked = true;
    }
}
// 全不选
function checkNo() {
    var hobbies = document.getElementsByName("hobby");
    for(var i = 0; i < hobbies.length; i++) {
        hobbies[i].checked = false;
    }
}
// 反选
function checkReverse() {
    var hobbies = document.getElementsByName("hobby");
    for(var i = 0; i < hobbies.length; i++) {
        hobbies[i].checked = !hobbies[i].checked;
    }
}
</script>
<body>
    兴趣爱好： <br>
    <input type="checkbox" name="hobby" value="c">C <br>
    <input type="checkbox" name="hobby" value="py">Python <br>
    <input type="checkbox" name="hobby" value="java">Java <br>
    <input type="checkbox" name="hobby" value="js">JavaScript <br>
    <button onclick="checkAll();">全选</button>
    <button onclick="checkNo();">全不选</button>
    <button onclick="checkReverse();">反选</button>
</body>

• getElementsByTagName()
  返回带有指定标签名的对象集合。

<script type="text/javascript">
function onclickFun() {
    // 当标签既没有提供 id 也没有提供 name 属性
    // 可以直接按照标签名来获取所有指定标签的集合
    // 集合的操作同数组一样
    // 集合中的元素都是 dom 对象
    // 集合中对象的顺序和 HTML 文档中定义的顺序一致
    var inputs = document.getElementsByTagName("input");
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].checked = true;
    }
}
</script>
<body>
    兴趣爱好： <br>
    <input type="checkbox"> C <br>
    <input type="checkbox"> Python <br>
    <input type="checkbox"> Java <br>
    <button onclick="onclickFun();">全选</button>
</body>

• createElement()
  可创建元素节点，此方法可返回一个 Element 对象。

// 创建一个标签对象 此时在内存中
var divElement = document.createElement("div");
// 为标签对象设置中间封装数据的内容
// divElement.innerText = "锋哥，我爱你";
// 也可以使用这种方式
// 创建一个文本对象
var textNode = document.createTextNode("锋哥，我爱你");
divElement.appendChild(textNode);

// 此时 div 标签还在内存中
// 将 div 标签添加为 body 的子元素
// document 有一个 body 的属性 直接代表了 body 标签对象
// 给 body 标签添加一个子元素
document.body.appendChild(divElement);

注：以上三个方法，通常要在页面加载完成之后才执行，才能查询到标签对象。

正则表达式对象

RegExp 对象用于规定在文本中检索的内容。
RegExp 是正则表达式的缩写。
正则表达式是描述字符模式的对象。

语法

var patt=new RegExp(pattern,modifiers);
或者更简单的方式:
var patt=/pattern/modifiers; 

• pattern（模式） 描述了表达式的模式
• modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

修饰符

修饰符用于执行区分大小写和全局匹配:

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

方括号

方括号用于查找某个范围内的字符：

• [abc] 查找方括号之间的任何字符
• [^abc] 查找任何不在方括号之间的字符
• [0-9] 查找任何从 0 至 9 的数字
• [a-z] 查找任何从小写 a 到小写 z 的字符
• [A-Z] 查找任何从大写 A 到大写 Z 的字符
• [A-z] 查找任何从大写 A 到小写 z 的字符
• [adgk] 查找给定集合内的任何字符
• [^adgk] 查找给定集合外的任何字符
• (red|blue|green) 查找任何指定的选项

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

• . 查找单个字符，除了换行和行结束符
• w 查找单词字符
• W 查找非单词字符
• d 查找数字
• D 查找非数字字符
• s 查找空白字符
• S 查找非空白字符
•  匹配单词边界
• B 匹配非单词边界
• 查找 NULL 字符
• 查找换行符
• f 查找换页符
• 查找回车符
• 查找制表符
• v 查找垂直制表符
• xxx 查找以八进制数 xxx 规定的字符
• xdd 查找以十六进制数 dd 规定的字符
• uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符

量词

• n+ 匹配任何包含至少一个 n 的字符串
• n* 匹配任何包含零个或多个 n 的字符串
• n? 匹配任何包含零个或一个 n 的字符串
• n{X} 匹配包含 X 个 n 的序列的字符串
• {X,Y} 匹配包含 X 或 Y 个 n 的序列的字符串
• n{X,} 匹配包含至少 X 个 n 的序列的字符串
• n$ 匹配任何结尾为 n 的字符串
• ^n 匹配任何开头为 n 的字符串
• ?=n 匹配任何其后紧接指定字符串 n 的字符串
• ?!n 匹配任何其后没有紧接指定字符串 n 的字符串

RegExp 对象方法

• compile 编译正则表达式
• exec 检索字符串中指定的值。返回找到的值，并确定其位置
• test 检索字符串中指定的值。返回 true 或 false

支持正则表达式的 String 对象的方法

• search 检索与正则表达式相匹配的值
• match 找到一个或多个正则表达式的匹配
• replace 替换与正则表达式匹配的子串
• split 把字符串分割为字符串数组

节点的常用属性和方法

方法：

• getElementByTagName()
  获取当前节点的指定标签名的孩子结点
• appendChild(oChildNode)
  为当前结点添加一个子结点，子结点为 oChildNode

属性：

• childNodes
  获取当前结点的所有子结点
• firstChild
  获取当前结点的第一个子结点
• lastChild
  获取当前结点的最后一个子结点
• parentNode
  获取当前节点的父结点
• nextSibling
  获取当前节点的下一个节点（同级）
• previousSibling
  获取当前节点的上一个节点（同级）
• className
  用于获取或设置标签的 class 属性值
• innerHTML
  获取或设置起始标签和结束标签的内容
• innerText
  获取或设置起始标签或结束标签的文本

查询实例

//1.查找#bj节点
document.getElementById("btn01").onclick = function() {
    var bjObj = document.getElementById("bj");
    alert(bjObj.innerHTML);
};
//2.查找所有li节点
var btn02Ele = document.getElementById("btn02");
btn02Ele.onclick = function(){
    var lis = document.getElementsByTagName("li");
    for(var i = 0; i < lis.length; i++) {
        alert(lis[i].innerHTML);
    }
};
//3.查找name=gender的所有节点
var btn03Ele = document.getElementById("btn03");
btn03Ele.onclick = function(){
    var genders = document.getElementsByName("gender");
    for(var i = 0; i < genders.length; i++) {
        alert(genders[i].value);
    }
};
//4.查找#city下所有li节点
var btn04Ele = document.getElementById("btn04");
btn04Ele.onclick = function(){
    var city = document.getElementById("city");
    var lis = city.getElementsByTagName("li");
    for(var i = 0; i < lis.length; i++) {
        alert(lis[i].innerHTML);
    }

};
//5.返回#city的所有子节点
var btn05Ele = document.getElementById("btn05");
btn05Ele.onclick = function(){
    var city = document.getElementById("city");
    var children = city.children;
    for(var i = 0; i < children.length; i++) {
        alert(children[i].innerHTML);
    }
    var sibling = city.nextElementSibling;
};
//6.返回#phone的第一个子节点
var btn06Ele = document.getElementById("btn06");
btn06Ele.onclick = function(){
    var phone = document.getElementById("phone");
    var firstChild = phone.firstChild;
    alert(firstChild.innerHTML);
};
//7.返回#bj的父节点
var btn07Ele = document.getElementById("btn07");
btn07Ele.onclick = function(){
    var bj = document.getElementById("bj");
    var parentNode = bj.parentNode;
    alert(parentNode.innerText);
};
//8.返回#android的前一个兄弟节点
var btn08Ele = document.getElementById("btn08");
btn08Ele.onclick = function(){
    var android = document.getElementById("android");
    var sibling = android.previousSibling;
    alert(sibling.innerHTML);
};
//9.读取#username的value属性值
var btn09Ele = document.getElementById("btn09");
btn09Ele.onclick = function(){
    var usernameObj = document.getElementById("username");
    alert(usernameObj.value);
};
//10.设置#username的value属性值
var btn10Ele = document.getElementById("btn10");
btn10Ele.onclick = function(){
    var username = document.getElementById("username");
    username.value = "锋哥好帅";
};
//11.返回#bj的文本值
var btn11Ele = document.getElementById("btn11");
btn11Ele.onclick = function(){
    var bj = document.getElementById("bj");
    alert(bj.innerText);
};