步步为营-53-JavaScript

说明 :JS比较常用

1.1 常见的两种使用方式:

　　1.1.1 直接使用 <script>alert('Hello,World')</script>
      1.1.2 引用js文件 <script src="JS/JSHelloWorld.js"></script>

1.2 一个简单实例　　

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        //01-定义方法
        function showTime() {
            var date = new Date();
            alert(date.toLocaleTimeString());
            //可以让超连接跳转不执行
            return false;
        }
    </script>
</head>
<body>
<input type="button" value="显示当前时间" onclick="showTime();"/>
    <a href="#" onclick="showTime();">显示当前时间</a>
    <a href="javascript:showTime();">显示当前时间</a>
    <a href="http://www.baidu.com"  onclick="return showTime();">显示当前时间</a>
</body>
</html>
View Code

1.3 数据类型
　　1.3.1 boolean 布尔

　　1.3.2 number 数字

　　1.3.3 string 字符串

　　1.3.4 Undefined 未定义 对应的值为undefined

　　1.3.5 Null 空对象  对应的值为null

　　1.3.6 object 对象类型　　

 <script>
        //当变量被声明,没有初始化,则值为undefined
        var a;
        alert(a);//undefined
        a = null;
        alert(a);//null
    </script>
View Code

　　1.3.7 查看变量类型typeof(变量)

　　typeof 变量名 或 typeof(变量名)

  <script>
        //当变量被声明,没有初始化,则值为undefined
        var a;
        alert(typeof(a));//undefined
        a = null;
        alert(typeof (a));//object
    </script>
View Code

　　1.3.8 类型转换

　　parse***(变量名);

　　var a2 = '100';

　　alert(parseInt(s2)+1)

1.4 判断是否相等

　　=== 严格相等(先判断类型,在判断值)

　　1.4.1 判断是否不是一个数字

　　isNaN(变量名);

　　1.4.2 将一段字符串当作js代码执行

　　eval('alert("abc")');

1.5 方法

 　1.5.1 语法: function 方法名 (参数列表){}
    function add(a, b) {
        alert(a + b);
        return a + b;
    }

　1.5.2 不存在方法的重载,方法名相同时,后面的方法会把前面的方法覆盖掉.

　1.5.3 可用可变参数替代方法重载

 　　//可变参数    

　　 function add() {        

　　　　 //使用 arguments 获取所有参数,是一个数组        

　　　　var sum = 0;        

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

　　　　　　sum += arguments[i];        

　　　　}        

　　　　 alert(sum);    

　　 }

   　 add(1,22,3,5,7);

　　1.5.4 匿名方法 

　　 
<input id="btnShow" type="button" value="显示" />
<script>
    //语法1: function (参数列表){...return...}
    var f1 = function(a, b) {
        return a + b;
    };
    //使用场景
    document.getElementById('btnShow').onclick = function() {
        alert("匿名函数");
    };

    //语法2 (function(n1,n2){...})(1,2);
    //语法3 new Function("n1","n2","return n1+n2");

</script>
View Code

1.6 闭包
　　1.6.1 作用域链

　　理解闭包之前先理解作用域链:变量的作用域在当前函数中,以及当前函数的内部定义的函数中形成了一条链条.叫做作用域链/

　　1.6.2 闭包:支持函数内部调用函数之前声明过的变量.

　　 
<script>
    //闭包

    //01_定义函数
    function show(name) {
        //02-函数内部定义函数
        return function () {
            alert(name);
        }
    }

    //调用函数
    var fun1 = show('张三');
    fun1();

</script>
View Code

1.7 类

为类增加成员
<script>
    //类
    function Person() {
       
    }

    var p1 = new Person();
    p1.Nmae = '张三';

    p1.say= function() {
        alert(p1.Nmae);
    };
    p1.say();
</script>
为对象新增属性

1.8 原型:对象类型

<script>
    //原型
    function Person() {
        this.Name = '姓名';
    }

    var p1 = new Person();
    //访问原型---为原型注册数据成员
    p1.__proto__.Title = '标题';
    Person.prototype.Size = '1K';

    var p2 = new Person();
    alert(p2.Title);
    alert(p2.Size);
</script>
View Code

1.9 集合(数组和键值对)

<script>
    //数组
    var arry1 = [123, "abc"];
    //键值对--json对象
    var arry2=
    {
        name:'张三',
        age : 18
    };

    //使用
    alert(arry1[1]);
    alert(arry2.name);
    alert(arry2['age']);

    //定义Json数组
    var people = [{ name: '李四', age: 20 }, { name: '王五', age: 30 }];
    //使用
    //people是数组,所以index是索引
    for (var index in people) {
        alert(people[index].name);
    }
</script>
View Code

 

posted @ 2017-05-08 17:56  逍遥小天狼  阅读(222)  评论(0)    收藏  举报