内容输出来源：拉钩教育Java就业训练营
1 JavaScript
JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为
JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释执行代码，不进行预编译。
1.1 js的特点
可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序
解释执行：事先不编译，逐行执行
基于对象：内置大量现成对象
适宜：
客户端数据计算
客户端表单合法性验证
浏览器事件的触发
网页特殊显示效果制作
1.2 js的组成
ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。
BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀
疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的。
2 HTML与JavaScript结合方式
使用js的三种方式
2.1 行内脚本
<button onclick="alert('弹框测试')">点我一下</button>
2.2 内部脚本
- 使用
- 标准是写在head和body之间（脖子位置），但其实只要写在html文件内部就可以，无论什么位置外，内部，都可以。
<body>
<script>
alert("弹框");
</script>
</body>
2.3 外部脚本
- 在项目根目录下创建一个目录js
- 在js目录中创建一个文件，后缀名是.js
- 在html页面中，使用
<script src="js/xx.js"></script>
以上使用脚本的三种方式的优先级，谁在上，谁先执行。因为是解释性语言。
3 JavaScript的使用
3.1 变量
因为js是弱类型语言，所以，在定义变量的时候，所有的数据类型都是var
数值类型：number
不区分整型数值和浮点型数值
所有数字都采用 64 位浮点格式存储，类似于double 格式
字符串：string
首尾由单引号或双引号括起
布尔类型：
仅有两个值：true和false也代表1和0
实际运算中true=1,false=0
3.1.1 自动类型转换
数字 + 字符串：数字转换为字符串 10+’a’ -> 10a
数字 + 布尔值：true转换为1，false转换为0 true+5->6
字符串 + 布尔值：布尔值转换为字符串true或false true+’a’->truea
布尔值 + 布尔值：布尔值转换为数值1或0 true+true->2
3.1.2 数据类型转换函数
parseInt：强制转换成整数
如果不能转换，则返回 NaN （NaN 属性是代表非数字值的特殊 值。该属性用于指示某个值不是数字）
例如：parseInt(“6.32”)=6
parseFloat：强制转换成浮点数
如果不能转换，则返回 NaN
例如：parseFloat(“6.32”)=6.32
typeof：查询数值当前类型，返回 string / number / boolean / object
例如：typeof(“test”+3)==“string”
3.1.3 null与undefined
null 在程序中代表“无值”或者“无对象”
可以通过给一个变量赋值 null 来清除变量的内容
undefined
声明了变量但从未赋值或者对象属性不存在
3.1.4 算术运算
加(＋)、 减(－)、 乘( * ) 、除( / ) 、余数( % )
递增( ++ ) 、递减( – )
3.1.5 关系运算
严格相等：===
类型相同
数值相同
非严格相等：==
3.1.6 逻辑运算
逻辑非（!）、逻辑与（&&）、逻辑或（||）
3.1.7 控制语句
if (表达式1) {
// 语句1;
}else if (表达式2){
// 语句2;
}else if (表达式3){
// 语句3;
} else{
// 语句4;
}
switch (表达式) {
case 值1:
// 语句1;
break;
case 值2:
// 语句2;
break;
default:
// 语句4;
}
for (var i=1 ; i<=5 ; i++){
alert(i);
}
3.2 常用字符串API
| 方法 | 功能 |
|---|---|
| length | 获取字符串的长度（字符串中字符的个数） 属性，没有小括号 |
| toUpperCase/toLowerCase | 转大小写 |
| charAt(下标) | 返回某个下标上的字符 |
| indexof(字符) | 查找字符串中字符出现的首次下标 |
| lastIndexof(字符) | 查找字符串中字符最后一次出现的下标 |
| substring(开始,结束) | 截取字符串中一部分（结束是不包含的） |
| replace(旧的,新的) | 将字符串中的旧字符替换成新字符 |
| split(分割的节点) | 一个字符串切割成N个小字符串，所以返回的是数组类型 |
3.3 数组
3.3.1 初始化数组
// 第一种
var arr1 = new Array();
arr1[0] = 110;
arr1[1] = 119;
arr1[2] = 120;
// 第二种
var arr1 = new Array(10,"a",true);
// 第三种
var arr1 = [10,"a",true];
for (var i = 0; i < arr1.length; i++) {
console.log(arr1[i]);
}
3.3.2 数组常用方法
| 方法 | 功能 |
|---|---|
| tostring() | 将数组转换成字符串 |
| join(连接符号) | 将数组中的每个元素用连接符号连接成一个新的字符串。 |
| concat(新元素) | 将原来的数组连接新元素，原数组不变。 |
| slice(开始，结束) | 在数组中提取一部分，形成新的数组。 |
| reverse() | 数组的反转（倒序） |
| sort() | 字符排序（不会按照字面量的大小） |
| sort(func) | 数字排序（会按照字面量的大小） |
var arr = [31,12,111,444];
arr.sort( laosun ); // 数字排序（会按照字面量的大小）
console.log( arr );
// 定义排序函数
function laosun(a,b){
return a-b;
}
3.4 Math数学对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p4mIRIX5-1611817901999)(JavaScript.assets/math.png)]
3.5 Number对象
Number.fixed(2); 自带四舍五入技能
var n = new Number( 12.345 );
var n1 = n.toFixed(2); // 12.35，固定两位小数，第三位小数四舍五入
console.log( n1 );
var x = new Number( 12.3 );
var n2 = x.toFixed(2); // 12.30，固定两位小数，位数不够，0来补齐
console.log( n2 );
3.6 正则表达式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FpDEI1Xt-1611817902000)(JavaScript.assets/reg.png)]
// 方式1
var age = "18"; // 判断：1-3位纯数字
var reg = /^\d{1,3}$/; // 以/^开始，中间写正则内容，以$/结束
var b = reg.test(age); // 验证age变量的是否符合reg的匹配
if (b == true) {
console.log("验证通过！");
} else {
console.log("格式错误");
}
// 方式2
var name = "abc123"; // 大小写字母和数字的组合（特殊字符不能出现）, 5~8位
var reg = new RegExp("^[a-zA-Z0-9]{5,8}$"); // 以^开始，中间写正则内容，以$结束
if (reg.test(name)) {
console.log("验证通过！");
} else {
console.log("格式错误");
}
3.7 日期对象
var time = new Date();
console.log( time ); // Tue Jul 14 2020 11:09:46 GMT+0800 (中国标准时间)
var year = time.getFullYear(); // 年份
var month = time.getMonth() + 1; //月份从0开始，11结束，所以国内习惯要+1
var day = time.getDate(); // 几号
var hour = time.getHours(); // 几点
var mm = time.getMinutes(); // 分钟
var s = time.getSeconds(); //秒
var ms = time.getMilliseconds(); // 毫秒， 1000毫秒 = 1秒
var timestr = year+"年"+month+"月"+day+"号 "+hour+"点"+mm+"分"+s+"秒"+ms+"毫秒";
console.log( timestr );
3.8 函数
使用关键字 function 定义函数
function 函数名( 形参列表 ){
// 函数体
return 返回值;
}
函数声明后不会立即执行，会在我们需要的时候调用到。
形参：一定不要带数据类型
分号是用来分隔可执行JavaScript语句。 由于函数声明不是一个可执行语句，所以不以分号结束。
3.8.1 构造函数
函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
console.log(x);
3.8.2 匿名函数
var fn = function(a, b) {// 没有名字的函数，应该用一个变量来接收
return a * 10 + b;
};
console.log( fn(3, 4) );
3.8.3 全局函数
| 方法 | 功能 |
|---|---|
| isNaN | 检查其参数是否是非数字值 |
| eval | 用来转换字符串中的运算 |
| encodeURI | 转码 |
| decodeURI | 解码 |
3.8.4 闭包
1、闭包的概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数。
2、闭包的作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理；
简单地说：就是在函数的局部范围内声明一个封闭的环境，此环境不会被垃圾回收探测到。保证了数据
的安全唯一性
全局变量，声明的时候可以不使用var
用var声明，并且在函数的内部。这样的变量叫做局部变量，有效范围只能在其声明的函数内部
function test1(){
var count = 0; //局部变量
function jia(){
return count+=1;
}
return jia;
}
var fn = test1(); // fn => function jia(){return count+=1; }
fn();
fn();
console.log( fn() ); // 每次调用方法，首先就是将变量还原为0
闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不 受外界干扰。
直观的说就是形成一个不销毁的栈环境。
闭包的优点： 方便调用上下文中声明的局部变量逻辑紧密，可以在一个函数中再创建个函数，避免了传参的问题
闭包的缺点： 因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭包就会造成内存泄露，内存消耗很大
3.9 弹框和输出
普通弹框 alert(“hello，拉勾”);
控制台日志输出 console.log(“谷歌浏览器按F12进入控制台”);
页面输出 document.write(“
我爱你中国
”); 将元素输出到中
确认框 confirm(“确定删除吗？”);
输入框 prompt(“请输入姓名：”);
4 DOM操作
每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找到这个标签元素。
<html>
<head>
<meta charset="utf-8">
<title>DOM 教程</title>
</head>
<body>
<h1>第一节：HTML DOM</h1>
<p>Hello world!</p>
</body>
</html>
<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点
<html> 节点拥有两个子节点：<head> 和 <body>
<head> 节点拥有两个子节点：<meta> 与 <title> 节点
<title> 节点也拥有一个子节点：文本节点 "DOM 教程"<h1> 和 <p> 节点是同胞节点，同时也是<body> 的子节点
<head> 元素是 <html> 元素的首个子节点
<body> 元素是 <html> 元素的最后一个子节点
<h1> 元素是 <body> 元素的首个子节点
<p> 元素是 <body> 元素的最后一个子节点
4.1 DOM访问
| 方法 | 功能 |
|---|---|
| document.getElementById | 通过id属性获得元素节点对象 |
| document.getElementsByName | 通过name属性获得元素节点对象集 |
| document.getElementsByTagName | 通过标签名称获得元素节点对象集 |
<body>
<form action="xxx" onsubmit="return login()">
<p>帐号：<input id="username"/></p>
<p>电话：<input id="phone"/></p>
<p><button>登录</button></p>
</form>
<script>
function login() {
var name = document.getElementById("username").value ;
if(name == ""){
alert("帐号不能为空！");
return false; // 阻止表单的提交
}
return true; // 放行，让表单提交
}
</script>
</body>
4.2 DOM修改
修改 HTML DOM 意味着许多不同的方面：
改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）
-
改变一个
元素的 HTML 内容 :
<body> <button onclick="test()">点我试试</button> <script> function test(){ document.getElementById("hello").innerHTML = "走哇，喝点去~！"; } </script> <h2 id="hello">你好！</h2> </body>
4.2.1 添加、删除、替换节点
<body>
<button onclick="add()">添加</button>
<div></div>
<script>
//点击按钮，在页面中创建一张图片
function add(){
var img = document.createElement("img"); // <img>
img.setAttribute("src","../lagou-html/img/cat.gif"); // <img src="../lagou-html/img/cat.gif">
img.setAttribute("title","小猫咪"); // <img src="../lagouhtml/
img/cat.gif" title="小猫咪">
img.setAttribute("id","cat"); // <img src="../lagouhtml/img/cat.gif" title="小猫咪" id="cat">
var divs = document.getElementsByTagName("div");
divs[0].appendChild(img);
}
//点击按钮，把上面刚创建的图片从页面上删除
function del(){
var img = document.getElementById("cat");
img.parentNode.removeChild(img); // 必须通过父节点，才能删除子节点
}
//点击按钮，把上面刚创建的图片替换成另一张
function rep(){
var imgold = document.getElementById("cat");
// 通过修改元素的属性，做的替换
// img.setAttribute("src","../lagou-html/img/2.jpg");
var imgnew = document.createElement("img");
imgnew.setAttribute("src","../lagou-html/img/1.jpg");
imgold.parentNode.replaceChild( imgnew, imgold );
}
</script>
</body>
4.3 事件
HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时
4.3.1 窗口事件
仅在 body 和 frameset 元素中有效。
onload 当文档被载入时执行脚本
<body onload="test()">
<script>
function test() {
document.write("哈哈哈哈");
}
</script>
</body>
4.3.2 表单元素时间
仅在表单元素中有效。
onblur 当元素失去焦点时执行脚本
onfocus 当元素获得焦点时执行脚本
4.3.3 鼠标事件
onclick 当鼠标被单击时执行脚本
ondblclick 当鼠标被双击时执行脚本
onmouseout 当鼠标指针移出某元素时执行脚本
onmouseover 当鼠标指针悬停于某元素之上时执行脚本
4.3.4 键盘事件
onkeydown 按下去
onkeyup 弹上来
<script>
window.onkeydown = function(){
// event：事件源（按键）
// console.log( "按键编码："+event.keyCode );
if(event.keyCode == "13"){ // 回车键
alert("登录成功！");
}
}
window.onkeyup = function(){
console.log(event.keyCode); // 按住按键不松手是不会触发的。当松手时，按键回弹则触发
}
</script>
4.3.5 事件冒泡
创建两个div，一个大一些，一个小一些
<style>
#father{
width: 200px;
height:200px;
background: black;
padding: 10px;
}
#child{
width: 100px;
height:100px;
background: white;
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
<script>
// 代码不重要，重要是知道这个事件发生，是正常现象
document.getElementById("father").addEventListener("click", function() {
alert("父级元素的事件被触发：" + this.id);
});
document.getElementById("child").addEventListener("click", function(e) {
e.stopPropagation() //取消事件的冒泡机制
alert("子级元素的事件被触发：" + this.id);
});
</script>
</body>
先子，后父。事件的触发顺序***自内向外***，这就是事件冒泡；
4.3.6 事件捕获
<style>
#father{
width: 200px;
height:200px;
background: black;
padding: 10px;
}
#child{
width: 100px;
height:100px;
background: white;
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
<script>
// 代码不重要，重要是知道这个事件发生，是正常现象
document.getElementById("father").addEventListener("click", function() {
alert("父级：" + this.id);
},true);
document.getElementById("child").addEventListener("click", function(e) {
alert("子级：" + this.id);
},ture);
</script>
</body>
4.4 面向对象OOP
使用Object创建通用对象
<script>
//使用Object创建通用对象
var user = new Object();
user.name = "吕布";
user.age = 21;
user.say = function(){
console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！");
}
user.say();
var dog = new Object();
dog.nickname = "屎尿多";
dog.wang = function(){
console.log("我饿了，我要拆家了！");
}
dog.wang();
//使用构造函数
function userinfo(name , age){
this.name = name;
this.age = age;
this.say = function(){
console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！");
}
}
var user = new userinfo("詹姆斯",35);
user.say();
//使用直接量
var user = {
username : "孙悟空",
age : 527,
say : function(){
console.log("大家好，我叫："+this.username+"，我今年"+this.age+"岁了！");
}
};
user.say();
</script>
4.5 JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
<script>
var json1 = { username: "吕布", age: 31 };
console.log("姓名：" + json1.username + "，年龄：" + json1.age + "岁");
// json数组
var josnarr = [{ name: "貂蝉", age: 18 }, { name: "小乔", age: 17 }];
console.log("貂蝉" + josnarr[0].age + "岁了");
console.log("小乔" + josnarr[1].age + "岁了");
// 复杂的json对象
var long = {
name: "赵云",
sex: "男",
hobby: ["玉兰白龙驹", "龙胆亮银枪", "青釭剑"]
};
console.log(long.name + "的主攻武器：" + long.hobby[1]);
</script>
5 BOM操作
5.1 window对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4KTuoSKW-1611817902001)(JavaScript.assets/JavaScript详解.jpg)]
5.1.1 screen屏幕对象
获取屏幕的宽：window.screen.width
5.1.2 location定位
包含有关当前 URL 的信息，通常用来做页面跳转
<button onclick="test()">测试</button>
<script>
function test(){
console.log( "当前页面的URL路径地址："+ location.href );
location.reload(); // 重新加载当前页面（刷新）
location.href = "http://lagou.com"; // 跳转页面
}
</script>
5.1.3 history浏览器历史
history对象会记录浏览器的痕迹
//a.html
<a href="b.html">去b页面</a>
//b.html
<button onclick="hui()">返回</button>
<script>
function hui(){
//history.go(-1); //上一级页面
history.back(); // 与go(-1)是等价的
}
</script>
5.1.4 navigator导航
window.navigator 对象包含有关访问者浏览器的信息;
<script>
var str = "";
str += "<p>浏览器的代号："+ navigator.appCodeName +"</p>";
str += "<p>浏览器的名称："+ navigator.appName+"</p>";
str += "<p>浏览器的版本："+ navigator.appVersion+"</p>";
str += "<p>硬件平台："+ navigator.platform+"</p>";
str += "<p>用户代理："+ navigator.userAgent +"</p>";
str += "<p>启用Cookies："+navigator.cookieEnabled+"</p>";
document.write(str);
</script>
5.1.5 存储对象
本地存储 localStorage
在关闭窗口或标签页之后将会删除这些数据
//保存数据
localStorage.setItem("name","curry");
//提取数据
localStorage.getItem("name");
//删除数据
localStorage.removeItem("name");
多样化操作
// 三种方式保存数据
localStorage["a"] = 1;
localStorage.b = 2;
localStorage.setItem("c",3);
// 查看数据类型
console.log( typeof localStorage["a"] )
console.log( typeof localStorage["b"] )
console.log( typeof localStorage["c"] )
// 第一种方式读取
var a = localStorage.a;
console.log(a);
// 第二种方式读取
var b = localStorage["b"];
console.log(b);
// 第三种方式读取
var c = localStorage.getItem("c");
console.log(c);
会话存储 sessionStorage
会话，就是保持浏览器别关闭。
关闭浏览就等于结束了一次会话。
开启浏览器就意味着创建了一次会话。
//保存数据
sessionStorage.setItem("name", "klay");
//提取数据
var lastname = sessionStorage.getItem("name");
//删除指定键的数据
sessionStorage.removeItem("name");
//删除所有数据
sessionStorage.clear();
//记录点了几下按钮
<button onclick="dian()">点我</button>
<h3 id="result"></h3>
<script>
function dian(){
if( sessionStorage.getItem("clickCount") ){
sessionStorage.setItem("clickCount",
Number(sessionStorage.getItem("clickCount")) + 1);
}else{
sessionStorage.setItem("clickCount", 1);
}
document.getElementById("result").innerHTML = "已经点击了"+
sessionStorage.getItem("clickCount") +"次！"
}
</script>
5.2 计时操作
5.2.1 周期性定时器 setInterval
setInterval(1,2)：周期性触发代码exp （常用）
1：执行语句
2：时间周期，单位为毫秒
//字体变色
<body>
<h1 id="title">拉勾网：极速入职</h1>
<script>
var colors = ["red","blue","yellow","pink","orange","black"];
var i = 0;
function bian(){
document.getElementById("title").style.color = colors[i++];
if(i == colors.length){
i = 0; // 颜色重新开始
}
}
setInterval(bian,100); // 每隔0.1秒，执行一次bian函数
</script>
</body>
5.2.2 停止定时器 clearInterval
//年会抽奖
<body>
<img id="tu" src="../lagou-html/img/1.jpg" width="50%" />
<br />
<button onclick="begin()">开始</button>
<button onclick="stop()">停止</button>
<script>
var arr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
function begin() {
timer = setInterval(bian, 100); // 没有使用var，所以timer是全局变量
}
function stop() {
clearInterval(timer); // 停止定时器
}
function bian() {
var i = Math.floor(Math.random() * arr.length); // 0-4
document.getElementById("tu").src = "../lagou-html/img/" + arr[i];
}
</script>
</body>
5.2.3 一次性定时器 setTimeout
相当于延迟的效果，只执行一次
<script>
function bian(){
document.body.style.backgroundColor = "red";
}
//3秒之后调用
setTimeout(bian,3000);
</script>
会抽奖
开始 停止 ```
5.2.3 一次性定时器 setTimeout
相当于延迟的效果，只执行一次
<script>
function bian(){
document.body.style.backgroundColor = "red";
}
//3秒之后调用
setTimeout(bian,3000);
</script>
161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
