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