Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Web前端 - JavaScript - 基础知识
Blogger Information
Blog 33
fans 0
comment 0
visits 27756
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
Web前端 - JavaScript - 基础知识
郴
Original
571 people have browsed it

Web前端 - JavaScript - 基础知识

一、组成

  • 核心语法
  • DOM：文档对象模型，包括操作HTML和XML节点的API
  • BOM：浏览器对象模型，操作窗口对象

二、部分语法

1. 注释

  • 单行注释：//
  • 多行注释：/**/

2. js文件加载

  • 加载本地js脚本：在<script>标签中编辑
  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  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.         document.write('<h1>Hello</h1>');
  11.     </script>
  12. </body>
  13. </html>

  • 延迟加载外部js脚本：等到页面解析完才执行，<script>标签的src和defer属性
  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  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 src="test.js" defer></script>
  10.     <h1>你好小明</h1>
  11.     <p id="p"></p>
  12. </body>
  13. </html>

  1. document.getElementById('p').innerHTML = 'Hello';
  • 异步加载外部js脚本：同步进行，<script>标签的src和async属性
  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  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 src="test.js" async></script>
  10.     <h1>你好小明</h1>
  11. </body>
  12. </html>
  1. window.alert('hello');

3. 函数

  • 函数区分大小写
  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  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.         function a() {
  11.             console.log('a');
  12.         }
  13.         function A() {
  14.             console.log('A');
  15.         }
  16.         a();
  17.         A();
  18.     </script>
  19. </body>
  20. </html>

4. 变量

  • 允许重复声明
  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  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.         var name = '小明';
  11.         var name = '小红';
  12.         console.log(name);
  13.     </script>
  14. </body>
  15. </html>

  • 允许在函数中直接使用外部变量
  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  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.         var name = '小明';
  11.         function sayName() {
  12.             console.log('我的名字叫' + name);
  13.         }
  14.         sayName();
  15.     </script>
  16. </body>
  17. </html>

  • ES6支持块作用域
  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  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.         {let name = '小红';}
  11.         console.log(name);
  12.         var age =18;
  13.         console.log(age);
  14.     </script>
  15. </body>
  16. </html>

5. 字符串

  • 字符串拼接
  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  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.         var name = '小明';
  11.         function sayName() {
  12.             console.log('我的名字叫' + name);
  13.         }
  14.         sayName();
  15.     </script>
  16. </body>
  17. </html>

三、课程总结

  • 今天学习了 JavaScript 的基础，通过上课认真听讲和认真完成老师布置的作业，使得我对 JavaScript 的理解和运用更加深入和熟悉。最主要的知识点是明白和掌握了JS和PHP的区别以及JS的基本语法。
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：今晚我们会继续深入了解js, 别错过
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