JavaScript 基础实践

1.直接在网页输出

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js基础</title>
    <script>
      window.document.write("<h2>js基础，这是一个测试页面</h2>");
    </script>
  </head>
  <body></body>
</html>

实验效果

2. 引入一个 js 脚本

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js基础</title>
    <script src="js1.js">
      window.document.write("<h2>js基础，这是一个测试页面</h2>");//引入后这个js不执行了
    </script>
  </head>
  <body></body>
</html>

实验效果

3. 处理阻塞方法

添加 defer,延迟执行 JS。先解析 HTML 代码，然后再下载解析 JS 代码；
添加 async,异步加载。使 HTML 和 JS 可以一起下载，js 没有下载分析完不影响 HTML 代码下载直执；
将 JS 整体放到 HTML 最后面

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js基础</title>
    <!-- <script src="js2.js" defer> -->
    <script src="js2.js" async>
      window.document.write("<h2>js基础，这是一个测试页面</h2>");//引入后这个js不执行了
    </script>
  </head>
  <body>
    <h5>这是一个HTML文档</h5>
  </body>
</html>

实验效果

4. js 支持 unicode 编码

js 支持中文变量。但不建议使用，防止 HTML 和 JS 使用的编码不致时出现问题。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS2测试</title>
  </head>
  <body></body>
</html>
<script>
  var 用户名 = "赵四";
  console.log(用户名);
</script>

实验效果

5. js 变量

js 变量需要声名。ES5 使用var,ES6 使用let；
js 变量和函数都区分大小写；（PHP 函数名、对象方法不区分大小写，PHP 变量名区分大小写）
ES5 中变量可以重复声名，虽然变量相同但是两个不同变量，ES6 中不能重复声名。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS2测试</title>
  </head>
  <body></body>
</html>
<script>
  //   var 用户名 = "赵四";
  //   console.log(用户名);
  var id_Student = "110";
  var ID_student = "119";
  console.log("id_Student=", id_Student);
  console.log(ID_student);
</script>

实验效果

6. js 变量作用域

ES5 没有块作用域，ES6 支持块作用域；（PHP 也没有）
变量有全局、函数作用域；
函数中可直接访问全局变量。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS2测试</title>
  </head>
  <body></body>
</html>
<script>
  //   var 用户名 = "赵四";
  //   console.log(用户名);
  var id_Student = "110";
  var ID_student = "119";
  console.log("id_Student=", id_Student);
  console.log("ID_student=", ID_student);
  function displaystudent() {
    var name_student = "赵四";
    console.log("访问全局变量:" + id_Student); //访问全局变量
    console.log("访问函数域的变量:" + name_student); //访问函数域的变量
  }
  displaystudent();
</script>

实验效果

7. js 变量提升

变量提升：变量未定义前，可以使用变量；
ES5 中可以使用，ES6 不支持。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS3测试</title>
  </head>
  <body></body>
</html>
<script>
  console.log("未声名前访问变量（变量提升）：" + name_stutdent); //声名前访问变量
  var name_stutdent = "赵四"; //变量声名，并初始化
  console.log("声名后访问变量：" + name_stutdent); //声名后访问变量
</script>

实验效果

8. 总结

以前没有接触过 JavaScript,这是第一次深入了解。感觉上是细节上有不同，整体上和其它编程语言相差不多。
第一次课，理解起来不难。但对各类方法、属性不清楚，怎么运用是一脸茫然。期待后面的学习:-)

JavaScript 基础实践

JavaScript 基础实践

1.直接在网页输出

2. 引入一个 js 脚本

3. 处理阻塞方法

4. js 支持 unicode 编码

5. js 变量

6. js 变量作用域

7. js 变量提升

8. 总结

相关文章