电竞比分网-中国电竞赛事及体育赛事平台

搜索
分享

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

 司馬小賊 2018-02-28

JavaScript 是 Web 的編程語(yǔ)言。

輸出文本

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

改變HTML元素

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h1>我的第一個(gè) Web 頁(yè)面</h1>  
  5. <p id="demo">我的第一個(gè)段落。</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 頁(yè)面</h1>  
  6.   
  7. <p id="myPar">我是一個(gè)段落。</p>  
  8. <div id="myDiv">我是一個(gè)div。</div>  
  9.   
  10. <p>  
  11. <button type="button" onclick="myFunction()">點(diǎn)擊這里</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)您點(diǎn)擊上面的按鈕時(shí)，兩個(gè)元素會(huì)改變。</p>  
  23.   
  24. </body>  
  25. </html>  

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

[javascript] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h1>我的 Web 頁(yè)面</h1>  
  5. <p id="demo">一個(gè)段落。</p>  
  6. <button type="button" onclick="myFunction()">點(diǎn)擊這里</button>  
  7. <p><b>注釋?zhuān)?lt;/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>  

隨機(jī)函數(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("你好，我是一個(gè)警告框！");  
  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>點(diǎn)擊按鈕，顯示確認(rèn)框。</p>  
  9.   
  10. <button onclick="myFunction()">點(diǎn)我</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>點(diǎn)擊按鈕查看輸入的對(duì)話框。</p>  
  9.   
  10. <button onclick="myFunction()">點(diǎn)我</button>  
  11.   
  12. <p id="demo"></p>  
  13.   
  14. <script>  
  15. function myFunction()  
  16. {  
  17.     var x;  
  18.   
  19.     var person=prompt("請(qǐng)輸入你的名字","Harry Potter");  
  20.     if (person!=null && person!="")  
  21.     {  
  22.         x="你好 " + person + "! 今天感覺(jué)如何?";  
  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ǎn)擊這個(gè)按鈕，來(lái)調(diào)用帶參數(shù)的函數(shù)。</p>  
  6.   
  7. <button onclick="myFunction('Harry Potter','Wizard')">點(diǎn)擊這里</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ù)會(huì)執(zhí)行一個(gè)計(jì)算，然后返回結(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>點(diǎn)擊下面的按鈕，循環(huán)遍歷對(duì)象 "person" 的屬性。</p>  
  5. <button onclick="myFunction()">點(diǎn)擊這里</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>  

簡(jiǎn)單的計(jì)時(shí)

[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)建用于對(duì)象的模板

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

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

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類(lèi)似文章 更多