JavaScript代码
JavaScript代码
JavaScript的组成
ECMAScript 一种由Ecma国际通过ECMA-262标准化的脚本程序化设计语言。
BOM 提供浏览器交互的方法和接口
DOM 提供访问和操作网页内容的方法和接口
1.所有js代码必须写在script标签里，结尾必须带英文的分号(;)
2.为了代码规范，script标签都是写在head标签中。
3.可以引入多个script标签，多个script标签之间，顺序执行。
4.js可以外部引入，src引入外部文本
5.如果script标签作用引入外部文件，这个标签就不能再写代码了。
<script type="text/javascript">
//这里写js代码，将script标签写在head标签里面。
<script>
<script type="text/javascript" src="js代码文件绝对路径"></script> 导入外部js代码
< 是" < " > 是" > "
//单行注释，/*多行注释*/
js数据类型分为两大类
1.基本数据类型
<1>数字(整数，浮点数float) number 100 3.14
<2>字符型 string 所有带双引号/单引号 "hell" 'hello'
<3>布尔值 Boolean true false
<4>特殊数据类型 null空 undefined未声明 NaN非数值性
2.复合数据类型
<1>Object 对象
<2>array 数值
<2>function 函数
变量
1.声明变量 通过关键字(系统定义又特殊功能的单词)var
<1>声明变量的时候，同时给变量赋值，叫做初始化。
2.可以同时定义多个变量，变量之间要使用逗号隔开。
标识符用户自定义所有名字叫做标识符。变量名规律：
1.必须是由数字、字母、下划线和美元符组成。
2.不能以数字开头。
3. 标识符区分大小写，age和Age这是两个变量。
4.标识符必须见名思意，取有意义的变量名。
5.js是弱语言，赋值是什么类型，就是什么类型。不要在后续代码修改改变量的数据类型，否则容易出错。
运算符
算术运算符：
加(+) 减(-) 除(/) 乘(*) (%)取模一两个数相除的余数 (++)自加1(一元运算) (--)自减1
注意：任何数据类型和字符类型的数据相加(+)其他数据类型会自动转换为字符串类型，此时的相加不再是数学意义上相加，而是"拼接"的意思。
任何其他数据类型除了字符串类型做相加操作外，与数字类型做运算都会自动转换成数字，再运算。
复合赋值运算符：+= *= /= %= 例：tmp+=10; //tnp=tmp+10;
关系运算符：
//用于进行比较的运算符称作为关系运算符：小于（<）、大于（>）、小于等于（<=）、大于等于（=）、相等（==）、不等（=）、全等（恒等）（===）、不全等（不恒等）（l==）
注：1.如果两个都是字符串，则比较两个字符对应的ASCII码表。
2.如果有一个是数值，则把另外一个转换成数值，再进行比较。
3.一个操作数为NaN,则==返回false，!=返回true，并且NaN和NaN自身等于
4.在全等和全不等，如果值和类型都相等，才返回true，否则返回false === !==
逻辑运算符： 与(&&) 或(||) 非(!)
JavaScript代码
var age = 18; 声明一个变量
var name="王明",age=18,sex="男"; 同时声明几个变量
alert("Hello world!"); 在页面弹出警告框
alert(typeof name); 输出当前变量或者常量是什么类型
document.write("Hello world!"); 在当前文本输出内容
document.write("<h1>This is a heading</h1>");
var tmp = Boolean(1); 将数字转换为布尔值true 数字0、null、undefined和空字符都为false，其他都为true。
Number("200"); 将字符串转换为数字，布尔值true=1;false=2;非纯数字字符串为NaN
parseInt() 兼容Number，取整
parseFloat() 取浮点数
if（判断条件){
语句代码
}
if（判断条件){
语句代码
}else{
语句代码2
}
if（判断条件){
语句代码
}else if{
语句代码2
}
......
else{
语句代码3
}
switch(表达式){
case 常量1:
语句1
break;
case 常量2:
语句2
break;
case 常量3:
语句3
break;
default:
如果上诉的条件不成立则运行这里的语句;
break;
}
while(表达式){
循环语句;
}
do{
循环语句;
}
while(表达式);
for（表达式1；表达式2；表达式3）{
循环语句；
}
break; 跳出循环
continue;只能在循环语句中使用，使本次循环结束，即跳过循环体中下面尚未执行的语句，接着进行下次是否执行循环的判断
function print(){
函数块;
} //定义一个函数
print(); //调用函数
JS HTML DOM部分：
document.getElementById('myimage') //获得标签的id
getElementsByTagName("p"); //通过标签名查找HTML元素
this.parentNode.className ='cur'; //返回或设置class的属性样式
x.style.color="#ff0000"; //改变样式
err.message //获取报错代码
document.getElementById("p1").innerHTML="New text!"; //改变HTML 内容
document.getElementById("p2").style.color="blue"; //改变css属性
var para=document.createElement("p"); //创建p元素
var node=document.createTextNode("这是新段落。"); //创建文本节点
para.appendChild(node); //向元素添加节点
parent.removeChild(child); //从父元素中删除子元素
child.parentNode.removeChild(child); //找到父元素并删除自己
node.cloneNode(); //克隆标签 注：添加true参数复制全部，默认为false，复制除子标签之外的全部东西。
box.nodeType //返回值1，获得nodeType属性
box.childNodes //获得全部子元素 //兼容性问题 注意：在chrome，IE9 IE10高版本的浏览器里面的回车都认为是节点，IE6，7，8低版本的浏览器不算，高版本浏览需遍历筛选
元素的首个子元素 firstChild
元素的最后一个子元素 lastChild
document.documentElement - 全部文档的节点
document.body - 文档的主体的节点
js的事件：
<button type="button" onclick="alert('Welcome!')">点击这里</button> //点击事件
<body onload=”checkcookies()”> //js进入页面时触发的事件
<body onunload=”checkcookies()”> //js离开页面时触发的事件
<input type=”text” id=”fname” onchange=”uppercase()”> //标签内容改变时触发的事件
onMouseOver="this.innerHTML='鼠标触摸'" //鼠标移到触发的事件
onMouseOut="this.innerHTML='鼠标离开'" //鼠标离开触发的事件
首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
BOM：
window.innerHeight - 浏览器窗口的内部高度 //兼容Internet Explorer、Chrome、Firefox、Opera 以及 Safari
window.innerWidth - 浏览器窗口的内部宽度
document.documentElement.clientHeight //兼容Internet Explorer 8、7、6、5
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
获取浏览器窗口屏幕宽高的兼容性写法：
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
window.open("https://www.baidu.com");//打开新窗口
window.close();//关闭当前页面
window.resizeTo(500,500); //设置当前窗口的尺寸，像素为单位
window.moveTo(500,500); //移动当前窗口
screen.availWidth - 可用的屏幕宽度(不算任务栏)
screen.availHeight - 可用的屏幕高度(不算任务栏)
location.href; //返回当前页面的url
location.pathname; //返回 URL 的路径名
location.assign("https:www.baidu.com"); //加载页面
- history.back() - 与在浏览器点击后退按钮相同
- history.forward() - 与在浏览器中点击按钮向前相同
document.location.href = "新的url"; //跳转到新url
alert("Hello word!"); //提示框
confirm("Hello word!");//带确认按钮的提示框
prompt("Hello",""); //带输入框的提示框
setTimeout(aleart(“Hello”),1000); //暂停1秒运行（计时事件）
clearTimeout(st); 取消暂停
console.log("sss"); //控制台输出内容，一般用于调试
var oDate=new Date();
oDate.setDate(oDate.getDate()+3);
document.cookie = “username=root; expires”+oDate; //设置cookie 并设置三天后到期
ES6基础语法
let的使用： let a=10;
用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
存在块级作用域{}
不存在声明提升
不允许重复声明（包括普通变量和函数参数）
可以使用 `${a}` 的方式调用他
const的使用：
用来声明常量，不要试图改变常量的值，其他语法参照let
set结构
let set=new Set([1，2，3，4，4]);/构造函数，值不重复
[..set] //...扩展运算符，将类数组对象转换以逗号分割的序列for of//遍历
set.size//长度 set.add(0)set.delete(0)set.has(0)set.clear0;keys0:返回键名的遍历器for(let
item of set.keys0){console.log(item);}
values():返回键值的遍历器
entries():返回键值对的遍历器
forEach():使用回调函数遍历每个成员setforEach((value，key)=>console.log(value*2))
map结构
let map=new Map(["name"，"john'"]，["age"，30]]);
map.set(1，1);
map.size//长度
map.set(key，value);map.get(key);map.delete(keywmap.has(key);map.clear();
keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器for(let[key，value]of map.entries0){console.log(key，value);}
forEach()：使用回调函数遍历每个成员map.forEach((value，key)=>console.log(value*2))
生成器函数(generator)
function*foo(x){
yield x+1; //yield的作用和return很像，只是return只能有一次，即代表程序结束，yield可以进行多次 代表暂停
yield x+2;
return x+3;
}
var f=foo(1);
fnext();
类(class)
例: class person(){ //定义一个类
constructor(name){ //定义构造函数，es6新增加
this.name=name;
}
sayHello(){ //定义方法
}
}
js面向对象编程：
function Person(name,age){ //创建一个类
this.name =name; //属性
this.age=age;
this.sayHello = function(){ //方法
alert("this.name");
}
}
var p =new Person(); //生成一个Person的实例
function Student(name ,age,id){
Person.apply(this,[name,age]); //使用apply调用父类的构造函数，指针并指向子类，从而实现继承 第二个参数以数组方式的参数传递给父类
//Person.call(this,name,age); call方法与aooly类似，不过第二参数是以单个参数的方式传递
this.id =id;
}
js原型链继承：
//1. js的原型链属性与方法是用__proto__的方式指向
//2. 想要继承原型链，可以使用Object.create()方法生成一个空的对象指向父类的原型链，从而达到继承
//3.js __proto___指向问题，proto先是指向本身，如果没有则继续往原型的原型上查找，最终到Objcet为止
function Person(name,age){ } //创建一个类
Person.prototype.name =name;
Person.prototype.age=age;
Person.prototype.sayYes() = function{ //使用原型链的方式添加一个方法，同样也可以添加一个原型链的属性
alert("this.name");
}
function Student(name ,age,id){
}
Student.prototype = Object.create(Person.prototype); //生成一个空对象，指向父类的原型类
AJAX
Ajax核心类：XMLHttpRequest
var xhr =new XMLHttpRequest(); //创建ajax对象
xhr.onreadystatechange =function(){
//当xhr对象的readyState属性发生了改变，这个事件就会触发
//readyState：
//0 ===>xhr对象已经创建，但是还没有进行初始化操作
//1===>xhr对象已经调用了open
//2===>xhr已经发出ajax请求
//3===>已经返回了部分数据
//4 ===>数据已经全部返回
xhr.readyState //返回一个数值
}
xhr.status //返回一个状态码 例如：404
xhr.open("get","/test.txt",true); //规定请求的类型 url和同步(false)和异步(true)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //定义HTTP头，用于post提交数据时候定义
xhr.send(); //发送请求
xhr.responseText //获得字符串形式的响应数据。
xhr.responseXML //获得 XML 形式的响应数据。
JSON数据与JS对象的转换
1.JSON→JS： JSON.parse(data)
2.JS→JSON：JSON.stringify(JSObj)
resp.result JSON的返回值
xhr.timeout= 5000; //设置请求超时的时间，单位为毫秒，这里设置为5秒
xhr.ontimeout =function(){
//当延迟生效将会调用本函数，代表ajax请求已经结束
console.log("请求超时，页面加载失败，请刷新重试！");
}
//上传文件的进度回调，上传进度只要发生变化，本函数就会自动执行
upload.onprogress =function(eve){
if(eve.lengthComputable){
//eve.lengthComputable表示文件是否上传进度为100%，默认是true，表示没有100%，进度为100%自动变成false
eve.loaded //表示已经上传
eve.total //表示全部上传的长度
}
}
同源策略：即是两个url域名，协议与端口为一样的相同则表示他们同源，如果有一个不一样则表示他们跨域，一般来说不允许跨域。
解决跨域问题：1.JSONP 2.CORS
