基础

HTML中嵌入JS的方式

行间事件

在标签中使用事件句柄

<!--网页弹窗, 双引号，单引号可替换，可删 ; ，可删window-->
<input type="" value="" onclick="window.alert('hello');"(事件句柄：onclick)>

脚本块

页面打开的时候自上而下执行，可以出现多个，脚本块位置随意，一般放在body标签后

<body>
    <script type="text/javascript">
    	alter("hello");
    </script>
</body>

引入独立的JS文件

1.js
alter("hello");

<script type="text/javascript" src="js/1.js"(文件路径)>
这里
</script>

变量

var 变量名;
变量名 = 值;

----------------
var i;
i = 10;
var a, b, c = 20;
声明3个变量，c赋值为20，a，b变量没有赋值，系统默认赋值'undfined'

----------------
JS中变量的数据类型是可变的，类似python中的变量，赋什么值就是什么类型

局部变量

在函数体中声明的变量，在函数被调用时分配空间，函数执行结束时销毁

全局变量

在函数体之外声明的变量，在浏览器打开的时候分配空间，直到浏览器关闭时销毁。

如果一个变量在声明时没有使用var关键字，则在哪都是全局变量，但是声明时必须赋值

函数

function 函数名（形参列表）{
    函数体;
}

-----------------------
function sum(a, b){
	return a + b;    
}

sum();  // undefinedundefined
sum(1);  // 1undefined
sum(1,2,3);  // 12
都会执行

------------------------
mysum = function(a, b){
    return a + b;
}

var result = mysum(1, 2);  // 3

注：函数声明的优先级较高，所以打开网页时所有函数先声明，再执行调用操作。

JS中函数是不能重载的，只要出现同名函数，之前同名的函数就消失了

数据类型

基本数据类型

Undefined

声明一个变量后没有赋值，系统默认赋值undefined

Number(数字类型)

包括：-1，1，1.1，NaN(不是一个数字，not a number)，Infinity(无穷大)

console.log(10/3)  // 结果是double类型，3.333333

NaN：当一个数学表达式的运算结果本应该返回一个数字，但无法返回一个数字时，结果是NaN

Infinity：无穷大，当除数是0的时候，最终结果为Infinity

函数isNaN：最终返回布尔值，true表示不是一个数字，false表示是一个数字

isNaN(数据)：会首先尝试将数据转换为数字，若不成功，则返回true

函数Number：可以将不是数字类型的数据转换为数字类型的数据

函数parseInt：将含小数的字符串转换成只含整数的数字，如：123.2、123.2呵呵，但是“呵呵123.2”不可转换

函数Math.ceil：向上取整

String

定义字符串：

var s = "字符串";
var s = '字符串';
------------------------
这种方式创建的字符串属于Object类型，使用了Object的子类String
var s = new String("hello");  // typeof为Object

常用属性：
- length属性，获取字符串长度

常用方法：

charAt方法：获取指定下标位置的字符
concat方法：连接字符串
indexOf方法：获取某个字符串在当前字符串中第一次出现的索引
lastIndexOf方法：获取某个字符串在当前字符串中最后一次出现处的索引位置
replace方法：替换
split方法：拆分字符串
substr/substring方法：截取字符串
toLowerCase方法：转小写
toUpperCase方法：转大写

"abcdef".length  // 6
"http:".charAt(3)  // p
"abc".concat("def")  // abcdef
"0123-567-".indexOf("-")  // 4
"0123-567-".lastIndexOf("-")  // 8
"1930-10-11".replace("-",",")  // 1930,10-11，全部替换需要使用正则表达式
"1930-10-11".split("-")  // 会以-为分界进行分割
-------
"abcdef".substr(2,3)  // cde  substr(startIndex, length)
"abcdef".substring(2,3)  // c  substring(startIndex, endIndex)，左闭右开

Boolean

只有两个值：true，false
函数Boolean()：将不是布尔类型的转换为布尔类型，有数据就是true，没有就是false

Null

只有一个值null

引用数据类型

Object

常用属性：

prototype属性：翻译为原型，可以给对象动态扩展属性和方法

// 后期给Object类型的对象扩展一个doSonme()方法
Object.prototype.doSome = function() {
    console.log("测试")
}
// 后期给Object类型的对象扩展一个username属性
Object.prototype.username = "zhangsan"
// 调用doSome方法
obj.doSome()  // 测试
console.log(obj.username)  // zhang

constructor属性：

常用方法：
- toLocaleString方法：
- toString方法：
- valueOf方法：

typeof方法

这个运算符可以在JS代码运行过程中动态获取变量的数据类型

typeof 变量名
运算结果是以下6个类型名的小写字符串类型：
"undefined"
"number"
"string"
"boolean"
"object"
"function"

注：
var v = null
null属于Null类型，但typeof运算符的结果是"object"

区别

== 和 ===

==等同运算符：只比较值是否相等
===全等运算符：即比较值也比较数据类型是否相同

null，NaN，undefined

null：属于原始类型，typeof运算符的结果是object，与undefined是等同关系
三个类型不一样

类

定义

第一种：

function 类名(形参列表) {
	this.属性名 = 参数;
	
	this.方法名 = function() {
	
	}
}
------------------------
既是一个函数，也是个类定义
sayhello();  // 直接通过类名调用看作函数
var obj = new sayHello();  // 通过new运算符调用看作类

第二种：

类名 = function (形参列表) {
	this.属性名 = 参数;
	
	this.方法名 = function() {
	
	}
}

e.属性名
访问对象属性的另一种方式：
e = new Emp();
e["属性名"]

事件

注：任何事件都有对应的事件句柄，在事件前添加on

常用事件

blur失去焦点

<input type="text" onblur="">

focus获得焦点

<input type="text" onfocus="">

click鼠标单击

<input type="button" onclick="">

dblclick鼠标双击

<input type="button" ondblclick="">

所有键盘事件对象都有keyCode属性，可以获取键值
keydown键盘按下

<input type="text" onkeydown="">

keyup键盘弹起

<input type="text" onkeyup="">

mousedown鼠标按下

<div onmousedown="……"></div>

mouseover鼠标经过

<div onmouseover="……"></div>

mousemove鼠标移动

<div onmousemove="……"></div>

mouseout鼠标离开

<div onmouseout="……"></div>

mouseup鼠标弹起

<div onmouseup="……"></div>

reset表单重置
submit表单提交

<form action="" onsubmit="" onreset="">
</form>

change下拉列表选中项改变，或文本框内容改变
load页面加载完毕

该事件是z
<body onload="">
</body>

select文本被选定

事件注册

HTML中根据id获取节点：

<input type="button" id="1">
<script type="text/javascript">
	// 可以在获取id对应的节点后调用节点中的属性
    var my = doucument.getElementById("1")
    my.type = "checkbox"  // lei'xin
</script>

方法一：

在标签中使用“事件句柄”，在事件句柄后面编写JS代码，只有当事件句柄对应的事件发生后，注册在事件句柄中的代码才会被监听器调用。
```
<input type="button" value="" 事件句柄="方法/其他"/>
```

方法二：

标签里可以省略事件句柄 
<input type="button" value="hello" id="hellobtn" />
<script type="text/javascript">
	function sum() {
        console.log("sum function in")
    }
    /* 根据id获取button对象 */
    var hellobtnElt = document.getElementById("hellobtn");
    /* 将函数绑定在事件句柄上 */
    hellobtnElt.onclick = sum
    
    // 也可以是匿名函数
    hellobtnElt.onclick = function() {
        console.log("hhh")
    }
</script>

案例

<body>
    <script type="text/javascript">
    	window.onload = function() {
            var btn1Elt = document.getElementById("btn1");
            btn1Elt.onclick = function() {
                console.log("111")
            }
            
            var btn2Elt = document.getElementById("btn2");
            btn2Elt.onclick = function() {
                console.log("222")
            }
        }
    </script>
    <input type="button" id="btn1" value="按钮1" />
    <input type="button" id="btn2" value="按钮2" />
</body>

捕捉回车键

// x，y都是变量名，随意命名
<body>
    <script type="text/javascript">
        // x代表load事件对象
    	window.onload = function(x) {
            // y代表keydown事件对象
            document.getElementById("username").onkeydown = function(y) {
                // 所有键盘事件对象都有keyCode属性，可以获取键值
                // 回车键键值为13，ESC键键值为27
                if (y.keyCode == 13) {
					console.log("hhh")
                }    
            }
        }
        
    </script>
    用户名：<input type="text" id="username" />
</body>

运算符

void

添加javascript:表示告知后面是一段JS代码，大部分情况下省略

<input onclick="javascript:alert("hhh")" />

格式

void(表达式)
执行表达式，但不返回任何结果
---------------------
<a href="javascript:void(11)" onclick="alert("执行代码")">
效果为显示 执行代码  但c

内置对象

Array

// 创建数组
var a = [];
或
var a = new Array();
// 数组的长度是可变的
a.length来获取长度

push方法：向数组中添加一个元素，并加到末尾
pop方法：将数组末尾的元素弹出，并且数组长度-1
reverse方法：翻转数组
join方法：来凝结方法
```
a.join("?")通过 ？ 连接
```

Date

var time = new Date();  // 获取当前时间
以下方法通过time调用

方法	作用
getFullYear()	获取年份
getMonth()	获取月份
getDay()	获取星期
getDate()	获取日期
getHours()	获取时
getMinutes()	获取分
getSeconds()	获取秒
getMilliseconds()	获取毫秒
toLocaleString()(Object中的)	转换成具有本地语言环境的日期格式
getTime()	获取自1970.1.1.00：00：00：000到当前时间的总毫秒数

DOM案例

获取文本框的value

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>获取文本框value</title>
    </head>
    <body>
        <script type="text/javascript">
            window.onload = function() {
                document.getElementById("btn").onclick = function() {
                    // 获取文本框对象
                    var usernameElt = document.getElementById("username");
                    // 获取value
                    var username = usernameElt.value;
                    alert(username)
                }
            }
        </script>
        用户名：<input type="text" id="username" />
        <br>
        <input type="button" id="btn" value="获取用户名" />
    </body>
</html>

获取下拉列表中项的value

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>获取文本框value</title>
    </head>
    <body>
        <!--这里的this代表当前的下拉列表对象-->
        <!-- <select id="province" onchange="alert(this.value)"> 
            <option value="">请选择省份</option>
            <option value="001">河北省</option>
            <option value="002">河南省</option>
            <option value="003">山东省</option>
            <option value="004">山西省</option>
        </select> -->
        
        <script type="text/javascript">
            window.onload = function() {
                document.getElementById("province").onchange = function() {
                    console.log(this.value)
                }
            }
        </script>

        <select id="province"> 
            <option value="">请选择省份</option>
            <option value="001">河北省</option>
            <option value="002">河南省</option>
            <option value="003">山东省</option>
            <option value="004">山西省</option>
        </select>
    </body>
</html>

显示网页时钟

window.setInterval("方法", 毫秒)函数：每隔1秒执行括号里的内容一次，该方法有返回值
window.clearInterval(上述函数的返回值)：停止周期性调用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>获取文本框value</title>
    </head>
    <body>
        <script type="text/javascript">
            window.onload = function() {
                document.getElementById("displayTimeBtn").onclick = function() {
                    v = window.setInterval("displayTime()", 1000);
                }

                document.getElementById("stopTimeBtn").onclick = function() {
                    window.clearInterval(v)
                }
            }

            function displayTime() {
                // 获取系统当前时间
                var nowTime = new Date();
                // 显示到div中
                var time = document.getElementById("timediv").innerHTML = nowTime.toLocaleString();
            }

        </script>

        <input type="button" value="显示系统当前时间" id="displayTimeBtn" />
        
        <input type="button" value="时间停止" id="stopTimeBtn" />

        <div id="timediv"></div>
    </body>
</html>

拼接html的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        /* 从java过来一个json格式的字符串 */
        var fromJava = '{"total": 2, "students": [{"name": "张三", "age": 20}, {"name": "李四", "age": 22}]}';

        window.onload = function() {
            document.getElementById("displaybtn").onclick = function() {
                // 转换json对象
                window.eval("var json = " + fromJava)
                // 设置总记录条数
                document.getElementById("totalSpan").innerHTML = json.total;
                // 拼接HTML
                var studentArray = json.students
                var html = ""
                for (var i = 0; i < studentArray.length; i++) {
                    var s = studentArray[i]
                    html += "<tr>"
                    html += "<td>" + (i + 1) + "</td>"
                    html += "<td>" + s.name + "</td>"
                    html += "<td>" + s.age + "</td>"
                    html += "</tr>"
                }
                document.getElementById("stutbody").innerHTML = html
            }
        }
    </script>

    <input type="button" value="查看学生信息列表" id="displaybtn" />
    <hr>  
    <table border="1px" width="40%">
        <tr>
            <th>序号</th>
            <th>学生姓名</th>
            <th>学生年龄</th>
        </tr>
        <tbody id="stutbody">
            <!-- <tr>
                <td>1</td>
                <td>张三</td>
                <td>20</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>22</td>
            </tr> -->
        </tbody>
    </table>
    总记录条数：<span id="totalSpan">0</span>条
</body>
</html>

BOM案例

窗口的开启和关闭

window.open(url, target)：和超链接效果类似

window.close()：关闭窗口

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>窗口的开启和关闭</title>
    </head>
    <body>
        <!-- 开启一个窗口，默认是开启一个新窗口 -->
        <input type="button" value="开启百度" onclick="window.open('http:\\www.baidu.com')" />
        <!-- 开启一个窗口，在当前窗口中显示 -->
        <input type="button" value="开启百度" onclick="window.open('http:\\www.baidu.com', '_self')" />
        <!-- 开启一个窗口，在新窗口中显示 -->
        <input type="button" value="开启百度" onclick="window.open('http:\\www.baidu.com', '_blank')" />
        <!-- 开启一个窗口，在父窗口中显示 -->
        <input type="button" value="开启百度" onclick="window.open('http:\\www.baidu.com', '_parent')" />
        <!-- 开启一个窗口，在顶级窗口中显示 -->
        <input type="button" value="开启百度" onclick="window.open('http:\\www.baidu.com', '_top')" />
        <input type="button" value="基础" onclick="window.open('基础.html')" />
        <input type="button" value="关闭窗口" onclick="window.close()" />
    </body>
</html>

alert和confirm方法

alert：无返回值，只有确认按钮

confirm：有布尔类型的返回值，有确认和取消按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        function sayHello() {
            // 弹出消息框
            window.alert("hello world");
        }

        function del() {
            // 删除数据前一定要提示用户
            // 确认框
            var ok = window.confirm("你敢删吗？！");
            // console.log(ok)
            if (ok) {
                alert("好好好，干得漂亮！")
            }
        }
    </script>

    <input type="button" value="hello" onclick="sayHello()" />

    <input type="button" value="删除" onclick="del()" />
</body>
</html>

若当前窗口非顶级窗口，则设置为顶级窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="基础.html" width="500px" height="500px"></iframe>
</body>
</html>

基础.html
<script type="text/javascript">
    // 如果当前不是顶级窗口则设为顶级窗口
    if (window.top != window.self) {
        window.top.location = window.self.location;
    }
</script>

<input type="button" onclick="setTop()" value="设置顶级窗口" />

历史记录

<input type="button" value="后退" onclick="window.history.back()" />

<input type="button" value="前进" onclick="window.history.go()" />

JSON

JavaScript Object Notation (JavaScript标记对象)，是一种轻量级的数据交换格式

eval函数

可以将一个字符串当作一段JS代码解释执行

<script type="text/javascript">
	window.eval("var i = 100")
</script>
结果 i = 100

语法

通过JavaScript对象标记法书写的文本，value可以是任何值

var 变量名 = {
    "key1":value1, 
    "key2":value2
}

var userStr = {
	"name":"Tom",
	"age":20,
	"gender":"male"
}
-----------------------
调用方法
userStr.name
userStr["name"]

JS中[]和的区别：[]是数组对象，是json对象

正则表达式

是由一堆特殊的符号组成的一个表达式。通常使用正则表达式进行字符串格式匹配

常见的符号

.：匹配除换行符以外的任意字符
\w：匹配字母或数字或下划线，不能直接匹配汉字，可以使用 Unicode 范围来匹配中文字符。例如，\p{IsHan} 表示匹配所有汉字字符
\s：匹配任意的空白符
\d：匹配数字
\b：匹配单词的开始或结束
^：匹配字符串的开始
$：匹配字符串的结束
\W：匹配任意不是字母，数字，下划线的字符
\S：匹配任意不是空白符的字符
\D：匹配任意非数字的字符
\B：匹配不是单词开头或结束的位置
[^x]：匹配除了x以外的任意字符
[^aeiou]：匹配除了aeiou这几个字母以外的任意字符

匹配前面字符出现的次数

*：重复零次或更多次
+：重复一次或更多次
?：重复零次或一次
{n}：重复n次
{n,}：重复n次或更多次
{n, m}：重复n到m次

格式

var regExp = /正则表达式/标记

---------------------------
使用内置类RegExp类
var regExp = new RegExp("正则表达式", "标记") 

标记是可选项：

g：全局 global
i：忽略大小写 ignorecase
gi：全局扫描，忽略大小写

test方法
var e = /^\w+*$/
var ok = e.test("用户输入的字符串")  fan'hui

HTML中嵌入JS的方式​

行间事件​

脚本块​

引入独立的JS文件​

变量​

局部变量​

全局变量​

函数​

数据类型​

基本数据类型​

Undefined​

Number(数字类型)​

String​

Boolean​

Null​

引用数据类型​

Object​

typeof方法​

区别​

== 和 ===​

null，NaN，undefined​

类​

定义​

事件​

常用事件​

事件注册​

案例​

捕捉回车键​

运算符​

void​

内置对象​

Array​

Date​

DOM案例​

获取文本框的value​

获取下拉列表中项的value​

显示网页时钟​

拼接html的方式​

BOM案例​

窗口的开启和关闭​

alert和confirm方法​

若当前窗口非顶级窗口，则设置为顶级窗口​

历史记录​

JSON​

eval函数​

语法​

正则表达式​

常见的符号​

格式​

表单验证​