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>.三目運算符?:
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()">
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()"/>
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()-----------------轉換成大寫
16.系統函數
系統函數不從屬於任何的對象,可以在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("姓名不能爲空！");
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");
3>).close()-----關閉一個窗口
如：window.close()
4>).prompt(text,Defaulttext)--------------彈出一個文本輸入框
如：var name=window.prompt("請輸入您的姓名","");
5>).confirm(text)------------------------彈出一個確認窗口
如：var flag=window.confirm("確定要刪除此記錄嗎？");
if(flag){
document.form1.submit();
}
6>).setInterval(func,timer)--------------指定時間間隔執行任務
如：window.setInterval("showTime()",1000);
7>).clearInterval(timer)-----------------清楚任務
2>.Document對象
表示當前的頁面,是Window對象的屬性
write("...")方法:在窗口中顯示內容.
3>.Location對象
表示當前打開的URL
window.location="targetUrl"//這條語句一旦被執行，就轉向targetUrl指向的頁面，實現了個頁面轉向
reload()//重新加載當前頁面，即刷新當前頁面
4>.History對象
go(index)--------表示前進
back()-----------後退
forward()
5>.arguments對象
用在函數中,是存放調用函數時傳進來的參數組成的數組.
6>.Navigator對象
當前瀏覽器的信息，也是Window對象的屬性,它封裝了當前瀏覽器的相關信息
appName
appVersion
language
platform
收集的javascript的一些基礎知識做個歸納，並在此與大家一起分享。
- 1.document.write("");爲 輸出語句
- 2.JS中的註釋爲//
- 3.傳統的HTML文檔順序是:document->html->(head,body)
- 4.一個瀏覽器窗口中的DOM順序是:window->(navigator,screen,history,location,document)
- 5.得到表單中元素的名稱和值:document.getElementById("表單中元素的ID號").name(或value)
- 6.一個小寫轉大寫的JS: document.getElementById("output").value = document.getElementById("input").value.toUpperCase();
- 7.JS中的值類型:String,Number,Boolean,Null,Object,Function
- 8.JS中的字符型轉換成數值型:parseInt(),parseFloat()
- 9.JS中的數字轉換成字符型:(""+變量)
- 10.JS中的取字符串長度是:(length)
- 11.JS中的字符與字符相連接使用+號.
- 12.JS中的比較操作符有:==等於,!=不等於,>,>=,<.<=
- 13.JS中聲明變量使用:var來進行聲明
- 14.JS中的判斷語句結構:if(condition){}else{}
- 15.JS中的循環結構:for([initial expression];[condition];[upadte expression]) {inside loop}
- 16.循環中止的命令是:break
- 17.JS中的函數定義:function functionName([parameter],...){statement[s]}
- 18.當文件中出現多個form表單時.可以用document.forms[0],document.forms[1]來代替.
- 19.窗口:打開窗口window.open(), 關閉一個窗口:window.close(), 窗口本身:self
- 20.狀態欄的設置:window.status="字符";
- 21.彈出提示信息:window.alert("字符");
- 22.彈出確認框:window.confirm();
- 23.彈出輸入提示框:window.prompt();
- 24.指定當前顯示鏈接的位置:window.location.href="URL"
- 25.取出窗體中的所有表單的數量:document.forms.length
- 26.關閉文檔的輸出流:document.close();
- 27.字符串追加連接符:+=
- 28.創建一個文檔元素:document.createElement(),document.createTextNode()
- 29.得到元素的方法:document.getElementById()
- 30.設置表單中所有文本型的成員的值爲空:
- var form = window.document.forms[0]
- for (var i = 0; i<!-- //-->
- 49.引用一個文件式的JS:<script type="text/javascript" src="aaa.js"></script>
- 50.指定在不支持腳本的瀏覽器顯示的HTML:<noscript></noscript>
- 51.當超鏈和ONCLICK事件都有時,則老版本的瀏覽器轉向a.html,否則轉向b.html.例:<a href="a.html" οnclick="location.href='b.html';return false">dfsadf</a>
- 52.JS的內建對象有:Array,Boolean,Date,Error,EvalError,Function,Math,Number,Object,RangeError,ReferenceError,RegExp,String,SyntaxError,TypeError,URIError
- 53.JS中的換行:\n
- 54.窗口全屏大小:<script>function fullScreen(){this.moveTo(0,0);this.outerWidth=screen.availWidth;this.outerHeight=screen.availHeight;}window.maximize=fullScreen;</script>
- 55.JS中的all代表其下層的全部元素
- 56.JS中的焦點順序:document.getElementByid("表單元素").tabIndex = 1
- 57.innerHTML的值是表單元素的值:如<p id="para">"how are <em>you</em>"<p></p>,則innerHTML的值就是:how are <em>you</em>
- 58.innerTEXT的值和上面的一樣,只不過不會把<em>這種標記顯示出來.
- 59.contentEditable可設置元素是否可被修改,isContentEditable返回是否可修改的狀態.
- 60.isDisabled判斷是否爲禁止狀態.disabled設置禁止狀態
- 61.length取得長度,返回整型數值
- 62.addBehavior()是一種JS調用的外部函數文件其擴展名爲.htc
- 63.window.focus()使當前的窗口在所有窗口之前.
- 64.blur()指失去焦點.與FOCUS()相反.
- 65.select()指元素爲選中狀態.
- 66.防止用戶對文本框中輸入文本:οnfοcus="this.blur()"
- 67.取出該元素在頁面中出現的數量:document.all.tags("div(或其它HTML標記符)").length
- 68.JS中分爲兩種窗體輸出:模態和非模態.window.showModaldialog(),window.showModeless()
- 69.狀態欄文字的設置:window.status='文字',默認的狀態欄文字設置:window.defaultStatus = '文字.';
- 70.添加到收藏夾:external.AddFavorite("http://www.google.com","Google");
- 71.JS中遇到腳本錯誤時不做任何操作:window.onerror = doNothing; 指定錯誤句柄的語法爲:window.onerror = handleError;
- 72.JS中指定當前打開窗口的父窗口:window.opener,支持opener.opener...的多重繼續.
- 73.JS中的self指的是當前的窗口
- 74.JS中狀態欄顯示內容:window.status="內容"
- 75.JS中的top指的是框架集中最頂層的框架
- 76.JS中關閉當前的窗口:window.close();
- 77.JS中提出是否確認的框:if(confirm("Are you sure?")){alert("ok");}else{alert("Not Ok");}
- 78.JS中的窗口重定向:window.navigate("http://www.google.com");
- 79.JS中的打印:window.print()
- 80.JS中的提示輸入框:window.prompt("message","defaultReply");
- 81.JS中的窗口滾動條:window.scroll(x,y)
- 82.JS中的窗口滾動到位置:window.scrollby
- 83.JS中設置時間間隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout
- 84.JS中的模態顯示在IE4+行,在NN中不行:showModalDialog("URL"[,arguments][,features]);
- 85.JS中的退出之前使用的句柄:function verifyClose(){event.returnValue="we really like you and hope you will stay longer.";}} window.οnbefοreunlοad=verifyClose;
- 86.當窗體第一次調用時使用的文件句柄:onload()
- 87.當窗體關閉時調用的文件句柄:onunload()
- 88.window.location的屬性: protocol(http:),hostname(www.example.com),port(80),host(www.example.com:80),pathname("/a/a.html"),hash("#giantGizmo",指跳轉到相應的錨記),href(全部的信息)
- 89.window.location.reload()刷新當前頁面.
- 89-1.parent.location.reload()刷新父親對象（用於框架）
- 89-2.opener.location.reload()刷新父窗口對象（用於單開窗口）
- 89-3.top.location.reload()刷新最頂端對象（用於多開窗口）
- 90.window.history.back()返回上一頁,window.history.forward()返回下一頁,window.history.go(返回第幾頁,也可以使用訪問過的URL)
- 91.document.write()不換行的輸出,document.writeln()換行輸出
- 92.document.body.noWrap=true;防止鏈接文字折行.
- 93.變量名.charAt(第幾位),取該變量的第幾位的字符.
- 94."abc".charCodeAt(第幾個),返回第幾個字符的ASCii碼值.
- 95.字符串連接:string.concat(string2),或用+=進行連接
- 96.變量.indexOf("字符",起始位置),返回第一個出現的位置(從0開始計算)
- 97.string.lastIndexOf(searchString[,startIndex])最後一次出現的位置.
- 98.string.match(regExpression),判斷字符是否匹配.
- 99.string.replace(regExpression,replaceString)替換現有字符串.
- 100.string.split(分隔符)返回一個數組存儲值.
- 101.string.substr(start[,length])取從第幾位到指定長度的字符串.
- 102.string.toLowerCase()使字符串全部變爲小寫.
- 103.string.toUpperCase()使全部字符變爲大寫.
- 104.parseInt(string[,radix(代表進制)])強制轉換成整型.
- 105.parseFloat(string[,radix])強制轉換成浮點型.
- 106.isNaN(變量):測試是否爲數值型.
- 107.定義常量的關鍵字:const,定義變量的關鍵字:var</em>
