logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

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>本例调用的函数会执行一个计算，然后返回结果：</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循环

[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>点击下面的按钮，循环遍历对象 "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>  

创建用于对象的模板

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

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 司马小贼 > 《待分类》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多