介绍

JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等。JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行
JavaScript本来应该叫Livescript，但是在发布前夕，想搭上当时超热的java顺风车，临时把名字改为了JavaScript。结果证明改的是正确的

编译器选择

推荐webstorm
说明：IDA里面不能直接调试，要用浏览器的console

引入方式

内嵌式

使用方便，但不适用大量js代码

    <script>
        alert("123")

    </script>

外链式

最优解

htm中
<script src=”demo.js”></script>
js中
alert(“123”)

行内式

几乎不用
直接书写在标签身上，是一个简写的事件，所以又称之为事件属性。
举例：
onclick单击事件
<input type=”button” value=”点我呀!” onclick=”alert(‘中国移动’);”>
<button onclick=”alert(‘中国联通’);”>点我呀!</button>

注释

单行注释： // 注释语句 快捷键ctrl+/
多行注释： /* 注释语句 */ 快捷键ctrl+shift+/
注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！

基本语法

alert():弹框
console.log()：f12下控制台输出

变量

var 变量名=值
变量名不可以是关键字
命名规则：字母，数字，下划线 数字不能开头
举例
var a=12

let:局部变量
const:常量，不可以变

关键字

变量作用域

局部作用域

函数内的变量

function myFunction() {
    var carName = "Volvo";
}

全局作用域

函数外定义的变量

var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}

数据类型

1. 基本类型：
   数值型（凡是数字都是数值型，不区分整数和小数）:var a=123
   字符串var s=”123″
   布尔boolean（true、false）:var a=true
   未定义型：undefined
   symbol
2. 对象类型:
   对象:var a=new Date()
   数组:var c= [1,2,3];
   函数:var e = function(){alert(123);};
   空:var a=null
   字典：var dict = {‘k1′:”moonsec”,’k2′:’moon’,’age’:18};
   Data时间：var myDate=newDate();

数字类型

只有一种数字类型，数字可以是小数，也可以的整数
以0开头默认使用8进制来表示我的这个数字
以0x开头默认使用16进制来表述我的这个数字
如果以-开头默认以负数
如果我带有e：以科学计数法来解析我的这个数字

特殊值：
NaN，非数字。可使用isNaN(num)来判断。
Infinity，无穷大。可使用isFinite(num)来判断。

parseInt()将某值转换成数字，不成功则NaN
parseFloat()将某值转换成浮点数，不成功则NaN

字符串类型

引号内既字符串

str.length长度
str.trim()移除字符串首尾空白
str.indexOf(substring,start)返回字符串中检索指定字符第一次出现的位置
str.lastIndexOf(substring,start)返回字符串中检索指定字符最后一次出现的位置
str.concat(value,…)连接两个或多个字符串，返回连接后的字符串
str.substring(from,to)提取字符串中两个指定的索引号之间的字符
str.toLowerCase()根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
str.toUpperCase()根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
str.split(”));//使用空格字符串作为分隔符，输出：[“Hello,can”,”I”,”help”,”you?”]

数组类型

数组的定义

1. var arr=[]//定义一个空数组
2. var arr=[10,20,{“name”:”tomy”,”age”:19},0.1,”string”,true,[“aaa”,”bbb”]]//定义的同时赋值
3. var arr=new Array();//定义一个空数组
4. var arr = new Array(10,20,{“name”:”tomy”,”age”:19},0.1,”string”,true,[“aaa”,”bbb”])//定义的同时赋值
5. var arr=new Array(10)//定义一个长度为10的数组

数组的方法

arr.length数组的大小
arr.push(ele)尾部追加元素
arr.pop()从数组中删除最后一个元素：元素
arr.unshift(ele)头部插入元素
arr.shift()头部移除元素
arr.splice(start,deleteCount,value,…)插入、删除或替换数组的元素
arr.splice(n,0,val)指定位置插入元素
arr.splice(n,1,val)指定位置替换元素
arr.splice(n,1)指定位置删除元素
arr.slice()切片
arr.reverse()反转
arr.join(sep)将数组元素连接起来以构建一个字符串
arr.concat(val,..)连接数组
arr.sort()对数组元素进行排序

布尔类型

用布尔类型来比较所得到的结果 true 和 false
== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且

null

关键字null是一个特殊的值，它表示变量为空值
这里注意一点：null并不等于”” 或者0

undefined（未定义）

没有被复制，或者没有被定义

null和undefined区别：

1. undefined：
   var a;
   alert(a);
2. null
   var a=null;
   alert(a);

函数

1. 普通函数：
   function func(arg){
   return arg+1;
   }
   varresult=func(1);
   console.log(result);varresult=func(1);
   console.log(result);

2. 匿名函数（没有名字的函数称为匿名函数）：
   function (arg){
   return arg+1;
   }
   执行出错，匿名函数单独运行要加括号
   (function (num){
   alert(num);
   })(123) 会弹123

更多的用于触发事件，不需要括号
实例：

sub.onclick=function(){
        alert("当点击按钮时会执行到我哦！");
    }

字典

字典是一种以键-值对形式存储数据的数据结构

定义

var dict={‘k1′:”moonsec”,’k2′:’moon’,’age’:18};

输出字典元素

for(var itemindict){
console.log(dict[item]);
}

获取指定元素

dict[‘age’]获取key为age的元素

赋值

dict[‘age’]=10

删除元素

delete dict[‘age’];
delete dict.age;

Data时间

对象类型

定义：

var myDate=newDate();

方法

myDate.getFullYear();//获取年份
myDate.getMonth();//获取当前月份(0-11,0代表1月)
myDate.getDate();//获取当前日(1-31)
myDate.getDay();//获取当前星期X(0-6,0代表星期天)
myDate.getTime();//获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();//获取当前小时数(0-23)
myDate.getMinutes();//获取当前分钟数(0-59)
myDate.getSeconds();//获取当前秒数(0-59)
myDate.getMilliseconds();//获取当前毫秒数(0-999)
myDate.toLocaleDateString();//获取当前日期
myDate.toLocaleString();//获取日期与时间

运算符

算术运算符

+-*/%++–
字符串拼接使用“+”

比较运算符

<
>==
！=
<=
=
>===全等于：将数值以及数据类型一并比较
！==不全等于：将数值以及数据类型一并比较

赋值运算符

=
+=
-=
/*=
/=
%=

逻辑运算符

&&全真为真
||一个为真就是真
！取反

三目运算符

表达式1?表达式2:表达式3
当我的表达式1成立时执行表达式2否则执行表达式3

流程控制

判断

if
if else
if…..else if……else else
switch case default

循环

for
for in
while
do while

eval

eval(“”) 函数会将传入的字符串当做 JavaScript 代码进行执行。

js序列化和反序列化

把对象转为字符串
JSON.stringify()
obj.toJSONString()

序列化 即js中的Object转化为字符串

使用toJSONString
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
使用stringify
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

反序列化

即js中JSON字符串转化为Object

对象

创建对象

function Person(name) {
     //构造函数里面的方法和属性
    this._name = name;//变量
    this.getName = function () {
         console.log(this._name);
     };//函数
     this.setName = function (name) {
         this._name = name;
     };
 }

var p = new Person(“张三”);
p.getName(); // 张三
p.setName(“李四”);
p.getName(); // 李四

原型prototype

我们知道在一个已存在构造器的对象中是不能添加新的属性
所有的JavaScript对象都会从一个prototype（原型对象）中继承属性和方法：
Date对象从Date.prototype继承
Array对象从Array.prototype继承
Person对象从Person.prototype继承
Date对象,Array对象,以及Person对象从Object.prototype继承

JavaScript对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

使用prototype属性就可以给对象的构造函数添加新的属性：
Person.prototype.nationality=”English”;
Person.prototype.name=function(){
return this.firstName+””+this.lastName;
};
myfather.nationality
prototype.name()

编码，转义

针对url

encodeURI()对url编码，这个会把特殊字符编码
decodeURI()对url解码
encodeURIComponent()对url编码,这个会把特殊符号，特殊字符都编码
decodeURIComponent()对url解码

针对字符串

escape()对特殊字符编码
unescape()对特殊字符解码
URIError:不清楚

DOM

操作dom之前必须先定位标签

定位元素

通过类名：document.getElementsByClassName(“aaa”);
通过ID：document.getElementById(“aaa”);
通过标签：
var x=document.getElementById(“main”);
var y=x.getElementsByTagName(“p”); 这个要先定位父元素

collection对象

etElementsByTagName() 方法返回 HTMLCollection 对象
提供索引和length
document.getElementsByTagName(“p”)[1]
document.getElementsByTagName(“p”).lengths

覆盖写入html

document.write(Date());

改变html的内容（常用）

document.getElementById(“p1″).innerHTML=”新文本!”;

改变html的属性

document.getElementById(“image”).src=”landscape.jpg”;

改变css样式

document.getElementById(“p2″).style.color=”blue”;
document.getElementById(“p2″).style.fontFamily=”Arial”;

事件类型

onload；进入页面
onunload ：离开页面
onfocus：改变输入字段的内容时
onmouseover鼠标移入
onmouseout 鼠标移出
onclick:鼠标点击完成
onmousedown：鼠标按下
onmouseup：鼠标松开

事件绑定类型

绑定事件两种方式

1. 直接标签绑定 直接标签绑定 onclick=”
2. 先获取dom对象，然后进行绑定
   document.getElementById(‘xxx’).onclick()
   document.getElementById(“myBtn”).addEventListener(“事件类型”, 函数);

addEventListener() 方法

document.getElementById(“myBtn”).addEventListener(“事件类型”, 函数);
举例：
document.getElementById(“myBtn”).addEventListener(“click”, displayDate);

添加元素

新元素添加到开始位置insertBefore()
添加新元素到尾部appendChild()
移除已存在的元素removeChild()
替换的元素。replaceChild()

BOM

location对象：

location.href: 返回当前页面网址
重定向：location.href=”网址”
重新加载：location.reload()

弹框

alert():警告框
confirm()：确定框
prompt()：提示框 prompt(“sometext”,”defaultvalue”)

计时器

setInterval() 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() 在指定的毫秒数后执行指定代码。
都是两个参数第一个写函数，第二个毫秒数

停止执行
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

跑马灯

html

<p id="aaa">hello world</p>

javascript

function fun(){

    var a =document.getElementById('aaa');
    var b=a.innerText;
    var c=b.charAt(0);
    var d=b.substring(1,b.length);
    a.innerText=d+c;


}
setInterval('fun()',500);

搜索框

hrml

<form>
        <input type="text" value="请输入" onfocus="fun1()" onblur="fun2()" id="aaa">
        <input type="submit" value="确定">

    </form>

javascript

function fun1(){
    var a=document.getElementById("aaa");
    var b=a.innerText;
    if(a.value=="请输入"){
        a.value=""
    }
}
function fun2(){
    var a=document.getElementById("aaa");
    var b=a.innerText;
    if(a.value==""){
        a.value="请输入"
    }
}