JavaScript基础

2022-12-07 08:18:01

JavaScript基础

一、JavaScript简介

概念：一门客户端脚本语言
- 运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎
- 脚本语言：不需要编译，直接就可以被浏览器解析执行
功能：
- 可以增强用户和html页面的交互过程，可以用来控制html元素，让页面有一些动态的效果，增强用户体验
发展史：
- 1992年，Nombase公司开发了第一门客户端脚本语言，专门用于表单的校验，命名为C--，后来改名为ScriptEase
- 1995年，Netscape（网景）公司开发了一门客户端脚本语言：LiveScript。后来请来SUN公司的专家修改LiveScript，并改名为JavaScript
- 1996年，微软开发出了JScript语言
- 1997年，ECMA（欧洲计算机制造商协会）制定了ECMAScript，即所有客户端脚本语言的标准

JavaScript = ECMAScript + JavaScript自己特有的东西（BOM+DOM）

二、ECMAScript

基本语法

与html结合方式
- 内部JS：定义<script>，标签体内容就是js代码
- 外部JS：定义<script>，通过src属性引入外部的js文件
【注意】：
- <script>可以定义在html页面的任何地方，但是定义的位置会影响执行顺序
- <script>标签可以定义多个

<!--内部样式-->
<script>
	alert("hello world");
</script>
<!--外部样式-->
<script src="js/1.js"></script>

注释
- 单行注释：//注释内容
- 多行注释：/*注释内容*/
数据类型
- 原始数据类型（基本数据类型）
  1. number：数字，范围：整数/小数/NaN
  2. string：字符串
  3. boolean：true和false
  4. null：一个对象为空的占位符
  5. undefined：未定义。如果一个变量没有给初始值，则会被默认赋值为undefined
- 引用数据类型：对象
变量
- 变量：一小块存储数据的内存空间
- Java语言是强类型语言，而JavaScript是弱类型语言
  - 强类型：在开辟变量存储空间时，定义了空间将来的存储数据类型，只能存储固定数据类型的数据
  - 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据
- 语法：var 变量名 = 初始化值;
- typeof：获取数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义变量
        var a = 3;
        alert(a);
        a = "abc";
        alert(a);
        //定义number类型
        var num1 = 3;
        var num2 = 2.4;
        var num3 = NaN;
        //输出到页面上
        document.write(num1 + "---" + typeof (num1) + "<br>");
        document.write(num2 + "---" + typeof (num2) + "<br>");
        document.write(num3 + "---" + typeof (num3) + "<br>");
        //定义string类型
        var str1 = "abc";
        var str2 = 'cde';
        document.write(str1 + "---" + typeof (str1) + "<br>");
        document.write(str2 + "---" + typeof (str2) + "<br>");
        //定义boolean
        var flag = true;
        document.write(flag + "---" + typeof (flag) + "<br>");
        //定义null，undefined
        var obj1 = null;
        var obj2 = undefined;
        var obj3;
        document.write(obj1 + "---" + typeof (obj1) + "<br>");
        document.write(obj2 + "---" + typeof (obj2) + "<br>");
        document.write(obj3 + "---" + typeof (obj3) + "<br>");
    </script>
</head>
<body>
</body>
</html>

效果：

【注意】：typeof运算符对null值会返回Object

运算符
- 一元运算符：只有一个运算数的运算符
  ++，--，+（正号），-（负号）
  【注意】：在JS中，如果运算数不是运算符所要求的类型，则会自动进行类型转换
  - string转number：按字面值转换，若字面值不是数字，则转为NaN
  - boolean转number：true转为1，false转为0
- 算数运算符
  +，-，*，/（非整除运算），%
- 赋值运算符
  =，+=，-=
- 比较运算符
  
  <，>，<=，>=，==，===（全等于）
  比较方式：
  - 类型相同，直接比较
  - 类型不同，先进行类型转换，再比较（===全等于必须满足类型和值都相等）
- 逻辑运算符
  &&，||，!
  其他类型转boolean：
  - number：0或NaN为假，其他为真
  - string：空字符串为假，其他为真
  - null、undefined：都为假
  - 对象：所有对象都为真
- 三元运算符
  ? :
流程控制语句
- if else
- switch
- while
- do while
- for
JS特殊语法
- 语句以;结尾，如果一行只有一条语句，则;可以省略（不建议这样做）
- 变量的定义使用var关键字，也可以不使用
  - 用：定义的变量为局部变量
  - 不用：定义的变量为全局变量（不建议这样做）

练习：打印九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <style>
        td {
            border: 1px solid black;
        }
    </style>
    <script>
        document.write("<table align='center'>");

        for (var i = 1; i < 9; i++) {
            document.write("<tr>");
            for (var j = 1; j <= i; j++) {
                document.write("<td>");
                document.write(j + "*" + i + "=" + j * i + "&nbsp;&nbsp;&nbsp;");
                document.write("</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>")
    </script>
</head>
<body>
</body>
</html>

效果：

基本对象
1. Function：函数（方法）对象
  - 创建：
    - ```
    var fun=new Fuction(形参列表，方法体);
```
- ```
function 方法名(形参列表){
    方法体
}
```
    - ```
    var 方法名=function(形参列表){
        方法体
    }
```
- 属性：
  - length：代表形参的个数
- 特点：
  - 方法定义时，形参的类型可不写，返回值类型可不写
  - 方法是一个对象，如果定义名称相同的方法，会被覆盖
  - 在JS中，方法的调用只与方法的名称有关，和参数列表无关
  - 在方法声明中有一个隐藏的内置对象（数组）：arguments，封装所有的实际参数
- 调用：
  - 方法名称(实参列表);
```
  <script>
  	function fun2(a, b) {
  		alert(a + b);
  	}
  	fun2(2, 2);
  
  	var fun3 = function (a, b) {
  		alert(a + b);
  	}
  	fun3(1, 2);
  
  	function add() {
  		var sum = 0;
  		for (var i = 0; i < arguments.length; i++) {
  			sum += arguments[i];
  		}
  		return sum;
  	}
  	var a = add(1, 2, 3, 4);
  	alert(a);   //10
  </script>
```
2. Array（数组对象）
  - 创建
    1. ```
    var arr=new Array(元素列表);
```
2. ```
var arr=new Array(默认长度);
```
    3. ```
    var arr=[元素列表];
```
- 方法
  1. join(参数)：将数组中的元素按照指定分隔符拼接为字符串
  2. push()：向数组的末尾添加一个或更多元素，并返回新的长度
  3. pop()：删除并返回数组的最后一个元素
- 属性
  - length：返回数组的长度
- 特点
  - 数组元素的类型可变
  - 数组的长度可变
```
  <script>
          var arr1 = new Array(1, 2, 3);
          var arr2 = new Array(5);
          var arr3 = [1, 2, 3, 4];
  
          var arr = [1, "abc", true];
          document.write(arr[4] + "<br>");	//undefined
          document.write(arr.length + "<br>");	//3
          document.write(arr.join() + "<br>");	//1,abc,true
          document.write(arr.join("--") + "<br>");	//1--abc--true
          arr.push(5);	//添加元素
          arr.pop();		//删除最后一个元素
  </script>
```
3. Boolean：基础类型boolean的包装类
4. Number：基础类型number的包装类
5. String：基础类型string的包装类
6. Date：日期对象
  - 创建：var date=new Date();
  - 方法：
    1. toLocaleString()：返回当前date对象对应的时间本地字符串格式
    2. getTime()：获取毫秒值（自1970年1月1日零点）
7. Math：数学对象
  - 创建：
    - Math对象不用创建，直接使用，Math.方法名()
  - 方法：
    1. random()：返回[0 , 1)之间的随机数
    2. ceil()：向上取整
    3. floor()：向下取整
    4. round()：四舍五入
```
//输出1到100以内的随机数
var number = Math.floor((Math.random() * 100)) + 1;
```
  - 属性：
    - PI
8. RegExp：正则表达式对象（定义字符串的组成规则）
  - 单个字符：
    - \d：单个数字字符
    - \w：单个单词字符
  - 量词符号：
    - ?：表示出现0次或1次
    - *：表示出现0次或多次
    - +：表示出现1次或多次
    - {m, n}：表示m<=数量<=n
      - m缺省：最多n次
      - n缺省：最少m次
  - 开始结束符号：
    - 开始符合：^
    - 结束符号：$
  - 正则对象：
    - 创建
      1. var reg= new RegExp("正则表达式");
      2. var reg= /正则表达式/;
    - 方法
      - test(参数)：验证指定的字符串是否符合正则定义的规范
```
<script>
	var reg1 = new RegExp("^\\w{6,12}$");
	var reg2 = /^\w{6,12}$/;
	var username = "jiangchao";
	document.write(reg1.test(username));	//true
</script>
```
9. Global
  - 特点：全局变量，这个Global中封装的方法不需要对象就可以直接调用
  - 方法：
    - encodeURI()：url编码
    - decodeURI()：url解码
    - encodeURIComponent()：url编码，编码的字符更多
    - decodeURIComponent()：url解码
```
<script>
	var str = "长沙理工大学";
	var encode = encodeURI(str);
	document.write(encode + "<br>");

	var str1 = "长沙理工大学";
	var	encode1 = encodeURIComponent(str1);
	document.write(encode1 + "<br>");

	var a = NaN;
	document.write(a == NaN + "<br>");		//有NaN的任何等式==都为false
	document.write(isNaN(a) + "<br>");
	
	var str="123";
	var number = parseInt(str);		//123

	var jscode = "alert(123)";
	eval(jscode);		//弹出提示框：123
</script>
```

三、BOM

概念：Browser Object Model：浏览器对象模型
将浏览器的各个组成部分封装成对象
组成：
1. Window：窗口对象
2. History：历史记录对象
3. Location：地址栏对象
4. Navigator：浏览器对象
5. Screen：显示器对象

1.Window：

特点：
- Window对象不需要创建，可以直接调用window使用：window.方法名()
- window引用可省略：方法名()
方法：
1. 与弹出框有关的方法：
  - alert()：显示带有一段消息和一个确认按钮的警告框
  - confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
    - 如果用户选择确定，返回true
    - 如果用户选择取消，返回false
  - prompt()：显示可提示用户输入的对话框
    - 返回用户的输入值
2. 与打开关闭有关的方法：
  - close()：关闭浏览器窗口
    - 谁调用就关闭谁
  - open()：打开一个新的浏览器窗口
    - 返回新的window对象
3. 与定时器有关的方法：
  - setTimeout()：在指定的毫秒数后调用函数或计算表达式
    - 参数：
      - js代码或者方法对象
      - 毫秒值
    - 返回值：唯一标识，用于取消定时器
  - clearTimeout()：取消由setTimeout()方法设置的对象
  - setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式
  - clearInterval()：取消由setInterval()方法设置的对象
```

<img id="picture" src="../images/p1.jpg" width="100%" height=400px>
<script>
    var cnt = 1;
    setInterval(fun, 3000);

    function fun() {
        cnt++;
        var picture = document.getElementById("picture");
        if (cnt > 3) {
            cnt = 1;
        }
        picture.src = "../images/p" + cnt + ".jpg";
    }
</script>
```
属性：
1. 获取其他BOM对象：
  - history
  - location
  - Navigator
  - Screen
2. 获取DOM对象：
  - document

2.Location：

创建：
1. window.location
2. location
方法：
- reload()：重新加载当前文档，刷新页面
属性
- href：设置或返回完整的URL

<!--5秒后自动跳转到百度-->
<p>
    <span id="time">5</span>秒之后，自动跳转到百度
</p>
<script>
    var second = 5;
    var time = document.getElementById("time");

    function showTime() {
        second--;
        if (second == 0) {
            location.href = "https://www.baidu.com";
        }
        time.innerHTML = second;
    }

    setInterval(showTime, 1000);
</script>

3.History：

创建：
1. window.history
2. history
方法：
1. back()：加载history列表中的前一个URL
2. forward()：加载history列表中的下一个URL
3. go()：加载history列表中的某个具体页面
  参数：
  - 正数：前进几个历史记录
  - 负数：后退几个历史记录
属性：
- length：返回当前窗口历史列表中的URL数量

<input type="button" id="btn" value="获取历史记录个数">
<input type="button" id="forward" value="前进">
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        var length = history.length;
        alert(length);
    }

    var forward = document.getElementById("forward");
    forward.onclick = function () {
        history.forward();
        history.go(2);
    }
</script>

四、DOM

概念：Document Object Model：文档对象模型
W3C DOM标准被分为三个不同的部分：
- 核心DOM：针对任何结构文档的标准模型
  1. Document：文档对象
  2. Element：元素对象
  3. Attribute：属性对象
  4. Text：文本对象
  5. Comment：注释对象
  6. Node：结点对象，其他5个的父对象
- XML DOM：针对XML文档的标准模型
- HTML DOM：针对HTML文档的标准模型

1.核心DOM模型

Document：文档对象
1. 创建
  - window.document
  - document
2. 方法
  - 获取Element对象
    1. getElementById()：根据id属性值获取元素对象，id属性值一般唯一
    2. getElementByTagName()：根据元素名称获取元素对象们，返回一个数组
    3. getElementByClassName()：根据Class属性值获取元素对象们，返回一个数组
    4. getElementByName()：根据name属性值获取元素对象们，返回一个数组
  - 获取其他DOM对象
    1. createAttribute(name)：
    2. createComment()：
    3. createElement()：
    4. createTextNode()：
3. 属性
Element：元素对象
- 获取：通过document来获取和创建
- 方法
  1. setAttribute：设置属性
  2. removeAttribute：删除属性

<a>click me</a>
<input type="button" id="set" value="设置属性">
<input type="button" id="remove" value="删除属性">
<script>
    var set = document.getElementById("set");
    var remove = document.getElementById("remove");
    set.onclick = function () {
        var element = document.getElementsByTagName("a")[0];
        element.setAttribute("href", "https://www.baidu.com");
    }
    remove.onclick = function () {
        var element = document.getElementsByTagName("a")[0];
        element.removeAttribute("href");
    }
</script>

Node：节点对象
- 特点：所有DOM对象都可以被认为是一个节点
- 方法：
  CRUD dom数：
  - appendChild()：向节点的子节点列表的结尾添加新的子节点
  - removeChild()：删除并返回当前节点的指定子节点
  - replaceChild()：用新节点替换一个子节点
- 属性
  - parentNode：返回节点的父节点

//动态表格
<style>
        div {
            text-align: center;
            margin: 50px;
        }

        table {
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td, th {
            text-align: center;
            border: 1px solid;
        }
    </style>
</head>
<body>
<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="sex" placeholder="请输入性别">
    <input type="button" id="add_btn" value="添加">
</div>

<table id="tab">
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>路飞</td>
        <td>男</td>
        <td>
            <a href="javascript:void(0);" onclick="delTr(this);">删除</a>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>索隆</td>
        <td>男</td>
        <td>
            <a href="javascript:void(0);" onclick="delTr(this);">删除</a>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>娜美</td>
        <td>女</td>
        <td>
            <a href="javascript:void(0);" onclick="delTr(this);">删除</a>
        </td>
    </tr>
</table>

<script>
    //添加功能
    //1.获取按钮
    var add = document.getElementById("add_btn");
    add.onclick = function () {
        //2.获取文本框内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var sex = document.getElementById("sex").value;
        //3.创建td，赋值td的标签体
        var text_id = document.createTextNode(id);
        var text_name = document.createTextNode(name);
        var text_sex = document.createTextNode(sex);

        var td_id = document.createElement("td");
        td_id.appendChild(text_id);
        var td_name = document.createElement("td");
        td_name.appendChild(text_name);
        var td_sex = document.createElement("td");
        td_sex.appendChild(text_sex);

        var td_a = document.createElement("td");
        var ele_a = document.createElement("a");
        ele_a.setAttribute("href", "javascript:void(0);");
        ele_a.setAttribute("onclick", "delTr(this);");
        var text_a = document.createTextNode("删除");
        ele_a.appendChild(text_a);
        td_a.appendChild(ele_a);
        //4.创建tr，添加td到tr中
        var tr = document.createElement("tr");
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_sex);
        tr.appendChild(td_a);
        //5.获取table
        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);
    }

    //删除功能
    function delTr(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>
</body>

2.HTML DOM

标签体的设置和获取：innerHTML
使用html元素对象的属性
控制元素样式
1. 使用元素的style属性来设置
```
div1.style.border="1px solid red";
div1.style.fontSize="20px";
```
2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值
```
div1.className="d1";
```

案例：

//使用HTML DOM添加功能
	var add = document.getElementById("add_btn");
    add.onclick = function () {
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var sex = document.getElementById("sex").value;
        var table = document.getElementsByTagName("table")[0];
        table.innerHTML += "<tr>\n" +
            "        <td>" + id + "</td>\n" +
            "        <td>" + name + "</td>\n" +
            "        <td>" + sex + "</td>\n" +
            "        <td>\n" +
            "            <a href=\"javascript:void(0);\" οnclick=\"delTr(this);\">删除</a>\n" +
            "        </td>\n" +
            "    </tr>";
    }

五、事件

概念：某些组件被执行了某些操作后，触发某些代码的执行
1. 事件：某些操作，如：单击，双击，鼠标移动等
2. 事件源：组件，如按钮，文本输入框等
3. 监听器：代码
4. 注册监听：将事件，事件源，监听器结合在一起，当事件源上发生某个事件，则触发执行某个监听器代码
常见的事件：
1. 点击事件
  - onclick：单击事件
  - ondblclick：双击事件
2. 焦点事件
  - onblur：失去焦点
    一般用于表单校验
  - onfocus：元素获得焦点
3. 加载事件
  - onload：一张页面或一幅图像完成加载
4. 鼠标事件
  - onmousedown：鼠标按钮被按下
    - 定义方法时，定义一个形参接受event对象
    - event对象的button属性可以获取鼠标哪个按钮被点击了
  - onmouseup：鼠标按钮被松开
  - onmousemove：鼠标被移动
  - onmouseover：鼠标移到某元素之上
  - onmouseout：鼠标从某元素移开
5. 键盘事件
  - onkeydown：某个按键被按下
  - onkeyup：某个按键被松开
  - onkeypress：某个按键被按下并松开
6. 选择和改变
  - onchange：域的内容被改变
  - onselect：文本被选中
7. 表达事件
  - onsubmit：确认按钮被点击
    方法返回false则表单被阻止提交
  - onreset：重置按钮被点击
实例演示：

<form id="form">
    <input id="input"></input>
    <input type="submit">
</form>

<script>
    var input = document.getElementById("input");
    //1.失去焦点事件
    input.onblur = function () {
        alert("失去焦点");
    }
    //2.绑定鼠标移动到元素之上事件
    input.onmouseover = function () {
        alert("鼠标移动到上面了");
    }
    //3.绑定鼠标单击事件
    input.onmousedown = function (event) {
        alert(event.button);    //鼠标按键从左至右是0，1，2
    }
    //4.设置按键被按下事件
    input.onkeydown = function (event) {
        //13对应的按键是回车
        if (event.keyCode == 13) {
            alert("提交表单");
        }
    }
    document.getElementById("form").onsubmit = function () {
        return false;
    }
</script>

案例：单击控制小灯泡的亮灭

<img id="p" src="../images/off.jpg" onclick="fun()">
<script>
    var flag = false;

    function fun() {
        var p = document.getElementById("p");
        if (flag == false) {
            p.src = "../images/on.jpg";
            flag = true;
        } else {
            p.src = "../images/off.jpg";
            flag = false;
        }

    }
</script>

码农公寓

JavaScript基础

一、JavaScript简介

二、ECMAScript

三、BOM

1.Window：

2.Location：

3.History：

四、DOM

1.核心DOM模型

2.HTML DOM

五、事件

相关文章