简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > JS基础-初识JavaScript
Blogger Information
Blog 57
fans 3
comment 0
visits 59793
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
JS基础-初识JavaScript
岂几岂几
Original
672 people have browsed it

初识JavaScript

1. JS组成

  • JS语言核心有三部分

    • ECMAScrpt: 语法核心

    • DOM: Document Object Model, 文档对象模型(文档指HTML文档或XML文档)

    • BOM: Browser Object Mode, 客户端/浏览器窗口对象,又叫浏览器对象模型(操作对象: 浏览器窗口对象模型).

  • 除此之外还有一些补充

    • 浏览器/宿主环境提供的API: 如Timeout(), 即定时器.

  • 宿主环境: 执行环境/运行上下文

    • 浏览器: Chrome, Firefox, edge, 360浏览器, 各种浏览器…
    • 命令行执行
    • 服务器端执行: Node.js

2. JS基本知识和语法

  1. 在html文件中嵌入JS代码, 需要使用<script>标签. 其中type属性指定脚本语言, 目前text/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>HTML文档中嵌入js代码</title>
  7.     <!-- type属性指定脚本语言, 目前text/JavaScript已成唯一, 所以不写type属性也可以 -->
  8.     <script type="text/javascript">
  9.         // window变量指向当前浏览器窗口, 类似PHP中的echo.
  10.         window.document.write("<h1>Hello JavaScript!</h1>");
  11.     </script>
  12. </head>
  13. <body>
  14. </body>
  15. </html>

  1. script标签的src标签可以指定外部的一个js脚本文件, 此时script标签内部的代码将被忽略

demo1.js

  1. window.document.write("<h1>Hello JavaScript~~~~~~~~~~</h1>");

引用demo1.js

  1.     <!-- script标签的src标签可以指定外部的一个js脚本文件, 此时script标签内部的代码将被忽略 -->
  2.     <script src="demo1.js">
  3.         // 下面的代码将不会执行
  4.         window.document.write("hahahaha");
  5.     </script>
  1. 在执行js脚本时, 将会中断HTML文档解析, 当js脚本执行完毕时,才会继续往下解析
  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>HTML文档中嵌入js代码</title>
  7.         <!-- 在执行js脚本时, 将会中断HTML文档解析, 当js脚本执行完毕时,才会继续往下解析, 特别是很长的js脚本, 会造成HTML页面假死. 所以, 一般把写在HTML文档中的js代码放在靠近</body>的地方 -->
  8.     <script>
  9.         alert("我将中断HTML文档往下解析");
  10.     </script>
  11. </head>
  12. <body>    
  13.     <!-- 在关闭alert()弹出框之前,下面的HTML元素不显示 -->
  14.     <h1>你好! JavaScript</h1>
  15. </body>
  16. </html>

  1. 为解决执行js脚本发生的阻塞, 可以给script标签添加defer属性, 把js脚本放到外部文件中, 使用src文件引入, 这样可以实现延时加载, 文档也不会阻塞

外部js脚本文件

  1. alert('看看我会不会把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>HTML文档中嵌入js代码</title>
  7.     <script src="alert.js" defer>
  8.     </script>
  9. </head>
  10. <body>    
  11.     <h1>你好! JavaScript</h1>
  12. </body>
  13. </html>

  1. 另一种解决js脚本阻塞的方法, 就是给script标签添加async属性, 即异步加载, 这样可以实现解析HTML文档和 执行js脚本同时进行

外部js文件略

  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>HTML文档中嵌入js代码</title>
  7.     <script src="alert.js" async>
  8.     </script>
  9. </head>
  10. <body>    
  11.     <h1>你好! JavaScript</h1>
  12. </body>
  13. </html>

2. JS变量声明和赋值

  1. JS支持中文变量名, 但是强烈建议不要使用.
  1. var 姓名="张三";
  2. console.log(姓名);
  3. /* result: 张三 */
  1. JS变量名区分大小写.
  1. var username = "李四";
  2. var UserName = "王五";
  3. console.log(username);
  4. console.log(UserName);
  5. /* result: 
  6. 李四
  7. 王五*/
  1. JS中函数名也区分大小写, 这点与PHP有所区别
  1. function func() {
  2.   console.log("func");
  3. }
  5. function FUNC() {
  6.   console.log("FUNC");
  7. }
  9. func();
  10. FUNC();
  11. /* result:
  12. func
  13. FUNC */
  1. 更新变量值: 变量名=新值
  1. var name = "James";
  2. console.log(name);
  3. name = "Kobe";
  4. console.log(name);
  5. /* result:
  6. James
  7. Kobe */
  1. 在ES6中, 可以重新定义变量
  1. var name = "James";
  2. console.log(name);
  3. var name = "Kobe";
  4. console.log(name);
  5. /* result:
  6. James
  7. Kobe */

3. JS的作用域

  • JS中, 作用域是一个对象, 用来查找变量的工具.

  • JS与PHP的作用域是一样的, 也分全局和函数作用域

  • PHP和js(ES5)均不支持块作用域(java中的代码块), ES6支持

  • 函数可以访问全局作用域的成员, 而全局作用域却无法访问函数作用域的成员

  1. var varInGlobal = 'glb';
  2. function func1() {
  3.   var varInFunc = 'hello';
  5.   // 函数作用域中可以直接访问外部作用域的变量
  6.   console.log(varInGlobal);
  7. }
  8. func1();
  10. // 无法访问函数中的变量
  11. console.log(varInFunc);
  12. /* result:
  13. glb
  14. Uncaught ReferenceError: varInFunc is not defined
  15.     at <anonymous>:11:21
  16. */
  18. // 块作用域
  19. if(true) {
  20.   var var1 = 'hello1';
  21.   let var2 = 'hello2';
  22. }
  24. // var1可以正常访问, 不受块作用域影响
  25. console.log(var1);
  26. // let声明的变量就受影响了(ES6)
  27. console.log(var2);
  28. /* result:
  29. hello1
  30. Uncaught ReferenceError: var2 is not defined
  31.     at <anonymous>:10:21
  32. */

变量提升

  • 在JS中, 变量未定义之前, 就可以访问了. 值为undefined

  • JS中的变量声明和初始化时分开的. var sayHi = "hello";可以分解为var sayHi;和sayHi="hello". 当变量只被声明而未被初始化时, 其值为undefined.

  1. console.log(seyHello);
  2. var sayHello;
  3. /* result: undefined */

学习心得

js让前端变得灵活. 没有js, 网页是死的, 渲染完成就不会改变, 除非跳转到新的页面. 有了js, 就有了很多交互. 前端就活了. HTML标签指定了页面的元素, CSS定义了元素的样子, 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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！