Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JavaScript基本语法
Blogger Information
Blog 43
fans 1
comment 0
visits 33915
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JavaScript基本语法
蔚蓝世纪
Original
672 people have browsed it

一、什么是JavaScript

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

二、JavaScript的基本语法

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

三、JavaScript语言的核心

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

四、JavaScript可以做什么

1.JavaScript 能够改变 HTML 内容
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p id="demo">JavaScript 能够改变 HTML 内容。</p>
  5. <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我！</button>
  6. </body>
  7. </html>
运行效果：

点击前
点击后

2.JavaScript 能够改变 HTML 属性
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.       document.querySelector("h2").style.color = "red";
  8.     </script> -->
  9.   </head>
  10.   <body>
  11.     <h2>美丽中国</h2>
  12.   </body>
  13.   <script>
  14.     window.document.write("<h1>我和我的祖国</h1>");
  15.   </script>
  16. </html>
JavaScript 通过src改变 HTML 属性
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.       document.querySelector("h2").style.color = "red";
  9.     </script> -->
  10.   </head>
  11.   <body>
  12.     <h2>美丽中国</h2>
  13.   </body>
  14.   <script src="test.js">
  15.     window.document.write("<h1>我和我的祖国</h1>");
  16.   </script>
  17. </html>
上例中用到的test.js外部文件
  1. window.document.write("<h1>我们应该用平常心在对待生活</h1>");
运行效果：

3.JavaScript 能够改变 HTML 样式 (CSS)
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7. </head>
  8.   <body>
  9.     <h2>美丽中国</h2>//原来是的字体是黑色的
  10.   </body>
  11. <script>
  12.     document.querySelector("h2").style.color = "red";//通过JavaScript将h2标签的字体改变为红色
  13. </script>
  14. </html>
运行效果：

4.JavaScript 能够隐藏 HTML 元素
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p id="demo">JavaScript 能够隐藏 HTML 元素。</p>
  5. <button type="button" onclick="document.getElementById('demo').style.display='none'">
  6. 点击我！
  7. </button>
  8. </body>
  9. </html>
运行效果：

点击前
点击后

5.JavaScript 能够显示 HTML 元素
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p>JavaScript 能够显示隐藏的 HTML 元素。</p>
  5. <p id="demo" style="display:none">Hello JavaScript!</p>
  6. <button type="button" onclick="document.getElementById('demo').style.display='block'">
  7. 点击我！
  8. </button>
  9. </body>
  10. </html>
运行效果：

点击前
点击后

五、JavaScript 显示方式

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

1.使用 window.alert() 写入警告框
  1. <!DOCTYPE html>
  2. <html>
  3.   <body>
  4.     <h2>我和我的祖国</h2>
  5.     <script>
  6.       window.alert(51 + 96);
  7.     </script>
  8.   </body>
  9. </html>
运行效果：

2.使用 document.write() 写入 HTML 输出
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>学习时间</h2>
  5. <p>我正在学习JavaScript</p>
  6. <script>
  7. document.write(8 * 9);
  8. </script>
  9. </body>
  10. </html>
运行效果：

3.使用 innerHTML 写入 HTML 元素
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>我和我的祖国</h2>
  5. <p id="demo"></p>
  6. <script>
  7. document.getElementById("demo").innerHTML = 7 + 8;
  8. </script>
  9. </body>
  10. </html>
运行效果：

4.使用 console.log() 写入浏览器控制台
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       //在JavaScript中声明变量需要以"var"开头
  11.       var username = "admin";
  12.       var userName = "Jack";
  13.       //变量区分大小写,与php一致
  14.       console.log(username);
  15.       console.log(userName);
  16.       function a() {
  17.         console.log("Hello a");
  18.       }
  19.       function A() {
  20.         console.log("Hello A");
  21.       }
  22.       //在JS中,函数区分大小写,php中不区分
  23.       a();
  24.       A();
  25.     </script>
  26.   </body>
  27. </html>
运行效果：

六、JavaScript 变量

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       //变量提升:变量未定义之前就可以使用了
  11.       //声明
  12.       var email;
  13.       //初始化,第一次赋值
  14.       email = "admin@php.cn";
  15.       var email;
  16.       var email;
  17.       var email;//重复声明变量只显示一次结果
  18.       console.log(email);
  19.     </script>
  20.   </body>
  21. </html>
运行效果：

七、JavaScript的作用域

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       //作用域是一个对象,是用来查找变量的工具
  11.       //php中作用域有两个:函数作用域,全局/外部作用域/函数外部
  12.       //js与php的作用域是一样的,也有函数和全局
  13.       //php与js都不存在块作用域
  14.       var job = "一位老师";//这是一个全局变量
  15.       function test() {
  16.         //在js中函数可以直接访问全局变量
  17.         var username = "王小丁";//这是一个局部变量
  18.         console.log(username + "是" + job);
  19.       }
  20.       test();
  21.     </script>
  22.   </body>
  23. </html>
运行效果：

八、总结

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

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：咱们讲的内容偏底层了一些, 所以要多看几遍
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post