24H免费课程咨询  TEL:13401595960   QQ:1870218756  微信:13401595960(李老师)

东方博宜

网站首页 > 软件开发资讯 > .NET开发

JavaScript基础语法及事件总结

2017-07-05 10:15:56 东方博宜 阅读

1javascript

什么是javascript?有什么作用?

Javascript是页面脚本,用来在页面中做一些特效以及表单验证!

 

脚本写在哪里?

Javascript可以写在任意的页面中,是依附于页面的语言!(类似CSS

 u=2588944352,1128539&fm=26&gp=0.jpg

2javascript入门案例

Js可以放在网页的任何位置(类似css),但一般放在页尾处,或者,head之间!

Js是弱类型语言,变量定义时,是不需要定义类型的,而是根据计算的结果,实时更新自己的类型!

 

例子:基本运算

    <script type="text/javascript">

       var x = 5;

       var y = 2;

       var a = x + y;

       var b = x - y;

       var c = x * y;

       var d = x / y;

       //警告

       alert(a + " " + b + " " + c + " " + d);  

</script>

 

例子:四位数拆位

可以利用parseInt()函数,对小数取整!

    <script type="text/javascript">

      var n = 3456;

      var g = n % 10;

      var s = parseInt(n / 10) % 10;

      var b = parseInt(n / 100) % 10;

      var q = parseInt(n / 1000);

     

      alert(q + " " + b + " " + s + " " + g);

    </script>

 

3、分支和循环

例子:求所有的水仙花数(三位数 = 自己各个位的立方和)

    <script type="text/javascript">

       for(var i = 100;i <= 999;i++){

           var g = i % 10;

           var s = parseInt(i / 10) % 10;

           var b = parseInt(i / 100);

          

           if(g * g * g + s * s * s + b * b * b == i){

               document.write(i + "<br />");

           }

       }

    </script>

 

4、函数定义

1~10的阶乘和!5! = 5 * 4 * 3 * 2 * 1……

    <script type="text/javascript">

       //n!

       function jieCheng(n){

           var r = 1;

           for(var i = 1;i <= n;i++){

               r = r * i;

           }

          

           return r;

       }

      

       //1~n的阶乘和

       function sum(n){

          var s = 0;

          for(var i = 1;i <= n;i++){

             s = s + jieCheng(i);

          }

         

          return s;

       }

      

       //调用函数

       var x = sum(3);

       document.write(x + "<br />");

    </script>

 

5、数组

例子:基本定义

    <script type="text/javascript">

       var a = new Array();

       var b = new Array(5);

       var c = new Array("张三",178,'');

       document.write(c);

</script>

 

例子:找出数组的最大数的下标

   <script type="text/javascript">

      //求数组最大数的下标

      function getMaxIndex(a){

         var r = 0;

        

         for(var i = 0;i < a.length;i++){

             if(a[i] > a[r]){

                 r = i;

             }

         }

        

         return r;

      }

     

      var arr = new Array(10,20,56,98,1,2,5);

      var x = getMaxIndex(arr);

      document.write(x + " " + arr[x]);

   </script>

 

6、脚本的运行模式

页面刷新运行(少数情况)、基于事件触发!

什么是事件:鼠标单击、双击、移入元素、移出元素、点下、松开、键盘输入、鼠标移动……

 

A、单击双击事件:onclickondblclick

例子:单击双击

案例一:调用函数

        <input type="button" value="单击" onclick="alert(123)"/>

        <br />

        <input type="button" value="显示数字" onclick="showNum()">

       

        <script type="text/javascript">

           function showNum(){

              for(var i = 1;i <= 10;i++){

                alert(i);

              }

           }

        </script>

 

案例二:修改元素的属性和样式

        <!-- this代表发生事件的元素 -->

        <input type="button" value="单击" onclick="this.value='双击一下'" ondblclick="this.value=''"/>

 

B、移入、移出事件:onmouseoveronmouseout

       <div style="width:300px;height:300px;background-color:red"

         onmouseover="this.style.width='500px';this.style.height='500px';this.style.backgroundColor='orange';"

         onmouseout="this.style.width='300px';this.style.height='300px';this.style.backgroundColor='red';">

       </div>

      

       <br />

       <img src="img/1.jpg" onmouseover="this.src='img/2.jpg'" onmouseout="this.src='img/1.jpg'"/>

       

注意:js脚本在修改css时,遇到-(比如background-color),都去掉这个减号,第二个字母改成大写,比如(backgroundColor

 

Conmousedownonmouseup:鼠标按下、松开

 

例子:利用函数来修改元素的css

       <div style="width:300px;height:300px;background-color:red;color:#FFF;font-size:20px;line-height:300px;text-align:center"

         onmousedown="bigger(this)"

         onmouseup="reset(this)">

          JavaScript

       </div>

      

       <br />

       <script type="text/javascript">

           //放大div

           function bigger(d){

               d.style.width = "500px";

               d.style.height = "500px";

               d.style.backgroundColor = "orange";

               d.style.fontSize = "80px";

               d.style.lineHeight = "500px";

           }

          

           //恢复div

           function reset(d){

               d.style.width = "300px";

               d.style.height = "300px";

               d.style.backgroundColor = "red";

               d.style.fontSize = "20px";

               d.style.lineHeight = "300px";

           }

       </script>

 

例子:直接修改className的值(xx.className = “”

       <style type="text/css">

          .div01{

             width:300px;height:300px;background-color:red;color:#FFF;font-size:20px;line-height:300px;text-align:center;

          }

         

          .div_down{

             width:500px;height:500px;background-color:orange;color:#FFF;font-size:80px;line-height:500px;text-align:center;

          }

       </style>

 

       <div class="div01"

         onmousedown="bigger(this)"

         onmouseup="reset(this)">

          JavaScript

       </div>

      

       <br />

       <script type="text/javascript">

           //放大div

           function bigger(d){

               d.className = "div_down";

           }

          

           //恢复div

           function reset(d){

               d.className = "div01";

           }

       </script>

 

Donchange:下拉菜单的值被修改

例子:通过下拉菜单修改背景色

      背景色:

      <select onchange="document.body.style.backgroundColor=this.value">

         <option value="#FFF">-请选择-</option>

         <option value="#00F">天空蓝</option>

         <option value="#0F0">清新绿</option>

         <option value="#F00">落日红</option>

      </select>

 

Eonbluronfocus:得到焦点及失去焦点

例子:输入框有默认文字,点击进入时,如果没有填写,则清除默认文字,如果填写了,则不清除!离开输入框,如果输入框没有填写,则恢复默认文字,如果填写了,则没有任何动作!

       请输入邮箱:<input type="text" name="email" value="请输入您的邮箱" onfocus="checkInput(this)"  onblur="checkOut(this)"/>

      

       <script type="text/javascript">

          //点击进入text校验

          function checkInput(t){

               if(t.value == "请输入您的邮箱"){

                  t.value="";

               }

          }

         

          //离开输入框校验是否需要显示提示信息

          function checkOut(t){

             if(t.value == ""){

                 t.value = "请输入您的邮";

             }

          }

       </script>

 


Powered by 东方博宜教育咨询江苏有限公司  ©2008-2017 www.czos.cn