JavaScript

1. JS 历史

1995 年 2 月, Netscape(网景), LiveScript—> JavaScript
MS 公司在 IE3, JScript
1997, ECMA(欧洲计算机制造商会)制定了一个前端脚本标准,ECMA-262, ECMAScript
1998, ISO 采用了 ECMA-262, ISO-16262
从此, 所有浏览器厂家以 ECMAScript 为标准开发前端脚本语言
标准 ECMAScript, JavaScript 只是 ECMAScript 标准一个实现
ECMASCript 2011,: ES5 / ES5.1 (我们学习是这个版本)
ECMASCript 2015: ES6, ESCAScript 2015
ECMAScript 2016 / 2018 / 2020…

2. JS 组成

JS 语言核心只有三部分
- ECMAScript: 核心语法
- DOM: Document Object Model 文档(html/xml)对象模型
- BOM: Browser OBject Model 浏览器窗口对象模型
定时器: Timeout(), 宿主环境提供的 API
宿主环境: 执行环境/运行上下文
- 浏览器: chrome / firefox / Edge / …
- 命令行:
- 服务器: Node.js

3. JS的注释

\ 单行注释
<!— 内容 —!> 多行注释

4. JS在html写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.document.write("<h1>这是javascript</h1>")
    </script>
</head>
<body>
    <script src="demo2.js">
         // 如果script标签中出现src属性,将调用一个外部js脚本,并忽略内部代码
         window.document.write("<h1>这是javascript</h1>") //并没在网页上解析出来
    </script>
</body>
</html>

5.JS在html中解析顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.querySelector("h1").style.color = "yellow";
    </script>
</head>
<body>
    <h1>这是在解析前</h1>
    <h2>这是在解析后</h2>
    <script>
        document.querySelector("h2").style.color = "red";
    </script>
</body>
</html>

6.0 JS变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
         // php没有变量声明的
       //  前面没有关键字 $name = "学生";
       var username = "admin";
       var userName = "edu";
       console.log(username);
       console.log(userName);
       function a(){
           console.log("Hello a");
       }
       function A(){
           console.log("Hello A");
       }
       a();
       A();
    </script>
</head>
<body>
</body>
</html>

注意：js中变量区分大小写，php中变量不区分大小写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 变量
        // 约定大于配置
       var email="admin@qq.com";
       var SEX="male";
       // 变量更新
       email = "jack@qq.com";
       console.log(email);
        //    ES5允许变量重复声明
        var email = "hello@qq.com";
        // 作用域是一个对象, 用来查找变量的工具
        // php中作用域有二: 函数作用域, 全局/外部使用域/函数外部
        // js与php的作用域是一样的,也有函数和全局
        // php与js都不存在块作用域
        var job = "ST";
        function test(){
            var username = "小明";
            console.log(username + "是"+ job);
        }
        test(); 
        // console.log(username+ "不是" + job);
        {
            // 块作用域
            var age = 40;
        }
        console.log(age);
        {}
        {
             // ES6支持块作用域
            var sex = 40;
        }
        console.log(sex);
        if(true){
            var hello = "php.cn";
            console.log("Hello.."+hello);
        }
        console.log(hello);
    </script>
</head>
<body>
</body>
</html>

7. JS中变量未定义，却可以使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 变量提升：变量未定义就可以使用
        console.log(email);
        var email = "admin@qq.com"
        // 相当于下面注释
        // var age;
        // console.log(age);
        // age = 40;
        // console.log(age);
    </script>
</head>
<body>
</body>
</html>

总结

JS是如何在html中解析，解析的顺序是怎样。
JS中的变量区分大小写，而PHP中变量是不区分大小写的。

JavaScript基本语法，解析，变量

JavaScript

1. JS 历史

2. JS 组成

3. JS的注释

4. JS在html写法

5.JS在html中解析顺序

6.0 JS变量

7. JS中变量未定义，却可以使用

总结

相关文章