JavaScript及其简单使用

1 数据类型

什么是变量？变量是可以存放某些值的内存的命名。

JavaScript的变量类型：

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

JavaScript里特殊的值：

• undefined：未定义，所有js变量未赋初始值的时候，默认值都是undefined
• null空值
• NAN：全称是Not a Number。非数字，非数值的意思。

<script type="text/javascript">
    var i;
	alert(i);//undefined
	i=12;
	alert(i);//number

	var a = 30;
	var b="abc";
	alert(typeof(b));//String
	alert(a * b);//NAN
</script>

2 运算符

2.1 关系（比较）运算符

等于：==

• 等于是简单的做字面值的比较

全等于：===

• 除了做字面值的比较之外，还会比较两个变量的数据类型

var a="12";
var b=12;

alert(a == b);//true
alert(a === b)//false

2.2 逻辑运行符

且运算：&&
或运算：||
取反运算：！

在Javascript语言中，所有的变量，都可以做为一个boolean类型的变量去使用。

• 0、null、undefined、""（空串）都认为是false
• 其余所有类型的变量，只要有值，都为true

var a = 0;
if (a) {
	alert("0为真")//不执行
} else {
	alert("0为假")//执行
}

var b = null;
if (b) {
	alert("null为真")//不执行
} else {
	alert("null为假")//执行
}

var c = 20;
if (c) {
	alert("20为真")//执行
} else {
	alert("20为假")//不执行
}

var d="";//d为假
var f=" ";//f为真

3 数组

JS中数组的定义：

• var 数组名 = []；//空数组
• var 数组名 = [1, ‘abc’, true]；//定义数组同时赋值元素。数组中的元素类型可以不同

// 1 数组的定义
var arr = [];//定义一个空数组
alert(arr.length);//0
arr[0]=12;
alert(arr[0]);//12
alert(arr.length);//1

//javascript语言中的数组，只要我们通过数组下标障值，那么最大的下标值，就会自动的给数组做扩容操作。
arr[2] = true;
alert(arr.length);//3
alert(arr[1]);//undefined

// 2 数组的遍历
for(var i = 0; i < arr.length; i++) {
	alert(arr[i]);
}

4 函数

4.1 函数定义

函数的两种定义方式：

1、方式一

function 函数名(形参列表){
	函数体
	return xxx;//若函数没有返回值，则省略return语句
}

2、方式二

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

// 1 定义无参函数
function a_fun(){
	alert("无参函数");
}
a_fun();//先定义函数，再执行函数

// 2 定义有参函数。参数只写名字即可，不用写类型
function b_fun(a, b){
	alert(a+b);
}
b_fun(100, 800);

// 3 定义带返回值的函数
function c_fun(a, b){
	var sum = a + b;
	return sum;
}
alert(c_fun(100, 200));

// 1 定义无参函数
var a_fun = function (){
	alert("无参函数");
}
a_fun();

// 2 定义有参函数。参数只写名字即可，不用写类型
var b_fun = function (a, b){
	alert(a+b);
}
b_fun(100, 800);

// 3 定义带返回值的函数
var c_fun = function (a, b){
	var sum = a + b;
	return sum;
}
alert(c_fun(100, 200));

4.2 函数重载

在Java中函数允许重载。但是在JS中函数的重载会直接覆盖掉上一次的定义

function fun(){
	alert("无参函数");
}
function fun(a, b){
	alert("有参函数");
}
fun();//输出 有参函数

function fun(a, b){
	alert("有参函数");
}
function fun(){
	alert("无参函数");
}
fun(1, 3);//输出 无参函数

4.3 函数的参数列表

传到一个函数中的所有参数被存进一个arguments数组中，它也被称为函数的隐形参数（只在function函数内）。所谓隐形参数，就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量。

function fun() {
	alert(arguments.length);//3
	alert(arguments[0]);//11
	alert(arguments[1]);//22
	alert(arguments[2]);//33
}
fun(11, 22, 33);//传进函数的实参个数，可以和定义函数时规定的形参个数不同

//计算数字之和
function sum(num1, num2) {
    var res = 0;
    for(var i = 0; i < arguments.length; i++) {
        res += arguments[i];
    }
    return res;
}
alert(sum(1, 2, 3, 4));//10
alert(sum(1, 2, "abc", 3, 4));//3abc34

function sum_1(num1, num2) {
    var res = 0;
    for(var i = 0; i < arguments.length; i++) {
        if(typeof(arguments[i]) == "number") {
            res += arguments[i];
        }
    }
    return res;
}
alert(sum(1, 2, "abc", 3, 4));//10

5 对象

定义对象的两种方式：

1、 Object形式的自定义对象

var 对象名 = new Object();//定义空对象

对象名.属性名 = 值；		 //为对象定义一个属性
对象名.函数名 = function(){  //为对象定义一个函数
	函数体
	return xxx;
} 

对象名.属性名;	//访问对象的属性
对象名.函数名();	//执行对象的函数

var obj = new Object();

obj.name = "jack";
obj.age = 20;
obj.fun = function() {
	alert("姓名：" + this.name + ", 年龄：" + this.age)
}

obj.fun();

alert(obj);//object

2、{}花括号形式的自定义对象

var 对象名 = {};	//定义空对象
var 对象名 = {  	//定义非空对象。每个属性及函数之间用逗号隔开
	属性名 : 值,		 //为对象定义一个属性
	属性名 : 值,		 //为对象定义一个属性
	函数名 : function(){ //为对象定义一个函数
		函数体;
		return xxx;
	} 
}

对象名.属性名;	//访问对象的属性
对象名.函数名();	//执行对象的函数

var obj = {
	name : "jack",
	age : 20,
	fun : function() {
		alert("姓名：" + this.name + ", 年龄：" + this.age)
	}
}

alert(obj.name);
obj.fun();

6 事件

js中的事件是什么？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。常用的事件有：

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

事件注册

什么是事件的注册（绑定）？其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。

事件的注册又分为静态注册和动态注册两种：

1、静态注册事件：通过html标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
2、动态注册事件：是指先通过js代码得到标签的dom 对象，然后再通过 dom对象.事件名 = function(){}这种形式赋于事件响应后的代码，叫动态注册。动态注册基本步骤：

1. 获取标签对象
2. 标签对象.事件名 = function(){}

6.1 onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        // onload事件静态注册
        function onload_fun() {
            alert("静态注册的onload事件");
        }

        // onload事件动态注册。是固定写法
        window.onload = function () {
            // alert("动态注册的onload事件");
            console.log("动态注册的onload事件");
        }
    </script>
</head>
<body onload="onload_fun()">
</body>
</html>

6.2 onclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        function onclickFun() {
            alert("onclick事件静态注册");
        }

        window.onload = function () {
            // 1 获取对象标签
            let btnObj = document.getElementById("btn");
            // 2 通过 对象.事件名 = function(){}
            btnObj.onclick = function () {
                alert("onclick事件动态注册");
            }
        }

    </script>
</head>
<body>
<button onclick="onclickFun();">静态onclick</button>
<button id="btn">动态onclick</button>
</body>
</html>

6.3 onblur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        function onblurFun() {
            console.log("onblur事件静态注册")
        }

        window.onload = function () {
            // 1 获取对象标签
            var btnObj = document.getElementById("password");
            // 2 通过 对象.事件名 = function(){}
            btnObj.onblur = function () {
                console.log("onblur事件动态注册")
            }
        }
    </script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun();"></input><br>
密码：<input type="text" id="password"></input>
</body>
</html>

6.4 onchange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        function onchangeFun() {
            console.log("水果已经改变")
        }

        window.onload = function () {
            // 1 获取对象标签
            var obj = document.getElementById("select2");
            // 2 通过 对象.事件名 = function(){}
            obj.onchange = function () {
                console.log("数字已经改变")
            }
        }
    </script>
</head>
<body>
请选择：
<select onchange="onchangeFun()">
    <option>--水果--</option>
    <option>苹果</option>
    <option>香蕉</option>
</select>

    
请选择：
<select id="select2" onchange="onchangeFun()">
    <option>--数字--</option>
    <option>100</option>
    <option>200</option>
</select>
</body>
</html>

6.5 onsubmit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        function onsubmitFun() {
            alert("表单信息不合法，阻止提交");
            return false;

            // alert("表单信息合法，允许提交");
            // return true;
        }

        window.onsubmit = function () {
            // 1 获取对象标签
            var btnObj = document.getElementById("form1");
            // 2 通过 对象.事件名 = function(){}
            btnObj.onblur = function () {
                alert("表单信息合法，运行提交")
            }
            return true;

            // return false;
        }
    </script>
</head>
<body>
<!--return false 阻止表单提交；return true允许表单提交-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
    <input type="submit" value="静态onsubmit">
</form>

<form action="http://localhost:8080" id="form1">
    <input type="submit" value="动态onsubmit">
</form>
</body>
</html>

7 DOM模型

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

Document 对象的理解：

1、Document 它管理了所有的HTML文档内容

2、document 它是一种树结构的文档。有层级关系

3、它让我们把所有的标签都对象化

4、我们可以通过document访间所有的标签对象

Document对象中的主要方法

• document.getElementById（elementId）返回对拥有指定id 的第一个对象的引用
• document.getElementsByName（elementName）返回带有指定名称的对象集合，elementName 标签的name属性值
• document.getElementsByTagName（tagname）返回带有指定标签名的对象集合，tagname是标签名
• document.createElement（tagName）通过给定的标签名，创建一个标签对象。tagName是要创建的标签名

节点（标签对象）常用的方法和属性

1、方法：

• getElementsByTagName（）获取当前节点的指定标签名孩子节点
• appendChild（ochildNode）方法，可以添加一个子节点，oChildNode是要添加的孩子节点

2、属性：

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

8 正则表达式

语法：var patt=new RegExp(pattern,modifiers);或var patt=/pattern/modifiers;

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

注意：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。比如，以下是等价的

var re = new RegExp("\\w+");
var re = /\w+/;

8.1 修饰符

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

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

8.2 方括号

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

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

8.3 元字符

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

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找数字、字母及下划线。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NULL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

8.4 量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”。
n*	匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。
n?	匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。
n{X}	匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。
n{X,}	X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
n{X,Y}	X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。