<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习</title>
</head>
<body>
<script>
    alert(1)
</script>
</body>
</html>

外部JS

定义<script>，通过src属性引入外部的js文件

//js文件
alert(2)
//html文件
<head>
    <meta charset="UTF-8">
    <title>js练习</title>
    <script src="../js/b.js"></script>
</head>

注意：script的定义位置会影响执行顺序一般导入文件放在<head>里；写代码放在<body>的最后

注释

单行注释：//注释内容

多行注释：/*注释内容*/

数据类型

1. 原始数据类型(基本数据类型)：
                    1. number：数字。整数/小数/NaN(not a number 一个不是数字的数字类型)
                    2. string：字符串。字符串  "abc" "a" 'abc'
                    3. boolean: true和false
                    4. null：一个对象为空的占位符
                    5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

2. 引用数据类型：对象

变量

变量：一小块存储数据的内存空间

JS是弱类型语言，在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。语法：var 变量名 = 初始化值

typeof运算符：获取变量类型

注：null运算后得到的是object

运算符

一元运算符：++、--、+（-）正负号
算数运算符：+、-、*、/、%...
赋值运算符：=、+=、-=...
比较运算符：>、<、>=、<=、==、===（全等于）

==：类型相同直接比较，类型不同先进行转换再比较

===：类型不同直接返回false

逻辑运算符：&&、||、！
三元运算符：? : 表达式

类型转换

其他类型转number

string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
boolean转number：true转为1，false转为0

其他类型转boolean

number：0或NaN为假，其他为真
string：除了空字符串("")，其他都是true
null&undefined:都是false
对象：所有对象都为true

流程控制语句

if...else...

while

do...while

for

switch:switch语句可以接受任意的原始数据类型

基本对象

Function：函数对象

创建（2种）

<script>
    // 方法一
    function fun1(a,b) {
        document.write(a+b+"<br/>");
    }
    fun1(1,2);
    // 方法二
    var fun2=function (a,b) {
        document.write(a-b+"<br/>")
    }
    fun2(2,1);
</script>

属性

length:代表形参的个数

特点

方法定义是，形参的类型不用写,返回值类型也不写
方法是一个对象，如果定义名称相同的方法，会覆盖
在JS中，方法的调用只与方法的名称有关，和参数列表无关
在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数

Array:数组对象

类似于Java的集合

创建

var arr = new Array(元素列表); 简写：var arr = [元素列表];
var arr = new Array(默认长度);
var arr = new Array();

方法

join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素，并返回新的长度。

属性

length:数组的长度

特点

JS中，数组元素的类型可变的
JS中，数组长度可变的。

Date:日期对象

创建

var date = new Date();

方法

toLocaleString()：返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

Math:数学对象

不用创建对象，静态方法，直接使用。Math.方法名();

方法

random():返回 0 ~ 1 之间的随机数。含0不含1
ceil(x)：对数进行上舍入。
floor(x)：对数进行下舍入。
round(x)：把数四舍五入为最接近的整数。

属性

PI：圆周率

Global

主要用于中文字符的编码和解码，因为在网络传输中不能直接使用中文字符

特点：全局对象，该对象的方法不需要创建对象就可以直接调用。方法名（）；

方法：

encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
parseInt():将字符串转为数字
- 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
isNaN():判断一个值是否是NaN，判断数字是否为NaN
- NaN六亲不认，连自己都不认。NaN参与的==比较全部问false
eval():将JavaScript 字符串，并把它作为脚本代码来执行。

eval("alert(1)");

RegExp：正则表达式对象

创建

var reg = new RegExp("正则表达式");

var reg = /正则表达式/;

方法

test(参数):验证指定的字符串是否符合正则定义的规范

BOM：浏览器对象模型

Window：窗口对象

不需要创建对象直接使用方法名和属性

弹框有关的方法

alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
- 如果用户点击确定按钮，则方法返回true
- 如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。
- 返回值：获取用户输入的值

与打开关闭有关的方法

close() 关闭浏览器窗口（谁调用我，我关谁）
open() 打开一个新的浏览器窗口，返回新的window对象

与定时器有关的方式

setTimeout() 在指定的毫秒数后调用函数或计算表达式。
- 参数1，方法对象
- 参数2，毫秒值
- 返回值：唯一标识，用于取消定时器
clearTimeout() 取消定时器
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式
clearInterval() 取消由 setInterval() 设置的 timeout。

属性

获取其他的BOM对象

history
location
Navigator
Screen

获取DOM对象

document

示例代码：计时器

<body>
<p id="pid"></p>
<button id="bt">暂停</button>
<script>
    var num=1;
    function fun() {
        document.getElementById("pid").innerText=num+"";
        num++;
    }
    let interval = setInterval(fun,1000);
    document.getElementById("bt").onclick=function () {
       clearInterval(interval);//将循环计时器暂停
    }
</script>
</body>

Location：地址栏对象

创建

window.location
location

方法

reload() 重新加载当前文档。刷新

属性

href 设置或返回完整的 URL

示例代码：倒计时跳转至指定页面

<body>
<span id="sid">5</span>秒之后，跳转到首页
<script>
    var num=5;
    function fun() {
        num--;
        if(num<=0){//判断不要写成num===0,因为网络有延时
            location.href="http://www.baidu.com";
        }
        document.getElementById("sid").innerText=num+"";
    }
    setInterval(fun,1000);
</script>

</body>

History：历史记录对象

创建

window.history
history

方法

back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go(参数) 加载 history 列表中的某个具体页面
- 参数：正数：前进几个历史记录；负数：后退几个历史记录

属性

length 返回当前窗口历史列表中的 URL 数量

示例代码：

页面跳转至下一个页面，通过“后退”返回至上一个页面；在上一个页面，通过“前进”返回下一个页面。

<!--第一个页面-->
<body>
<a href="c_3.html">链接</a><br/>
<button id="bt1">前进</button>
<script>
    document.getElementById("bt1").onclick=function () {
        history.go(1);
    }
</script>
</body>

<!--第二个页面-->
<body>
<button id="bt2">后退</button>
<script>
    document.getElementById("bt2").onclick=function () {
        history.go(-1);
    }
</script>
</body>

DOM：文档对象模型

将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作，一个html文档可以转换成DOM树

核心DOM模型

Document：文档对象

创建(获取)：

window.document
document

方法

获取Element对象

getElementById() ：根据id属性值获取元素对象。id属性值一般唯一
getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

创建其他DOM对象

createAttribute(name)
createComment()
createElement()
createTextNode()

Element：元素对象

创建

通过document来获取和创建

方法

removeAttribute()：删除属性
setAttribute()：设置属性

Node：节点对象

所有dom对象都可以被认为是一个节点，节点可以是元素节点、属性节点、文本节点等等

主要进行节点的增删操作

方法：

appendChild()：向节点的子节点列表的结尾添加新的子节点
removeChild() ：删除（并返回）当前节点的指定子节点
replaceChild()：用新节点替换一个子节点

属性

parentNode 返回节点的父节点。

示例代码：动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        th,td{
            width: 80px;
            height: 30px;
        }
    </style>
</head>
<body>
<input type="text" placeholder="输入用户名" id="username">
<input type="text" placeholder="年龄" id="uage">
<button id="bt_1">添加</button>
<br/>
<table border="1px" cellpadding="2px" cellspacing="1px" id="table">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>

</table>
<script>
    //删除方法
    function del(obj){
        //通过追溯父元素的方法 获得table、tr
        var table=obj.parentNode.parentNode.parentNode;
        var tr=obj.parentNode.parentNode;
        table.removeChild(tr);
    }
    document.getElementById("bt_1").onclick=function () {
        let name = document.getElementById("username").value;
        let age = document.getElementById("uage").value;
        //td_name
        let td_name = document.createElement("td");
        let text_name = document.createTextNode(name);//文本节点
        td_name.appendChild(text_name);
        //td_age
        let td_age = document.createElement("td");
        let text_age = document.createTextNode(age);
        td_age.appendChild(text_age);
        //td_made
        let td_made = document.createElement("td");
        let td_a = document.createElement("a");
        td_a.setAttribute("hrep","javascript:void(0);");
        td_a.setAttribute("onclick","del(this) ");
        let text = document.createTextNode("删除");
        td_a.appendChild(text);
        td_made.appendChild(td_a);
        //tr
        let tr = document.createElement("tr");
        tr.appendChild(td_name);
        tr.appendChild(td_age);
        tr.appendChild(td_made);
        //table
        let table = document.getElementById("table");
        table.appendChild(tr)
    }
</script>
</body>
</html>

HTML DOM

标签体的设置和获取：innerHTML

控制元素样式

使用元素的style属性来设置：div1.style.width = "200px";
提前定义好类选择器的样式，通过元素的className属性来设置其class属性值：div1.className="div_1";

事件监听机制

某些组件被执行了某些操作后，触发某些代码的执行

事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了
事件源：组件。如：按钮文本输入框...
监听器：代码
注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码

常见的事件

点击事件
- onclick：单击事件
- ondblclick：双击事件
焦点事件
- onblur：失去焦点
- onfocus:元素获得焦点
加载事件
- onload：一张页面或一幅图像完成加载
鼠标事件
- onmousedown 鼠标按钮被按下
- onmouseup 鼠标按键被松开
- onmousemove 鼠标被移动
- onmouseover 鼠标移到某元素之上
- onmouseout 鼠标从某元素移开
键盘事件
- onkeydown 某个键盘按键被按下。
- onkeyup 某个键盘按键被松开。
- onkeypress 某个键盘按键被按下并松开。
选择和改变
- onchange 域的内容被改变。
- onselect 文本被选中。
表单事件
- onsubmit 确认按钮被点击。
- onreset 重置按钮被点击。

码农公寓

基本概念

ECMAScript

基本语法

与html结合的方式

注释