JavaScript初识

1.JavaScript组成

ECMAScript：核心语法
DOM:Document: Object Model 文档模型对象
DOM：Brower Object Model

2.语法

2.1js代码如何书写

-在html代码中写JavaScript语法要使用script标签包裹起来
-script标签中可以用src属性引入外部的js文件，将调用一个外部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 src="test.js">
      //如果scrip标签中出现src属性，将调用一个外部js脚本，并忽略内部的代码
      //async：可以实现外部的js文件的当前的html文件解析同步进行
      document.querySelector("h2").style.color = "red";
    </script>
  </head>
  <body>
    <h2>朱老师喜欢大家</h2>
  </body>
</html>
<!-- script标签中添加defer属性，将会延迟加载外部的js文件，直到当前的html解析完成 -->

2.2js变量声明

js变量用关键字var来声明，变量区分大小写，函数也区分大小写
这点与PHP不同，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>
  </head>
  <body>
    <script>
      //   Unicode:
      var 姓名 = '吴"老二"';
      console.log(姓名);
      //php 没有变量声明的
      //   前面没有关键字  $name = "朱老师";
      var username = "admin";
      var userName = "Peter";
      //变量区分大小写，与PHP一直
      console.log(username);
      console.log(userName);
      function a() {
        console.log("Hello a");
      }
      function A() {
        console.log("Hello A");
      }
      //在js中，函数区分大小写
      a();
      A();
    </script>
  </body>
</html>

2.3js作用域

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>
  </head>
  <body>
    <script>
      //变量
      //约定大于配置
      var email = "admin@php.cn";
      var SEX = "male";
      //更新
      email = "jack@php.cn";
      console.log(email);
      //ES5重新声明
      var email = "Hello@php.cn";
      //作用域是一个对象，用来查找变量的工具
      //PHP中作用域有二：函数作用域，全局/外部使用域/函数外部
      //js与PHP的作用域是一样的，也有函数和全局
      //php与js都不存在块作用域
      job = "Lecture";
      function test() {
        var username = "朱老师";
        console.log(username + "是" + job);
      }
      test();
      //   {
      //     //块作用域
      //     // var age = 40;
      //   }
      //   {
      //     //ES6支持块作用域
      //     let age = 40;
      //   }
      //   console.log(age);
      if (true) {
        var hello = "php.cn";
        console.log("Hello..." + hello);
      }
      console.log("Hello..." + hello);
    </script>
  </body>
</html>

2.4js变量提升

js变量声明可以看成两歩，第一歩是变量声明，第二步是变量初始化。
为定义的变量使用的话是undefined。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //变量提升：变量未定义之前就可以使用了
      //访问在前
      console.log(email);
      //声明
      var email = "admin@php.cn";
      //声明
      var email;
      //初始化
      email = "admin@php.cn";
      var username;
      console.log(username);
    </script>
  </body>
</html>