js引入方式：
1、嵌入js的方式：直接在页内的script标签内书写js功能代码。
<script type="text/javascript">alert('hello')</script>
2、外联式引入js：以相对路径的方式引入本地js文件，实现H5、CSS、JS分离。
<script type="text/javascript" src="hello.js"></script>
js变量和数据类型：
五种基本数据类型：number 、string 、boolean 、undefined 、null
一种符合类型：object对象
定义变量：使用var关键字，区分大小写。
变量定义规范：首字符为字母、下划线、美元符号，其他字符可为这些和数字。
var a = 123;
使用js操作属性：
<script type="text/javascript">
window.onload = function(){
//通过获取一个标签的id来联系标签
var oDiv = document.getElementById('div1');
var oInput01 = document.getElementById('input01');
var aLi = documentsgetElementsByTagName('li');//获取一组标签，使用时可通过下标确定具体使用哪一个
//对目标标签进行style属性重写
oDiv.style.color = 'red';
aLi[2].style.backgroundColor = 'blue';
var val01 = oInput01.value; //获取输入框内的值
9 oDiv.className = 'box02'; //操作类属性，注意class写法要写成className
10 oDiv.href = '1.css'; //为其引入新的样式文件
11 }
12</script>
js操作属性时的属性写法和H5里的写法基本一样，“class”的属性写成"className"，style里边的属性有横杠的font-size写成style.fontSize。
还可以使用方括号来操作属性：oDiv.style[attr] = 'red';
以上function(){ } 就是js的函数书写形式。
自定义函数时写为：function change02(){ oDiv.className = 'sty02'; }
函数中可以使用return返回函数结果，也可以只使用一个单纯的return结束函数运行。
window.onload会使页面加载完后再加载其中的内容，注意写代码时的顺序。
匿名函数：
oDiv.onclick = myalert;
function myalert(){
alert('hello!');
} /*匿名函数简化代码，优化步骤
将上述代码改写成匿名函数的形式。*/ oDiv.onclick = function (){
alert('hello!');
}
函数传参：
changestyle('fontSize','50px');
function changestyle(styl,val){//会被预解析哦
oDiv.style[styl] = val;
}
这样会将函数中的fontsize传给styl，将50px传给val。
JS中的函数预解析：
alert(a); //不会报错但是会弹出undefined,相当于已声明未赋值。
//alert(c);开发工具里会报错(c没有声明)
var a = 123; myalert();//在定义函数前使用函数不会弹出undefine，因为js会将函数预解析。 function myalert(){
alert('hello!');
}
js加载时遇到函数，会将函数的声明和定义全部提前，因此可以在函数定义的前面调用函数。
函数中的条件语句格式：if{ }，多重条件语句：if{ } else if { }或switch(true){ case:true:*****;break;default:****;}
函数中的for循环语句：for(初始值;条件;变化值){ *** }；
var aRr = [1,2,3,4,3,4,5,7,4,5,7,3,9,5,6];
var aRr2 = [];
for (var i=0;i<aRr.length;i++) //以整个数组为范围进行循环，实现利用循环达到去重效果
{
if (aRr.indexOf(aRr[i])==i) //通过indexOf返回元素第一次出现的位置来去重
{
aRr2.push(aRr[i]);//将不重复元素放到新的空数组
}
}
函数中变量的作用域：
函数外部定义的变量是全局变量，函数内部定义的变量是局部变量。
全局变量即既可以被函数内部点调用，也可以被函数外部调用。
局部变量只可以被本函数内部调用，不可以被函数外部及其他函数调用。
全局变量一直放在内存里，不会被回收，只有本页面关闭或程序结束才会被回收。
函数内部在访问变量时，先从内部开始查找变量信息，如果有，使用内部变量，如果无，使用外部全局变量，外部再无，显示错误信息。
封闭函数：
(function(){
var str = '欢迎访问我的主页！';
alert(str);
})();//后边又加了括号，就是封闭函数自执行。
封闭函数定义：(function(){。。。})()；
封闭函数的匿名函数减少了函数名避免了冲突的可能，且变量不会污染到全局。
函数闭包：
function aa(b){
var a = 12;
function bb(){
alert(a);
alert(b);
}
return bb;
}
var cc = aa(24);//这个全部变量aa函数进行关联，导致aa函数包含的函数和变量都不会被回收
cc();
将24传给aa函数的形参b，闭包函数bb拿aa的形参b代入到自己的函数体的实参b。
闭包其实就是函数嵌套函数，可用来存储环索引值和私有变量计数器。
内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制回收。
因为让闭包和外部一个函数进行关联，把它赋值给一个外部变量，外部变量不会被回收，因此闭包的参数和变量也不会被回收。
模拟登录过程：
//1、存储跳转的源页面
var backurl = document.referrer;
//document.referrer是获取上一个跳转页面的地址(需要服务器环境) //2、处理中间的登录逻辑，如果成功 //3、跳转
window.location.href = backurl;
//window.location.href获取或重定url地址 <a href="http://www.baidu.com">百度</a>
JS中的数组操作：
创建数组：var aRr1 = new Array(1,2,3,'abc')或 var aRr2=[1,2,3,'abc']多维数组使用嵌套[ [数组1]，[数组2]，[数组3] ]；
求数组长度：aRr.length
获取数组下标元素：aRr.[n] aRr1.[n][n]
拼接字符串：sTr = aRr.join("-") 使用-隔开元素,拼接结果为数组类型。
从末尾追加元素：aRr.push(val)
删除末尾元素：aRr.pop()
从头部插入元素：aRr.unshift(0)
删除头部元素：aRr.shift()
反转元素：aRr.reverse()
返回元素第一次出现的位置：aRr.indexOf(val)
从第n个元素开始删除m个元素，含n：aRr.splice(n,m)
删除完后从删除位置再补充进去几个元素：aRr.splice(n,m,'val1','val2',.........)
JS中的数值和字符串操作：
执行+运算时，若两个变量都为数值，按正常数学运算执行，若有一个变量的数字是字符串类型，运算时按拼接字符串运算执行。
数值运算可将字符型数字转换成数值行：parseInt(sTr) parseFloat(sTr)，
数值运算中有个Math对象，使用Math.random()可获取随机数，math对象的更多用法查看文档。
字符串的第n个字符：sTr.charAt(0)
获取字符串中某个字符的下标位置：sTr.indexOf( 'str' )，没有时返回-1；
截取字符串中位置为n到m的元素:sTr.substring(n，m)，前包后不包，后不写默认到尾;
转大写：sTr.toUpperCase();
转小写：sTr.toLowerCase();
数值运算返回的NaN：
NaN即Not a Number，
数字字符混合的情况下转换为数值时，开头就是字符的转换结果为NaN，开头是数字的只转换出数字部分，字符之后去除。
使用isNaN判断字符型数字时，返回false，不严谨。
简易计算器案例：
window.onload = function(){
var oInput01 = document.getElementById('input01');
var oInput02 = document.getElementById('input02');
var oBtn = document.getElementById('btn');
var oFuhao = document.getElementById('fuhao');
oBtn.onclick = function(){
var num01 = oInput01.value;
var num02 = oInput02.value;
var fuhao = oFuhao.value;
if (num01=="" || num02=="") {
alert('输入框不能为空1');
return;
}
if (isNaN(num01) || isNaN(num02)) {
alert('请输入一个数字！');
return;
}
switch(fuhao){
case 'add': //这里没有隐式转换，若有数字用‘数字’的字符串方式。
alert((parseFloat(num01)*100+parseFloat(num02)*100)/100);
break;
case 'subtract':
alert((parseFloat(num01)*100-parseFloat(num02)*100)/100);
break;
case 'multiply':
alert(((parseFloat(num01)*100)*(parseFloat(num02)*100))/10000);
break;
case 'divide':
alert(((parseFloat(num01)*100)/(parseFloat(num02)*100))/10000);
break;
}
}
}
<h1>计算器</h1>
<input type="text" name="" id="input01">
<select id="fuhao">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">*</option>
<option value="divide">/</option>
</select>
<input type="text" name="" id="input02">
<input type="button" name="" value="点击计算" id="btn">
定时器及其基本使用：
定时器一般用来制作动画、异步操作、函数缓冲与节流。
var timer = setTimeout(function(){//3秒后弹出hello！，一次性定时器
alert('hello！');
},3000);
clearTimeout(timer); //关掉一次性定时器
var timer2 = setInterval(function(){//反复执行定时器
alert('hi!');
},2000);
clearInterval(timer2);//关闭反复执行的定时器
倒计时案例：
使用定时器做倒计时，实现前端自动下线倒计时。
window.onload = function(){
var oDiv = document.getElementById('div1');
//实际开发中，时间从服务器获取
function timeleft(){
var now = new Date();//获取时间戳
var future = new Date(2019,11,7,15,28,0);//创建一个日期
var lefts = parseInt((future-now)/1000);//做时差并换算成秒
var day = parseInt(lefts/86400);//将秒换算成天
var hour = parseInt((lefts%86400)/3600);//将秒换算成时
var minute = parseInt(((lefts%86400)%3600)/60);//将秒换算成分
var second = lefts%60;
if (lefts<=0) {//(前端下线)倒计时结束后进入百度界面，且再访问不到原倒计时界面。
window.location.href ="http://www.baidu.com";
}
oDiv.innerHTML = '距离2019年11月20日晚24：00还有'+
day+'天'+hour+'时'+minute+'分'+second+'秒';
}
timeleft();
setInterval(timeleft,1000);
}
倒计时结束后本页面下线，之后再访问本页面显示的都是指定的百度页面。