概念
JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译)
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行
作用
为网页添加各式各样的动态功能
为用户提供更流畅美观的浏览效果
用法
script标签放在head中可以，body中也可以， 放在最后也可以，对位置要求不严格
script标签不限数量
外部的JavaScript
外部脚本不能包含 script 标签
头部用
标签中的JavaScript
<a href="javascript:alert('ok')">登录</a>
显示数据
使用windows.alert()弹框输出–windows可以省略
使用document.write()将内容写入到html文档
使用innerHTML写入到html元素
基本语法
变量
声明变量的关键字:var
var myCompany; //声明变量 myCompany=‘开课吧’;//赋值 var x=5;//声明的同时赋值 var y=6; var z=x+y;//变量也可以存储表达式
变量的命名规则
变量必须以字母开头
变量也能以 $ 和 _ 符号开头
变量名称对大小写敏感(y 和 Y 是不同的变量) 不能使用关键字保留字
规范命名
见名知意
驼峰命名法
首字母大写
数据类型 值类型
字符串String
var myCompany; //声明变量 myCompany=‘开课吧’; //赋值 var x=5;//声明的同时赋值 var y=6; var z=x+y;//变量也可以存储表达式 var gameName=“英雄联盟”; var hairstylist=‘tony’; //PS:注意引号嵌套 var message1=‘我的发型师是"tony"老师’; var message2=“我的发型师是’tony’老师”;
布尔Boolean
数字类型Number
前5种是基本数据类型
空Null
var email = null;
只能有两个值:true 或 false
var isUnderstand = true; var isSingle = false;
表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。 共有4中情况会出现undefined的值
变量声明且没有赋值
获取对象中不存在的属性时
函数需要实参，但是调用时没有传值，形参是undefined;
未定义Undefined
object
JavaScript拥有动态类型
var param; // param类型为 undefined param = 5; // 现在 param 为数字 param = “John”; // 现在 param 为字符串
数据类型转换
其它->字符串String
调用a的toString()方法
undefined和null没有toString方法
调用string函数，将a转换为字符串
使用String()函数做强制转换时，实际上就是调用toString方法。但对于null和undefined将会转换为字符串，"null"和“undefined”
其它->数字Number
1.使用Number（）函数。
纯数字的字符串直接转换
有非数字的内容，或者是undefined，则转换为NaN
如果字符串是一个空串或者全是空格，或者是null，则会转换成0
boolean转数字，true转换成1，false转换成0
2.使用parseInt()或parseFloat()
这种方法专门对付字符串
如果对非String使用parseInt()或parseFloat()，则会先转换成String，然后再操作。
parseInt()将一个字符串中的从头到第一个非整数的整数内容取出来，然后转换成Number
parseFloat()把一个字符串转换为浮点数，取出字符串中的有效小数
其它->转换为Boolean
使用Boolean函数
数字->布尔，除了0，NaN，，其余都是true
字符串->布尔，除了空串，其余都是true
null和undefined转换为false
对象转换为true
对任意的数据类型做两次非运算，即可将其转换为布尔值
引用数据类型
对象(Object)
对象是一种复合数据类型，在一个对象中可以存储多个不同的数据类型
js中的变量都是保存到栈内存中的 基本数据类型的值直接在栈内存中存储，值与值之间独立存在，修改一个不会影响其他的变量 对象是保存在堆内存中的，没创建一个新的对象，就会在堆内存中开辟一个新的空间，而变量的保存是对象的内存地址（对象的引用），两个变量保存的是同一个对象引用，当一个改变时，另一个也会受到影响，随之改变。
定义
var obj=new Object();跟var obj={};效果一样 var obj=new Object(); obj.name = “孙悟空”; obj.gender = “男”; 等同于 var obj={name:“孙悟空”,gender:“男”};
分类
1.内建对象
由ES标准中定义的对象，在任何的ES的实现中都可以使用
比如，Math，String，Number，Boolean，Function，Object
2.宿主对象
由js运行环境提供的对象，目前主要讲由浏览器提供的对象
比如DOM，BOM
3.自建对象，自定义对象
由开发人员自己创建的对象
在对象中保存的值称之为属性
语法：对象.属性名=属性值; obj.name = “孙悟空”;
obj.gender = “男”; obj.age = 1000; // 读取对象中的属性 // 语法：对象.属性名 console.log(obj.name); // 修改对象中的属性 // 语法：对象.属性名=新值; obj.name=“猪八戒”; // 删除对象中的属性 // 语法：delete 对象.属性名; delete obj.name;
枚举对象中的属性
for(var 变量 in obj){} var obj=new Object(); obj.name="高志远"; obj.gender="男"; obj.age="23"; for (var n in obj){ console.log(n+":"+obj[n]); }
函数(Function)
函数创建使用
定义
function fun1(){ console.log("第一种方式创建函数！"); } fun1(); 字面量 var fun2=function(){ console.log("第二种方式创建函数！"); } fun2();
函数也是一个对象，函数中看可以封装一些功能，在需要时执行这些功能代码
封装到函数中的代码不会立即执行
当参数过多时，可以将参数封装到一个对象中，然后通过对象传递
实参可以是对象也可以是函数
返回值可以是任意的数据类型，也可以是一个对象，也可以是一个函数
自调用函数（立即执行函数）
函数对象();
数组(Array)
运算符
算数运算符
±* /%、++、 –
赋值运算符
:=、 +=、-=、*=、 /=、%=
字符串的连接符
+ • 1
逻辑运算符
&&、||
条件运算符
?:
比较运算符
== 、!=、> 、<、 >=、 <=
==当数据类型不一样时，会进行转换,可以通过括号改变优先级
特殊运算符
===
绝对等于(值和类型均相等)
!==
不绝对等于(值和类型有一个不相等，或两个都不相等)
var x=5; var res=(x===5); // true res=(x==='5');// false res=(x!==5); // false res=(x!=='5');// true
JavaScript对象
JavaScript的String对象
字符串属性
字符串.length 获取字符串的长度
var str=“我喜欢看NBA,最喜欢的球员是’小学生’库里”; //注意:字符串中出现的’是一个字符，转义为一个单引号 console.log(str); //获取字符串的长度:，切记:所有转移符号的长度都算一个，即’长度为1 console.log(“字符串的长度=”+str.length);//22
字符串方法
str.charAt(x) 返回字符串中指定位置的字符 通常使用字符串[];来代替使用
charCodeAt() 获取指定位置字符的字符编码(Unicode编码)
String.fromCharCode()可以根据字符串编码获取字符
result=String.fromCharCode(20013);
concat()可以链接两个或者多个字符串作用和+一样
indexof()该方法可以检索一个字符串中是否有指定内容，如果有则返回第一次出现的索引，如果没有找到指定的内容，则返回-1，第二个参数是指定开始查找的位置
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：从后往前找，也可以通过第二个参数指定位置
slice()截取字符串, 参数：第一个为开始的索引，包括开始位置，第二个参数为结束位置的索引，不包括结束的位置。如姑婆省略第二个参数，则会截取到后边所有的，也可以传递一个负数作为参数，从倒数第一个开始往前计算
soilt()将一个字符串拆分为一个数组，第一个参数为分隔符
toUpperCase()将一个字符串全部转换为大写 toLowerCase()将一个字符串全部转换为小写
JavaScript的Array对象
Array 对象用于在变量中存储多个值，也就是数组
数组也是一个对象，功能与普通对象功能相似，数组的存储性能比普通对象好，在开发中经常使用数组来存储一些数据
创建数组
var names=new Array(); names[0]="贾宝玉1"; names[1]="贾宝玉2"; names[2]="贾宝玉3"; names[3]="贾宝玉4"; 字面量var cars=["大众","保时捷","宝马"] 构造函数var classes=new Array("1班","2班","3班")
获取数组的长度
语法:数组.length
对于连续的数组可以获取数组长度，对于非连续的数组可以获取最大的索引+1，尽量不要创建非连续的数组
数组中的对象可以是任意类型的数据类型，可以是对象也可以是函数
数组的方法
push()，该方法可以向数组的末尾添加一个或多个元素，并返回数组的新长度
pop() 方法从数组中删除最后一个元素并返回删除的那个元素
var arr=["ji","ya"]; result=arr.pop(); console.log(arr); console.log(result); result即为返回的那个对象
unshift() 方法（在开头）向数组添加新元素，并返回新的数组长度：
shift() 方法删除数组中第一个元素，返回被“位移出”的字符串
slice() 方法用数组的某个片段切出新数组。两个参数，第一个是起始位置，第二个是中止位置，如果传递一个负值，则为从后往前数的元素
splice() 删除元素，两个以上的参数，第一个定义了应添加新元素的位置（拼接），第二个是定义应删除多少元素,第三个以及以后将会自动插入到开始位置索引前边，如果只有两个参数，第一个参数为开始删除的索引，第二个为删除的个数。
concat() 方法通过合并（连接）现有数组来创建一个新数组：
var arr1=["桃子","玉米","花生","大豆"]; var arr2=["你好"]; var arr3=["李焕英"]; var arr4=arr1.concat(arr2,arr3,"新来的"); console.log(arr4);
join()将一个数组转换为一个字符串, 该方法不会对原数组产生影响
在join中，可以指定一个字符串作为参数，这个字符串将会成为数组元素中的连接符。
reverse()反转数组，该方法直接修改原数组
sort()按照unicode编码进行排序，直接修改原数组，从第一个字符进行排序
遍历数组
forEach() 方法为每个数组元素调用一次函数（回调函数）。
浏览器会在回调函数中传递三个参数
浏览器会在回调函数中传递三个参数 1. 第一个参数，是当前遍历的元素 2. 第二个参数，是当前遍历元素的索引 3. 第三个参数，是正在遍历的数组 第三个参数以后的都会显示 undefined
var txt = “”; var numbers = [45, 4, 9, 16, 25]; numbers.forEach(myFunction); function myFunction(value, index, array) { txt = txt + value + “
”; }
IE8 以下的浏览器均不支持该方法，所以要兼容 IE8 则不要使用 foEach() ,还是使用for 来遍历比较好
JavaScript的Date对象
创建日期对象
var date1 = new Date(); var date2 = new Date(milliseconds); var date3 = new Date(dateString); var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);
日期对象常用方法
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
0表示周日
getFullYear() 从 Date 对象以四位数字返回年份
getHours() 返回 Date 对象的小时 (0 ~ 23)
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
getMonth() 从 Date 对象返回月份 (0 ~ 11)
0表示1月，11表示12月
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)
getTime（） 获取当前日期对象的时间戳,计算机底层保存的时间都是时间戳
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)
setFullYear() 设置 Date 对象中的年份(四位数字)
setHours() 设置 Date 对象中的小时 (0 ~ 23)
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)
setMonth() 设置 Date 对象中月份 (0 ~ 11)
JavaScript的Math对象
Math常用属性
var pi=Math.PI; //返回圆周率
Math常用方法
var num=Math.random();// 返回 0 ~ 1 之间的随机数。 不会出现0，也不会出现1 var max=Math.max(12,34,-90,9); //返回 n个数值中的最大值。 var min=Math.min(12,34,-90,9); //返回 n个数值中的最小值。 var sqrt=Math.sqrt(9); //返回平方根。3 var abs=Math.abs(-90); //返回绝对值。90 var ceil=Math.ceil(1.5); //返回向上取整的数。2 var floor=Math.floor(1.5); //返回向下取整的数。1 var round=Math.roundl(1.7); //返回四舍五入的数。2 var pow=Math.pow(x, y) //返回x的y此幂的数。
Math和其它对象不同，他不是一个构造函数
生成一个随机数
生成一个x-y之间的数 Math.round(Math.random()*(y-x))+x;
JavaScript的函数
JavaScript的常用全局函数
isNaN(param)
用于检查其参数是否是非数值字 是数值的返回false，不是数值返回true
console.log(isNaN(666));//false console.log(isNaN(1+2));//false console.log(isNaN(“hello”));//true parseFloat(String)
字符串中只返回第一个数字。 开头和结尾的空格是允许的。 如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。
console.log(parseFloat(“66”));//66 console.log(parseFloat(“199.99”));//199.99 console.log(parseFloat(“1024 2048 4096”));//1024 console.log(parseFloat(" 128 "));//128 console.log(parseFloat(“10年”));//10 console.log(parseFloat(“今天是8号”));//NaN parseInt(string,radix)
参数
string 必需，要被解析的字符串。
radix 可选，表示要解析的数字的基数。该值介于 2 ~ 36 之间
只有字符串中的第一个数字会被返回。 开头和结尾的空格是允许的。 如果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN。 在字符串以"0"为开始时旧的浏览器默认使用八进制基数。ECMAScript 5，默认的是十进制 的基数。
console.log(parseInt("66"));//66 console.log(parseInt("199.99"));//199 console.log(parseInt("1024 2048 4096"));//1024 console.log(parseInt(" 128 "));//128 console.log(parseInt("10年"));//10 console.log(parseInt("今天是8号"));//NaN console.log(parseInt("10",10));//10 console.log(parseInt("010"));//10 console.log(parseInt("10",8));//8 console.log(parseInt("0x10"));//16 console.log(parseInt("10",16));//16
JavaScript的自定义函数
自定义函数语法
使用function关键字定义函数
function 自定义函数名称(参数列表){函数体}
自定义函数实例
1、函数的形参直接写参数名称，不需要声明类型，即不需要写var.
2、函数的返回取决于函数体中是否有return关键字。
例子
<script type="text/javascript"> var fun=function(){ document.write("fun1</br>"); } var fun2=function(a,b){ document.write(a+"fun2"+b+"</br>"); } var fun3=function(a,b){ document.write(a+"fun3"+b+"</br>"); return a+b; } fun(); fun2(1,3); var result=fun3(10,10); alert(result); </script>
JavaScript的构造函数（类）
创建一个构造函数，专门用来创造Person对象的
构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯性首字母大写
构造函数与普通函数的区别是调用方式不同：
普通函数是直接调用，而构造函数需要用new关键字来调用
构造函数的执行流程:
1.立刻创建一个新的对象
2.将新建的对象设置为函数中的this,在构造函数中可以用this来引用新的对象
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回
使用同一个构造函数构造的对象,我们称一类对象,也将一个构造函数成为一个类,我们将一个构造函数的对象,称为是该类的实例
实例
<script type="text/javascript"> function print(){ document.write("你好") } function getSum(a,b){ var he=a+b; return he; } print(); var res=getSum(1,2.2); document.write("</br>结果是"+res+"</br>"); </script>
在Person的构造函数中，为每一个对象都添加了一个sayName方法，造成内存资源浪费，改进方法：将sayName方法放在全局作用域中。
function Person(name,age,gender){ this.name=name; this.age=age; this.gender=gender; this.sayName=fun; } function fun(){ alert(this.name+"你好打工人"); } var per1=new Person("高志远",23,"男"); var per2=new Person("高运佳",21,"男"); console.log(per1.name+per2.age); per1.sayName();
原型peototype—每创造一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是原型对象
function Person(name,gender,age){ this.name=name; this.gender=gender; this.age=age; } Person.prototype.other=function(){ document.write("我叫"+this.name+"<br/>"); }; var per1=new Person("孙悟空","男",500); var per2=new Person("白骨精","女",20); per1.other(); document.write("我叫"+per2.name+",我是个"+per2.gender+"人");
如果作为普通函数调用prototype没有任何作用，当函数以构造函数的形式调用时，它所创建的对象都会有一个隐含的属性，只想构造函数的原型对象，我们可以通过__proto__来访问该属性
原型对象相当于一个公共区域，所有同一个类的实例都可以访问到这个原型对象,当访问对象的一个属性或者方法时，它会在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用
使用instanceof可以检查一个对象是否是一个类的实例,语法: 对象 instanceof 构造函数
所有的对象都是Object的后代,所有对象和Object作instanceof检查时都会返回true
console.log(per1 instanceof Person);
检查属性是否在方法里（原型对象）
使用in检查对象中是否有某个属性时，如果对象中没有但是原型中有，也会返回true
可以使用对象的hasOwnProperty()检查对象自身中是否含有该属性
使用该方法只有对象自身中含有该属性时，才会返回true
例子
function MyClass(){} MyClass.prototype.name="原型中的名字"; var mc=new MyClass(); mc.age=18; console.log("name" in mc); console.log(mc.hasOwnProperty("name")); console.log(mc.hasOwnProperty("age")); console.log(mc.__proto__.hasOwnProperty("hasOwnProperty")); console.log(mc.__proto__.hasOwnProperty.hasOwnProperty("hasOwnProperty"));
toString()方法
当在页面打印一个对象时，事实上输出的是对象的toString()方法的返回值
function Person(name,age){ this.name=name; this.age=age; } // 修改Person原型的toString Person.prototype.toString=function(){ return "Person[name="+this.name+",age="+this.age+"]";}; var per1=new Person("贾宝玉",22); var per2=new Person("王熙凤",55) console.log(per1); console.log(per2);
JavaScript变量的作用域
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量(使用 var)是 变量，所以只能在函数内部访问。
当函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用，如果没有则向上一级作用域中寻找，如果上一级中没有找到则会报错。
在函数中要访问全局变量就可以使用window对象
变量的声明提前，使用var关键字声明的变量，会在所有的代码执行之前被声明(但不会被赋值)
在函数中不使用var声明的变量都会成为全局变量
定义形参就相当于在函数作用域中声明了变量
var e = 123; function fun(e) { alert(e); } fun(); 输出结果为undefined
全局 JavaScript 变量
在函数外声明的变量是 变量，网页上的所有脚本和函数都能访问它。
变量的声明提前 使用var关键字声明的变量，会在所有的代码执行之前被声明(但不会被赋值) 函数的声明提前 使用函数声明的形式创建的函数function()函数(){}会在所有代码执行前就被创建，使用var创建的函数不会被提前创建
<script> var userId = 1001; //全局变量:整个script脚本中都可用,要注意先后顺序 function printMessage() { var userName = "李白";//局部变量:只在当前函数中生效 document.write(userId);//使用全局变量的时候，保证使用(方法被调用)之前定义并赋值 document.write(message); printMessage(); </script> <script> function printMessage2() { var userName2 = "李白2"; document.write(userId);//这里也可以使用userId //document.write(userName1);//错误:调用不到printMessage函数中的局部变量 document.write(userName2);//正确:可以使用自己函数中的局部变量 } </script>
This
解析器在调用函数时每次会向函数内部传递进一个隐含的参数this，this指的是一个对象 根据函数的调用方式不同，this会指向不同的对象：
1.以函数形式调用时，this永远都是window
2.以方法的形式调用时，this就是调用方法的那个对象
3.当以构造函数 的形式调用时，this就是那个新创建的那个对象
4.使用call和apply调用时，this是指的那个对象
function fun(){ console.log(this.name); } var obj = { name : "孙悟空", sayName: fun }; fun(); // this指的对象是window obj.sayName(); // this指的对象是Object
var name = "全局变量"; function fun() { console.log(this.name); } var obj = { name : "孙悟空", sayName: fun }; var obj2 = { name : "猪八戒", sayName: fun }; fun(); //全局变量 obj.sayName(); //孙悟空 obj2.sayName(); //猪八戒
在调用call和apply时可以将一个对象指定为第一个参数,此时这个对象将会成为函数执行时的this
call方法可以将实参在对象之后依次传递
apply方法需要将实参封装到一个数组中统一传递
function fun(a,b) { name: "obj3", console.log("a=" + a); console.log("b=" + b); alert(this.name); } var obj = { name: "obj", sayName: function() { alert(this.name); } }; var obj2 = { name: "obj2" }; obj.sayName.call(obj2); fun.call(obj,2,3); fun.apply(obj, [2, 3]);
arguments
封装实参的对象arguments arguments是一个类数组对象,他可以通过索引来操作数据，也可以获取长度 即使不定义形参，也可以用arguments来使用实参 只不过比较麻烦，arguments[0]表示第一个实参,Arguments[1]表示第二个实参 他里边有一个属性叫callee，就是当前正在指向的函数对象
function fun(){ console.log(arguments[1]); console.log(arguments.callee); } fun("hello",155);
