cheng_you_know

学而时习之!

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
javascript 入门基础
 

javascript基础学习-语法学习(二)

分类： javascript2014-04-13 00:57 55人阅读 评论(0) 收藏 举报
javascript基础语法

上篇关于javascript的博客简单介绍了一下javascript的变量和运算符,下面简单介绍一下javascript中的基本语句.
1.条件语句if.

[html] view plaincopy在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] view plaincopy在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.

[html] view plaincopy在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 plaincopy在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.

[html] view plaincopy在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 plaincopy在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 plaincopy在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 plaincopy在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++的区别.

[html] view plaincopy在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基础学习-语法学习(三)

分类： javascript2014-04-13 23:39 43人阅读 评论(0) 收藏 举报
javascript基础语法事件onSubmit
上两篇关于javascript的博客简单介绍了一下javascript的变量,运算符和基本语句,下面接着介绍.
1.javascript中数组的用法.
[html] view plaincopy在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 plaincopy在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 plaincopy在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 plaincopy在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 plaincopy在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 plaincopy
 
  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 plaincopy
 
  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 plaincopy
 
  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 plaincopy在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 plaincopy在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 plaincopy在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 plaincopy在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 plaincopy在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 plaincopy在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 plaincopy在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 plaincopy在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 plaincopy在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 plaincopy在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 plaincopy在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 plaincopy在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 plaincopy在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基础学习-表单验证(五)

分类： javascript2014-04-17 23:35 45人阅读 评论(0) 收藏 举报
javajavascript基础表单验证
下面是用javascript写的一个非常简单的表单验证,亲们一起学习下吧!
[html] view plaincopy在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 plaincopy在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基础学习-简单框架(六)

分类： javascript2014-04-17 23:40 17人阅读 评论(0) 收藏 举报
javajavascript框架htmliframe
1.在html标签中有一个iframe标签,此标签的意思是将一个子html页面嵌入到另一个html页面,我们把这个子页面也叫做内帧.
[html] view plaincopy在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 plaincopy在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 plaincopy在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 plaincopy在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 plaincopy在CODE上查看代码片派生到我的代码片
 
  1.  <html>  
  2. <head>  
  3.     <title>Child</title>  
  4. </head>  
  5. <body>  
  6.     我是Left.  
  7. </body>  
  8.  </html>  
  Right.html代码如下:
[html] view plaincopy在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框架.抓紧时间试试吧!
 
posted on 2014-04-22 17:19  cheng_you_know  阅读(331)  评论(0)  编辑  收藏  举报