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代码

 

       &lt 是" < "     &gt 是" > "

             

       //单行注释，/*多行注释*/

 

 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 八、七、六、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