js学习：第13章 JavaScript基本语法 - html

微信公众号讲师中心

首页

文章

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

专题

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

AI工具

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

学习

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

编程手册

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

下载

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

搜索

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

首页 > 博客列表 > js学习：第13章 JavaScript基本语法

博主信息

博文 52

粉丝 0

访问量 54202

专题推荐

更多>

JavaScript基础语法

在HTML中写JavaScript代码要用<script>… </script>标签包起来

  <script>
  window.document.write("<h1>大家好</h1>");
  </script>

如果script标签中出现src属性,将调用一个外部js脚本,并忽略内部代码

async: 可以实现外部的js文件与当前的html文件的解析同步进行

使用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>
  </head>
  <body>
    <h2>我是被js改变为红色字体的文字</h2>
  </body>
</html>
<script>
  // 如果script标签中出现src属性,将调用一个外部js脚本,并忽略内部代码
  // async: 可以实现外部的js文件与当前的html文件的解析同步进行
  document.querySelector("h2").style.color = "red";
</script>

注意：上面的代码必须在html尾部执行，否则在头部执行的时候找不到h2标签 js就失效了

效果：

js的变量

  // 如果没有这个变量或者变量值为空 会默认给个值Unicode:
  // console.log(姓名);
  // php没有变量声明的
  // 前面没有关键字 $name = "$";

变量区分大小写：

代码：

<!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 username = "admin";
      var userName = "大写的";
      // 变量区分大小写, 与php一致
      console.log(username);
      console.log(userName);
      function a() {
        console.log("Hello a");
      }
      function A() {
        console.log("Hello A大写的");
      }
      // 在JS中, 函数区分大小写,PHP中不区分
      a();
      A();
    </script>
  </body>
</html>

效果：

js中的变量可以更新可以重新声明

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>
  </head>
  <body>
    <script>
      // 变量
      // 约定大于配置
      var email = "邮箱@php.cn";
      var SEX = "年龄";
      // 更新
      email = "更新后的邮箱@php.cn";
      console.log(email);
      // ES5允许重新声明
      var email = "重新声明的邮箱@php.cn";
      // 作用域是一个对象, 用来查找变量的工具
      // php中作用域有二: 函数作用域, 全局/外部使用域/函数外部
      // js与php的作用域是一样的,也有函数和全局
      // php与js都不存在块作用域
      console.log(email);
      var job = "job变量";
      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>

效果：

变量声明提升: 变量未定义之前就可以使用了

代码：

<!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;
      // 访问在前
      console.log(email);
      // 声明在后
      //   var email = "admin@php.cn";
      // 初始化,第一次赋值
      email = "admin@php.cn";
      console.log(email);
      //   var username;
      //   console.log(username);
    </script>
  </body>
</html>

效果：

js弹窗与延迟加载

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script>
      alert("我是弹窗");
    </script>
    <title>Document</title>
    <!-- <script>
        // 如果script标签中出现src属性,将调用一个外部js脚本,并忽略内部代码
        // async: 可以实现外部的js文件与当前的html文件的解析同步进行
        document.querySelector("h2").style.color = "red";
    </script>
    -->
  </head>
  <body>
    <h2>我是被js改变为红色字体的文字</h2>
  </body>
</html>
<script>
  // 如果script标签中出现src属性,将调用一个外部js脚本,并忽略内部代码
  // async: 可以实现外部的js文件与当前的html文件的解析同步进行
  document.querySelector("h2").style.color = "red";
</script>
<!-- script标签中添加defer属性, 将会延迟加载外部的js文件,直到当前的html解析完成 -->