JavaScript在java ee开发过程中其着独特的作用，简单灵活的语法，立竿见影的效果，使其肆意运行在前台页面中。给程序员带来事半功倍的感觉，也给用户带来异常舒畅的体验。但是，也正是它简约，甚至有点“荒诞”的语法，使整天浸泡在严谨java语法中的程序员操作起来反而不太适应，就像手握大刀的武士在一片空地上跟苍蝇较劲，纵有千斤力也无济于事。其实，苍蝇也有它的活动规律。我就把我使用JavaScript的点点滴滴记录下来，跟大家一起分享，有不对之处，还请大家互相指正。
1.Java Script是一种脚本语言,其程序可以嵌入到HTML/XML页面中，被浏览器解释执行,解释到哪儿执行到哪儿.
2.功能：
增强页面动态效果
实现页面与用户的实时交互
3.Java Script的嵌入
1>.通过<script></script>,如：
<script language="javascript">//或者使用type="text/javascript"
/*java script代码*/
</script>
一个HTML页面中可以有多个<script></script>标签对，而且各标签对之间可以互相访问，可以认为是同一段代码。
2>.Java Script代码可以出现的位置
1>).<body>中
2>).<head>中：主要是定义一些函数
3>).单独的外部文件中，如：
<script language="javascript" src="外部脚本文件的url">
</script>
4.Java Script中的数据类型
1>基本数据类型
整型
浮点型
字符型(包含了字符串类型)
布尔型:true(0),false(非零)
2>.对象类型
内置对象(String,Math,Date)
浏览器对象(Window,Document,History,Forms,...)
用户自定义对象
5.变量
1>.命名规则:
由字母,数字,下划线美元符($)组成,不能以数字开头。
变量名区分大小写
不允许使用JavaScript关键字做变量名
2>.变量声明时不指定类型,而具体的类型是由将来给它赋值时的赋值类型来决定
通常用var来声明变量,也可以不声明而直接使用变量,但必须先赋值,再取其值。
如：var a;//只声明，不赋值，但使用之前必须赋值
var b=3.14;
var c="你好";
var d=5,e=6;//一次声明多个
b=c+d;//结果b="你好5"
f="Hello";//不声明,直接赋值.注意:默认给声明成全局变量.
document.write(f);//不声明就使用,但是使用之前必须赋值
3>undefined 一般是使用了一个没赋值的元素
4>和java中变量不同的是,JS中变量可以重复声明;可以在使用中根据所赋值的类型来改变类型;作用域是从声明处到本代码块结束(注意JS中不是用{}划分代码块的,而是以函数为单位的)
6.JavaScript中的自定义对象类型
1>定义的两种方式:
1>).使用new Object()
如:var obj = new Object();//这是一个空对象,后面可以设置对象的属性.
obj.id=1;
obj.name="yf";
2>).直接生成
如:var teacher = {id:1, name:"yf"};
2>使用的两种方式:
1>).对象名.属性名
如:alert(obj.name);
2>).对象名["属性名"]
如:alert(obj["name"])
3>对象中的方法:用对象的属性来保存外部定义的方法.
如: obj.getName=getName;
function getName(){
return this.name;
}
7.JavaScript关键字
break delete function return typeof
case do if switch var
catch else in this void
continue false instanceof throw while
debugger finally new true with
default for null try
8.JavaScript常量
1>.整型
八进制:012,027(0开头)
十进制:3,200
十六进制:0x12,0X4a(0x或者0X开头)
这些进制的数据在显示的时候都是以十进制的形式呈现给用户
2>.浮点型:3.14,2.1e3,2e4(科学计数法的表示)
3>.布尔型:true,false
4>.字符型
1>).单个字符:'a'
字符串:“china”,但是JS也允许用'china',这个很不容易理解，不过通常还是用"china"
2>).转义字符常量:"\n"(换行符),"\t"(制表符),"\""(双引号)
5>.空值:null
9.JavaScript运算符
1>.算术运算符: 2>.位运算符
+ 加法 ~ 按位"取反"
- 减法 & 按位"与"
* 乘法 | 按位"或"
/ 除法 ^ 按位"异或"
++ 增量/单目加 << 左移
-- 减量/单目减 >> 带符号右移
% 求余 >>> 无符号右移
(JavaScript也是采用补码的形式移位的,所以负数的>>和>>>是不同的)
3>.逻辑运算符
4>.扩展运算符
! 逻辑非 += a+=b<--->a=a+b
& 逻辑与 -= a-=b<--->a=a-b
| 逻辑或 *= a*=b<--->a=a*b
^ 逻辑异或 /= a/=b<--->a=a/b
%= a%=b<--->a=a%b
5>.比较运算符 != a!=b<--->a=a!b
> 大于 &= a&=b<--->a=a&b
>= 大于等于 |= a|=b<--->a=a|b
< 小于 ^= a^=b<--->a=a^b
<= 小于等于 <<= a<<=b<--->a=a<<b
!= 不等于 >>= a>>=b<--->a=a>>b
== 等于(变量值相等就可以)>>>= a>>>=b<--->a=a>>>b
=== 全相等(表示两个变量的值相等,变量的类型也相同)
6>.赋值运算符= 7>.三目运算符?:
! 逻辑非 += a+=b<--->a=a+b
& 逻辑与 -= a-=b<--->a=a-b
| 逻辑或 *= a*=b<--->a=a*b
^ 逻辑异或 /= a/=b<--->a=a/b
%= a%=b<--->a=a%b
5>.比较运算符 != a!=b<--->a=a!b
> 大于 &= a&=b<--->a=a&b
>= 大于等于 |= a|=b<--->a=a|b
< 小于 ^= a^=b<--->a=a^b
<= 小于等于 <<= a<<=b<--->a=a<<b
!= 不等于 >>= a>>=b<--->a=a>>b
== 等于(变量值相等就可以)>>>= a>>>=b<--->a=a>>>b
=== 全相等(表示两个变量的值相等,变量的类型也相同)
6>.赋值运算符= 7>.三目运算符?:
8>.字符串连接符+,+=
10. 表达式
var s1=3+5+"hello" //结果：8hello
var s2="hello"+3+5 //结果：hello35
11.流程控制
1>.分支语句:
1>).if-else
2>).switch
2>.循环语句
1>).for
2>).while
3>).do-while
4>).for-in，如：
<script>
document.write("<hr>for-in循环:");
document.write("<ul>");//JavaScript中用HTML的元素时,要输出这个元素才行
var a=new Array(3);
a[0]="香蕉";
a[1]="苹果";
a[2]="犁";
for(var s in a){
document.write("<li>"+a[s]+"</li>");
}
document.write("</ul>");
</script>
3>.特殊流程控制
1>).break 跳出整个循环
2>).continue 跳出本次循环
12.数组
1>.数组的声明方式
var a1=new Array();//创建一个数组，包含0个元素,长度为0
var a2=new Array(size);//创建一个数组,长度为size
a2[0]=1;
a2[1]=2;
....,
a2[size-1]=size;
var a3=new Array(v1,,,...,vn);//创建一个数组,并且静态初始化,没初始化的就按照undifined处理
var a4=[1,2,false,"aa",null];//元素类型可以不一致
2>.数组的长度会自动调整,最终长度由初始化长度决定。
3>.数组元素的访问采用数组名[下标]的形式,有效下标为0~length-1
13.函数
1>.函数定义:
1>).传统方法
function <函数名>(<参数列表>){
<函数体代码>
[<return语句>](可选)
}
说明:JavaScript函数在定义时不需要指定返回值类型和是否有返回值
参数列表也可以不指定类型
2>).构造方法方式
var f=new Function([参数列表,]方法体);//参数列表可选,最后一个是方法体.
2>.函数使用:
1>).函数名(实参列表);//所传实参个数可以和函数定义的参数个数不一样,按照就前原则使用
2>).函数名----并不表示函数调用,而是代表函数的定义,相当于java中的引用或者C++中的指针,指向函数
3>.内联函数:函数中定义函数,但此函数只能在外函数中调用.
如:function outterFun(){
alert("OutterFun!!!");
function InnerFun(){
alert("InnerFun!!!");
}
}
outterFun();
14.事件及事件处理机制
JavaScript中常用事件类型
onClick 组件被单击
onDbclick 组件被双击,如：
<input type="button" name="b1" value="开始测试" onClick="test1()">
onLoad 页面装载
onUnload 页面卸载,如：
<body onLoad="sayHello()" OnUnload="sayBye()">
onUnload 页面卸载,如：
<body onLoad="sayHello()" OnUnload="sayBye()">
onChange 组件内容或条目选种状态发生改变
鼠标移入
鼠标移出
鼠标按下
鼠标松开
onMousemove 鼠标移动，如：
function move(x,y){
mypic.style.left=x;
mypic.style.top=y;
}
<body onMousemove="move(event.x,event.y)">
正文信息:
<div class="mystyle" id="mypic">
<img src="mypic.gif">
</div>
</body>
onFocus 成为焦点
onBlur 当对象失去焦点，如：
username: <input type="text" name="username" value="请输入您的姓名.." onFocus="clear1()" onBlur="show()"/>
鼠标移入
鼠标移出
鼠标按下
鼠标松开
onMousemove 鼠标移动，如：
function move(x,y){
mypic.style.left=x;
mypic.style.top=y;
}
<body onMousemove="move(event.x,event.y)">
正文信息:
<div class="mystyle" id="mypic">
<img src="mypic.gif">
</div>
</body>
onFocus 成为焦点
onBlur 当对象失去焦点，如：
username: <input type="text" name="username" value="请输入您的姓名.." onFocus="clear1()" onBlur="show()"/>
onscroll 页面滚动
onsubmit 表单提交.但是它触发函数时必须用: return 函数(参数列表),只有当函数返回true时表单才能提交成功;否则,提交失败.
15.JavaScript中常用对象
1>.数学对象 Math
内置对象Math提供常规的数学运算方法和数学常量
PI,E,abs()--绝对值,sin(),cos(),round()--截断操作,sqrt()--开方,pow()--幂运算,random()--产生随机数
2>.时间对象 Date
使用前需要声明/创建时间对象: var currentTime=new Date();
getYear() setYear()-------获取/设置年信息
getMonth() setMonth()------获取/设置月信息(月份是从0~11对应1~12月)
getDate() setDate()-------获取/设置日信息
getDay()----------------------获取星期几
getHours() setHours()------获取/设置时信息
getMinutes() setMinutes()----获取/设置分信息
getSeconds() setSeconds()----获取/设置秒信息
getTime() setTime()-------获取/设置距离1970年0点0分0秒0毫秒的毫秒数
3>.字符串对象 String
length------------------------属性,字符串长度
charAt(idx)-------------------返回指定下标处的字符
indexOf(chr)------------------返回指定字符串的子串在当前字符串中第一次出现时的下标
indexOf(chr,fromIdx)----------从指定下标开始第一次出现的下标
lastIndexOf(chr)--------------子串最后一次出现的下标
substring(m,n)----------------取子串(从下标为m处字符到下标为n的字符,包含m,不包含n)
substring(m)------------------取子串(从下标为m处一直到结尾,包含m)
toLowerCase()-----------------转换成小写
toUpperCase()-----------------转换成大写
15.JavaScript中常用对象
1>.数学对象 Math
内置对象Math提供常规的数学运算方法和数学常量
PI,E,abs()--绝对值,sin(),cos(),round()--截断操作,sqrt()--开方,pow()--幂运算,random()--产生随机数
2>.时间对象 Date
使用前需要声明/创建时间对象: var currentTime=new Date();
getYear() setYear()-------获取/设置年信息
getMonth() setMonth()------获取/设置月信息(月份是从0~11对应1~12月)
getDate() setDate()-------获取/设置日信息
getDay()----------------------获取星期几
getHours() setHours()------获取/设置时信息
getMinutes() setMinutes()----获取/设置分信息
getSeconds() setSeconds()----获取/设置秒信息
getTime() setTime()-------获取/设置距离1970年0点0分0秒0毫秒的毫秒数
3>.字符串对象 String
length------------------------属性,字符串长度
charAt(idx)-------------------返回指定下标处的字符
indexOf(chr)------------------返回指定字符串的子串在当前字符串中第一次出现时的下标
indexOf(chr,fromIdx)----------从指定下标开始第一次出现的下标
lastIndexOf(chr)--------------子串最后一次出现的下标
substring(m,n)----------------取子串(从下标为m处字符到下标为n的字符,包含m,不包含n)
substring(m)------------------取子串(从下标为m处一直到结尾,包含m)
toLowerCase()-----------------转换成小写
toUpperCase()-----------------转换成大写
16.系统函数
系统函数不从属于任何的对象,可以在JavaScript代码中的任何位置直接使用
1>.eval(str) 计算字符串形式给出的表达式的值
2>.parseInt(str) 把字符串解析成整数,默认按照十进制,但若是0开头则按八进制，若是0x开头则按十六进制
parseInt(str,radix) 按指定进制,把字符串解析成整数,即把str当成radix进制翻译成十进制
parseFloat(str) 把字符串解析成浮点型数值
以上方法，参数可以是表达式，在解析过程中如果遇到错误(出现非法字符)，则把已解析的返回；如果
第一个就解析错了，则返回NaN(非数值型)
isNaN(v) 判断参数是否为NaN
系统函数不从属于任何的对象,可以在JavaScript代码中的任何位置直接使用
1>.eval(str) 计算字符串形式给出的表达式的值
2>.parseInt(str) 把字符串解析成整数,默认按照十进制,但若是0开头则按八进制，若是0x开头则按十六进制
parseInt(str,radix) 按指定进制,把字符串解析成整数,即把str当成radix进制翻译成十进制
parseFloat(str) 把字符串解析成浮点型数值
以上方法，参数可以是表达式，在解析过程中如果遇到错误(出现非法字符)，则把已解析的返回；如果
第一个就解析错了，则返回NaN(非数值型)
isNaN(v) 判断参数是否为NaN
17.浏览器对象
也是JavaScript的内置对象，可以实现浏览器与HTML页面之间的交互
1>.window对象
代表当前窗体,是浏览器其它对象共同的祖先，所以可以通过它来访问其它浏览器对象及窗口中发生的事
件信息，一般在JavaScript中可以省略Window对象.浏览器打开HTML文件时通常就会创建一个Window对象
如果浏览器划分成多个Frame时，每个Frame都有一个Window，但这些Window之间可能存在隶属关系
1>).alert()
如：window.alert("姓名不能为空！");
也是JavaScript的内置对象，可以实现浏览器与HTML页面之间的交互
1>.window对象
代表当前窗体,是浏览器其它对象共同的祖先，所以可以通过它来访问其它浏览器对象及窗口中发生的事
件信息，一般在JavaScript中可以省略Window对象.浏览器打开HTML文件时通常就会创建一个Window对象
如果浏览器划分成多个Frame时，每个Frame都有一个Window，但这些Window之间可能存在隶属关系
1>).alert()
如：window.alert("姓名不能为空！");
2>).open(URL,windowName,parameterList)---打开一个窗口,显示一个URL指定的一个页面，windowName窗口名字，parameterList窗口参数
如：window.open("ShiZhong.html","myAdvWindow","toolbar=no,left=300,top=200,menubar=no,width=250,height=200");
如：window.open("ShiZhong.html","myAdvWindow","toolbar=no,left=300,top=200,menubar=no,width=250,height=200");
3>).close()-----关闭一个窗口
如：window.close()
如：window.close()
4>).prompt(text,Defaulttext)--------------弹出一个文本输入框
如：var name=window.prompt("请输入您的姓名","");
如：var name=window.prompt("请输入您的姓名","");
5>).confirm(text)------------------------弹出一个确认窗口
如：var flag=window.confirm("确定要删除此记录吗？");
if(flag){
document.form1.submit();
}
如：var flag=window.confirm("确定要删除此记录吗？");
if(flag){
document.form1.submit();
}
6>).setInterval(func,timer)--------------指定时间间隔执行任务
如：window.setInterval("showTime()",1000);
如：window.setInterval("showTime()",1000);
7>).clearInterval(timer)-----------------清楚任务
2>.Document对象
表示当前的页面,是Window对象的属性
write("...")方法:在窗口中显示内容.
表示当前的页面,是Window对象的属性
write("...")方法:在窗口中显示内容.
3>.Location对象
表示当前打开的URL
window.location="targetUrl"//这条语句一旦被执行，就转向targetUrl指向的页面，实现了个页面转向
reload()//重新加载当前页面，即刷新当前页面
表示当前打开的URL
window.location="targetUrl"//这条语句一旦被执行，就转向targetUrl指向的页面，实现了个页面转向
reload()//重新加载当前页面，即刷新当前页面
4>.History对象
go(index)--------表示前进
back()-----------后退
forward()
5>.arguments对象
用在函数中,是存放调用函数时传进来的参数组成的数组.
6>.Navigator对象
当前浏览器的信息，也是Window对象的属性,它封装了当前浏览器的相关信息
appName
appVersion
language
platform
go(index)--------表示前进
back()-----------后退
forward()
5>.arguments对象
用在函数中,是存放调用函数时传进来的参数组成的数组.
6>.Navigator对象
当前浏览器的信息，也是Window对象的属性,它封装了当前浏览器的相关信息
appName
appVersion
language
platform
本文转自NightWolves 51CTO博客，原文链接：http://blog.51cto.com/yangfei520/322021
，如需转载请自行联系原作者
