Blogger Information
Blog 28
fans 0
comment 0
visits 25407
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JavaScript基本语法,解析,变量
,多思曩惜,
Original
697 people have browsed it

JavaScript

1. JS 历史

  • 1995 年 2 月, Netscape(网景), LiveScript—> JavaScript
  • MS 公司在 IE3, JScript
  • 1997, ECMA(欧洲计算机制造商会)制定了一个前端脚本标准,ECMA-262, ECMAScript
  • 1998, ISO 采用了 ECMA-262, ISO-16262
  • 从此, 所有浏览器厂家以 ECMAScript 为标准开发前端脚本语言
  • 标准 ECMAScript, JavaScript 只是 ECMAScript 标准一个实现
  • ECMASCript 2011,: ES5 / ES5.1 (我们学习是这个版本)
  • ECMASCript 2015: ES6, ESCAScript 2015
  • ECMAScript 2016 / 2018 / 2020…

2. JS 组成

  • JS 语言核心只有三部分

    • ECMAScript: 核心语法
    • DOM: Document Object Model 文档(html/xml)对象模型
    • BOM: Browser OBject Model 浏览器窗口对象模型
  • 定时器: Timeout(), 宿主环境提供的 API

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

    • 浏览器: chrome / firefox / Edge / …
    • 命令行:
    • 服务器: Node.js

3. JS的注释

  • \ 单行注释
  • <!— 内容 —!> 多行注释

4. JS在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. <script>
  8. window.document.write("<h1>这是javascript</h1>")
  9. </script>
  10. </head>
  11. <body>
  12. <script src="demo2.js">
  13. // 如果script标签中出现src属性,将调用一个外部js脚本,并忽略内部代码
  14. window.document.write("<h1>这是javascript</h1>") //并没在网页上解析出来
  15. </script>
  16. </body>
  17. </html>

-

5.JS在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. <script>
  8. document.querySelector("h1").style.color = "yellow";
  9. </script>
  10. </head>
  11. <body>
  12. <h1>这是在解析前</h1>
  13. <h2>这是在解析后</h2>
  14. <script>
  15. document.querySelector("h2").style.color = "red";
  16. </script>
  17. </body>
  18. </html>

-

6.0 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>Document</title>
  7. <script>
  8. // php没有变量声明的
  9. // 前面没有关键字 $name = "学生";
  10. var username = "admin";
  11. var userName = "edu";
  12. console.log(username);
  13. console.log(userName);
  14. function a(){
  15. console.log("Hello a");
  16. }
  17. function A(){
  18. console.log("Hello A");
  19. }
  20. a();
  21. A();
  22. </script>
  23. </head>
  24. <body>
  25. </body>
  26. </html>
  • 注意:js中变量区分大小写,php中变量不区分大小写。
  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. <script>
  8. // 变量
  9. // 约定大于配置
  10. var email="admin@qq.com";
  11. var SEX="male";
  12. // 变量更新
  13. email = "jack@qq.com";
  14. console.log(email);
  15. // ES5允许变量重复声明
  16. var email = "hello@qq.com";
  17. // 作用域是一个对象, 用来查找变量的工具
  18. // php中作用域有二: 函数作用域, 全局/外部使用域/函数外部
  19. // js与php的作用域是一样的,也有函数和全局
  20. // php与js都不存在块作用域
  21. var job = "ST";
  22. function test(){
  23. var username = "小明";
  24. console.log(username + "是"+ job);
  25. }
  26. test();
  27. // console.log(username+ "不是" + job);
  28. {
  29. // 块作用域
  30. var age = 40;
  31. }
  32. console.log(age);
  33. {}
  34. {
  35. // ES6支持块作用域
  36. var sex = 40;
  37. }
  38. console.log(sex);
  39. if(true){
  40. var hello = "php.cn";
  41. console.log("Hello.."+hello);
  42. }
  43. console.log(hello);
  44. </script>
  45. </head>
  46. <body>
  47. </body>
  48. </html>

7. 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>Document</title>
  7. <script>
  8. // 变量提升:变量未定义就可以使用
  9. console.log(email);
  10. var email = "admin@qq.com"
  11. // 相当于下面注释
  12. // var age;
  13. // console.log(age);
  14. // age = 40;
  15. // console.log(age);
  16. </script>
  17. </head>
  18. <body>
  19. </body>
  20. </html>

总结

  • JS是如何在html中解析,解析的顺序是怎样。
  • JS中的变量区分大小写,而PHP中变量是不区分大小写的。
Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:其实, 网页中的内容就是由一个程序控制的, 总之, 到处都是程序就对了, 所以js就是嵌入到浏览器执行的一段代码而已
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!