JavaScript

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript相关的知识，希望对你有一定的参考价值。

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>

技术分享

3.2.3 字符串类型

 

3.2.4 布尔类型

 

3.2.5 undefined和null

 

3.2.6 正则表达式

 

3.3 复合类型

 

3.4 运算符

 

4. 语句

 

5.流程控制

 

6.函数和函数的参数处理

 

 

7.对象和对象的创建

 

以上是关于JavaScript的主要内容，如果未能解决你的问题，请参考以下文章

30秒就能看懂的JavaScript 代码片段

常用Javascript代码片段集锦

48个值得掌握的JavaScript代码片段（上）

如何将此 JavaScript 代码片段翻译成 Parenscript？

javascript 代码片段

javascript JS-常用代码片段