Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JavaScript 基础实践
Blogger Information
Blog 7
fans 0
comment 0
visits 4912
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
1015 people have browsed it

JavaScript 基础实践

1.直接在网页输出

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>js基础</title>
  7.     <script>
  8.       window.document.write("<h2>js基础，这是一个测试页面</h2>");
  9.     </script>
  10.   </head>
  11.   <body></body>
  12. </html>

实验效果

2. 引入一个 js 脚本

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>js基础</title>
  7.     <script src="js1.js">
  8.       window.document.write("<h2>js基础，这是一个测试页面</h2>");//引入后这个js不执行了
  9.     </script>
  10.   </head>
  11.   <body></body>
  12. </html>

实验效果

3. 处理阻塞方法

  • 添加 defer,延迟执行 JS。先解析 HTML 代码，然后再下载解析 JS 代码；
  • 添加 async,异步加载。使 HTML 和 JS 可以一起下载，js 没有下载分析完不影响 HTML 代码下载直执；
  • 将 JS 整体放到 HTML 最后面
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>js基础</title>
  7.     <!-- <script src="js2.js" defer> -->
  8.     <script src="js2.js" async>
  9.       window.document.write("<h2>js基础，这是一个测试页面</h2>");//引入后这个js不执行了
  10.     </script>
  11.   </head>
  12.   <body>
  13.     <h5>这是一个HTML文档</h5>
  14.   </body>
  15. </html>

实验效果

4. js 支持 unicode 编码

  • js 支持中文变量。但不建议使用，防止 HTML 和 JS 使用的编码不致时出现问题。
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>JS2测试</title>
  7.   </head>
  8.   <body></body>
  9. </html>
  10. <script>
  11.   var 用户名 = "赵四";
  12.   console.log(用户名);
  13. </script>

实验效果

5. js 变量

  • js 变量需要声名。ES5 使用var,ES6 使用let；
  • js 变量和函数都区分大小写；（PHP 函数名、对象方法不区分大小写，PHP 变量名区分大小写）
  • ES5 中变量可以重复声名，虽然变量相同但是两个不同变量，ES6 中不能重复声名。
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>JS2测试</title>
  7.   </head>
  8.   <body></body>
  9. </html>
  10. <script>
  11.   //   var 用户名 = "赵四";
  12.   //   console.log(用户名);
  13.   var id_Student = "110";
  14.   var ID_student = "119";
  15.   console.log("id_Student=", id_Student);
  16.   console.log(ID_student);
  17. </script>

实验效果

6. js 变量作用域

  • ES5 没有块作用域，ES6 支持块作用域；（PHP 也没有）
  • 变量有全局、函数作用域；
  • 函数中可直接访问全局变量。
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>JS2测试</title>
  7.   </head>
  8.   <body></body>
  9. </html>
  10. <script>
  11.   //   var 用户名 = "赵四";
  12.   //   console.log(用户名);
  13.   var id_Student = "110";
  14.   var ID_student = "119";
  15.   console.log("id_Student=", id_Student);
  16.   console.log("ID_student=", ID_student);
  18.   function displaystudent() {
  19.     var name_student = "赵四";
  20.     console.log("访问全局变量:" + id_Student); //访问全局变量
  21.     console.log("访问函数域的变量:" + name_student); //访问函数域的变量
  22.   }
  23.   displaystudent();
  24. </script>

实验效果

7. js 变量提升

  • 变量提升：变量未定义前，可以使用变量；
  • ES5 中可以使用，ES6 不支持。
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>JS3测试</title>
  7.   </head>
  8.   <body></body>
  9. </html>
  10. <script>
  11.   console.log("未声名前访问变量（变量提升）：" + name_stutdent); //声名前访问变量
  12.   var name_stutdent = "赵四"; //变量声名，并初始化
  13.   console.log("声名后访问变量：" + name_stutdent); //声名后访问变量
  14. </script>

实验效果

8. 总结

  • 以前没有接触过 JavaScript,这是第一次深入了解。感觉上是细节上有不同，整体上和其它编程语言相差不多。
  • 第一次课，理解起来不难。但对各类方法、属性不清楚，怎么运用是一脸茫然。期待后面的学习:-)
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