微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > JavaScript 基础实践

博主信息

博文 7

粉丝 0

访问量 6802

专题推荐

更多>

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>