尚硅谷JavaScript学习笔记

文章目录

变量
关系运算
逻辑运算
数组
函数
对象（属性声明即定义）
事件
- onload事件
- onclick事件
- onblur事件
- onchange事件
- 提交事件
document对象中的方法介绍
- 正则表达式
- document.getElementsById(elementId)
- document.getElementsByName(elementName)
- document.getElementsByTagName(elementName)
- createElement和appendChild
- 注意

变量

注意：只能通过var进行定义，然后js自动判断变量类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--    引入和自定义只能用一个，不能像css似的进行逻辑覆盖--><script type="text/javascript" src="javascript.js">// alert:警告 alter：改变alert("hello javascript!")</script><script type="text/javascript">// alert:警告 alter：改变alert("hello javascript!")</script><script type="text/javascript">var item;alert(item);item = 666;// typeof 可以得到变量类型alert(typeof (666));item = "888";alert(typeof (item));var item1 = 666;alert(item * item1)//因为相乘结果不是数值所以是NAN</script>
</head>
<body></body>
</html>

关系运算

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

逻辑运算

在js中""、null和0等等，在做判断时都当false处理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">var a = 0var b=undefinedvar c = ""var d = NULLif (!a)alert("0为假")if (!b)alert("undefined为假")if (!c)alert("“”为假")if (!d)alert("NULL为假")</script>
</head>
<body></body>
</html>

将判断最终真假的操作进行到最后返回结果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">var a = 666;var b;var c = "666";var d = "";alert(a && b);alert(a && c);alert(d || c);alert(d || b);alert("123")</script>
</head>
<body></body>
</html>

数组

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">var num = []var item = ["gcl", 666, 888]alert(num.length)alert(item.length)num[0] = 666alert(num.length)//1num[2] = 888// 巧妙之处，当给数组赋值的时候会自动做扩容操作alert(num.length)//3// 这里必须用num.length,否则使用自定义常数，会出现问题for (var i = 0; i < num.length; i++)alert(num[i])</script>
</head>
<body></body>
</html>

函数

不允许重载，会覆盖成最后一个。
JS中函数不需要设置参数类型和返回值类型。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function click() {alert("无参函数调用")}click();// 调用的时候不需要指定参数类型，因为var没必要声明类型，直接说明参数个数就行了function click1(a, b) {alert("有参函数被调用 a =>" + a + " b =>" + b)}click1(6, 8)function click2() {return 666;}num = click2()alert("返回值函数的返回值为" + num)// 函数也可以进行赋值操作item = clickitem()// 另类函数定义方式var fun = function () {alert("函数对变量赋值定义函数")}fun()// 无参函数的隐藏参数个数function arg() {alert("无参函数的参数个数" + arguments.length)for (var i = 0; i < arguments.length; i++)alert("传递的参数是" + arguments[i])}arg("66", "88", "99")//当调用的时候，传参少于参数个数，则使用默认值function click3(a, b=6) {alert("有参函数被调用 a =>" + a + " b =>" + b)}click3(6)</script>
</head>
<body></body>
</html>

可变长参数 arguments的实际应用
计算任意个数的数值的和

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function func() {var sum = 0;for (var i = 0; i < arguments.length; i++)sum += arguments[i]alert(sum)}func(666, 888, 999)</script>
</head>
<body></body>
</html>

对象（属性声明即定义）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">// 对象的定义需要new，但是属性声明即定义var item = new Object();// 注意定义object对象时O要大写item.name = "gcl"item.sex = "男"// 名字已经有了，只需要声明参数个数就行了item.fuc = function () {alert(this.name + "  " + this.sex)}item.fuc()
// 花括号形式定义对象var person={name:"管超龙",sex:"男",age:20,func:function () {alert(this.name+" "+this.age+" "+this.sex)}}// 花括号定义的对象也可以做到声明即定义person.num="666"alert(person.num)person.func()</script>
</head>
<body></body>
</html>

事件

静态：编译的时候就已注册好事件
动态：运行时动态注册事件

onload事件

静态

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!--当页面加载完成的时候自动调用-->
<body onload="alert('onload静态注册事件')"></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function func() {alert("静态注册load事件")}</script>
</head>
<!--当页面加载完成的时候自动调用-->
<body onload="func()"></body>
</html>

动态

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">// 动态注册onload事件是固定写法// 因为加载时触发事件的情况是固定的window.onload = function () {alert("动态注册onload事件")}</script>
</head>
<!--当页面加载完成的时候自动调用-->
<body></body>
</html>

onclick事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function func() {alert("静态注册onclick事件")}window.onload = function () {/** document 整个页面* getElementById 根据id取出来对应的标签对象* 得到对应的对象进行绑定操作* */var btnObj = document.getElementById("btn2")btnObj.onclick = function () {alert("动态注册的onclick事件")}}</script>
</head>
<body>
<button onclick="func()">点击事件</button>
<button id="btn2">动态注册</button>
</body>
</html>

onblur事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function func() {//F12可以查看浏览器控制台，这里的console指的是浏览器控制台console.log("静态注册失去焦点事件")}window.onload = function () {var password = document.getElementById("password")password.onblur = function () {alert("动态注册失去焦点事件")}}</script>
</head>
<body>
<table align="center"><tr><td>用户名：</td><td><input type="text" onblur="func()"></td></tr><tr><td>密码：</td><td><input type="text" id="password"></td></tr>
</table>
</body>
</html>

onchange事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function func() {alert("有眼光")}window.onload = function () {var ochange = document.getElementById("selectlist")ochange.onchange = function () {alert("动态选择女神")}}</script>
</head>
<body align="center">
选择心目中的女神
<select onchange="func()"><option>--女神--</option><option>--苍井空--</option><option>--小泽玛利亚--</option><option>--李小璐--</option>
</select>
<select id="selectlist"><option>--女神--</option><option>--杨幂--</option><option>--万茜--</option><option>--林志玲--</option>
</select>
</body>
</html>

提交事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function onsubmitfunc() {alert("表单提交事件用于检测提交的信息是否合法，比后台验证快")return false// 返回false代表不合法，不会跳转到指定页面}window.onload = function () {var submited = document.getElementById("submited")// 提交事件绑定后通过onsubmit函数对于false进行return，和静态return两次一样submited.onsubmit = function () {alert("动态注册事件")// 发现信息不合法然后阻止跳转return false}}</script>
</head>
<body>
<form action="https://www.bilibili.com/video/BV1Y7411K7zz?p=52" onsubmit="return onsubmitfunc();"><input type="submit" value="静态提交表单"/>
</form>
<form action="https://www.bilibili.com/video/BV1Y7411K7zz?p=52" id="submited"><input type="submit" value="动态注册"/>
</form>
</body>
</html>

document对象中的方法介绍

正则表达式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">// 该正则表达式对象要求字符串中必须包含Dvar patt = new RegExp("D")//等价于/D/alert(patt) //输出为/D/var str = "prohub"alert(patt.test(str))</script>
</head>
<body></body>
</html>

/a+/表示至少包含一个或者多个a
一般使用量词进行部分检查时不需要使用/^ $/形式,只要待检查字符串含有符合部分符合正则表达式的序列就判定为true
当检查字符串全部序列的时候需要严格使用/^ $/

document.getElementsById(elementId)

alert显示问题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function fun() {var txtobj = document.getElementById("txtname")// 获得标签内容valuevar txt = txtobj.value// 运用正则表达式进行检验var patt = /^\w{5,12}$/;if (patt.test(txt))alert("用户名合法")elsealert("用户名不合法")}</script>
</head>
<body>
用户名:<input type="text" id="txtname">
<button onclick="fun()">验证</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function fun() {var txtobj = document.getElementById("txtname")var itemobj = document.getElementById("item")// 获得标签内容valuevar txt = txtobj.value// 运用正则表达式进行检验var patt = /^\w{5,12}/;if (patt.test(txt))//alert("用户名合法")itemobj.innerText = "用户名合法"else//alert("用户名不合法")itemobj.innerText = "用户名不合法"}</script>
</head>
<body>
用户名:<input type="text" id="txtname">
<button onclick="fun()">验证</button>
<span style="color:red" id="item"></span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function fun() {var txtobj = document.getElementById("txtname")var itemobj = document.getElementById("item")var imgobj = document.getElementById("imgs")// 获得标签内容valuevar txt = txtobj.value// 运用正则表达式进行检验var patt = /^\w{5,12}/;if (patt.test(txt))//alert("用户名合法")itemobj.innerHTML = "<img  src=\"../images/right.png\" height='15' width='15'/>"else//alert("用户名不合法")itemobj.innerHTML = "<img  src=\"../images/wrong.png\" height='15' width='15'/>"}</script>
</head>
<body>
用户名:<input type="text" id="txtname">
<button onclick="fun()">验证</button>
<span id="item"></span></body>
</html>

document.getElementsByName(elementName)

根据name进行查找和根据id进行查找的区别
首先id必须是唯一的，而name却不需要
这种差距导致功能上的不同
因为name可能不是唯一存在，于是查找的时候会将name相同的全部查找出来，于是可以进行批量操作处理。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function CheckAll() {// 得到的是一个demo对象数组var names = document.getElementsByName("lang")for (var i = 0; i < names.length; i++) {// 当checked属性为true时代表复选框选中。names[i].checked = true}}function NoCheckAll() {var names = document.getElementsByName("lang")for (var i = 0; i < names.length; i++) {// 当checked属性为true时代表选中。names[i].checked = false}}function CheckReverse() {var names = document.getElementsByName("lang")for (var i = 0; i < names.length; i++) {// 当checked属性为true时代表选中。if (names[i].checked == true)names[i].checked = falseelsenames[i].checked = true}}</script>
</head>
<body>
编程语言
<input type="checkbox" name="lang">C++
<input type="checkbox" name="lang">C#
<input type="checkbox" name="lang">java
<input type="checkbox" name="lang">python
<button onclick="CheckAll()">全选</button>
<button onclick="CheckReverse()">反选</button>
<button onclick="NoCheckAll()">全不选</button>
</body>
</html>

document.getElementsByTagName(elementName)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function CheckAll() {// 得到的是一个demo对象数组var names = document.getElementsByTagName("input")for (var i = 0; i < names.length; i++) {// 当checked属性为true时代表复选框选中。names[i].checked = true}}function NoCheckAll() {var names = document.getElementsByTagName("input")//顺序是定义时候的从上到下for (var i = 0; i < names.length; i++) {// 当checked属性为true时代表选中。names[i].checked = false}}function CheckReverse() {var names = document.getElementsByTagName("input")for (var i = 0; i < names.length; i++) {// 当checked属性为true时代表选中。if (names[i].checked == true)names[i].checked = falseelsenames[i].checked = true}}</script>
</head>
<body>
编程语言
<input type="checkbox">C++
<input type="checkbox">C#
<input type="checkbox">java
<input type="checkbox">python
<button onclick="CheckAll()">全选</button>
<button onclick="CheckReverse()">反选</button>
<button onclick="NoCheckAll()">全不选</button>
</body>
</html>

createElement和appendChild

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">window.onload = function () {var divobj = document.createElement("div")var txtobj = document.createTextNode("文本也被封装为节点")divobj.appendChild(txtobj)// divobj.innerHTML = "新建div标签并添加在body里面子节点div"// 注意如果取消上面注释会导致文本节点内容被覆盖//此处不能用innerTextdocument.body.appendChild(divobj)}</script>
</head>
<body></body>
</html>

注意

此类get查询必须在页面加载完之后才能进行查询，比如在load事件中可以查询，也可以在触发事件后进行查询，但是未加载的时候直接查询是不行的。
因此不可以在未加载body之前，通过script对body中标签id等等进行操作，只能在方法中调用时可以放入head中（加载完body，然后触发才会执行方法）。
错误示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">// 页面没加载完无法查询到信息，显示nullalert(document.getElementsByTagName("input"))</script>
</head>
<body>
用户名:<input type="text" id="txtname">
<button onclick="fun()">验证</button>
<span id="item"></span></body>
</html>

innerHTML:可以操作文本和标签
innerText:只能操作文本不能改变和取到标签