日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

搜索
分享

JavaScript學(xué)習(xí)筆記

 司馬小賊 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>  

調(diào)用內(nèi)部函數(shù)

[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>當(dāng)您點擊上面的按鈕時，兩個元素會改變。</p>  
  23.   
  24. </body>  
  25. </html>  

調(diào)用外部腳本函數(shù)

[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>  

隨機函數(shù)

[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確認(rèn)框

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5. </head>  
  6. <body>  
  7.   
  8. <p>點擊按鈕，顯示確認(rèn)框。</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>  


帶參數(shù)的函數(shù)

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.   
  5. <p>點擊這個按鈕，來調(diào)用帶參數(shù)的函數(shù)。</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>  

帶參數(shù)和返回值的函數(shù)

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.   
  5. <p>本例調(diào)用的函數(shù)會執(zhí)行一個計算，然后返回結(jié)果：</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遍歷數(shù)組內(nèi)元素

[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>  

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

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多