0基础学习前段历程3 JS基础知识

Js基础知识

浏览器分类

1.以谷歌浏览器webkit内核为主（V8引擎）

• 谷歌浏览器 Chrome

• 苹果浏览器 Safari

• 国产浏览器

  • 360普通浏览器

  • 360极速浏览器

  • 猎豹浏览器

  • 搜狗浏览器

  • QQ浏览器

  • UC浏览器

  • …
    欧朋浏览器 Opera （v14版本时候）

2.Gecko内核

• 火狐浏览器 Firefox

3.Trident内核

• IE浏览器

  • IE6~8

  • IE9~IE11

  • IE Edge

开发者工具

打开开发者工具：F12 / FN+F12 （再或者浏览器页面 -> 右键 ->检查）

• Elements 包含了当前页面中所有的结构和样式，基于它可以快速查看和调整页面的样式和结构等

• Console 控制台，在JS中，我们可以向控制台输出一些内容，来进行项目的调试；如果项目程序出现问题，也可以在控制台查看报错信息；也可以在控制台编写代码，做一些测试…

• Network 包含了当前页面所有向服务器发送的HTTP请求信息，一般用于前后端数据交互中的BUG调试以及页面中的性能优化

• Sources 包含了当前项目的原代码

• Application 可以看到本地存储的信息(Cookie/LocalStorage/SessionStorage…)以及当前网站中所有加载的图片等信息（抓取一些图片下来）

• …

• 开启手机模拟器 Toggle Device Toolbar

职业习惯：打开浏览器页面，第一步就是F12打开控制台

===============
Web页面由：

• HTML 搭建页面结构

• CSS 编写页面样式

• JS 完成人机交互效果

  • 基本的人机交互效果

  • 页面中具体效果的实现

  • 页面中动态数据的获取和绑定

  • 可能会操作浏览器的一些功能

  • …

=> JS是用来操作DOM和操作浏览器的

JS组成的三部分

• ECMAScript（ES3 / ES6~9） 定义了JS的语法规范：定义了语言本身的变量、数据值、操作语句、内存管理…等内容

• DOM（document object model）文档对象模型：提供对应的属性和方法，可以让JS操作页面中的DOM元素

• BOM（browser object model）浏览器对象模型：提供操作浏览器的属性和方法

注意：当代项目开发，一般都是基于Vue/React完成的，基于这两个框架，我们已经不去操作DOM了，我们操作数据，由框架本身帮助我们完成DOM的操作