JavaWeb-JavaScript

---

使用方法

<!--使用script引入外部的js文件来执行
      src 可以是相对路径，也可以是绝对路径

      script标签可以用来定义js代码，也可也用来引入js文件
      但是，只能二选一，不能同时使用两个功能
      -->
  <script type="text/javascript" src="1.js"></script>
  <script type="text/javascript"> alert("okok"); </script>

变量类型

数值类型： number
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function

特殊的值：
undefined 未定义的值
null 空值
NAN 非数字，非数值

定义格式：var 变量

  <script type="text/javascript">
      var i;      //定义变量
      // alert(i);   //undefined
      i = 12;
      // alert( typeof (i)); //返回数据类型
      i = "abc";
      // alert( typeof (i)); //String类型

      var a = 12;
      var b = "abc";

      // alert(a * b );  //NAN是非数字，非数值，非法运算

  </script>

逻辑运算

 <script type="text/javascript">
        /*比较运算*/
        var a = 12;
        var b = "12";
        // alert(a==b); //true 数值字面的比较
    </script>

    <script type="text/javascript">
        /*逻辑运算： 0 undefined "" null 是false */
        var a = 0;
        var b = null;
        var c = undefined;
        var d = ""; /*空串才是错，有空格就是真了*/
        // alert(b);

        /*&&运算
        * 有两种情况：
        * 第一种：当表达式全为真时，返回最后一个表达式的值
        * 第二种：当表达式中，有一个假时，返回第一个为假的代码*/
        var a = "abc";
        var b = true;
        var c = false;
        var d = "";
        // alert( b && a );  /*返回abc*/

        /*||运算
        * 第一种情况：当表达式全为假时，返回最后一个表达式的值
        * 第二种情况：当表达式有一个为真时，返回第一个为真的值
        * */
        alert(b||c);

    </script>

数组

不用定义长度，只要通过下标赋值，那么最大的下标值，就会自动给数组做扩容操作

<script type="text/javascript">
      var arr = [true,1]; //定义一个空数组
      arr[0] = 12;
      // alert( arr[0] );
      // alert(arr.length);

      //javaScript语言中的数组。只要通过数组下标赋值，那么最大的下标值，就会自动给数组做扩容操作
      arr[2] = "abc";
      //arr[1]未定义 是undefined

      for( var i = 0;i<arr.length;i++) //不能写int
        alert(arr[i]);
    </script>

函数

   <script type="text/javascript">
     /*使用格式：
     *  1.用function关键字来定义：
     *      function 函数名（参数）{
     *                函数体
     *            }
     *    在函数体内调用return 即可返回值
     * */
             //无参函数
              function a() {
                  alert("无参函数调用了");
              }
              //函数调用才会执行
              // a();

             //有参函数
             function a(q,c) {
                 alert("有参函数调用了"+q+" "+c);
             }
             //函数调用才会执行
             // a(12,"abc");

             //返回值调用
             function sum(a,b) {
                 var result = a + b;
                 return result;
             }
             var c = sum(1,2);
              alert(c);

     /*使用格式：
    *  2.var 函数名 = function(形参）{ 函数体 }
    * */
              var fun = function (){
                  alert("无参函数");
                  return 12;
              }
              var c = fun();
              alert(c);

     /*js不允许函数重载，会覆盖掉上次的定义，和java不同*/
     /*隐藏参数arguments[i] 参数第i个*/
     function sum(num1,num2){
         var result = 0;
         for(var i = 0;i<arguments.length;i++)
             if(typeof (arguments[i]) == "number")
                 result += arguments[i];
             return result;
     }
     alert( sum(1,2,3,"adc",4));  //abc会去掉
    </script>

自定义对象

    <script type="text/javascript">
      /*对象的定义：
      *   var 变量名 = new Object();  对象实例化
      *   变量名.属性名 = 值；   定义属性
      *   变量名.函数名 = function（）{} 定义一个方法
      * */
      var c = new Object();
      c.name = "华仔";
      c.age = 18;
      c.fun = function (){
        alert("姓名： "+this.name+" 年龄： "+this.age);
      }
      c.fun();

      /*大括号形式的自定义对象：
      * var 变量名 = {
      *     属性名：值,
      *     属性名：值,
      *     函数名：function（）{}
      * };
      * */
      var c2 = {
        name:"谷歌",
        age:18,
        fun:function () {
          alert(this.age + " " + this.name);
        }
      };

      c2.fun();
    </script>

事件

常用的事件：
onload 加载完整的事件： 页面加载完成之后，常用于做页面的js代码初始化操作
onclick 单击事件： 常用于按钮的点击响应操作
onblur 失去焦点事件： 常用于输入框屎去焦点后验证输入内容是否合法
onchange内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
onsubmit提交事件： 表单提交前，验证所有表单是否合法

事件的注册：
事件响应后要执行的代码是注册或则事件绑定。
静态注册事件:
通过html标签的事件属性直接赋予事件响应后的代码，叫做静态注册。
在标签的onclick属性加入方法名，在js内对方法名的函数进行书写

    <button onclick="checkAll()">全选</button>

   function checkAll(){

            for(var i = 0;i<a.length;i++)
              a[i].checked = true;
        }

动态注册事件:
是指先通过js代码得到标签的dom对象，然后通过dom对象.事件名 = function（）{} 这种形式赋予事件响应后的代码。

动态注册的基本步骤：

1.获取标签对象
获取要在页面加载之后

getElementById 写入对象的id属性值
getElementByName 写入对象的nam属性值
getElementByTagName 写入对象的标签名

   window.onload = function (){
            
            var btn = document.getElementById("btn");
            
            var a = document.getElementsByName("hobby");
       
            var a = document.getElementsByTagName("input");

2.标签对象.事件名 = function（）{}

            a.onclick = function(){}

完整：

    //动态
      window.onload = function (){
          var selectObj = document.getElementById("selectObj");
          selectObj.onchange = function (){
              alert("改变了明星");
          }
      }

正则表达式

    <script type="text/javascript">

      var patt = new RegExp("e");  //包含e

      var patt2 = /[abc]/;       //abc中任意一个
      var patt3 = /[a-z]/;       //是否包含小写字母
      var patt3 = /[A-Z]/;       //是否包含大写字母
      var patt4 = /[0-9]/;       //是否包含数字
      var patt5 = /\w/;          //是否包含字母，数字，下划线

      var patt6 = /a+/;          //是否包含至少一个a
      var patt7 = /a*/;          //是否包含0 或 多个a
      var patt8 = /a{3}/;        //是否包含3个连续a
      var patt9 = /a{3,5}/;      //是否包含3个到5个连续a
      var patt10= /a$/;          //字符串结尾必须为a
      var patt10= /^a/;          //字符串开头必须为a
      var patt11 = /^a{3,5}$/;   //字符串一定是3到5位a

      var str = "aaaaaaa";

      alert(patt11.test(str));


    </script>