内容输出来源:拉钩教育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>
会抽奖
![](../lagou-html/img/1.jpg)
开始 停止 ```
5.2.3 一次性定时器 setTimeout
相当于延迟的效果,只执行一次
<script>
function bian(){
document.body.style.backgroundColor = "red";
}
//3秒之后调用
setTimeout(bian,3000);
</script>