00-JavaScript初识

什么是JavaScript

• 简称js，是前端开发的一门脚本语言(解释型语言)
  • 解释型语言：程序执行之前，不需要对代码进行编译浏览器中有个JavaScript解析器模块，在运行时边解析边执行的语言
  • 浏览器工作原理
    1. User Interface：用户界面，除了显示内容以外的都是用户界面(地址栏,前进后退按钮,书签按钮等)
    2. Browser engine：浏览器引擎，桥梁，UI界面和渲染引擎的交互查询等等
    3. Rendering engine：渲染引擎，显示请求到的数据，解析html和css，显示解析的内容到屏幕
    4. Networking：网络模块，用来处理网络请求相关数据
    5. JavaScript Interpreter：JavaScript解析器，解析和执行JavaScript代码
    6. UI Backend：UI后端，处理一些复选框、弹窗这一类复杂的UI界面
    7. Data Persistence：存储器，专门用于存储cookies，localstorage等网页上的一些数据
  • 编译型语言：程序执行前，需要一个专门的编译过程，把程序编译成机器语言的文件，比如exe文件

JavaScript作用

• HTML提供网页上显示的内容结构

• CSS美化网页样式

• JavaScript控制网页行为，让网页和用户可以交互行为

• Java和JavaScript没有任何关系

JavaScript组成

• ECMAScript：JavaScript的语法标准

  • ECMA是欧洲计算机制造商协会缩写
  • ECMAScript是制定的脚本语言的标准，规定了一种脚本语言实现应该包含的基本内容
  • JavaScript是脚本语言的一种，所有JavaScript也必须遵守ECMAscript标准中规定的基本内容

• DOM：JavaScript操作网页上的元素的API

• BOM：JavaScript操作浏览器的部分功能的API

JavaScript书写格式

• 行内样式：写在标签内部
• 内嵌样式(内联样式)：写在一对head标签中

• 外链样式：写在一个单独的.js文件中，再导入进来

• 注意点
  1. 不推荐直接将JavaScript代码书写到标签内部
  2. 默认情况下浏览器会从上至下的解析网页，所以如果将JavaScript写到一对head标签中，并且需要通过JavaScript代码操作界面上的元素，那么就不能直接书写JavaScript代码，否则无效
  3. 如果想将JavaScript写到一对head标签中，并且需要在JavaScript代码中操作界面上的元素，那么必须加上window.onload = function(){操作界面元素的JavaScript}
  4. window.onload：等到界面上所有的内容都加载完毕，再执行{}中的代码
  5. 由于默认情况下浏览器会从上至下的解析网页，所以想通过JavaScript操作界面上的元素，只需要等到元素被加载解析之后操作就可以了，所以还可以将JavaScript代码写到body结束标签的前面
  6. 如果通过外链式导入.js文件，并且需要在.js文件中操作界面上的元素，那么如果是在head标签中导入，必须在.js文件中加上window.onload 如果是在body结束标签前导入，就不用添加
  7. 如果需要在一对script标签中编写JavaScript代码，那么就不能同时通过script标签导入其他的.js文件，否则书写的JavaScript代码无效

JavaScript常见输出方式

通过弹窗的形式来输出

1. alert(需要输出的内容); 一个按钮
2. confirm(需要输出的内容); 两个按钮
3. prompt(需要输出的内容); 两个按钮+一个框

• 注意点

• 如果需要输出的内容不是数字,那么久必须通过单引号或者双引号包裹内容

• 在JavaScript中是严格区分大小写的

• 在编写JavaScript代码的时候,每一句代码后面都需要添加一个分号(有时候不写分号也能运行,不是因为不需要分号,而是浏览器自动帮我们添加了分号,浏览器自动添加会消耗一定的性能,并且有可能会添加错误)

通过网页内容区域的形式来输出

• document.write(需要输出的内容);

通过开发者工具控制台的形式来输出

• console.log(需要输出的内容); 普通输出
• console.warn(需要输出的内容); 警告输出
• console.error(需要输出的内容); 错误输出