Web前端之Javascript详解20180330

一、javascript概述

javascript是基于对象和事件的脚本语言。

特点：

1.安全性(不允许直接访问本地硬盘(因为是被远程的浏览器解释))，它可以做的就是信息的动态交互

2.跨平台性(只要可以解释JS的浏览器都可以执行，和平台(系统)无关),java被虚拟机解析所以也不需要依赖平台。

二、javascript与Java不同

1.JS是Netscape公司的产品，Java早期是SUN公司的产品

2.JS是基于对象(也就说对象都已经封装好了)和事件驱动的，Java是面向对象

3.JS只需解释就可以执行(js在客户端,只要可以解释JS的浏览器都可以执行)，Java需要先编译成字节码文件，再执行

4.JS是弱类型(非严谨的,甚至不写分号都可以,规范来说还是要写)，Java是强类型(严谨的)。

比如JAVA定义了8种数据类型(5种基本,3种引用)，而js根本就没有数据类型

对于注释，js也是使用/**/和//

三、javascript与html的结合方式

想要将其他代码融入到html中，都是以标签的形式。script标签可以存放在页面的任意位置，无论是在head里，body里，还是在head body之间，或者在head body之外都是可以的。

1.js代码存放在标签对<script type="text/javascript>..</script>中

2.使用script标签的src属性引入一个js文件。(方便后期维护，扩展，独立出来提高了复用与封装性，方便多个页面引用)

例：<script src="test.js" type="text/javascript"></script>

注：规范中script标签中必须加入type属性。

四、语法

alert("123");//这个是win系统提供的，可以直接放在js中，效果是弹出一个对话框。

一门程序设计语言的基本要素有：变量，语句，函数，数据结构(数组等)，类似高级语言还有，操作数据对象(io)，操作网络对象(socket)等等

1.变量

定义变量使用关键字var，弱类型即是不用指定具体的数据类型

例：

var x=3;

x="abc";//或者x='abc'也可以，表示js里面都是字符串，没有字符的概念，所以单双引号都可以

alert(x);//结果显示abc

var y;

alert(y);//结果显示undefined

注意，js中特殊的常量值：undefined，当变量没有初始化就被使用，该变量值就是undefined，类似Java中null。

注意，由于js里面没有类型的概念，所以在运算的时候不涉及到类型转换，比如:3250/1000*1000，js的结果就是3250，而不是3000。

2.语句(与Java语句格式相同)

1).判断结果(if语句)

注意：var x=3;

if(x==4)//可以进行比较运算

if(x=4)//可以进行赋值运算，而且可以同样进行判断，不报错

因为在js中0就是false，非0就是true(通常用1表示)。也就是空就是假,非空就是真

所以if(x==4)结果是true;

2).选择结果(switch语句)

注意，js的case后面，可以是字符串

3).循环结构(while语句，do..while语句，for语句)。

例：

for(var x=0;x<3;x++)

{

alert("x="+x);

}

var sum="";

for(var x=1;x<=4;x++)

{

if(x==4)

sum=sum+"x="+x;//连接字符串

else

sum=sum+"x="+x+",";

}

alert(sum);

//写到页面中去的方法：

document.write("<font color='red'>"+sum+"</font>");//html中的部分要用引号包括，js中的不用

注意，不同的是，没有了具体数据类型的限制，使用时要注意。

注意，js出错时，会在网页的状态栏里面出现一个黄色的感叹号，点击后会有提示在哪里出错了。

注意，js在表达式中，逻辑与使用&&

用表格形式显示一个99乘法表：

table,table td{

border: #0000ff double 1px;

width:600px;

}

document.write("<table>");

for(var x=1; x<=9; x++){

document.write("<tr>");

for(var y=1; y<=x; y++){

document.write("<td>"+y+"*"+x+"="+y*x+"</td>");

}

document.write("</tr>");

}

document.write("</table>");

3.数组

方便操作多元素的容器，可以对其中的元素进行编号。

特点：可以存任意元素，长度是可变的

格式：

var arr =new Array();//new完就可以随时往这个数组里面填充元素。

arr[0] = "hello";

arr[1] = 123;

var arr =[4,1,6,8];

arr[6]=100;//这样会改变数组的长度，长度变为7，中间没有定义的部分为undefined

var arr = {'hello',123,true,"abc"};

可以存放任意类型的数据，但是规范上最好还是同类型的，方便操作。

通过遍历即可对数组进行基本操作

for(var x=0;x<arr.length;x++)

{

alert(arr[x]);

}

4.函数

由于没有数据类型，所以不涉及到返回类型，以及参数类型。

1).一般函数

格式(一般函数定义方式)：

function 函数名(形式参数...)

{

执行语句;

(return 返回值;)

}

代码：

function add(x,y){

return x+y;

}

var sum = add(4,5);

注意，js也有全局变量和局部变量，这方面的使用也和java的一样。

注意，js没有重载形式，定义两个参数，传一个也不会有错，如下：

fuction show(x,y)

{

alert(x+','+y);

}

show(3);//结果显示3,undefined

同时，正因为如此，当定义的传参少了，但是传入的更多时，也不会有错，还会接收到，接收到一个名为arguments的数组中，(这个数组每个函数都有，不需要手动去定义)

例：

fuction show()

{

for(var x=0;x<arguments.length;x++)

alert(arguments[x]);

}

show(3,4,5,7);//结果显示3,4,5,7

虽然可以这么做，但是从规范上来说，需要哪些都定义在参数上，这样阅读性才好。

注意，函数本身在js中就是一个对象，函数名就是这个对象的名字，函数名就指向了这个函数对象，所以：

var x=show;//这个不会调用show方法，而是表示x指向show所指向的一个函数对象

alert(x);//这样就会把整个函数内容打印出来

2).动态函数

js中内置了一个函数对象Function

所以定义函数，可以类似定义对象的形式：

var 函数名 = new Function("形参","形参",...,"函数内部代码");

例：

var show = new Function("x","y","var sum=x+y;return sum;");

var sum = show(5,2);

特点：

定义的时候，参数和函数体都可以作为变量向内传递。

即，动态函数，参数以及函数体都可以通过参数进行传递，可以动态指定。

动态函数，相对少见一些。

3).匿名函数

定义与使用格式：

var 变量名 = function()

{

}

变量名();

js还是基于事件驱动的，所以匿名函数往往可以作为一个事件的处理方式而存在。所以说在定义事件属性的行为时较为常用。

例：

窗口的数据一加载完毕会有一个onload事件，它可以直接等于一个匿名函数，这样就可以通过匿名函数来处理这个事件。

即，

window.onload = function()

{//匿名函数就类似匿名对象一样，所以可以赋值

alert("onload over");

}

这是一种简化的写法，也可以这么写：

fuction method()

{

alert("onload over");

}

window.onload = method;//不是返回值所有不能有括号，用对象赋值

5.对象

js中没有class这类关键字，js是通过函数的形式创建对象出来。也就是说JS除了已经提供的内置对象(如document对象)外，也可以自定义对象

例：

function Person()

{//类似构造函数

alert("Person inti");

}

var p = new Person();//定义一个Person对象，此时构造函数Person()会被调用

p.name ="133";//定义(增加)Person对象的属性

p.age =22;//定义成员变量

p.eat= function()

{//定义(增加)Person对象的行为，定义成员函数

alert("eat");

}

p.eat();//对象中函数被调用。

注意，构造函数里也可以增加并初始化属性：

function Person(name,age)

{//类似构造函数

this.name=name;

this.age=age;

}

var p= new Person("lisi",90);//实例化对象时传入初始化值

alert(p.name);

alert(p["name"]);//这样也可以，效果和前面一样，这种方式的好处在于可以往p里面传递参数

注意，对象即上面的p可以单独出来封装到一个js文件，其他页面可以通过引用这个文件，就可以访问该对象即p对象。这样就可以实现一个js文件被多个页面使用，消灭了重复性代码。

注意，如果在引用js文件的页面中，new了一个与js文件中对象所属类一样的对象，那么这个对象只可以访问到类中的属性，而无法访问到js中的对象，即便两个对象名字一样(就近原则)。

JS用于操作对象的语句：

1).with语句

格式：

with(对象)

{//这个区域内可以直接使用该对象的任意属性和方法

}

应用：当调用一个对象中多个成员时，为了简化调用，编码"对象."这种格式的重复书写。

或者说，用来确认某一对象所作用的范围。

例：

function Person(name,age)

{//类似构造函数

this.name=name;

this.age=age;

}

var p= new Person("lisi",90);//实例化对象时传入初始化值

with(p)

{

alert(name,age);

}

2).for(...in...)语句

用于遍历对象或者数组

例：

遍历对象：

function Person(name,age)

{//类似构造函数

this.name=name;

this.age=age;

}

var p= new Person("lisi",90);//实例化对象时传入初始化值

for(s in p)

{

alert(s+":"+p[s]);//s是属性名，p[s]就是对应的属性值，由于p里面没有s属性，所以不能使用stu.s

}

遍历数组：

var arr={5,1,2,3};

for(x in arr)

{

alert(arr[x]);//x是数组的下标。

}

6.js内置对象(已有对象)

查看内置对象，可以查看js手册。

比如object对象，new的时候传入值也可以定义对象，只不过这种方式用的很少

1).String对象

String对象一般不用new来创建，直接var str=""这种形式创建即可，也就是说String对象可用字符串文字显示创建。

至于该对象的属性和方法可以查看手册。

其中bold方法会给字符串加上b标签,

fontcolor则给字符串在html中加上颜色，

link方法会把当前字符串变成一个超链接

substring方法取开始位和结束位，不包含结束位

substr方法，从开始位开始指定长度，长度比字符串长度长，则长度使用字符串长度

match方法，正则表达式中会用到

代码：

var str ="abcde";

var y=str.bold();

document.write(y);

var z=str.fontcolor("red");

document.write(z);

alert(z);

var a=str.link("http://www.baidu.com");

document.write(a);

var i=str.substring(2,4);//结果cd，不包含第四个

var j=str.substr(2,4);//结果cde，只有三个那么长，所以长度变为3，如果够的话那就cdef

注意获取字符串长度时，没有方法，只有属性

2).Math对象

是一个固有对象，提供基本数学函数和常数。

也就是说可以直接使用，可以使用.的形式来使用属性和方法，

格式：

Math.[{属性|方法}]

比如，

其中的random方法，用于获取随机数.

代码：

var d =Math.random()*10+1;

3).Global对象

一些常用的方法会封装在这个对象中，这个对象是一个固有对象，也就是可以直接使用，但是这种直接使用是不需要写Global的，直接写其内部的属性和方法就行了。

比如，

其中的parseInt方法，当其参数里的字符串没有字符串时，会返回NaN,至于判断这个返回值可以用其中的isNaN方法，

例：

parseInt("abc") //返回NaN

parseInt("12abc") //返回12

如上个的随机数中就可以用这个方法取整

注意，parseInt还可以传入基数参数，表示按照哪种进制进行解析，

例：

var num=parseInt("110",2);//结果num等于6

类似于parseInt还有把数字转换为字符串的方法toString，不过该方法是固定方法(全局方法)不在global对象中，可以直接使用(每一个变量都有的方法)，

例：

var x=6;

var num =x.toString(2);//结果num=“110”，2是基数，注意不能直接写成6.toString

//

4).Date对象

对象内的方法可以单独获取年月日，也可以直接使用对象，new返回的对象也是一串字符串。

例：

var d = new Date();

alert(d);//直接显示日期信息

with(d)

{

var month=(getMouth()+1);

month = (mouth>9)?month;"0"+mount;//月份小于9的拼凑成两位显示

alert(getYear()+"年"+mouth+"月"+getDate()+"日 星期" +getDay());

}

5).所有内置对象都有的prototype属性

返回对象类型原型的引用，也就是说返回对象的引用，这个属性的用途在于，可以通过返回对象引用的形式，给该对象添加新的属性和方法。

代码：

function getMax()

{

var max = this[0];

for(var i=0;x<this.length;x++)

{

if(this[x]>max)

max=this[x];

}

return max;

}

Array.prototype.getZuiDa =getMax;//getMax为定义好的方法，这样就给Array对象增加了新的方法，方法名为getZuiDa

var arr={1,23,8,9};

var x=arr.getZuiDa();//由于前面增加了新的方法，所以定义的数组对象都可以使用新增加的方法

alert(x);

arr.sort();//排序

for(y in arr)

{

alert(arr[y]);

}