一、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;
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]);
}