|
.JavaScript介绍
- 虽然是java作为前缀，但java和javascript的关系，就像老婆和老婆饼之间的关系，没有一毛钱关 ！
- 网景公司在Netscape2.0首先推出了JavaScript
- JavaScript 的正式名称是 “ECMAScript”，此标准由 ECMA 组织发展和维护，简称“js”
- JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为
- JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释 执行代码，不进行预编译。
js特点：
- 可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序 （后面会学习不用浏览器也能运 行）
- 解释执行：事先不编译，逐行执行
- 基于对象：内置大量现成对象
- 适宜：
- 客户端数据计算
- 客户端表单合法性验证
- 浏览器事件的触发
- 网页特殊显示效果制作
js的组成：
- ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
- DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每 一个节点。
- BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改 变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀 疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准。
- 弹出新的浏览器窗口
- 移动、关闭浏览器窗口以及调整窗口大小
- 提供 Web 浏览器详细信息的定位对象
- 提供用户屏幕分辨率详细信息的屏幕对象
- 对 cookie 的支持
- IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX对象，进而 实现ajax局部刷新技术
数据类型转换函数：
- parseInt：强制转换成整数
- 如果不能转换，则返回 NaN （NaN 属性是代表非数字值的特殊值。该属性用于指示某个值 不是数字）
- 例如：parseInt("6.32")=6
- parseFloat：强制转换成浮点数
- 如果不能转换，则返回 NaN
- 例如：parseFloat("6.32")=6.32
- typeof：查询数值当前类型，返回 string / number / boolean / object
- 例如：typeof("test"+3)=="string"
常用字符串API：
- length:获取字符串的长度（字符串中字符的个数） 属性，没有小括号
- toUpperCase/toLowerCase :转大小写
- charAt(下标) ： 返回某个下标上的字符
- indexof(字符)：查找字符串中字符出现的首次下标
- lastIndexof(字符)：查找字符串中字符最后一次出现的下标
- substring(开始,结束)：截取字符串中一部分（结束是不包含的）
- replace(旧的,新的)：将字符串中的旧字符替换成新字符
- split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型
数组的常用方法：
- tostring()：将数组转换成字符串
- join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串。
- concat(新元素)：将原来的数组连接新元素，原数组不变。
- slice(开始，结束)：在数组中提取一部分，形成新的数组。
- reverse()：数组的反转（倒序）
- sort()：数组排序
Math数学对象：
- Math 对象用于执行数学任务
- 没有构造函数 Math()
- 无需创建，直接把 Math 作为对象使用就可以调用其所有属性和方法
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 );
正则表达式：
对字符串执行模式匹配的强大工具
var reg1 = /^\d{3,6}$/; // 匹配纯数字3-6个
var reg2 = new RegExp(“^\\d{3,6}$");
// 方式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("格式错误");
}
日期对象：
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 );
参数对象：
在函数内部，调用参数列表的属性
function func(a,b,c){
console.log( arguments.length ); // 获得参数的个数
console.log( arguments[1] ); // 获得下标为1的参数
}
构造函数：
函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
console.log(x);
匿名函数
没有名称的函数
var fn = function(a, b) {// 没有名字的函数，应该用一个变量来接收
return a * 10 + b;
};
console.log( fn(3, 4) );
全局函数：
- sNaN：检查其参数是否是非数字值
- eval：用来转换字符串中的运算
- encodeURI转码 与 decodeURI解码
var name = "你好";
console.log( "转码前：" + name );
name = encodeURI(name);
console.log( "转码后：" + name );
name = decodeURI(name);
console.log( "解码后：" + name );
DOM访问：
- getElementById：通过id属性获得元素节点对象
- getElementsByName：通过name属性获得元素节点对象集
- getElementsByTagName：通过标签名称获得元素节点对象集
添加删除替换节点：
<body>
<button onclick="add()">添加</button>
<button onclick="del()">删除</button>
<button onclick="rep()">替换</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>
事件：
- 窗口事件（仅在 body 和 frameset 元素中有效。）
- 表单元素事件（仅在表单元素中有效。）
- onblur 当元素失去焦点时执行脚本
- onfocus 当元素获得焦点时执行脚本
- 鼠标事件
- onclick 当鼠标被单击时执行脚本
- ondblclick 当鼠标被双击时执行脚本
- onmouseout 当鼠标指针移出某元素时执行脚本
- onmouseover 当鼠标指针悬停于某元素之上时执行脚本
- 键盘事件
- 事件冒泡
- 先子，后父。事件的触发顺序*自内向外*，这就是事件冒泡；
- 创建两个div，一个大一些，一个小一些
<style>
#father {
width: 200px;
height: 200px;
background: black;
padding: 10px;
}
#child {
width: 100px;
height: 100px;
background: greenyellow;
}
</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>
- 事件捕获
- 先父,后子。事件触发顺序变更为*自外向内*，这就是事件捕获；
- 还是刚才创建两个div，一个大一些，一个小一些
<style>
#father {
width: 200px;
height: 200px;
background: black;
padding: 10px;
}
#child {
width: 100px;
height: 100px;
background: greenyellow;
}
</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(){
alert("子级：" + this.id);
},true);
</script>
</body>
BOM操作（就是javascript对浏览器的一些常规操作的方法）
<button onclick="kai()">极速入职</button>
<script>
function kai(){
window.open("http://lagou.com" , "拉勾网" ,"width=500,height=300,left=400");
// window.open("http://lagou.com" , "拉勾网" , "fullscreen=yes"); // IE才生效
}
</script>
- screen屏幕对象（我想知道我的电脑屏幕多大？实际上，得到的就是分辨率）
<body>
<button onclick="kai()">求大小</button>
</body>
<script>
function kai() {
alert(window.screen.width + "|" + window.screen.height);
}
</script>
- 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>
储存对象：
//保存数据：
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>
计时操作
- 周期性定时器 setInterval
- setInterval(1,2)：周期性触发代码exp （常用）
<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; // 颜色重新开始
}
}
function time(){
var d = new Date();
var str = d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"号"+d.getHours()+"点"+d.getMinutes()+"分"+d.getSeconds()+"秒";
document.getElementById("title").innerHTML = str;
}
setInterval(bian,100); // 每隔0.1秒，执行一次bian函数
setInterval(time,1000); // 每隔1秒，执行一次时间函数time
</script>
</body>
<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>
- 一次性定时器 setTimeout(相当于延迟的效果，只执行一次)
<script>
function bian(){
document.body.style.backgroundColor = "red";
}
//3秒之后调用
setTimeout(bian,3000);
</script>
| 
转播
