JavaScript基本语法 - PHP第11期作业

微信公众号讲师中心

首页

文章

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

专题

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

AI工具

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

学习

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

编程手册

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

下载

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

搜索

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

首页 > 博客列表 > JavaScript基本语法

博主信息

博文 43

粉丝 1

访问量 43197

专题推荐

更多>

一、什么是JavaScript

JavaScript 是属于 HTML 和 Web 的编程语言。

二、JavaScript的基本语法

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。
脚本可放置与外部文件中，JavaScript 文件的文件扩展名是 .js。
JavaScript 使用 Unicode 字符集。Unicode 覆盖世界上几乎所有的字符、标点和符号。

三、JavaScript语言的核心

ECMAScript:核心语法
DOM:Document Object Model 文档(html/xml)对象模型
BOM:Browser Object Model 浏览器窗口对象模型

四、JavaScript可以做什么

1.JavaScript 能够改变 HTML 内容

<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript 能够改变 HTML 内容。</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我！</button>
</body>
</html>

运行效果：

点击前
点击后

2.JavaScript 能够改变 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>
      document.querySelector("h2").style.color = "red";
    </script> -->
  </head>
  <body>
    <h2>美丽中国</h2>
  </body>
  <script>
    window.document.write("<h1>我和我的祖国</h1>");
  </script>
</html>

JavaScript 通过src改变 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>
      document.querySelector("h2").style.color = "red";
    </script> -->
  </head>
  <body>
    <h2>美丽中国</h2>
  </body>
  <script src="test.js">
    window.document.write("<h1>我和我的祖国</h1>");
  </script>
</html>

上例中用到的test.js外部文件

window.document.write("<h1>我们应该用平常心在对待生活</h1>");

运行效果：

3.JavaScript 能够改变 HTML 样式 (CSS)

<!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>美丽中国</h2>//原来是的字体是黑色的
  </body>
<script>
    document.querySelector("h2").style.color = "red";//通过JavaScript将h2标签的字体改变为红色
</script>
</html>

运行效果：

4.JavaScript 能够隐藏 HTML 元素

<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript 能够隐藏 HTML 元素。</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">
点击我！
</button>
</body>
</html>

运行效果：

点击前
点击后

5.JavaScript 能够显示 HTML 元素

<!DOCTYPE html>
<html>
<body>
<p>JavaScript 能够显示隐藏的 HTML 元素。</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">
点击我！
</button>
</body>
</html>

运行效果：

点击前
点击后

五、JavaScript 显示方式

JavaScript 不提供任何内建的打印或显示函数。但是JavaScript 能够以不同方式“显示”数据：

1.使用 window.alert() 写入警告框

<!DOCTYPE html>
<html>
  <body>
    <h2>我和我的祖国</h2>
    <script>
      window.alert(51 + 96);
    </script>
  </body>
</html>

运行效果：

2.使用 document.write() 写入 HTML 输出

<!DOCTYPE html>
<html>
<body>
<h2>学习时间</h2>
<p>我正在学习JavaScript</p>
<script>
document.write(8 * 9);
</script>
</body>
</html>

运行效果：

3.使用 innerHTML 写入 HTML 元素

<!DOCTYPE html>
<html>
<body>
<h2>我和我的祖国</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 7 + 8;
</script>
</body>
</html>

运行效果：

4.使用 console.log() 写入浏览器控制台

<!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>
      //在JavaScript中声明变量需要以"var"开头
      var username = "admin";
      var userName = "Jack";
      //变量区分大小写,与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>

运行效果：

六、JavaScript 变量

JavaScript 变量是存储数据值的容器。在 JavaScript 中创建变量被称为“声明”变量。可以通过 var 关键词来声明 JavaScript 变量。声明之后，变量是没有值的。（技术上，它的值是 undefined。）JavaScript中允许重复声明变量，但是变量的值只显示一次。

<!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;
      //初始化,第一次赋值
      email = "admin@php.cn";
      var email;
      var email;
      var email;//重复声明变量只显示一次结果
      console.log(email);
    </script>
  </body>
</html>

运行效果：

七、JavaScript的作用域

作用域指的是我们有权访问的变量集合。在 JavaScript 中有两种作用域类型：局部作用域和全局作用域。JavaScript 拥有函数作用域：每个函数创建一个新的作用域。作用域决定了这些变量的可访问性（可见性）。
1.JavaScript局部作用域
在JavaScript 函数中声明的变量，会成为函数的局部变量。局部变量的作用域是局部的：只能在函数内部访问它们。
2.JavaScript全局作用域
函数之外声明的变量，会成为全局变量。全局变量的作用域是全局的：网页的所有脚本和函数都能够访问它。

<!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>
      //作用域是一个对象,是用来查找变量的工具
      //php中作用域有两个:函数作用域,全局/外部作用域/函数外部
      //js与php的作用域是一样的,也有函数和全局
      //php与js都不存在块作用域
      var job = "一位老师";//这是一个全局变量
      function test() {
        //在js中函数可以直接访问全局变量
        var username = "王小丁";//这是一个局部变量
        console.log(username + "是" + job);
      }
      test();
    </script>
  </body>
</html>

运行效果：

八、总结

1.JavaScript是web 开发者必学的三种语言之一(另外两个:html&css)。
2.JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。
3.全局变量（或函数）能够覆盖 window 变量（或函数）。
4.JavaScript 变量的有效期始于其被创建时。
5.函数参数也是函数内的局部变量。
6.局部变量会在函数完成时被删除。
7.全局变量会在关闭页面时被删除。

批改老师：