search

博客列表 >JS基础-初识JavaScript

JS基础-初识JavaScript

岂几岂几
岂几岂几原创
2020年05月24日 03:52:07683浏览

初识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则定义了元素的行为.

上一条：JSON的解析，Ajax不刷新页面更新页面下一条：PHP基础-composer常用命令/用composer快速搭建MVC框架
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多