JavaScript
-html搭建网页的结构和内容
-css用于美化页面
-JavaScript 给页面添加动态效果和内容的
JS特点
-js属于脚本语言，不需要编译，由浏览器解析执行。
-js可以嵌入到html代码中。
-js基于面向对象，属于弱型语言。
JS优点
-交互性：可以直接和用户进行交互
-安全性：js语言只能访问浏览器内部的数据，不能访问浏览器外部的内容（电脑磁盘中的各种数据）
如何引入JS代码
1、在元素的事件中书写代码
<input type="button" value="点我试试！" onclick="alert('试试就试试')" >
2、通过Script标签添加js代码
<script type="text/javascript">
alert("第二种引入方式");
</script>
3、把js代码写在单独的js文件中，通过<script>标签的src属性 引入js代码
<script type="text/javascript" src="first.js"></script>
js的数据类型
-数据类型（number）
-字符串类型（string）
-布尔值类型（boolean）
-undefine（未定义）
-对象类型
变量的声明及赋值
-由于js属于弱类型语言，声明变量时不需要指定类型
var x = 18;
var name="小明";
var isBoy=true;
x = "abc";
var m; //此时m的类型为undefined值也为undefined
数值类型
-js中底层都是浮点型，在使用过程中会自动转换整数或小数
int x = 5 / 2; //2
var x = 5 / 2;(2.5) 4/2(2)
NaN:not a number 不是一个数
isNaN()：判断不是一个数，
字符串类型
-通过单引号或者双引号修饰字符串
var s1 = "abc";
var s1 = 'abv';
布尔值类型
var b1 = true;
数据类型转换
var z = "abc"+18;
-任何数字和NaN进行运算结果都为NAN
数值类型
1、数值转字符串：直接转
2、转布尔值：0和NaN转false，其他都转true
-在if括号里的类型如果不是布尔类型会自动转换
字符串类型
1、转数值：能转直接转，不能转转成NaN “100”->100 "abc"->NaN
2、转布尔值：空字符转false，其他转true ""->false "aa"->true
布尔值
1、转数值：true->1 false->0
2、转字符串： true->"true" false->"false"
undefined
1、转数值：undefined->NaN 20+undefined=NaN
2、转字符串：undefined->"undefined"
3、转布尔值:false
null 是对象类型的值
1、转数值：null->0
2、转字符串：null->"null"
3、转布尔值：null->false
JS的运算符
-和Java中的运算符大体相同
1、==和===
==会先将等号两边的变量类型统一，统一完后再比较内容
“66” == 66 true
===会先比较类型是否相同，类型相同时再比较类型
“666”===
666 false
2、两数相除会自动转换小数和整数 5/2=2.5 4/2=2
3、typeof 获取变量的类型
typeof 66 + 6 "number6"
语句
-包括：if else while do while for switch case
-需要布尔值的地方如果不是布尔值会自动转换成布尔值
-for循环中 把 int 改为var，不支持增强型for循环
函数
-第一种
function 函数名（参数列表）{
return ;
}
1、无参无返回
2、无参有返回
3、有参无返回
4、有参有返回
-第二种
var 函数名 = function（参数列表）{
}
和页面元素相关的函数
1、获取页面中的元素对象
var input = document.getElementById("id");
2、为文本元素（文本框）赋值和取值
input.value="abc";//赋值
var s = input.value;//取值
3、给元素添加文本内容
元素对象.innerText=“添加内容”；
4、给元素添加HTML代码
元素对象.innerHTML="<h1>abc</h1>";
String相关api
-创建string的两种方式：
1、var s1 = “abc”；
2、var s2 = new String（"abc"）；
-转大小写：
s1.toUpperCase（）；大写
s1.toLowerCase（）；小写
-获取某个字符串在另一个字符串中出现的位置
str.indexOf("a");//第一次出现的位置
str.lastIndexOf("a");//最后一次出现的位置
-截取字符串：
str.substring(start,[end]);
-替换字符串：(返回一个新的字符串)
str.replace("helleo","helloworld");
-拆分字符串：
var names = "刘德华，张学友，黎明".split(",");
for(var i=0;i<names.length;i++){
var name = names[i];
}
number相关函数
-四舍五入 :toFixed(2) 保留2位小数
var x = 3.1415926;
x.toFixed(3); //3.141
数组
-创建数组的两种方式：
1、var arr1=["刘德华",18,true];
2、var arr2 = new Array("刘德华",18,true);
-数组中添加元素
arr1.push("周杰伦");
-修改数组的长度：
arr2.length=2;
-数组中获取数据：数组下标 没有脚标越界
for(var i=0;i<arr2.length;i++){
var x=arr2[i];
}
-数组反转：reverse();
-数组排序：sort（）：
1、默认排序规则：以字符串的形式进行排序通过Unicode编码比较第一个字符比较完比较第二个字符。
2、数组中保存的对象的话可以通过以下方式排序。
日期相关
-了解服务器时间和客户端时间
1、获取客户端时间
var d1 = new Date();
2、指定时间创建时间对象 通过时间来自服务器时间
var d2= new Date("2018/08/01 18:36:50");
3、获取和设置时间戳（距离1970年1月1日 08:00:00的毫秒数);
d2.getTime(); d2.setTime(1000);
4、从date对象中获取单独的年月日时分秒 星期几
d1.getFullYear();//年
d1.getMonth();//月份需要+1，从0开始
d1.getDate();//号/日
d1.getDay();//星期几
d1.getHours();//时
d1.getMinutes();//分
d1.getSeconds();//秒
5、从date中获取年月日和获取时分秒
d1.toLocaleDateString();//2018/8/31
d1.toLocaleTimeString();//上午11:49:24
正则表达式
- .匹配任意字符
- \w
- \d
- ^
- $
-创建正则的两种形式
1、var reg1 = /规则/模式；
2、var reg2 = new RegExp（规则，模式）//模式可省略
斜杠需要转义
-正则相关的函数
1、reg.exec(str);//查找内容，如果模式为g全局查找，执行一次查询一个
2、reg.test(str);//校验文本
-字符串和正则相关的函数
1、str.match(reg);//查找 返回值为数组
2、str.replace(reg,替换的内容);//查找并替换
创建元素对象
1、声明函数的形式创建对象：
/* function Person(name,age){
this.name=name;
this.age=age;
this.run = function(){
alert("name:"+this.name+",age:"+this.age);
}
}
//创建对象
var p = new Person("张三",18);
//调用对象的方法
p.run();
*/
//创建一个空的Person
function Person(){
}
//创建Person对象
var p = new Person();
//后续给对象添加属性和方法
p.name = "刘备";
p.age = 18;
p.run = function(){
alert("name:"+this.name+",age:"+this.age);
}
//调用方法
// p.run();
2、声明变量的形式创建：
var student = {
"name":"曹操",
"age":28,
"run":function(){
alert("name:"+this.name+",age:"+this.age);
}
}
student.run();
DHTML
-简介：Dynamic（动态）超文本标记语言。这个不是新的技术，只是把所学的HTML，css，js结合到一起实现出来的内容
-DHTML包括：BOM和DOM
-BOM：Browser（浏览器）Object（对象）Model（模型），包含以一部分和浏览器相关的对象，可以获取浏览器的请求地址，历史记录，浏览器窗口尺寸，浏览器版本。
-DOM：Document（文档）Object（对象）Model（模型）
BOM
window
-window里面的对象全称为全局对象，里面的方法称为全局方法。全局对象和方法可以省略掉window
-window中，常用的全局方法：
alert();//提示框
confirm();//确认框
promt();//弹出文本框
parseInt() parseFloat()
-window常用对象：
1、location.href获取和设置浏览器请求地址
2、location.reload()//刷新
-history 历史
1、history.length 得到历史请求页面的数量
2、history.back（）返回上一个页面
3、history.forward()前往下一个页面
4、history.go(num)前往某个页面，0当前页面，1下一个页面，2下两个页面，-1上一个页面
screen 屏幕
1、screen.width/height 得到屏幕的宽高（像素）
2、screen.availWidth/availHeight //屏幕可以宽高
navigator 导航/帮助
1、navigator.userAgent 得到浏览器相关的版本信息
和window相关的事件
- window的点击事件 onclick
-页面加载完成事件 onload
-获取焦点事件 onfocus
-失去焦点事件 onblur
eval()函数
- 可以将字符串以js代码的形式执行
通过js给元素添加css样式
- 通过元素对象.style.样式属性名称 = "属性值";
定时器
- setInterval(函数,时间间隔);
通过标签名查找
var elements = document.getElementsByTagName("input");
定时器
-开启定时器 var timeId = setInterval(函数，时间);
-停止定时器 clearInterval（timeID）;
-setTimeouut(函数，时间) 只执行一次
DOM Document Object Model 文档对象模型
- 学习DOM主要学习的就是对页面当中的元素进行增删改查操作
查找元素
1、通过id查找
var input = document.getElementById("id");
2、通过标签名查找
var divs = document.getElementsByTagName("div");
3、通过标签的name属性查找
var arr = document.getElementsByName("gener");
4、通过标签的class属性查找
var arr = document.getElementsByClassName("");
通过上下级关系获得元素
1、获取元素的上级元素
元素对象.parentElement 得到的是一个上级元素
2、获取元素的下级元素
元素对象.childNodes 得到的是一个数组里面装着多少元素和文本
创建元素
var div = document.createElement("div");
- 添加到某个元素里面
上级元素.appendChild(div); - 添加到某个元素的上面
上级元素.insertBefore(div,弟弟元素);
删除元素
- 父元素.removeChild(被删除的元素);
修改元素的文本内容
innerText()
修改元素内部的HTML
innerHTML()
修改元素的样式
元素对象.style.样式名称="样式值";
事件
onclick点击事件 onload加载完成事件 onfocus获得焦点事件 onblur失去焦点事件
onmouseover鼠标移入事件 onmouseout鼠标失去焦点事件
onchange值改变事件 onsubmit提交事件
鼠标相关事件：onclick onmouseover onmouseout onmousedown鼠标按下事件 onmousemove鼠标移动事件
- 键盘相关事件：onkeydown（键盘按下） onkeyup（键盘抬起）
-状态改变事件：onload（页面加载完毕） onchange（值发送改变）
onbulr
以下代码获取窗口的宽高：
document.body.parentElement.clientHeight
document.body.parentElement.clientWidth
事件绑定
1、在元素中添加事件属性,在事件对应的函数中，this代表window对象
<input onclick="" >
2、通过js代码动态绑定，this代表事件源
mybtn.onclick = function(){
alert("动态绑定成功");
}
event对象
1、event对象中保存着和事件相关的信息
2、通过event可以获得鼠标事件的坐标 event.clientX/Y
3、通过event可以获得键盘事件的字符编码集 event.keyCode
4、通过event可以获得事件源 event.target event.srcElemrnt
var obj = event.target || event.srcElemrnt
事件传递（事件冒泡）
如果在同一个区域有多个事件响应，响应的顺序是类似气泡，从上往下，也就是从底层元素往上级元素执行，这个过程称为事件冒泡
如果某个元素里面有多个元素需要添加事件，则这个事件也可以
