JS的使用

Javascript代码在浏览器中运行，做出更流畅、优美的页面效果，增强用户体验
与java是完全不同的东西，只是名称类似而已
写在<script></script>标签中

大小写敏感
弱类型语言
分号结尾
注释（单行，多行）
字符串推荐使用单引号，也可以使用双引号

用于处理日期和时间 Date
创建对象：var date=new Date();
看文档 JavaScript Date 对象参考手册
方法toLocaleTimeString()表示根据本地时间格式，把 Date 对象的时间部分转换为字符串
方法toLocaleDateString()表示根据本地时间格式，把 Date 对象的日期部分转换为字符串。

 <script>
        //创建时间对象
        //var date = new Date();
        ////获取世界时间，会提示当前时区
        //alert(date.toString());
        ////获取当前时区的当前时间
        //alert(date.toLocaleString());

        //代码分离：一般不将html与js混合写
        //定义函数，用于获取时间对象并显示当前时间
        function showTime() {
            var date = new Date();
            alert(date.toLocaleString());
            return false;//可以让a的跳转不执行
        }
    </script>

<hr/>
    点击超链接，执行js脚本，而不进行url跳转
    <br/>
    方式一：让js函数返回false,在onclick中也返回false;
        <a href="http://www.itcast.cn" onclick="return showTime();">显示当前时间</a>

    <br/>
    方式二：将href指定成一段脚本
    <a href="javascript:showTime();">点击显示时间</a>
    <br/>

数据类型

boolean布尔
number数字
string字符串
Undefined未定义
Null空对象
Object对象类型
Undefined类型、Null类型都是只有一个值的数据类型，值分别为undefined与null
查看变量的类型typeof 变量名或typeof(变量名)，返回变量类型的字符串
类型转换：类型名(变量名)或parse***()

  <script>
         //当变量被声明之后，没有初始化，则值为undefined
         var a1;
         //alert(a1);

         //输出类型
         //alert(typeof(a1));//返回a1变量的类型对应的字符串

         //指定null值时，当前变量为null
         a1 = null;
         //alert(a1);
         //alert(typeof(a1));//null是一个object的值

         //class Person{}

         var a2 = '100';
         alert(a2 + 1);//字符串拼接
         alert(parseInt(a2) + 1);//转成整数后，进行算术加运算
     </script>

判断
双等号==判断值是否相等
三等号===先判断类型是否相同，再判断值是否相等
undefined==null结果为什么？
undefined===null结果为什么？
思考：如何判断变量是否可用？
答：先判断类型是否为undefined,再判断值是否为null，否则可用
提示： typeof(n)!='undefined‘
非数字判断：isNaN()
eval()用于将一段字符串转换成js代码执行

 //var a1;
         //var a2 = null;

         //undefined表示没有，null表示没有
         //if (a1 == a2) {
         //    alert('ok');
         //} else {
         //    alert('no');
         //}

         //三个等号先判断类型是否相同，再判断值是否相同
         //if (a1 === a2) {
         //    alert('ok');
         //} else {
         //    alert('no');
         //}

         var b1 = 123, b2 = '123';
         //值都为123所以相等
         //if (b1 == b2) {
         //    alert('ok');
         //} else {
         //    alert('no');
         //}
         //b1是number类型，b2是string类型，所以不等
         //if (b1 === b2) {
         //    alert('ok');
         //} else {
         //    alert('no');
         //}

         //null与'null'是不同的
         //var temp = null;
         //if (temp == 'null') {
         //    alert('ok');
         //} else {
         //    alert('no');
         //}

         //判断变量是否可用
         //判断是否为undefined:typeof (temp) == 'undefined'
         //判断是否为null:temp === null
         //var temp = null;
         //if (typeof (temp) == 'undefined' || temp === null) {//'null','object'
         //    alert('不可用');
         //} else {
         //    alert('可用');
         //}
         ////简写
         //if (temp == null) {//'null','object'
         //    alert('不可用');
         //} else {
         //    alert('可用');
         //}

         //var date = new Date();
         //alert(typeof (date));
         //alert(typeof (Date));//function
         //alert(typeof (Date()));//调用Date()方法返回表示当前时间的字符串，类型为string

         //判断是否不是一个数字
         //var temp2 = 'abc';//根据字面值判断,‘123’是数字
         //alert(isNaN(temp2));

         //将一段字符串当作js代码执行
         //应用场景：当从文本框中获取值时，得到的是字符串，如果希望那段字符串当作js执行，则使用eval()方法
         //eval('alert("abc");');
     </script>

调试方法

审查元素 source===>在左边断点,刷新 直接指向

或者进入Console,进入复制进去,就能看到

方法定义
语法：function 方法名(参数列表){…}
方法名首字母小写
如果需要返回值，则在方法体中使用return关键字
调用：方法名(参数)
如果有返回值，可以直接使用，如果没有返回值却使用，则值为undefined
没有方法重载，后定义的方法会将先定义的方法覆盖
可以使用关键字arguments获取所有的参数，是一个数组

  <script>
         //修饰符 返回值类型 方法名(参数列表){...}
         //function 方法名(参数列表){...}
         function add(a, b) {
             //alert(a + b);
             return a + b;//使用return返回值
         }
         //快捷键func,tab
         function add2(a, b, c) {
             alert(a + b + c);
             //return a + b + c;
         }

         //调用方法
         //var sum = add(1, 2);//直接使用变量接收方法的返回值
         //alert(sum);

         //接收没有返回值的方法
         var sum2 = add2(1, 2, 3);
         alert(sum2);
     </script>

匿名函数
不需要定义方法名，直接写参数列表与方法体
方式一：function (参数){...return ...};
可以将方法赋值给一个变量，这个变量表示一个方法
方式二：(function(n1,n2){...})(1,2);
定义的同时完成调用
方式三：new Function("n1","n2","return n1+n2");
赋值给一个变量完成调用
最常使用：方式一

  <input type="button" id="btnShow" value="显示"/>
         <script>

             //快捷键：fun,tab
             //定义匿名函数，赋值给一个变量
             var f1 = function(a, b) {
                 alert(a+b);
             };
             //通过变量调用
             //f1(1, 2);

             //典型应用：为事件绑定处理函数，传递回调函数
             //根据id获取页面元素，为它绑定单击事件
             document.getElementById('btnShow').onclick = function() {
                 alert(123);
             };
         </script>

闭包
参照备注代码
问：在子函数中并没有声明name变量，但是可以用，为什么呢？
答：当需要使用name时，会向前找，发现整个函数中没有声明，则向上一级找，进入了函数f1中，这里有个参数name，则使用这个变量的值
作用域链：即使方法f1运行完成了，name依然在子函数中被使用，不会被释放，这形成了变量作用域的链
建议：先声明再使用，尽量不要使用闭包，因为会让变量在内存中长期存在，无法释放

  <script>
         //定义一个函数show
         function show(name) {
             //返回一个函数
             return function () {
                 //输出name的值
                 alert(name);
             };
         }
         //运行show函数，将返回值赋给f1
         //因为返回值是函数，所以f1现在指向一个函数
         var f1 = show('a');
         //通过f1可以调用匿名函数执行
         f1();

         //闭包：支持在函数内部调用函数之前声明过的变量
         //作用域链：变量的作用域在当前函数中，及当前函数内部定义的函数中，形成了一个链条
         //建议：避免闭包，每次在用一个变量时，都要先声明再使用
     </script>

模拟面向对象
定义：function 类名称(){…}
看上去与方法语法类型，区别是类名称的首字母大写
获取对象：new 类名称();
访问：对象.成员
定义类及成员的方法参见备注

 <script>
         //为类增加成员
         function Person(name) {
             this.Name = name;//在类内部声明一个属性Name,初始化为name值
             this.say = function() {//匿名函数
                 alert(this.Name);
             };

             //类是没有返回值的，所以如下代码可以不写
             //return name;
         }

         //使用构造方法创建对象
         var p1 = new Person('zhh');
     //p1.say();//调用 方法

         //alert(typeof (p1));//object
         //alert(typeof (Person('zhh')));//因为Person作为函数时，没有返回值，所以是undefined
         //alert(typeof(Person));//Person就是一个函数，类型是function
     </script>

 //为对象增加成员
     <script>
         function Person() {

         }
         //为对象增加成员
         //var p1 = new Person();
         //p1.Name = "zhh";//为对象p1新建了一个属性Name
         //p1.say = function() {
         //    alert(p1.Name);
         //};
         //p1.say();

         //新建出来的对象，是没有Name属性的，因为类Person中没有Name属性
         //var p2 = new Person();
         //alert(p2.Name);
     </script>

看文档JavaScript String 对象参考手册
示例：判断给定字符串是否为电子邮箱
提示：包含@符号
原型添加方法String.prototype.isEmail=function(){...};

相当于继承

 function Person() {
            this.Age = 100;
        }

        var p1 = new Person();
        //p1.Title = 'abc';

//如果运行,会显示ABC和100

数组：[…]
键值对：{键:值,…}
这也可以看成是对象，键就是属性，值就是属性值
json:JavaScript Object Notation（标记）
对象数组：[{属性:值,…},{},{}…]

 <script>
         //使用[]定义数组
         var array1 = [123, 'abc'];
        alert(array1[0]);//通过下标访问

         //键值对{键:值,...}
         var array2 = {
             name: 'zhh',
             age: 18,
             gender:'你猜'
         };
         //alert(array2['name']);//将array2认为是集合，通过键访问值
         //alert(array2.name);//将array2认为是json，通过属性访问值

         //定义json数组
         var temp = [{
             title: 'zhh',
             age:18
         }, {
             title: '牛头',
             age:20
         }, {
             title: '马面',
             age:22
         }];
         //输出每个对象的title值
         for (var index in temp) {//temp是数组，所以index是索引
             alert(temp[index].title);
         }
     </script>