前言
JavaScript是用来实现页面交互的一门编程语言。
JavaScript的核心逻辑：使用ECMA Script核心语法，通过BOM对象下的Window对象提供的API，查找并操作HTML中的标签、属性和CSS样式。
-
-
动手：有目标就去做，网景公司大牛多，Brendan Eich（布兰登·艾奇）据说就用了10天就把JavaScript搞了出来，刚出来时叫LiveScript，为了蹭蹭当红明星Java热度，就改成JavaScript了（瞬间就火了），事实上他们两没啥关系。
-
竞争：看到网景公司有了js，微软感觉不行啊，我的IE要被干掉啊，同时也感到js的前途无量，于是参考JavaScript弄了个名为JScript浏览器脚本语言。
-
标准：
这3大利器结合起来使用，可以操作HTML页面中所有的标签/属性/CSS样式。
| 作用 | |
|---|---|
| ECMA Script | 构成了JS核心的语法基础 |
| BOM | Browser Object Model 浏览器对象模型，用来操作浏览器上的对象 |
| DOM |
JavaScript概念
JavaScript一种弱类型语言；
在Java中1个变量的数据类型必须提前声明数据类型，且变量声明之后数据类型无法更改；
在JavaScript中1个变量的数据类型无需提前声明数据类型，且变量声明之后数据类型可以更改；
基于对象的语言（大部分对象已经被创建好了，不用创建类；），相对随便的客户端脚本语言 。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，它的主要目的是验证发往服务端之前的数据、增加Web互动、加强用户体验；
与CSS一样嵌套在HTML代码标签里面，在html代码执行时，随之执行， 为HTML代码增加动态效果。
JS核心的语法
JavaScript的语法和Java十分类似，以下讲解的是遵循ESMAScript6脚本语言规范的JavaScript。
HTML引入JS有两种种方式
- 内部脚本 <script type="text/javascript"> js代码 </script>
- 外部脚本 <script type="text/javascript" src="外部js文件"></script>
注意：通过script标签 src引入外部js文件之后，script标签里面的js代码，将无法执行；
- 浏览器弹框输出字符 alert('哈哈')
- 输出html内容到页面 document.write('呵呵')
- 输出到浏览器控制台 console.log('嘻嘻')
变量声明
ESMAScript6版本
let a = "xxx"; let a = true; let a = 5; const PI=3.14;//常量声明之后不能再变动值
和Java一样JavaScript数据类型大体分为2类
- 基本数据类型存在栈；
- 引用的数据类型放在堆里面，赋值时值为引用；
* string：字符串类型（单引号 双引号） * number：数值类型（整型 浮点型） * boolean：布尔型 * undefined：未定义的 * object： 对象和null
1. 算数运算符 + - * / % ++ -- 2. 赋值运算符 = += -= *= /= 3. 比较运算符 > < ==(===) !=(!==) >= <= 4. 逻辑运算符 && || ! 5. 三元（目）运算符 条件表达式 ？为真: 为假
JavaScript扩展运算符(...)
扩展运算符可以扩展数组中元素和对象中的属性；
扩展数组中的元素
arra1=[1,2,3] (3) [1, 2, 3] [...arra1,5,5,6] (6) [1, 2, 3, 5, 5, 6] arra2=[...arra1,5,5,6] (6) [1, 2, 3, 5, 5, 6] [...arra1,...arra2] (9) [1, 2, 3, 1, 2, 3, 5, 5, 6]
扩展对象中的属性
{name:"张根"}
{...person,hobbies:["读书","看报"]}
{name: '张根', hobbies:['读书', '看报']}
在JS中条件判断主要有两种:
- if
- switch
其使用方式和Java基本一致。
1. if判断 if (条件表达式) { 代码块; } else if(条件表达式) { 代码块; } else { 代码块; } 2. switch判断 switch(条件表达式){ case 满足条件1 : 代码块 break; case 满足条件2 : 代码块 break; default: 默认代码块; }
1. 普通for循环 for(let i= 0; i<10; i++){ 需要执行的代码; } 2. 增强for循环 for(let obj of array){ 需要执行的代码; } 3. while循环 while (条件表达式) { 需要执行的代码; } 4. do..while循环 do{ 需要执行的代码; }while(条件表达式); 5. break和continue break: 跳出整个循环 continue：跳出本次循环
功能：JavaScript中的函数用于执行特定功能的代码块，为了方便理解，也可以称为js方法，其作用就类似于Java中的方法。
JavaScript中的函数分为
- 普通函数
- 匿名函数
普通函数 function 方法名（参数列表）{ 方法实现 } 匿名函数 function （参数列表）{ 方法实现 }
时间的功能：JS可以监听用户的行为，得到一个事件，并调用函数来完成用户交互功能。
1. 点击事件： 1. onclick：单击事件(*) 2. ondblclick：双击事件 2. 焦点事件 1. onblur：失去焦点(*) 2. onfocus: 元素获得焦点(*) 3. 加载事件： 1. onload：页面加载完成后立即发生(*) 4. 鼠标事件： 1. onmousedown 鼠标按钮被按下 2. onmouseup 鼠标按键被松开 3. onmousemove 鼠标被移动 4. onmouseover 鼠标移到某元素之上 5. onmouseout 鼠标从某元素移开 5. 键盘事件： 1. onkeydown 某个键盘按键被按下 2. onkeyup 某个键盘按键被松开 3. onkeypress 某个键盘按键被按下（不会监听功能键） 6. 改变事件 1. onchange 域的内容被改变(*) 7. 表单事件： 1. onsubmit 提交按钮被点击(*)
//表单的onsubmit接收后面调用方法的返回; true 正常提交 false 不提交
document.getElementById("myForm").onsubmit = function () {
return usernameCheck();
}
通过事件，可以将HTML上的元素跟函数绑定在一起来完成一些具体的功能。
绑定方式有两种：
- 普通函数绑定
- 匿名函数绑定
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<!--
事件绑定: 当某个事件发生了的时候,我们去调用某个方法
1. 普通函数绑定: 直接在HTML元素上通过事件名=方法名
2. 匿名函数绑定: 在js中首先获取到HTML的元素,然后通过事件名=函数
-->
</head>
<body>
<input type="button" value="普通函数" onclick="xixi()"> <br>
<input type="button" value="匿名函数" id="nm"> <br>
<script>
//普通函数绑定 定义一个方法
function xixi() {
console.log("嘻嘻");
}
//匿名函数绑定
document.getElementById("nm").onclick = function () {
console.log("哈哈");
}
// document.getElementById("nm").onclick = haha;
// function haha() {
// console.log("哈哈");
// }
</script>
</body>
</html>
Window对象可以实现两种弹框：
- 警告窗(alert)
- 确认窗(confirm)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>js两个弹框</title>
</head>
<body>
<!--
JS两种弹框: Window对象可以实现两种弹框：警告窗(alert)、确认窗(confirm)
-->
<script>
//警告窗(alert)
//alert("哈哈");
//确认窗(confirm) 返回值: 确认true 取消 false
console.log(confirm("您确认要删除这条数据吗?"));
</script>
</body>
</html>
1.2.Windows定时器
Window对象可以实现两种定时器
- setInterval（周期性任务）炸弹
- setTimeout（一次性任务）每天的闹钟
1.3.清除Windows定时器
定时器开启之后也可以清除。
- clearTimeout(任务标识); 按照任务标识取消任务
- clearInterval(任务标识); 按照任务标识取消任务
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>js两个定时器</title>
</head>
<body>
<!--
JS可以实现两种定时器：
setTimeout(任务,多少ms之后) 一次性任务: 定了某个时间点, 任务仅仅执行一次; 返回值是任务标识
clearTimeout(任务标识); 按照任务标识取消任务
setInterval(任务,间隔多少ms) 周期性任务: 以一定的频率重复执行任务; 返回值是任务标识
clearInterval(任务标识); 按照任务标识取消任务
-->
<button id="btn1">取消打印时间</button>
<button id="btn2">取消打印自然数</button>
<script>
// 1. 定时5秒之后在控制台打印当前时间
let job1 = setTimeout(function () {
console.log(new Date());
}, 5000);
// 2. 点击按钮取消打印时间
document.getElementById("btn1").onclick = function () {
clearTimeout(job1);
};
// 3. 每隔2秒在控制台打印递增自然数
let num = 1;
let job2 = setInterval(function () {
console.log(num++);
}, 2000);
// 4. 点击按钮取消打印自然数
document.getElementById("btn2").onclick = function () {
clearInterval(job2);
}
</script>
</body>
</html>
1.4.
Location对象指的是浏览器的地址栏，它的主要作用是地址的获取、刷新和跳转。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>location对象</title>
</head>
<body>
<!--
location地址对象
reload():刷新当前页面
href:获取当前浏览器地址
href="地址": 跳转到目标地址
-->
<button onclick="refresh()">刷新当前页面</button>
<br>
<button onclick="addr()">获取当前浏览器地址</button>
<br>
<button onclick="jump()"> 跳转页面(重点)</button>
<br>
<script>
//刷新当前页面
function refresh() {
location.reload();
}
//获取当前浏览器地址
function addr() {
console.log(location.href);
}
//获取当前浏览器地址
function jump() {
location.href = "https://www.baidu.com";
}
</script>
</body>
</html>
2.DOM对象
HTML页面内容包括：元素 属性 内容 样式 。
2.1.获取标签元素
通过DOM对象，可以使用4种方式，获取标签对象。
获取元素对象
document.getElementById(id属性值)
document.getElementsByTagName(标签名)
document.getElementsByClassName(class属性值)
document.getElementsByName(name属性值)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>获取dom元素</title> </head> <body> <form action="#" method="get"> 姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/> 性别 <input type="radio" name="gender" value="male" class="radio">男  <input type="radio" name="gender" value="female" class="radio"/>女<br/> 爱好 <input type="checkbox" name="hobby" value="smoke">抽烟 <input type="checkbox" name="hobby" value="drink">喝酒 <input type="checkbox" name="hobby" value="perm">烫头<br/> 学历 <select name="edu"> <option value="0">请选择</option> <option value="1">入门</option> <option value="2">精通</option> <option value="3">放弃</option> </select> </form> <script> // 1.获取id="username"的标签对象 console.log(document.getElementById("username")); console.log(document.getElementById("username").name); console.log(document.getElementById("username").value); // 2.获取class="radio"的标签对象数组 console.log(document.getElementsByClassName("radio")); for (let html of document.getElementsByClassName("radio")) { console.log(html.value); } // 3.获取所有的option标签对象数组 console.log(document.getElementsByTagName("option")); // 4.获取name="hobby"的input标签对象数组 console.log(document.getElementsByName("hobby")); </script> </body> </html>
2.2.获取标签
- 获取元素的内容: js对象.innerHTML
- 修改元素的内容: js对象.innerHTML='xxx'
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>操作dom内容</title> <style> #myDiv { border: 1px solid red; } </style> <!-- 获取元素的内容: js对象.innerHTML 修改元素的内容: js对象.innerHTML='xxx' --> </head> <body> <div id="myDiv">程序猿最讨厌的四件事：<br>自己写注释、自己写文档……</div> <script> let myDiv = document.getElementById('myDiv'); //1. 在控制台打印div中的内容 console.log(myDiv.innerHTML); //2. 在上面div中的内容中添加---> <br>别人不写注释、别人不写文档…… //myDiv.innerHTML = myDiv.innerHTML + "<br>别人不写注释、别人不写文档……"; myDiv.innerHTML += "<br>别人不写注释、别人不写文档……"; </script> </body> </html>
2.3.获取标签
获取元素的属性: js对象.属性名
设置元素的属性: js对象.属性名='xxx'
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>操作dom属性</title> <!-- 获取元素的属性: js对象.属性名 设置元素的属性: js对象.属性名='xxx' --> </head> <body> <form action="#" method="get"> 姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/> </form> <script> let myInput = document.getElementById("username"); // 1.获取文本框value属性的值 console.log(myInput.value); console.log(myInput.type); // 2.修改文本框value属性的值 myInput.value = "haha"; myInput.type = "password"; </script> </body> </html>
给标签的style属性设置一个css样式: js对象.style.样式名='样式值'
给标签的style属性设置多个css样式: js对象.style.cssText='css样式'
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>操作dom样式</title> <!-- 给标签的style属性设置一个css样式: js对象.style.样式名='样式值' 给标签的style属性设置多个css样式: js对象.style.cssText='css样式' --> </head> <body> <p id="p1">1. 设置一个css样式, 设置p1的背景色为红色</p> <p id="p2">2. 设置多个css样式, 设置p2的背景色为红色,并且字体为绿色</p> <script> let p1 = document.getElementById("p1");//获取段落标签 let p2 = document.getElementById("p2");//获取段落标签 // 1. 设置一个css样式, 设置p1的背景色为红色 p1.style.backgroundColor = "red"; // 2. 设置多个css样式, 设置p2的背景色为红色,并且字体为绿色 // p2.style.backgroundColor = "red"; // p2.style.color = "green"; p2.style.cssText = "background-color: red;color: green"; </script> </body> </html> <!--<p id="p1" style="background-color: red">1. 设置一个css样式, 设置p1的背景色为红色</p>--> <!--<p id="p2" style="background-color: red;color: green">2. 设置多个css样式, 设置p2的背景色为红色,并且字体为绿色</p>-->
在JavaScript中可以使用正在表达式，根据定义好的规则，可以过滤文本内容；例如用于校验表单。
* 正则语法: let rege = /正则表达式/; 创建正则规则对象 rege.test(字符串) 判断指定字符串是否符合正则规则 * 常见符号： ^ 表示匹配字符串的开始位置 $ 表示匹配字符串的结束位置 * 表示匹配 零次到多次 + 表示匹配 一次到多次 (至少有一次) ? 表示匹配零次或一次 . 表示匹配单个字符 | 表示为或者,两项中取一项 ( ) 小括号表示匹配括号中全部字符 [ ] 中括号表示匹配括号中一个字符 范围描述 如[0-9 a-z A-Z] { } 大括号用于限定匹配次数 如 {n}表示匹配n个字符 {n,}表示至少匹配n个字符 {n,m}表示至少n,最多m \ 转义字符 如上基本符号匹配都需要转义字符 如 \* 表示匹配*号 \w 表示英文字母和数字 \W 非字母和数字 \d 表示数字 \D 非数字
正则对象.test()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
</head>
<body>
<!--
1. 创建正则规则
let rege = /正则表达式/;
2. 验证方法
rege.test(字符串): 符合正则规则就返回true，否则false
-->
<script>
//编写一个验证手机号的正则: 11位, 第一位:1 第二位:3456789 后面9位:数字
//1. 定义正则规则
let rege = /^1[3-9]\d{9}$/;
//2. 使用正则规则匹配你的手机号
console.log(rege.test("13000000000"));
console.log(rege.test("12000000000"));
console.log(rege.test("13000000n00"));
</script>
</body>
</html>
浙公网安备 33010602011771号