2020国产成人精品视频,性做久久久久久久久,亚洲国产成人久久综合一区,亚洲影院天堂中文av色

搜索
分享

JavaScript學習筆記

 司馬小賊 2018-02-28

JavaScript 是 Web 的編程語言。

輸出文本

  1. <script>  
  2. document.write(Date());  
  3. </script>  

改變HTML元素

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h1>我的第一個 Web 頁面</h1>  
  5. <p id="demo">我的第一個段落。</p>  
  6. <script>  
  7. document.getElementById("demo").innerHTML="段落已修改。";  
  8. </script>  
  9. </body>  
  10. </html>  

調用內部函數

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.   
  5. <h1>我的 Web 頁面</h1>  
  6.   
  7. <p id="myPar">我是一個段落。</p>  
  8. <div id="myDiv">我是一個div。</div>  
  9.   
  10. <p>  
  11. <button type="button" onclick="myFunction()">點擊這里</button>  
  12. </p>  
  13.   
  14. <script>  
  15. function myFunction()  
  16. {  
  17. document.getElementById("myPar").innerHTML="你好世界";  
  18. document.getElementById("myDiv").innerHTML="你最近怎么樣?";  
  19. }  
  20. </script>  
  21.   
  22. <p>當您點擊上面的按鈕時，兩個元素會改變。</p>  
  23.   
  24. </body>  
  25. </html>  

調用外部腳本函數

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h1>我的 Web 頁面</h1>  
  5. <p id="demo">一個段落。</p>  
  6. <button type="button" onclick="myFunction()">點擊這里</button>  
  7. <p><b>注釋：</b>myFunction 保存在名為 "myScript.js" 的外部文件中。</p>  
  8. <script src="myScript.js"></script>  
  9. </body>  
  10. </html>  

變量的使用

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <script>  
  5. var firstname;  
  6. firstname="Hege";  
  7. document.write(firstname);  
  8. document.write("<br>");  
  9. firstname="Tove";  
  10. document.write(firstname);  
  11. </script>  
  12. <p>The script above declares a variable,  
  13. assigns a value to it, displays the value, changes the value,  
  14. and displays the value again.</p>  
  15. </body>  
  16. </html>  

隨機函數

[javascript] view plain copy
 print?
  1. var r=Math.random();  

Alert警告框

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <script>  
  6. function myFunction()  
  7. {  
  8.     alert("你好，我是一個警告框！");  
  9. }  
  10. </script>  
  11. </head>  
  12. <body>  
  13.   
  14. <input type="button" onclick="myFunction()" value="顯示警告框" />  
  15.   
  16. </body>  
  17. </html>  


confirm確認框

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5. </head>  
  6. <body>  
  7.   
  8. <p>點擊按鈕，顯示確認框。</p>  
  9.   
  10. <button onclick="myFunction()">點我</button>  
  11.   
  12. <p id="demo"></p>  
  13.   
  14. <script>  
  15. function myFunction()  
  16. {  
  17.     var x;  
  18.     var r=confirm("按下按鈕!");  
  19.     if (r==true)  
  20.     {  
  21.         x="你按下了\"確定\"按鈕!";  
  22.     }  
  23.     else  
  24.     {  
  25.         x="你按下了\"取消\"按鈕!";  
  26.     }  
  27.     document.getElementById("demo").innerHTML=x;  
  28. }  
  29. </script>  
  30.   
  31. </body>  
  32. </html>  

prompt提示框（帶輸入）

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5. </head>  
  6. <body>  
  7.   
  8. <p>點擊按鈕查看輸入的對話框。</p>  
  9.   
  10. <button onclick="myFunction()">點我</button>  
  11.   
  12. <p id="demo"></p>  
  13.   
  14. <script>  
  15. function myFunction()  
  16. {  
  17.     var x;  
  18.   
  19.     var person=prompt("請輸入你的名字","Harry Potter");  
  20.     if (person!=null && person!="")  
  21.     {  
  22.         x="你好 " + person + "! 今天感覺如何?";  
  23.         document.getElementById("demo").innerHTML=x;  
  24.     }  
  25. }  
  26. </script>  
  27.   
  28. </body>  
  29. </html>  


帶參數的函數

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.   
  5. <p>點擊這個按鈕，來調用帶參數的函數。</p>  
  6.   
  7. <button onclick="myFunction('Harry Potter','Wizard')">點擊這里</button>  
  8.   
  9. <script>  
  10. function myFunction(name,job)  
  11. {  
  12. alert("Welcome " + name + ", the " + job);  
  13. }  
  14. </script>  
  15.   
  16. </body>  
  17. </html>  

帶參數和返回值的函數

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.   
  5. <p>本例調用的函數會執(zhí)行一個計算，然后返回結果：</p>  
  6.   
  7. <p id="demo"></p>  
  8.   
  9. <script>  
  10. function myFunction(a,b)  
  11. {  
  12. return a*b;  
  13. }  
  14.   
  15. document.getElementById("demo").innerHTML=myFunction(4,3);  
  16. </script>  
  17.   
  18. </body>  
  19. </html>  

for循環(huán)

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.   
  5. <p>Click the button to loop through a block of code five times.</p>  
  6. <button onclick="myFunction()">Try it</button>  
  7. <p id="demo"></p>  
  8.   
  9. <script>  
  10. function myFunction()  
  11. {  
  12. var x="",i;  
  13. for (i=0;i<5;i++)  
  14.   {  
  15.   x=x + "The number is " + i + "<br>";  
  16.   }  
  17. document.getElementById("demo").innerHTML=x;  
  18. }  
  19. </script>  
  20.   
  21. </body>  
  22. </html>  

for in遍歷數組內元素

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <p>點擊下面的按鈕，循環(huán)遍歷對象 "person" 的屬性。</p>  
  5. <button onclick="myFunction()">點擊這里</button>  
  6. <p id="demo"></p>  
  7.   
  8. <script>  
  9. function myFunction()  
  10. {  
  11. var x;  
  12. var txt="";  
  13. var person={fname:"Bill",lname:"Gates",age:56};   
  14.   
  15. for (x in person)  
  16. {  
  17. txt=txt + person[x];  
  18. }  
  19.   
  20. document.getElementById("demo").innerHTML=txt;  
  21. }  
  22. </script>  
  23. </body>  
  24. </html>  

簡單的計時

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script>  
  5. var c=0;  
  6. var t;  
  7. var timer_is_on=0;  
  8.   
  9. function timedCount()  
  10. {  
  11. document.getElementById('txt').value=c;  
  12. c=c+1;  
  13. t=setTimeout(function(){timedCount()},1000);  
  14. }  
  15.   
  16. function doTimer()  
  17. {  
  18. if (!timer_is_on)  
  19.   {  
  20.   timer_is_on=1;  
  21.   timedCount();  
  22.   }  
  23. }  
  24.   
  25. function stopCount()  
  26. {  
  27. clearTimeout(t);  
  28. timer_is_on=0;  
  29. }  
  30. </script>  
  31. </head>  
  32.   
  33. <body>  
  34. <form>  
  35. <input type="button" value="Start count!" onclick="doTimer()" />  
  36. <input type="text" id="txt" />  
  37. <input type="button" value="Stop count!" onclick="stopCount()" />  
  38. </form>  
  39. <p>  
  40. Click on the "Start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting. Click on the "Start count!" button to start the timer again.  
  41. </p>  
  42. </body>  
  43. </html>  

字典

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.   
  5. <script>  
  6. person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}  
  7.   
  8. document.write(person.firstname + " is " + person.age + " years old.");  
  9. </script>  
  10.   
  11. </body>  
  12. </html>  

創(chuàng)建用于對象的模板

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.   
  5. <script>  
  6. function person(firstname,lastname,age,eyecolor)  
  7. {  
  8. this.firstname=firstname;  
  9. this.lastname=lastname;  
  10. this.age=age;  
  11. this.eyecolor=eyecolor;  
  12. }  
  13.   
  14. myFather=new person("John","Doe",50,"blue");  
  15.   
  16. document.write(myFather.firstname + " is " + myFather.age + " years old.");  
  17. </script>  
  18.   
  19. </body>  
  20. </html>  

    本站是提供個人知識管理的網絡存儲空間，所有內容均由用戶發(fā)布，不代表本站觀點。請注意甄別內容中的聯(lián)系方式、誘導購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權內容，請點擊一鍵舉報。
    轉藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多