JavaScript

时间：2017-05-30 19:27:00 阅读：245 评论：0 收藏：0 [点我收藏+]

1.什么是JavaScript

1.1 JavaScript的概述　　

　　JavaScript是一种脚本语言,由LiveScript改名而来,是NetSpace公司的产品.JavaScript和java没什么关系,JavaScript是一种基于客户端浏览器的,基于对象,事件驱动式的脚本语言.JavaScript有跨平台的特点,和所有脚本语言一样,JavaScript是动态解释执行的.JavaScript的主要工作环境是各种浏览器,由浏览器负责解释执行.JavaScript的主要功能是:动态修改HTML页面内容,包括创建删除HTML元素,修改HTML页面元素的内容,外观,位置,大小等.在实际开发中还有另一种脚本语言JScript语言.JScript和JavaScript的渊源比较深.事实上,两种语言的核心功能,作用基本一致,都是为了扩展浏览器的功能而开发的脚本语言,只是JavaScript由Netspace公司开发,JScript是由Microsoft公司开发的.早期的JScript和JavaScript相差较大,Web程序员不得不痛苦的为两种浏览器分别编写脚本,于是诞生了ECMAScript,这是一个国际化标准的JavaScript版本,现在主流浏览器都支持这个版本.而Microsoft指定JScript语言时,也会参考ECMAScript的标准,ECMAScript标准是W3C组织开发的标准.

1.2 JavaScript的特点

　 1). 弱势语言

　2).由浏览器直接解析执行的脚本语言。（函数不能直接执行）

3).是一个解释性语言,由浏览器负责解释

4). 交互性（它可以做的就是信息的动态交互）

5). 安全性（不允许直接访问本地硬盘）

6). 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关

1.3 JavaScript和Java的区别

　　　　1). javascript是一个解释性语言,java是编译解释性语言

　　 2). javascript是一个弱势语言，Java是一个强势语言

　　 3).在页面上引入的方式不同javascript代表用<script>引入，Java代码<%>

　　 4). JS是基于对象，Java是面向对象,基于类。

1.4 JavaScript的语言构成

一个完整 JavaScript实现由以下3个部分组成

核心（ECMAScript）

文档对象模型（DOM）

浏览器对象模型（BOM）

技术分享

2. JavaScript的嵌入方式与导入

2.1 JavaScript的嵌入

JavaScript通常嵌于浏览器中,由浏览器负责解析,在HTML中嵌入JavaScript有两种嵌入方式;

对于第一种方式而言,所有可以设置URL的地方都可使用这种以JavaScript作为前缀的URL,当用户出发该URL时,javascript之后的JavaScript代码就会获得执行;

如果页面中包含大量的JavaScript代码,则建议将这些代码放入<script>和</script>标签之间,<script.../>元素即可作为<head.../>的子元素,也可作为<body.../>的子元素;

<!doctype html>
<html>
<head>
<title>JavaScript的两种嵌入方式</title>
<body>
<!--方式一嵌入JavaScript,那么点击链接会弹出警告窗口!-->
    <a href="javascript:alert(‘嵌入JavaScript方式一!‘);">运行JavaScript</a>
    <!--方式二嵌入JavaScript,浏览器启动该Html页面解析后,弹出警告窗口,也就是我们一打开这个页面就会弹出警告窗口!-->
    <script type="text/javascript">
    alert("嵌入JavaScript方式二");
    </script>
</body>
</head>
</html>

浏览器启动后界面

技术分享

点击链接后界面

技术分享

2.2 JavaScript的导入

　　为了让Html和JavaScript更好的分离,我们可以将JavaScript脚本单独保存为一个*.js文件中,HTML页面中导入该*.js文件即可.在HTML中导入JavaScript脚本文件的语法格式如下:

技术分享

我们在根目录想放一个demo2.js,进行导入实验:

//弹出一个警告提示框
alert("导入JavaScript!");

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript的导入</title>

    <script type="text/javascript" src="demo2.js">
    </script>
</head>
<body>

</body>
</html>

测试结果:

技术分享

3.变量和数据类型

　　任何语言都离不开数据类型和变量,虽然JavaScript是弱类型语言,但他一样支持变量声明,变量一样存在作用域,既有局部变量和全局变量之分,下面我们就来认识一下数据类型和变量;

3.1 变量

技术分享

3.1.1 变量的声明方式

技术分享

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript变量的声明方式</title>
    <script type="text/javascript">
    //隐式定义变量
    //字符串可以是双引号也可以是单引号,JavaScript中不存在字符类型
        a = "abcedf";
        b = ‘abcdef‘;
        //警告提示框显示变量a
        alert(a);
        //警告提示框显示字符串a
        alert(‘a‘);
        b = 9.098;
        alert(b);
    </script>
</head>
<body>

</body>
</html>

技术分享

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript声明变量--显式声明</title>
    <script type="text/javascript">
        //显式声明
        var a = ‘87.098‘;
        alert(a);
        //JavaScript是弱势语言,两次声明变量名相同的变量,不会报错,正常被浏览器解释
        var a = 87.08;
        alert(a);
        //JavaScript可以省略;,会被正常解释
        a = ‘87‘
        alert(a)
        //JavaScript是区分大小写的,因此a和A是两个不同的变量
        //当我们使用隐式声明时,会先在作用域范围中寻找有没有这个变量名的变量,如果存在,那么会把那个变量拿来用,此时不声明,如果不存在才会声明变量,这是var和不var的区别
        a = true;
        A = false;
        alert(a)
        alert(A);
        //JavaScript可以一次定义多个变量,中间用,隔开
        //可以在定义变量时声明初始值,也可以不声明初始值,如果不声明初始值,那么默认就是undefined,未声明的
        var q,w,e=5,r=7;
        alert(q);
        alert(e);
    </script>
</head>
<body>

</body>
</html>

技术分享

注意:显式声明变量时,可以不给变量初始化,此时系统默认给值undefined,隐式声明时,如果全局中不存在这个同名变量,那么一定要为这个隐式变量初始值,否则不能正常解释;JavaScript_demo5.html

3.1.2 变量的声明周期

技术分享

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript的变量的声明周期</title>
    <script type="text/javascript">
        var test = "测试变量声明周期!";
        //定义函数checkScope
        function checkScope() {
            //隐式定义局部变量(为了方便代码阅读,我们不建议隐式声明变量),局部变量覆盖成员变量,
            //注意在这里我们如果不var,那么默认使用的是全局变量
            var test = "局部变量";
            document.write(test+"<br/>");
        }
        //调用函数
        checkScope();
        document.write(test+"<br/>");
        //定义函数divScope JavaScript中是没有块范围的
        function divScope(o){
            //定义局部变量,变量的作用范围是整个函数
            var i = 1;
            //判断两个变量类型是否一致
            if(typeof o == ‘object‘){
                //JavaScript中不存在块,所以变量j的作用范围是整个函数.而不仅仅是if语句中
                var j = 2;
                for (var k = 0; k <= 8; k++) {
                    //在文档中打印输出k值,会在浏览器上显示
                    document.write(k);
                    // alert(k);
                    // document.writeln("<br/>");
                }
                document.writeln(k+"<br/>");

            }
            document.writeln(k+"<br/>");
        }
        //调用函数
        divScope(document);
        //变量声明却不赋值,那么默认给值为undefined
        var scope = "成员变量";
        var sc = "成员sc";
        function test1(){
            var scop;
            //此时局部变量随被声明了,但是没有赋值,那么浏览器默认给值undefined
            //函数中声明变量如果是隐式的,那么会先在全局寻找是否有同名的全局变量,如果有,那么用这个全局变量,否则声明新变量
            //如果函数中声明了一个新的局部变量,局部变量名称和成员变量一样,那么函数中用局部变量覆盖成员变量,由于JavaScript是若语言,所以他不会像java一样按照顺序进行,只要在函数中定义了变量(显示声明),那么就不会考虑成员变量
            // scope;此时会将这个变量认为是成员变量,下面输出成员变量
            document.writeln(scope+"<br/>");
            document.writeln(scop+"<br/>");
            scop = "局部变量";
            document.writeln(scop+"<br/>");
            document.writeln(sc+"<br/>");
            sc = "成员sc--局部";
            document.write(sc+"<br/>");
            //函数中显式声明了局部变量,那么上边的同名局部变量也不会考虑成员变量,好像是var sc; document.writeln(sc+"<br/>");
            // sc = "成员sc--局部";
            // document.write(sc+"<br/>");
            // sc = "成员sc";
            // 所以我们看到,输出结果显示和预想不同
            var sc = "成员sc";//不注释,结果1,注释,结果2
            document.writeln(sc+"<br/>");
        }
        //函数调用
        test1();
        document.writeln(sc+"<br/>");
    </script>
</head>
<body>

</body>
</html>

不注释var sc = "成员sc";

技术分享

注释var sc = "成员sc";

技术分享

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript的变量的声明周期</title>
    <script type="text/javascript">
        var test = "测试变量声明周期!";
        //定义函数checkScope
        function checkScope() {
            //隐式定义局部变量(为了方便代码阅读,我们不建议隐式声明变量),局部变量覆盖成员变量,
            //注意在这里我们如果不var,那么默认使用的是全局变量
            var test = "局部变量";
            document.write("<hr>");
            document.write(test+"<br/>");
        }
        //调用函数
        checkScope();
        document.write("<hr>");
        document.write(test+"<br/>");
        //定义函数divScope JavaScript中是没有块范围的
        function divScope(o){
            //定义局部变量,变量的作用范围是整个函数
            var i = 1;
            //判断两个变量类型是否一致
            if(typeof o == ‘object‘){
                //JavaScript中不存在块,所以变量j的作用范围是整个函数.而不仅仅是if语句中
                var j = 2;
                for (var k = 0; k <= 8; k++) {
                    //在文档中打印输出k值,会在浏览器上显示
                    document.write("<hr>");
                    document.write(k);
                    // alert(k);
                    // document.writeln("<br/>");
                }
                document.write("<hr>");
                document.writeln(k+"<br/>");

            }
            document.write("<hr>");
            document.writeln(k+"<br/>");
        }
        //调用函数
        divScope(document);
        //变量声明却不赋值,那么默认给值为undefined
        var scope = "成员变量";
        var sc = "成员sc";
        var sco;
        scc = "隐式声明变量,一定要初始化,否则不能正常解释!";
        function test1(){
            //隐式声明,其实是全局变量
            sco,scc;
            var scop;
            //此时局部变量随被声明了,但是没有赋值,那么浏览器默认给值undefined
            //函数中声明变量如果是隐式的,那么会先在全局寻找是否有同名的全局变量,如果有,那么用这个全局变量,否则声明新变量
            //如果函数中声明了一个新的局部变量,局部变量名称和成员变量一样,那么函数中用局部变量覆盖成员变量,由于JavaScript是若语言,所以他不会像java一样按照顺序进行,只要在函数中定义了变量(显示声明),那么就不会考虑成员变量
            // scope;此时会将这个变量认为是成员变量,下面输出成员变量
            document.write("<hr>");
            document.writeln(scope+"<br/>");
            document.write("<hr>");
            document.writeln(scop+"<br/>");
            scop = "局部变量";
            document.write("<hr>");
            document.writeln(scop+"<br/>");
            document.write("<hr>");
            document.writeln(sc+"<br/>");
            sc = "成员sc--局部";
            document.write("<hr>");
            document.write(sc+"<br/>");
            //函数中显式声明了局部变量,那么上边的同名局部变量也不会考虑成员变量,好像是var sc; document.writeln(sc+"<br/>");
            // sc = "成员sc--局部";
            // document.write(sc+"<br/>");
            // sc = "成员sc";
            // 所以我们看到,输出结果显示和预想不同
            // var sc = "成员sc";//不注释,结果1,注释,结果2
            document.write("<hr>");
            document.writeln(sc+"<br/>");
            document.write("<hr>");
            document.write(sco+"<br/>");
            document.write("<hr>");
            document.write(scc+"<br/>");
        }
        //函数调用
        test1();
        document.write("<hr>");
        document.writeln(sc+"<br/>");
        document.write("<hr>");
        document.write(sco+"<br/>");
        //document.write(scop+"<br/>");超出了局部变量声明周期
    </script>
</head>
<body>

</body>
</html>

技术分享

3.2 基本数据类型

技术分享

注意这里的null值和java的null值是不同的,Java中null意味着没有指针引向,而这里的null就是作为一个值,这个值表明是空

3.2.1 类型转换

3.2.2 数值类型

技术分享

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript基本数据类型--数值类型</title>
    <script type="text/javascript">
    //显式声明变量
    var a,b;
    //科学计数法,赋值
    a = 5e2;
    b = 6E3;
    document.write(a+"<br/>");
    document.write(b+"<br/>");
    //如果数值只有小数部分,那么是可以省略0的,但是不能省略小数点.
    var dou = 0.23;
    document.write(dou+"<br/>")
    dou = .23;
    document.write(dou+"<br/>")
    //数值不要直接以0开始,因为JavaScript不仅支持十进制,还支持八进制和十六进制,以及其他进制,八进制以0开头,只能出现0-7的数字,十六进制以0X或0x开头,9以上的数用a-f表示,十六进制使用很普遍,所以十六进制是很有用的,八进制使用不多,所以很多浏览器不支持,使用前要先知道浏览器是否支持
    var e = 024;//2*8+4
    var s = 0x13;//1*16+3
    document.write(e+"<br/>");
    document.write(s+"<br/>");
    //当数值变量的值超出其取值范围时,将会出现两个特别值:Infinity(正无穷大)和-Infinity(负无穷大),前者表示大于数值类型的最大值,后者表示小于数值类型最小值
    //Number.MAX_VALUE — JavaScript可表示的最大值，最大值为1.7976931348623157e+308  ,-Number.MAX_VALUE — JavaScript可表示的最小值
    //Number.NEGATIVE_INFINITY — 负无限接近于0，溢出时返回该值
    b = 6e555;
    a = -6e308;
    document.write(b+"<br/>");
    document.write(a+"<br/>");
    //Infinity和-Infinity进行算数运算时,整个算数表达式将变成另一个特殊值NaN,not a number,Infinity和-Infinity单独与数值进行比较运算则会返回和他们本身一样的值,如Infinity和数值运算,返回Infinity,但Infinity和-Infinity都可以执行比较运算,两个Infinity总是相等的,两个-Infinity也是相等的
    var A = 7;
    b = b-A;
    document.write(a+b+"<br/>");
    document.write(a-dou+"<br/>");
    document.write(b+dou+"<br/>");
    //JavaScript中的算术运算允许除数为0,不会报错,正数/0=Infinity,负数/0=-Infinity,0/0=NaN,
    document.write(b/0+"<br/>");
    document.write(a/0+"<br/>");
    document.write(0/0+"<br/>")
    //NaN表示这不是一个数值,如果运算表达式中有一个NaN那么,整个算数表达式都是NaN
    var B = 0/0;
    document.write(B+7+"<br/>");
    document.write(B-7+"<br/>");
    //NaN与Infinity和-Infinity不同,NaN不会与任何数值变量相等,也就是NaN==NaN也返回false,那么如何判断一个NaN呢?JavaScript专门提供了isNaN()来判断某个变量是否为NaN.
    function test(){
        if (NaN==NaN) {
            document.write("NaN==NaN"+"<br/>");
        } else {
            document.write("NaN!==NaN"+"<br/>");
        }
        if (isNaN(B)) {
            document.write("使用JavaScript内嵌函数isNaN()判断变量是否为NaN,结果是"+"<br/>");
        } else {
            document.write("使用JavaScript内嵌函数isNaN()判断变量是否为NaN,结果不是"+"<br/>");
        }
    }
    test();
    //我们知道数值类型包含正数类型和浮点类型,关于浮点类型我们要注意损失精度的问题,
    a = .3333;
    b = 5*a;
    //通过观察结果我们发现输出结果为1.6664999999999999,这和预计的不一样,这种浮点数计算产生的问题,我们在很多语言中都会出现,对于浮点数的比较尽量不要直接比较推荐使用差值比较法,通过比较两个浮点数的差值,只要差值小于一个足够小的数,就认为相等
    document.write(b+"<br/>");
    </script>
</head>
<body>

</body>
</html>