Js基礎知識-入門

時間 2019-11-30
原文原文鏈接
1 建立腳本塊
<script  language=」JavaScript」>
JavaScript code goes here 
</script> 
2 隱藏腳本代碼
 <script language=」JavaScript」>
 document.write(「Hello」);
 </script> 

在不支持JavaScript 的瀏覽器中將不執行相關代碼
3 瀏覽器不支持的時候顯示
 <noscript> 
 Hello to the non-JavaScript browser. 
 </noscript> 

4 連接外部腳本文件
 <script language=」JavaScript」src="/」filename.js"」></script> 

6 輸出到瀏覽器
 document.write(「<strong>Hello</strong>」);

7 定義變量
 var myVariable = 「Hello Word」;

8 字符串相加
 var myString = 「String1」+ 「String2」;

9 字符串搜索（從零開始）
 <script language=」JavaScript」>
 <!—
 var myVariable = 「Hellothere」;
 var therePlace = myVariable.search(「there」);
 document.write(therePlace); 
 // --> 
 </script> 

10 字符串替換
 thisVar.replace(「Monday」,」Friday」);

11 格式化字串
<script  language=」JavaScript」>
 <!-- 
 var myVariable = 「Hello there」;
 document.write(myVariable.big() + 「<br>」);
 document.write(myVariable.blink() + 「<br>」);
 document.write(myVariable.bold() + 「<br>」);
 document.write(myVariable.fixed() + 「<br>」);
 document.write(myVariable.fontcolor(「red」)+ 「<br>」);
 document.write(myVariable.fontsize(「18pt」)+ 「<br>」);
 document.write(myVariable.italics() + 「<br>」);
document.write(myVariable.small() + 「<br>」);
 document.write(myVariable.strike() + 「<br>」);
document.write(myVariable.sub() + 「<br>」);
document.write(myVariable.sup() + 「<br>」);
document.write(myVariable.toLowerCase() + 「<br>」);
document.write(myVariable.toUpperCase() + 「<br>」);
var firstString = 「My String」;
var finalString = firstString.bold().toLowerCase().fontcolor(「red」);
</script> 

12 建立數組
 <script language=」JavaScript」>
 <!-- 
 var myArray = new Array(5); 
 myArray[0] = 「First Entry」;
 myArray[1] = 「Second Entry」;
 myArray[2] = 「Third Entry」;
 myArray[3] = 「Fourth Entry」;
 myArray[4] = 「Fifth Entry」;
 var anotherArray = new Array(「First Entry」,」Second Entry」,」Third Entry」,」Fourth Entry」,」Fifth Entry」); 
 // --> 
1 </script> 

13 數組排序
 <script language=」JavaScript」>
 <!-- 
 var myArray = new Array(5); 
 myArray[0] = 「z」;
 myArray[1] = 「c」;
 myArray[2] = 「d」;
 myArray[3] = 「a」;
 myArray[4] = 「q」;
 document.write(myArray.sort()); 
 // --> 
1 </script> 

14 分割字符串
 <script language=」JavaScript」>
 <!-- 
 var myVariable = 「a,b,c,d」;
 var stringArray = myVariable.split(「,」);
 document.write(stringArray[0]); 
 document.write(stringArray[1]); 
 document.write(stringArray[2]); 
 document.write(stringArray[3]); 
 // --> 
 </script> 

15 彈出警告信息
 <script language=」JavaScript」>
 <!-- 
 window.alert(「Hello」);
 // --> 
 </script> 
16 彈出確認框
 <script language=」JavaScript」>
 <!-- 
 var result = window.confirm(「Click OK to continue」);
 // --> 
 </script> 

17 定義函數
 <script language=」JavaScript」>
 <!-- 
 function multiple(number1,number2) { 
 var result = number1 * number2; 
 return result; 
 } 
 // --> 
 </script> 

18 調用JS函數
 <a href=」#」onClick=」function Name()」>Linktext</a> 
 <a href="/」javascript:functionName"()」>Linktext</a> 

19 在頁面加載完成後執行函數
 <body onLoad=」functionName();」>
 Body of the page 
 </body> 



20 條件判斷
 <script> 
 <!-- 
 var userChoice = window.confirm(「Choose OK or Cancel」);
 var result = (userChoice == true) ? 「OK」: 「Cancel」;
 document.write(result); 
 // --> 
 </script> 

21 指定次數循環
 <script> 
 <!-- 
 var myArray = new Array(3); 
 myArray[0] = 「Item 0」;
 myArray[1] = 「Item 1 」;
 myArray[2] = 「Item 2」;
 for (i = 0; i < myArray.length; i++)
 { 
 document.write(myArray[i] + 「<br>」);
 } 
 // --> 
</script> 

22 設定未來執行
 <script> 
 <!-- 
 function hello() { 
 window.alert(「Hello」);
 } 
 window.setTimeout(「hello()」,5000);
 // --> 
 </script> 

23 定時執行函數
 <script> 
 <!-- 
 function hello() { 
 window.alert(「Hello」);
 window.setTimeout(「hello()」,5000);
 } 
 window.setTimeout(「hello()」,5000);
 // --> 
 </script> 

取消定時執行
 <script> 
 <!-- 
 function hello() { 
 window.alert(「Hello」);
 } 
 var myTimeout = window.setTimeout(「hello()」,5000);
 window.clearTimeout(myTimeout); 
 // --> 
 </script> 


25 在頁面卸載時候執行函數
 <body onUnload=」functionName();」>
 Body of the page 
 </body> 

2：瀏覽器輸出
26 訪問document對象
 <script language=」JavaScript」>
 var myURL = document.URL; 
 window.alert(myURL); 
 </script> 

27 動態輸出HTML 
 <script language=」JavaScript」>
 document.write(「<p>Here‟ssome information about this document:</p>」);
 document.write(「<ul>」);
 document.write(「<li>Referring Document: 「+ document.referrer + 「</li>」);
 document.write(「<li>Domain:「+ document.domain + 「</li>」);
 document.write(「<li>URL: 「+ document.URL + 「</li>」);
 document.write(「</ul>」);
 </script> 

28 輸出換行
 document.writeln(「<strong>a</strong>」);
 document.writeln(「b」);

29 輸出日期
 <script language=」JavaScript」>
 var thisDate = new Date(); 
 document.write(thisDate.toString()); 
 </script> 

30 指定日期的時區
 <script language=」JavaScript」>
 var myOffset = -2; 
 var currentDate = new Date(); 
 var userOffset = currentDate.getTimezoneOffset()/60; 
 var timeZoneDifference = userOffset - myOffset; 
 currentDate.setHours(currentDate.getHours() + timeZoneDifference); 
 document.write(「The time and date in Central Europe is: 「+ currentDate.toLocaleString()); 
 </script> 

31 設置日期輸出格式
 <script language=」JavaScript」>
 var thisDate = new Date(); 
 var thisTimeString = thisDate.getHours() + 「:」+ thisDate.getMinutes(); 
 var thisDateString = thisDate.getFullYear() + 「/」+ thisDate.getMonth() + 「/」+ thisDate.getDate(); 
 document.write(thisTimeString + 「on 「+ thisDateString); 
 </script> 

32 讀取URL參數
 <script language=」JavaScript」>
 var urlParts = document.URL.split(「?」);
 var parameterParts = urlParts[1].split(「&」);
 for (i = 0; i < parameterParts.length; i++) { 
 var pairParts = parameterParts[i].split(「=」);
 var pairName = pairParts[0]; 
 var pairValue = pairParts[1]; 
 document.write(pairName + 「：「+pairValue ); 
 } 
 </script> 

33 打開一個新的document對象
 <script language=」JavaScript」>
 function newDocument() { 
 document.open(); 
 document.write(「<p>This is a New Document.</p>」);
 document.close(); 
 } 
 </script> 

34 頁面跳轉
 <script language=」JavaScript」>
 window.location = 「http://www.liu21st.com/」;
 </script> 

35 添加網頁加載進度窗口
 <html> 
 <head> 
 <script language='javaScript'> 
 var placeHolder = indow.open('holder.html','placeholder','width=200,height=200'); 
 </script> 
 <title>The Main Page</title> 
 </head> 
 <body onLoad='placeHolder.close()'> 
 <p>This is the main page</p> 
 </body> 
</html> 

3：圖像


36 讀取圖像屬性
 <img src="/」image1.jpg"」name=」myImage」>
 <a href=」#」onClick=」window.alert(document.myImage.width)」>Width</a>

37 動態加載圖像
 <script language=」JavaScript」>
 myImage = new Image; 
 myImage.src = 「Tellers1.jpg」;
 </script> 

38 簡單的圖像替換
 <script language=」JavaScript」>
 rollImage = new Image; 
 rollImage.src = 「rollImage1.jpg」;
 defaultImage = new Image; 
 defaultImage.src = 「image1.jpg」;
 </script> 
 <a href="/」myUrl"」onMouseOver=」document.myImage.src= rollImage.src;」
 onMouseOut=」document.myImage.src= defaultImage.src;」>
 <img src="/」image1.jpg"」name=」myImage」width=100 height=100 
 border=0> 

39 隨機顯示圖像
 <script  language=」JavaScript」>
 var imageList = new Array; 
 imageList[0] = 「image1.jpg」;
 imageList[1] = 「image2.jpg」;
 imageList[2] = 「image3.jpg」;
 imageList[3] = 「image4.jpg」;
 var imageChoice = Math.floor(Math.random() * imageList.length); 
 document.write(「<imgsrc=」‟+ imageList[imageChoice] + „「>‟);
 </script> 

40 函數實現的圖像替換
 <script language=」JavaScript」>
 var source = 0; 
 var replacement = 1; 
 function createRollOver(originalImage,replacementImage) { 
 var imageArray = new Array; 
 imageArray[source] = new Image; 
 imageArray[source].src = originalImage; 
 imageArray[replacement] = new Image; 
 imageArray[replacement].src = replacementImage; 
 return imageArray; 
 } 
 var rollImage1 = createRollOver(「image1.jpg」,」rollImage1.jpg」);
 </script> 
 <a href=」#」onMouseOver=」document.myImage1.src= rollImage1[replacement].src;」
 onMouseOut=」document.myImage1.src= rollImage1[source].src;」>
 <img src="/」image1.jpg"」width=100 name=」myImage1」border=0> 
</a> 


41 建立幻燈片
 <script language=」JavaScript」>
 var imageList = new Array; 
 imageList[0] = new Image; 
 imageList[0].src = 「image1.jpg」;
 imageList[1] = new Image; 
 imageList[1].src = 「image2.jpg」;
 imageList[2] = new Image; 
 imageList[2].src = 「image3.jpg」;
 imageList[3] = new Image; 
 imageList[3].src = 「image4.jpg」;
 function slideShow(imageNumber) { 
 document.slideShow.src = imageList[imageNumber].src; 
 imageNumber += 1; 
 if (imageNumber < imageList.length) { 
 window.setTimeout(「slideShow(「+ imageNumber + 「)」,3000);
 } 
 } 
 </script> 
< /head> 
20: <body onLoad=」slideShow(0)」>
2 <img src="/」image1.jpg"」width=100  name=」slideShow」>

42 隨機廣告圖片
 <script language=」JavaScript」>
 var imageList = new Array; 
 imageList[0] = 「image1.jpg」;
 imageList[1] = 「image2.jpg」;
 imageList[2] = 「image3.jpg」;
 imageList[3] = 「image4.jpg」;
 var urlList = new Array; 
 urlList[0] = 「http://some.host/」;
 urlList[1] = 「http://another.host/」;
 urlList[2] = 「http://somewhere.else/」;
 urlList[3] = 「http://right.here/」;
 var imageChoice = Math.floor(Math.random() * imageList.length); 
 document.write(„<a href=」‟+ urlList[imageChoice] + „「><img src=」‟+ imageList[imageChoice] + „「></a>‟);
 </script> 

JavaScript 就這麼回事
4：表單
43 表單構成
 <form  method=」post」action=」target.html」name=」thisForm」>
 <input  type=」text」name=」myText」>
 <select name=」mySelect」>
 <option  value=」1」>FirstChoice</option> 
 <option   value=」2」>Second Choice</option> 
 </select> 
 <br> 
 <input  type=」submit」value=」Submit Me」>
 </form> 

44 訪問表單中的文本框內容
 <form name=」myForm」>
 <input type=」text」name=」myText」>
 </form> 
 <a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a> 

45 動態複製文本框內容
 <form name=」myForm」>
 Enter some Text: <input type=」text」name=」myText」><br>
 Copy Text: <input type=」text」name=」copyText」>
 </form> 
 <a href=」#」onClick=」document.myForm.copyText.value= 
 document.myForm.myText.value;」>CopyText Field</a> 

46 偵測文本框的變化
 <form  name=」myForm」>
 Enter some Text: <input type=」text」name=」myText」onChange=」alert(this.value);」>
 </form> 

47 訪問選中的Select 
 <form name=」myForm」>
 <select name=」mySelect」>
 <option value=」FirstChoice」>1</option>
 <option value=」SecondChoice」>2</option> 
 <option value=」ThirdChoice」>3</option>
 </select> 
 </form> 
 <a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a> 

48 動態增長Select項
 <form name=」myForm」>
 <select name=」mySelect」>
 <option value=」FirstChoice」>1</option>
 <option value=」SecondChoice」>2</option>
 </select> 
 </form> 
 <script language=」JavaScript」>
 document.myForm.mySelect.length++; 
 document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = 「3」;
 document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = 「ThirdChoice」; 
 </script> 

49 驗證表單字段
 <script language=」JavaScript」>
 function checkField(field) { 
 if (field.value == 「」){ 
 window.alert(「Youmust enter a value in the field」);
 field.focus(); 
 } 
 } 
 </script> 
 <form name=」myForm」action=」target.html」>
 Text Field: <input type=」text」name=」myField」onBlur=」checkField(this)」>
 <br><input  type=」submit」>
 </form> 

50 驗證Select項
 function checkList(selection) { 
 if (selection.length == 0) { 
 window.alert(「You must make a selection from the list.」);
 return false; 
 } 
 return true; 
 } 

51 動態改變表單的action 
 <form name=」myForm」action=」login.html」>
 Username: <input type=」text」name=」username」><br>
 Password: <input type=」password」name=」password」><br>
 <input type=」button」value=」Login」onClick=」this.form.submit();」>
 <input type=」button」value=」Register」onClick=」this.form.action= 
„register.html‟;
this.form.submit();」>
 <input type=」button」value=」Retrieve Password」onClick=」this.form.action= 「password.html‟;this.form.submit();」>
 </form> 

52 使用圖像按鈕
 <form name=」myForm」action=」login.html」>
 Username: <input type=」text」name=」username」><br>
 Password: <input type=」password」name=」password」><br>
 <input type=」image」src="/」login.gif"」value=」Login」>
 </form> 
 
53 表單數據的加密
 <SCRIPT LANGUAGE='JavaScript'> 
 <!-- 
 function encrypt(item) { 
 var newItem = '';  for (i=0; i < item.length; i++) { 
 newItem += item.charCodeAt(i) + '.'; 
 } 
 return newItem; 
 } 
 function encryptForm(myForm) { 
 for (i=0; i < myForm.elements.length; i++) { 
myForm.elements[i].value = encrypt(myForm.elements[i].value); 
} 
 } 
  </SCRIPT> 
<form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'> 
 Enter Some Text: <input type=text name=myField><input type=submit> 
20: </form>5：窗口和框架

54 改變瀏覽器狀態欄文字提示
 <script language=」JavaScript」>
 window.status = 「Anew status message」;
 </script> 

55 彈出確認提示框
 <script language=」JavaScript」>
 var userChoice = window.confirm(「Click OK or Cancel」);
 if (userChoice) { 
 document.write(「You chose OK」);
 } else { 
 document.write(「You chose Cancel」);
 } 
 </script> 

56 提示輸入
 <script language=」JavaScript」>
 var userName = window.prompt(「Please Enter Your Name」,」Enter Your Name 
Here」);
 document.write(「Your Name is 「+ userName); 
 </script> 

57 打開一個新窗口
 //打開一個名稱爲myNewWindow的瀏覽器新窗口

 <script language=」JavaScript」>
 window.open(「http://www.liu21st.com/」,」myNewWindow」);
 </script> 

58 設置新窗口的大小
 <script language=」JavaScript」>
 window.open(「http://www.liu21st.com/」,」myNewWindow」,'height=300,width=300');
 </script> 


59 設置新窗口的位置
 <script language=」JavaScript」>
 window.open(「http://www.liu21st.com/」,」myNewWindow」,'height=300,width=300,left=200,screenX=200,top=100,screenY=100'); 
 </script> 

60 是否顯示工具欄和滾動欄
 <script language=」JavaScript」>
 window.open(「http:

61 是否能夠縮放新窗口的大小
 <script language=」JavaScript」>
 window.open('http://www.liu21st.com/' , 'myNewWindow', 'resizable=yes' );</script> 

62 加載一個新的文檔到當前窗口
 <a href='#' onClick='document.location = '125a.html';' >Open New Document</a> 

63 設置頁面的滾動位置
 <script language=」JavaScript」>
 if (document.all) { 
//若是是IE瀏覽器則使用scrollTop屬性
 document.body.scrollTop = 200;  }
 else { 
//若是是NetScape瀏覽器則使用pageYOffset屬性
 window.pageYOffset = 200; 
 }</script> 
64 在IE中打開全屏窗口
 <a href='#' onClick=」window.open('http://www.juxta.com/','newWindow','fullScreen=yes');」>Open a full-screen window</a> 

65 新窗口和父窗口的操做
 <script language=」JavaScript」>
 //定義新窗口
 var newWindow = window.open(「128a.html」,」newWindow」);
 newWindow.close(); //
在父窗口中關閉打開的新窗口
 </script> 
 在新窗口中關閉父窗口
 window.opener.close() 

66 往新窗口中寫內容
 <script language=」JavaScript」>
 var newWindow = window.open(「」,」newWindow」);
 newWindow.document.open(); 
 newWindow.document.write(「This is a new window」);
 newWIndow.document.close(); 
 </script> 

67 加載頁面到框架頁面
 <frameset cols=」50%,*」>
 <frame name=」frame1」src="/」135a.html"」>
 <frame name=」frame2」src="/」about:blank"」>
 </frameset> 
 在frame1中加載frame2中的頁面
 parent.frame2.document.location = 「135b.html」;

68 在框架頁面之間共享腳本
若是在frame1中html文件中有個腳本
 function doAlert() { 
 window.alert(「Frame1 is loaded」);
 } 
那麼在frame2中能夠如此調用該方法
 <body onLoad=」parent.frame1.doAlert();」>
 This is frame 2. 
 </body> 

69 數據公用
能夠在框架頁面定義數據項，使得該數據能夠被多個框架中的頁面公用
 <script language=」JavaScript」>
 var persistentVariable = 「This is a persistent value」;
 </script> 
 <frameset cols=」50%,*」>
 <frame name=」frame1」src="/」138a.html"」>
 <frame name=」frame2」src="/」138b.html"」> 
 </frameset> 
這樣在frame1和frame2中均可以使用變量persistentVariable 

70 框架代碼庫
根據以上的一些思路，咱們可使用一個隱藏的框架頁面來做爲整個框架集的代碼庫
 <frameset cols=」0,50%,*」>
 <frame name=」codeFrame」src="/」140code.html"」>
 <frame name=」frame1」src="/」140a.html"」>
 <frame name=」frame2」src="/」140b.html"」>
 </frameset> 
加入收藏夾：
<span style="CURSOR: hand" onClick="window.external.addFavorite('http://www.zblgbj.gov.cn','淄博市委老幹部局')">
加入收藏
</span> 
設爲首頁：<span onclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.zblgbj.gov.cn');" style="CURSOR: hand">設爲主頁</span> 

引入樣式表(css)的四種方式
1、使用STYLE屬性：將STYLE屬性直接加在個別的元件標籤裏。
<元件(標籤) STYLE="性質(屬性) 設定值1; 性質(屬性)
 設定值2; ...} 
例如：<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"標楷體"; line-height:150%> 
這種用法的優勢
是可靈巧應用樣式於各標籤中，可是缺點則是沒有整篇文件的『統一性』。

2、使用STYLE標籤：將樣式規則寫在<STYLE>...</STYLE>標籤之中。
<STYLE TYPE="text/css"> 
<!-- 
樣式規則表
--> 
</STYLE> 
例如：
<STYLE TYPE="text/css"> 
<!-- 
BODY { 
color: BLUE; 
background: #FFFFCC; 
font-size: 9pt} 
TD, P { 
COLOR: GREEN; 
font-size: 9pt} 
--> 
</STYLE> 
一般是將整個的<STYLE>...</STYLE>結構寫在網頁的<HEAD> </HEAD>部份之中。這種用法的優勢就是在於整篇文件的統一性，只要是有聲明的的元件即會套用該樣式規則。缺點就是在個別元件的靈活度不足。

3、使用LINK標籤：將樣式規則寫在.css的樣式檔案中，再以<LINK>標籤引入。
假設咱們把樣式規則存成一個example.css的檔案，咱們只要在網頁中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css"> 
便可套用該樣式檔案中所制定好的樣式了。
一般是將LINK標籤寫在網頁的<head></head>部份之中。
這種用法的優勢就是在於能夠把要套用相一樣式規則的數篇文件都指定到同一個樣式檔案便可。缺點也是在個別文件或元件的靈活度不足。
4、使用@import引入：跟LINK用法很像，但必放在<STYLE>...</STYLE> 中。
<STYLE TYPE="text/css"> 
<!-- 
@import url(
引入的樣式表的位址、路徑與檔名
); 
</STYLE> 
例如：
<STYLE TYPE="text/css"> 
@import url(http://yourweb/ example.css); 
</STYLE> 
要注意的是，行末的分號是絕對不可少的！
1. JS入門基礎知識
2. js入門基礎知識（一）
3. MySql入門基礎知識
4. JSON入門基礎知識
5. Lucene入門——基礎知識
6. MySQL入門基礎知識
7. c++基礎知識入門
8. CodeMix入門基礎知識
9. Angular基礎知識入門
10. java基礎知識入門
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Kotlin 基礎語法 - Kotlin 教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。