zoukankan      html  css  js  c++  java

  • 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框架.抓紧时间试试吧!
     
  • 相关阅读:
    【题解】P3565 [POI2014]HOT-Hotels
    【学习笔记】$gcd$ 与扩展 $gcd$
    【题解】P3810 【模板】三维偏序（陌上花开）- $CDQ$
    【题解】P3374 【模板】树状数组 1
    【考试总结】2020 上半年 汇总
    【题解】P4570 [BJWC2011]元素
    【题解】P2480 [SDOI2010]古代猪文
    【考试总结】小奇模拟赛
    【题解】P3349 [ZJOI2016]小星星
    搞懂ZooKeeper的Watcher之源码分析及特性总结
  • 原文地址：https://www.cnblogs.com/cheng07045406/p/3680984.html
Copyright © 2011-2022 走看看