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>

巴特西

JS的使用

最新文章

热门文章