JavaScript 的使用看这篇就够了

本文档适合初学者学习JavaScript时参考

万字以上的总结，包括基本的程序演示以及简略的对正则表达式的介绍，相信初学者看完一定有所收获

看完这篇还可以看看博主对HTML和CSS的总结，超级适合初学者，传送地址：HTML & CSS 初学者必知必会

文章目录

一、JavaScript介绍
二、JavaScript和HTML代码结合的方式

1. 在head或body标签中使用script标签书写JavaScript代码
2. 单独的创建JS文件，通过script标签引入

三、变量

1. JavaScript中变量的类型
2. JavaScript中的特殊值
3. JavaScript中定义变量的格式
代码示例

四、关系运算
五、逻辑运算

1. &&：且运算
2. ||：或运算
3. !：取反运算
代码示例

六、数组
七、函数

1. 函数的定义方式一
2. 函数的定义方式二

八、函数的arguments隐形参数
九、JavaScript中的自定义对象

1. Object形式的自定义对象
2. 花括号形式的自定义对象

十、JavaScript中的事件

1. 事件的概念
2. 常用的事件
3. 事件的注册(绑定)
JavaScript 事件的代码演示

十一、正则表达式
十二、DOM模型

1. Document对象
2. Document对象的理解
3. HTML标签对象化
4. Document对象中的方法介绍
getElementById方法代码示例
getElementsByName方法代码示例

十三、DOM模型中节点的常用属性和方法

1. 方法
2. 属性
createElement代码示例

一、JavaScript介绍

简介：
JavaScript语言可以动态的美化页面、验证表单的数据，需要浏览器解析执行JS代码

特点：

交互性(JS可完成信息的动态交互)
安全性(不允许直接访问本地硬盘)
跨平台性(只要是可以解析JS的浏览器都可执行，与平台无关)
注意：JavaScript与Java无关联，JS是弱类型，Java是强类型
强类型是定义变量时类型已经确定且不可变，弱类型是类型可变

二、JavaScript和HTML代码结合的方式

1. 在head或body标签中使用script标签书写JavaScript代码

<script  type="text/javascript">  JS代码  </script>

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        alert("My First JS代码");
    </script>
</head>
<body>
</body>
</html>

运行结果：

2. 单独的创建JS文件，通过script标签引入

<script  type="text/javascript"  src="JS文件路径"> </script>

（1）创建单独的JS文件

（2）使用script标签引入JS文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript" src="MyJS.js"></script>
        <script type="text/javascript">
        alert("我好帅！");
    </script>
    <!--script标签可以用来引入JS文件也可以用来定义JS代码，二者只可选一，
        如果想要二者均实现必须重新定义一个script标签-->
    <!--只可实现引入标签：<script type="text/javascript" src="MyJS.js">
                            alert("我好帅！"); //此语句无法显示
                           </script> -->
</body>
</html>
运行结果：先出现hello！提示框，再出现我好帅提示框

三、变量

1. JavaScript中变量的类型

数值类型： number
字符串类型： string (首字母小写)
对象类型： Object
布尔类型： boolean
函数类型： function

2. JavaScript中的特殊值

undefined：未定义，所有JS变量未赋予初始值时默认值均为undefined
null：空值
NaN：非数字，因为运算不能执行而导致，如数值和字符串运算，属于number类型

3. JavaScript中定义变量的格式

var 变量名；
var 变量名 = 值；
4. 补充知识：
(1) typeof()是JS语言提供的一个函数，它可以返回参数的类型
(2) JS语言中的注释写法与java一致

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var i;
        alert(i); //undefined
        i = 22;
        alert(i); //22
        alert(typeof(i)); //number
        i = "abc"; //弱类型，可以随意更改类型
        alert(typeof(i)); //string
        var a = 22;  var b = "Handsome";
        alert(a * b); //NaN
        alert(typeof(a * b)); //number
    </script>
</body>

四、关系运算

等于，符号：==，简单的做字面值的比较
全等于，符号：===，除了做字面值的比较之外，还会比较两个变量的数据类型是否一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a = "12";
        var b = 12;
        alert( a == b ); //true
        alert( a === b ); //false
    </script>
</head>
<body>
</body>
</html>

五、逻辑运算

1. &&：且运算

第一种情况：表达式全为真，返回最后一个表达式的值
第二种情况：表达式有一个为假，返回第一个为假的表达式的值(不是返回第一个表达式的值)

2. ||：或运算

第一种情况：表达式全为假，返回最后一个表达式的值
第二种情况：表达式有一个为真，返回第一个为真的表达式的值(不是返回第一个表达式的值)

3. !：取反运算

注意：

&&与||采取短路的策略，即确定了结果后，后面的表达式不再进行判断
在JS语言中所有的变量都可以作为一个boolean类型使用，且0、null、undefined、
””(空串)都认为是false

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var a = 0; //null, undefined, ""(一个空格都不能有)
        if (a) {
            alert("真");
        } else {
            alert("假"); //显示
        }
        var a = "abc"; var b = true;
        var d = false; var c = null;
        alert(a && b); //true
        alert(b && a); //abc
        alert(a && d && c); //false(不是返回第一个表达式的值)
    </script>
</body>
</html>

六、数组

数组的定义方式：
var 数组名 = []；//空数组
var 数组名 = [1,’abc’,true]；//定义数组的同时赋值，元素可多种类型

注意：

通过数组下标赋值，会根据最大下标值给数组自动扩容，默认值为undefined
读取数组中已定义元素范围之外的元素，值为undefined，且读取不会自动扩容

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var arr = [true, 1];
        alert(arr.length); //2
        arr[0] = 12;
        arr[4] = "abc";
        alert(arr.length); //5
        alert(arr[6]); //undefined
        alert(arr.length); //5
        //数组的遍历
        for (var i = 0; i < arr.length; i++) {
            alert(arr[i]);
        }
        /*Google Chrome可以通过F12调出控制台*/
    </script>
</body>
</html>

七、函数

1. 函数的定义方式一

使用function关键字
格式：(形参列表无需声明类型)
function 函数名(形参列表) {
函数体
}

注意：在JS语言中只需在函数体内直接使用return语句即可返回值，无需声明返回值类型

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        //定义一个无参函数
        function fun() {
            alert("无参函数fun()被调用了！");
        }
        fun(); //函数定义后不会自动执行，调用之后才会执行
        //定义一个带有返回值的有参函数
        function fun2(a, b) {
            return a + b;
        }
        alert(fun2(1, 2)); //3
    </script>
</body>
</html>

2. 函数的定义方式二

格式：(形参列表无需声明类型)
var 函数名 = function(形参列表) {
函数体
}

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var fun = function () {
            alert("无参函数！");
        }
        var fun2 = function (a, b) {
            return a + b;
        }
        fun(); //无参函数
        alert(fun2(1, 2)); //3
    </script>
</body>
</html>

注意：在JS中没有重载的概念，如果声明了多个重名的函数，不管函数的形参个数是否一致，不管调用时传入几个参数，只会调用同名函数中的最后一个(会覆盖掉之前)，如：

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

八、函数的arguments隐形参数

在函数调用时，浏览器每次都会传递进封装实参的对象arguments，虽然没有给被调用者定义形参，但依然可以通过arguments调用传递进来的实参：
arguments[i]: 获得传入的下标为i的参数值
arguments.length: 获得传入的参数个数
arguments.callee: 获得该函数本身(返回定义时的写法)

注意：arguments是函数内固有变量，以数组的形式保存了调用方给该函数传入的所有参数

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        //计算所有数值型参数之和
        function sum(num1, num2) { //形参列表可以空着或写任意多个，写两个符和语境
            var result = 0;
            for (var i = 0; i < arguments.length; i++) {
                if (typeof(arguments[i]) == "number") {
                    result += arguments[i];
                }
            }
            return result;
        }
        alert(sum(1,2,3,4,"abc",5,6,7,8,9)); //45
    </script>
</body>
</html>

九、JavaScript中的自定义对象

1. Object形式的自定义对象

var 对象名 = new Object()；//创建了一个空对象
对象名.属性名 = 值；//给此对象定义属性
对象名.函数名 = function() {} //给此对象定义函数
对象名.属性名/函数名()；//对象的访问

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <script type="text/javascript">
     //对象的创建
     var obj = new Object();
     obj.name = "周杰伦";
     obj.age = 18;
     obj.fun = function () {
         alert("姓名：" + this.name + "，年龄：" + this.age);
     }
     //对象的访问
     obj.fun(); //姓名：周杰伦，年龄：18
 </script>
</body>
</html>

2. 花括号形式的自定义对象

(注意标点符号，最后一个成员不加逗号)
var 对象名 = {
属性名：值，
函数名：function() {}
}；

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var obj = {
            name : "周杰伦",
            age : 18,
            fun : function () {
                alert("姓名：" + this.name + " , 年龄：" + this.age);
            }
        };
        obj.fun();
    </script> //姓名：周杰伦 , 年龄：18
</body>
</html>

十、JavaScript中的事件

1. 事件的概念

电脑输入设备与页面进行交互的响应

2. 常用的事件

onload：页面加载完成事件，浏览器解析完页面之后就会自动触发的事件
onclick：单击事件，常用于按钮的点击响应操作
onblur：失去焦点事件(点中输入框准备输入数据时，光标闪烁，称为焦点)，常用于输入框失去焦点后验证其输入内容是否合法
onchange：内容发生改变事件，常用于下拉列表选中项发生改变后操作
onsubmit：
①表单提交事件，常用于表单提交之前验证所有表单项是否合法
②onsubmit事件中return false可以阻止表单提交

3. 事件的注册(绑定)

告诉浏览器当事件响应后要执行哪些代码

静态注册事件：通过HTML标签的事件属性直接赋予事件响应后的代码(写成函数形式)
动态注册事件：步骤：
(1) 通过document对象获取标签对象(Dom对象)
(2) 通过标签对象.事件名 = function() {} 赋予事件响应后的代码，代表此标签具有此事件

JavaScript 事件的代码演示

代码示例：静态注册onload事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册onload事件的函数
        function onloadFun() {
            alert("静态注册onload事件！");
        }
    </script>
</head>
<body onload="onloadFun()"> <!--静态注册onload事件--> //函数名后一定要加括号
</body>
</html>
运行结果：页面加载后出现提示框：静态注册onload事件！

代码示例：动态注册onload事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    //window.onload页面加载完成之后自动执行function中的代码
    window.onload = function () {
        alert("动态注册的onload事件");
    }
    </script>
</head>
<body>
</body>
</html>
</html>

代码示例：静态注册onclick事件

<body>
    <script type="text/javascript">
        function onclickFun() {
            alert("静态注册onclick事件");
        }
    </script>
    <button onclick="onclickFun()">按钮</button>
</body>
运行结果：点击按钮之后出现提示框：静态注册onclick事件

代码示例：动态注册onclick事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            /*动态注册步骤：(1) 获取标签对象
                          (2) 标签对象.事件名 = function() {} */
            /*1.获取标签对象，使用document.getElementById：
                (1) document是JS语言提供的一个对象(文档)
                (2) getElementById通过id属性获取标签对象
                    也就是说此标签需要有id属性*/
            var btnObj = document.getElementById("btn01");
            //获取的btnObj为：[object HTMLButtonElement]
            /*2.标签对象.事件名 = function(){}*/
            btnObj.onclick = function () {
                alert("动态注册onclick事件！");
            }
        }
    </script> 
</head>
<body>
    <button id="btn01">按钮</button>
</body>
运行结果：点击按钮之后出现提示框：动态注册onclick事件！

代码示例：静态注册onblur事件

<body>
    <script type="text/javascript">
        function onblurFun() {
            /*console是JS提供的控制台对象，专门向浏览器的控制台打印输出，
              log()方法将参数打印在控制台*/
            console.log("静态注册onblur事件");
        }
    </script>
    输入框：<input type="text" onblur="onblurFun()">
</body>

运行结果：当光标不在输入框中时，在控制台输出指定字样：

代码示例：动态注册onblur事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var inputObj = document.getElementById("001");
            //获取的inputObj为：[object HTMLInputElement]
            inputObj.onblur = function () {
                console.log("动态注册onblur事件");
            }
        }
    </script>
</head>
<body>
    输入框：<input type="text" id="001"/>
</body>
运行结果：与静态注册onblur事件一致

代码示例：静态注册onchange事件

<body>
    请选择：
    <select onchange="onchangeFun()">
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
    </select>
    <script type="text/javascript">
        function onchangeFun() {
            alert("选中项发生了改变");
        }
    </script>
</body>

运行结果：当更改选中项之后出现提示框：

代码示例：动态注册onchange事件：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var onchangeObj = document.getElementById("001");
            onchangeObj.onchange = function () {
                alert("选中项发生改变");
            }
        }
    </script>
</head>
<body>
    请选择：
    <select id="001">
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
    </select>
</body>
运行结果：与静态注册onchange事件一致

代码示例：静态注册onsubmit事件

<body>
    <!--return false可以阻止表单提交，一般写为return 函数(返回值是false)-->
    <form action="http://localhost:63342" onsubmit="return onsubmitFun()">
        <input type="submit" value="静态注册">
    </form>
    <script type="text/javascript">
        function onsubmitFun() {
            alert("发现不合法-静态注册onsubmit事件");
            return false; //表单不会提交到服务器
        }
    </script>
</body>

运行结果：点击后出现提示框且表单没有提交到服务器：

代码示例：动态注册onsubmit事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var formObj = document.getElementById("001");
            //获取的formObj为：[object HTMLFormElement]
            formObj.onsubmit = function () {
                alert("数据不合法---动态注册onsubmit事件");
                return false;
            }
        }
    </script>
</head>
<body>
    <form action="http://localhost:63342" id="001">
        <input type="submit" value="动态注册"/>
    </form>
</body>
运行结果：与静态注册onsubmit事件一致

十一、正则表达式

    1.字符串中包含字母e
	var patt = new RegExp("e");
	var patt = /e/; //也是正则表达式写法，功能类似上一行
	2.字符串中包含字母a或b或c
	var patt = /[abc]/;
	3.字符串包含小写字母
	var patt = /[a-z]/;
	4.字符串包含任意大写字母
	var patt = /[A-Z]/;
	5.字符串包含任意数字
	var patt = /[0-9]/;
	6.字符串包含字母，数字，下划线
	var patt = /\w/;
	7.字符串中包含至少一个a
	var patt = /a+/;
	8.字符串中包含零个或多个a
	var patt = /a*/;
	9.字符串包含一个或零个a
	var patt = /a?/;
	10.字符串包含连续X个a
	var patt = /a{X}/;
	11.字符串包含至少X个连续的a，最多Y个连续的a
	var patt = /a{X,Y}/;
	12.字符串包含至少X个连续的a
	var patt = /a{X,}/;
	13.字符串必须以a结尾
	var patt = /a$/;
	14.字符串必须以a打头
	var patt = /^a/;
	15.字符串只可包含3-5个连续的a
	var patt = /^a{3,5}$/;

十二、DOM模型

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

1. Document对象

2. Document对象的理解

(1) Document管理了HTML文档的所有内容，将这些内容都对象化
(2) Document是一种树形结构，有层级关系
(3) 可以通过Document访问所有的对象

3. HTML标签对象化

4. Document对象中的方法介绍

(注意加s的是返回对象集合)

注意：

查询优先顺序：id --> name --> tagName(越往后查询结果范围越大，还需过滤)
三个查询方法一定要在页面加载完成之后执行才能查询到标签对象

getElementById方法代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*需求：当用户点击了校验按钮之后，验证内容是否合法，
          验证的规则：必须由字母、数字、下划线组成，并且长度是5-12位*/
        function onlickFun() {
            var inputObj = document.getElementById("username");
            //获得的inputObj：[object HTMLInputElement]
            var usernameText = inputObj.value;
            //value会随着输入框的内容发生改变，不仅仅是初始值
            var usernameSpanObj = document.getElementById("usernameSpan");
            var patt = /^\w{5,12}$/;或者new RegExp("^\\w{5,12}$");//需要转义
            //正则表达式的test方法用于测试参数中的字符串是否符和正则表达式的规则
            if (patt.test(usernameText)) {
                //innerHTML属性表示起始标签与结束标签中的内容，此属性可读可写
                usernameSpanObj.innerHTML = "用户名合法";
            } else {
                usernameSpanObj.innerHTML = "用户名不合法";
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="默认值">
    <button onclick="onlickFun()">校验</button>
    <span id="usernameSpan" style="color: red"></span>
</body>
</html>

运行结果：点击校验之后判断是否合法：

getElementsByName方法代码示例

要求实现：

<!DOCTYPE html>
<html lang="zh_CN">			   
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function checkAll() {
            var hobbies = document.getElementsByName("hobby");
            //得到的hobbies为：[object NodeList]
            /*getElementsByName根据name属性返回多个标签对象集合，这个集合的
              每个元素都是dom对象，元素的顺序是在HTML页面中从上到下的顺序，
              这个集合的操作跟数组一样*/
            /*checked属性表示复选框的选中状态，如果选中是true，未选中是false
              此属性可读可写*/
            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>
</head>
<body>
    <input type="checkbox" name="hobby" value="cpp" checked="checked"/>c++
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="JS">JavaScript
    <br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>

十三、DOM模型中节点的常用属性和方法

节点即标签对象

1. 方法

(1) appendChild(ChildNode)；添加一个子节点，ChildNode为添加的子节点
(2) createTextNode(Text)；创建一个以Text为内容的文本节点

2. 属性

(1) childNodes：当前节点的所有子节点
(2) firstChild：当前节点的第一个子节点
(3) lastChild：当前节点的最后一个子节点
(4) parentNode：当前节点的父节点
(5) nextSibling：当前节点的下一个节点
(6) previousSibling：当前节点的上一个节点
(7) className：标签的class属性值
(8) innerHTML：标签中的内容(包括两边的标签)
(9) innerText：标签中的文本(不包括两边的标签)
3. 注意：可以连写：document.getElementById(“xxx”).事件名 = function () {}

createElement代码示例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var divObj = document.createElement("div");
            var textNodeObj = document.createTextNode("中国，我爱你");
            divObj.appendChild(textNodeObj);
            //向body标签中添加元素，以便在页面中显示
            /*使用document.body可直接获得body标签对象*/
            document.body.appendChild(divObj);
            //代码执行下来直接使用body，body必须加载出来，故将代码放在window.onload中
        }
    </script>
</head>
运行结果：中国，我爱你(没有两边的标签)

本文地址：https://blog.csdn.net/weixin_49343190/article/details/107510571

JavaScript 的使用看这篇就够了

文章目录

一、JavaScript介绍

二、JavaScript和HTML代码结合的方式

1. 在head或body标签中使用script标签书写JavaScript代码

2. 单独的创建JS文件，通过script标签引入

三、变量

1. JavaScript中变量的类型

2. JavaScript中的特殊值

3. JavaScript中定义变量的格式

代码示例

四、关系运算

五、逻辑运算

1. &&：且运算

2. ||：或运算

3. !：取反运算

代码示例

六、数组

七、函数

1. 函数的定义方式一

2. 函数的定义方式二

八、函数的arguments隐形参数

九、JavaScript中的自定义对象

1. Object形式的自定义对象

2. 花括号形式的自定义对象

十、JavaScript中的事件

1. 事件的概念

2. 常用的事件

3. 事件的注册(绑定)

JavaScript 事件的代码演示

十一、正则表达式

十二、DOM模型

1. Document对象

2. Document对象的理解

3. HTML标签对象化

4. Document对象中的方法介绍

getElementById方法代码示例

getElementsByName方法代码示例

十三、DOM模型中节点的常用属性和方法

1. 方法

2. 属性

createElement代码示例

相关推荐

ASP页面中怎么嵌入JavaScript或CSS

JavaScript引擎如何实现async/await

Javascript中promise,async和await的区别是什么

Javascript中async与await的捕捉错误怎么理解

JavaScript如何优雅的处理async/await

JavaScript中的Async和Await怎么用

JavaScript如何实现await多个async函数

JavaScript GUI技术栈的案例分析