javascript 入門基礎

時間  2019-11-29
標籤 javascript 入門 基礎 欄目 JavaScript 简体版
原文   原文鏈接
 

javascript基礎學習-語法學習(二)

分類： javascript 2014-04-13 00:57  55人閱讀  評論(0)  收藏  舉報
javascript 基礎 語法

上篇關於javascript的博客簡單介紹了一下javascript的變量和運算符,下面簡單介紹一下javascript中的基本語句.
1.條件語句if.javascript

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.  <html>  
  2. lt;head>  
  3. <title>VarTest</title>  
  4. <script language="javascript">  
  5.  var varTest=1;  
  6.  if(varTest=1) {  
  7.   alert("true");  
  8.  }else{  
  9.   alert("false");  
  10.  }  
  11. </script>  
  12. lt;/head>  
  13. </html>  

結果彈出窗口true.
2.三元運算符?:.html

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <html>  
  2. <head>  
  3.  <title>VarTest2</title>  
  4.  <script language="javascript">  
  5.   var varTest2=2;  
  6.   alert(varTest2==1?"1":"2");  
  7.  </script>  
  8. </head>  
  9.  </html>   

  結果彈出窗口2.
3.條件語句switch.java

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.  <html>  
  2. lt;head>  
  3. <title>VarTest3</title>  
  4. <script language="javascript">  
  5.  var varTest3=2;  
  6.  switch(varTest3){  
  7.   case 1:  
  8.    alert("1");  
  9.    break;  
  10.   case 2:  
  11.    alert("2");  
  12.    break;  
  13.   default:  
  14.    alert("other");  
  15.    break;  
  16.   }  
  17. </script>  
  18. lt;/head>  
  19.  </html>  

  結果彈出窗口2.
4.循環語句for.小程序

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.  <html>  
  2. <head>  
  3.  <title>VarTest4</title>  
  4.  <script language="javascript">  
  5.   var sum=0;  
  6.   for(var i=0; i<=100; i++){  
  7.    sum+=i;  
  8.   }  
  9.   alert(sum);  
  10.  </script>  
  11. </head>  
  12.  </html>   

  結果彈出窗口5050.
5.循環語句while.windows

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.   <html>  
  2. <head>  
  3.  <title>VarTest5</title>  
  4.  <script language="javascript">  
  5.   var sum=0;  
  6.   var i=0;  
  7.   while(i<=100){  
  8.    sum+=i;  
  9.    i++;  
  10.   }  
  11.   alert(sum);  
  12.  </script>  
  13. </head>  
  14.  </html>  

  結果彈出窗口5050.
6.循環語句do while.數組

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.   <html>  
  2. <head>  
  3.  <title>VarTest6</title>  
  4.  <script language="javascript">  
  5.   var i=10000;  
  6.   do{  
  7.    i++;  
  8.   }while(i<=100);  
  9.   alert(i);  
  10.  </script>  
  11. </head>  
  12.  </html>  

  結果彈出窗口10001.注意與while循環的區別是do while循環不管如何都會執行一次.
7.跳出循環語句break.瀏覽器

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.  <html>  
  2. lt;head>  
  3. <title>VarTest7</title>  
  4. <script language="javascript">  
  5.  for(var i=0; i<=100; i++){  
  6.   if(i==50){  
  7.    break;  
  8.   }  
  9.  }  
  10.  alert(i);  
  11. </script>  
  12. lt;/head>  
  13. </html>  

  結果彈出窗口50.
8.跳出循環語句continue.框架

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <html>  
  2. lt;head>  
  3. <title>VarTest8</title>  
  4. <script language="javascript">  
  5.  var sum=0;  
  6.  for(var i=0; i<=100; i++){  
  7.   if(i==50){  
  8.    continue;  
  9.   }  
  10.   sum+=i;  
  11.  }  
  12.  alert(sum);  
  13. </script>  
  14. lt;/head>  
  15. </html>  

  結果輸出窗口時5000.
  break和continue都是跳出循環,區別是break是跳出整個循環,continue是跳出本次循環.
9.++i和i++的區別.svg

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.   <html>  
  2. <head>  
  3.  <title>VarTest9</title>  
  4.  <script language="javascript">  
  5.   var i=0;  
  6.   var j=0;  
  7.   alert("i++="+(i++)+",i="+i+":++j="+(++j)+",j="+j);  
  8.  </script>  
  9. </head>  
  10.  </html>  

  結果彈出窗口i++=0,i=1:++j=1,j=1.
  x++和x++都會是x自己加1,二者的區別是前者是先賦值後加1,然後者的區別是先加1,後賦值.
javasctipt的基本語法就講到這裏,請繼續關注個人博客與我一塊兒學習javascript.函數

 

javascript基礎學習-語法學習(三)

分類： javascript 2014-04-13 23:39  43人閱讀  評論(0)  收藏  舉報
javascript 基礎 語法 事件 onSubmit
上兩篇關於javascript的博客簡單介紹了一下javascript的變量,運算符和基本語句,下面接着介紹.
1.javascript中數組的用法.
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.   <html>  
  2. <head>  
  3.     <title>ArrayTest</title>  
  4.     <script language="javascript">  
  5.         var array=new Array(3);  
  6.         array[0]=1;  
  7.         array[1]=2;  
  8.         array[2]=3;  
  9.         array[3]=4;  
  10.         document.write(array[0]);  
  11.         document.write(array[1]);  
  12.         document.write(array[2]);  
  13.         document.write(array[3]);  
  14.     </script>  
  15. </head>  
  16.  </html>  
  結果是頁面顯示1234,在javascript中不存在數組越界的錯誤.
2.javascript中關於操做字符串的charAt方法.
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <html>  
  2. <head>  
  3.     <title>StringTest</title>  
  4.     <script language="javascript">  
  5.         var str="StringTest";  
  6.         document.write(str.charAt(2));  
  7.     </script>  
  8. </head>  
  9.  </html>  
  結果是頁面顯示r.
3.javascript中function函數的使用.
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <html>  
  2. <head>  
  3.     <title>FunctionTest</title>  
  4.     <script language="javascript">  
  5.         function test() {  
  6.             alert("FunctionTest!");  
  7.         }  
  8.         test();  
  9.     </script>  
  10. </head>  
  11. </html>  
 結果是彈出窗口FunctionTest.
5.javascript中事件的使用.
  a.onLoad和onUnload事件.
  
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.  <html>  
  2. <head>  
  3.     <title>EventTest1</title>  
  4. </head>  
  5. <body onload="javascropt:alert('onLoad')" onUnload="javascript:alert('onUnload')">  
  6. </body>  
  7.    </html>  
    結果是彈出窗口onLoad,當刷新此頁面時,即此頁面被替換了,頁面會依次彈出onUnload和onLoad.
  b.onSubmit事件.
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <html>  
  2. <head>  
  3.     <title>EventTest2</title>  
  4. </head>  
  5. <body>  
  6.     <form name="EventTest2" action="EventTest1.html" onSubmit="return true">  
  7.         <input type="submit" value="ok">  
  8.     </form>  
  9. </body>  
  10.    </html>  
    結果是顯示一個button按鈕,按ok按鈕彈出onLoad窗口,其中onSubmit事件是提交表單以前觸發的事件.
    若是將return true改成return false,那麼ok按鈕不管怎麼按都不會跳到action指向的html頁面.

    onSubmit事件的用途主要是表單的驗證,看以下小程序.

 

[html]  view plain copy
 
  1.   <html>  
  2. <head>  
  3.     <title>EventTest3</title>  
  4.     <script language="javascript">  
  5.         function check(){  
  6.             if(document.form.username.value==""){  
  7.                 alert("用戶名不容許爲空!");  
  8.                 return false;  
  9.             }  
  10.             return true;  
  11.         }  
  12.     </script>  
  13. </head>  
  14. <body>  
  15.     <form name="form" action="EventTest1.html" onSubmit="return check()">  
  16.         <input type="text" name="username">  
  17.         <input type="submit" value="ok">  
  18.     </form>  
  19. </body>  
  20.    </html>  
    結果顯示一個文本框和一個button,若是文本框裏什麼內容都沒有,點擊button按鈕,頁面會作相應的提示.
  c.onClick事件.
[html]  view plain copy
 
  1. <html>  
  2.     <head>  
  3.         <title>EventTest4</title>  
  4.     </head>  
  5.     <body>   
  6.         <image src="EventTest4.jpg"  onClick="alert('onClick')">  
  7.     </body>  
  8.     </html>  
  d.onMouseOnver和onMouseOut事件.
[html]  view plain copy
 
  1.  <html>  
  2. <head>  
  3.     <title>EventTest5</title>  
  4. </head>  
  5. <body>   
  6.     <image src="EventTest4.jpg"  onMouseOver="alert('over')" onMouseOut="alert('out')">  
  7. </body>  
  8.    </html>  
  事件是javascript中很重要的一部份內容,這裏先簡單介紹這些,之後會結合實際需求來深刻學習javascript事件.

javascript語法由三部分組成:ECMAScript,DOM(文檔對象模型)和BOM(瀏覽器對象模型).

本篇博客簡單介紹一下javascript中的內置對象.
1.js彈出框.
  a.alert提示框.

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.  <html>  
  2. <head>  
  3.  <title>AlertTest</title>  
  4.  <script language="javascript">  
  5.   alert("AlertTest");  
  6.  </script>  
  7. </head>  
  8.    </html>    

    結果彈出窗口AlertTest.
  b.prompt輸入框.

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <html>  
  2. lt;head>  
  3. <title>PromptTest</title>  
  4. <script language="javascript">  
  5.  var userName=prompt("請輸入姓名");  
  6.  document.write("你好:"+userName);  
  7. </script>  
  8. lt;/head>  
  9.   </html>    

    結果彈出輸入框,填入值後,在頁面取到並作顯示.
  c.Confirm確認框.

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.     <html>  
  2. <head>  
  3.  <title>ConfirmTest</title>  
  4.  <script language="javascript">  
  5.   function confirmTest() {  
  6.   if(confirm("肯定要刪除嗎?"){  
  7.    document.form.submit();   
  8.   }  
  9.  </script>  
  10. </head>  
  11. <body>  
  12.  <form name="form" action="deleteSuccess.html" method="post">  
  13.   <input type="button" value="刪除" onclick="javascript:confirmTest()">  
  14.  </form>  
  15. </body>  
  16.    </html>  

    結果彈出是否刪除確認窗口.
2.this.

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <html>  
  2. <head>  
  3.  <title>ThisTest</title>  
  4.  <script language="javascript">  
  5.   function thisTest(obj) {  
  6.    if(obj.value==""){  
  7.     alert("空值!");   
  8.    }else{  
  9.     alert(obj.value);  
  10.    }  
  11.   }  
  12.  </script>  
  13. </head>  
  14. <body>  
  15.  <image src="ThisTest.jpg" onclick="javascript:alert(this.src)">  
  16.  <form name="form">  
  17.   <input type="text" name="uername" value="ThisTest" onclick="javascript:thisTest(this)">  
  18.  </form>  
  19. </body>  
  20.  </html>   

  結果略.
3.for in遍歷對象.

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <html>  
  2.  <head>  
  3.   <title>ForInTest</title>  
  4.   <script language="javascript">  
  5.    var array=new Array("a","b","c");  
  6.    for(i in array){  
  7.     document.write(i+":"+array[i] +"<br>");  
  8.    }  
  9.   </script>  
  10.  </head>  
  11.   </html>     

  結果頁面顯示0:a 1:b 2:c.
4.with創建一個默認的對象.

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.  <html>  
  2. lt;head>  
  3. <title>WithTest</title>  
  4. <script language="javascript">  
  5.  with(document){  
  6.   write("WithTest1");  
  7.   write("WithTest2");  
  8.   write("WithTest3");  
  9.   write("WithTest4");  
  10.  }  
  11. </script>  
  12. lt;/head>  
  13. </html>  

  結果頁面顯示WithTest1WithTest2WithTest3WithTest4.
5.new.

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <html>  
  2. <head>  
  3.  <title>NewTest</title>  
  4.  <script language="javascript">  
  5.   var date=new Date();  
  6.   alert(date.getDate());  
  7.  </script>  
  8. </head>  
  9.  </html>    

  結果頁面顯示當前日期的日子的號碼(1-31).
6.window當前瀏覽器窗口.
  a.狀態窗口.

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.   <html>  
  2. <head>  
  3.  <title>WindowTest1</title>  
  4.  <script language="javascript">  
  5.   windows.status="WindowsTest";  
  6.  </script>  
  7. </head>  
  8. <body>  
  9.  <form name="form">  
  10.   <input type="button" value="window" onMouseOver="javascript:windows.status='change'">  
  11.  </form>  
  12. </body>  
  13.    </html>  

    結果頁面的狀態窗口顯示WindowTest,當鼠標挪到鼠標時,狀態窗口顯示change.
  b.window.open彈出新窗口.

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.    <html>  
  2. <head>  
  3.  <title>WindowTest2</title>  
  4.  <script language="javascript">  
  5.   window.open("Window.html","windowname","toolbar=no,left=200,top=200,menubar=no,width=100;height=100,resizable=no");  
  6.  </script>  
  7. </head>  
  8. </html>    

    結果彈出一個子窗口,各類屬性如上.
  c.window.close窗口的深刻使用.

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <html>  
  2. <head>  
  3.  <title>WindowTest3</title>  
  4.  <script language="javascript">  
  5.   var win=window.open("Window.html","windowname","toolbar=no,left=200,top=200,menubar=no,width=100;height=100,resizable=no");  
  6.  </script>  
  7. </head>  
  8. <body>  
  9.  <form name="form">  
  10.   <input type="button" onclick="javascript:win.close();" value="關閉窗口">  
  11.  </form>  
  12. </body>  
  13.    </html>    

    結果頁面彈出一個窗口,而且主頁面有一個關閉按鈕,點擊關閉按鈕,子頁面被關閉.
7. winodw.loaction地址欄內容.

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <html>  
  2. <head>  
  3.  <title>WindowLoactionTest</title>  
  4.  <script language="javascript">  
  5.   alert(window.location);  
  6.  </script>  
  7. </head>  
  8.  </html>     

  結果頁面顯示當前頁面的url.
8.轉向指定頁面.

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <html>  
  2. <head>  
  3.  <title>WindowLoactionTest2</title>  
  4.  <script language="javascript">  
  5.   function go(){  
  6.    window.location="WindowLoactionTest2.html";  
  7.   }  
  8.  </script>  
  9. </head>  
  10. <body>  
  11.  <form name="form">  
  12.   <input type="button" value="轉向" onclick="javascript:go()">  
  13.  </form>  
  14. </body>  
  15.  </html>    

9.頁面返回.

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.  <html>  
  2. <head>  
  3.  <title>WindowLoactionTest3</title>  
  4.  <script language="javascript">  
  5.   function goBack(){  
  6.    history.back();  
  7.   }  
  8.  </script>  
  9. </head>  
  10. <body>  
  11.  轉向成功！  
  12.  <form name="form">  
  13.   <input type="button" value="轉向" onclick="javascript:goBack()">  
  14.  </form>  
  15. </body>  
  16.  </html>    

注意:若是想要IE支持調試js bug,須要對IE作一下特殊配置:IE:工具-Internet選項-高級-打開禁用腳本調試.

 

 

 

javascript基礎學習-表單驗證(五)

分類： javascript 2014-04-17 23:35  45人閱讀  評論(0)  收藏  舉報
java javascript 基礎 表單驗證
下面是用javascript寫的一個很是簡單的表單驗證,親們一塊兒學習下吧!
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <html>  
  2.     <head>  
  3.         <title>FormTest1</title>  
  4.         <script language="javascript">  
  5.             function validateData(){  
  6.                 if(document.form.username.value==""){  
  7.                     alert("請輸入用戶名");  
  8.                     return false;  
  9.                 }else if(document.form.username.value.length<6||document.form.username.value.length>12){  
  10.                     alert("請輸入用戶名:6-12位字符");  
  11.                     return false;  
  12.                 }  
  13.                 return true;  
  14.             }  
  15.         </script>  
  16.     </head>  
  17.     <body>  
  18.         <form name="form" action="RegisterSuccess.html" onSubmit="return validateData()">  
  19.             <input type="text" name="username" value="請輸入用戶名:6-12位字符" size="30">  
  20.             <input type="submit" name="register" value="註冊">  
  21.         </form>  
  22.     </body>  
  23. </html>  
針對上面的表單驗證是經過彈出窗口提示,用戶體驗不是很好,如何優化呢？看下面的表單驗證的改進版.
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <html>  
  2.     <head>  
  3.         <title>FormTest2</title>  
  4.         <script language="javascript">  
  5.             function validateData(){  
  6.                 if(document.form.username.value==""){  
  7.                     document.getElementById("usernameerror").innerHTML="請輸入用戶名";  
  8.                     return false;  
  9.                 }else if(document.form.username.value.length<6||document.form.username.value.length>12){  
  10.                     document.getElementById("usernameerror").innerHTML="請輸入用戶名:6-12位字符";  
  11.                     return false;  
  12.                 }  
  13.                 return true;  
  14.             }  
  15.         </script>  
  16.     </head>  
  17.     <body>  
  18.         <form name="form" action="RegisterSuccess.html" onSubmit="return validateData()">  
  19.             <input type="text" name="username" value="請輸入用戶名:6-12位字符" size="30">  
  20.             <span id="usernameerror"></span>  
  21.             <input type="submit" name="register" value="註冊">  
  22.         </form>  
  23.     </body>  
  24. </html>  
注意針對上面的<span id="usernameerror"></span>,咱們也能夠換成<div id="usernameerror"></div>,他們的區別是
div會另起一行顯示,而span由於是行內快因此會和文本框在同一行顯示.
 
 

avascript基礎學習-簡單框架(六)

分類： javascript 2014-04-17 23:40  17人閱讀  評論(0)  收藏  舉報
java javascript 框架 html iframe
1.在html標籤中有一個iframe標籤,此標籤的意思是將一個子html頁面嵌入到另外一個html頁面,咱們把這個子頁面也叫作內幀.
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <html>  
  2. <head>  
  3.     <title>FrameTest1</title>  
  4. </head>  
  5. <body>  
  6.     我是主頁面.  
  7.     <table width="100%" align="center" border="1">  
  8.         <tr>  
  9.             <td>  
  10.                 <iframe name="child" width="100%" height="20%" src="Child.html"></iframe>  
  11.             </td>  
  12.         </tr>  
  13.     </table>  
  14. </body>  
  15.  </html>  
  Child.html代碼以下:
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.  <html>  
  2. <head>  
  3.     <title>Child</title>  
  4. </head>  
  5. <body>  
  6.     我是內幀.  
  7. </body>  
  8.  </html>  
  顯示結果略.
2.經過上面的小例子咱們知道了如何經過ifame標籤將一個html頁面嵌入到另外一個html頁面中,經過這點咱們能夠搭建本身的html框架.
  注意frameset標籤不能放在body標籤中.
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <html>  
  2. <head>  
  3.     <title>FrameTest2</title>  
  4.     <script language="javascript">  
  5.         leftState=0;  
  6.     </script>  
  7. </head>  
  8. <frameset rows="20%,*" cols="*" border="1">  
  9.     <frame name="top" scrolling="no" src="Top.html" noresize>  
  10.     <frameset name="bottom" cols="20%,*" rows="*"  border="1">  
  11.         <frame name="left" scrolling="yes" src="Left.html">  
  12.         <frame name="right" scrolling="yes" src="Right.html">  
  13.     </frameset>  
  14. </frameset>  
  15.  </html>  
  Top.html代碼以下:
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1. <html>  
  2.     <head>  
  3.         <title>Child</title>  
  4.         <script language="javascript">  
  5.             function operate(){  
  6.                 if(parent.leftState==0){  
  7.                     parent.leftState=1;  
  8.                     parent.bottom.cols="*,100%";  
  9.                 }else{  
  10.                     parent.leftState=0;  
  11.                     parent.bottom.cols="20%,*";  
  12.                 }  
  13.                 parent.bottom.location.reload();  
  14.             }  
  15.         </script>  
  16.     </head>  
  17.     <body>  
  18.         <input type="button" name="operate" value="change" onClick="operate()">  
  19.     </body>  
  20.   </html>  
  Left.html代碼以下:
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.  <html>  
  2. <head>  
  3.     <title>Child</title>  
  4. </head>  
  5. <body>  
  6.     我是Left.  
  7. </body>  
  8.  </html>  
  Right.html代碼以下:
[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  1.   <html>  
  2. <head>  
  3.     <title>Child</title>  
  4. </head>  
  5. <body>  
  6.     我是Right.  
  7. </body>  
  8.  </html>
  經過上面的四個html文件咱們的html框架就搭建好了,注意parent的意思是指父頁面.   訪問FrameTest2.html文件,在top上面有一個change按鈕,點擊按鈕,能夠實現隱藏左邊頁面的功能,或者說是放大右邊頁面的功能.   總之經過上面的小例子咱們能夠藉助frame搭建一個很實用的html框架.抓緊時間試試吧!
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程