一、浏览器分类
1、以谷歌浏览器webkit内核为主（V8引擎）
- 谷歌浏览器：Chrome
- 欧朋浏览器：Opera
- 国产浏览器: 360普通浏览器，360极速浏览器，猎豹浏览器，搜狗浏览器，QQ浏览器，UC浏览器...
- 苹果浏览器: Safari
2.Gecko内核
- 火狐浏览器：Firefox
3.Trident内核
- IE浏览器：IE6
8,IE9IE11,IE Edge
二、开发者工具
打开开发者工具：F12/FN+F12 (再或者浏览器页面->右键->检查)
-
Elements：包含了当前也页面中所有的结构和样式，基于它可以快速 查看和调整页面的样式和结构等。
-
Console：控制台，在JS中，我们可以向控制台输出一些内容，来进行项目的调试，如果项目程序出现问题，也可以在控制台查看报错信息，也可以在控制台编写代码，做一些测试...
-
Network：包含了当前页面所有向服务器发送的http请求信息，一般用于前后端数据交互中的bug调试以及页面中的性能优化。
-
Sources：包含了当前项目的源代码。
-
Application：可以看到本地存储的信息(Cookies/LocalStorage/SessionStorage...)以及当前网站中所有加载的图片等信息。 ...
-
开启手机模拟器 Toggle Device Toolbar
三、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的操作。
五、JS中的变量 variable
变量：可变的量(其存储的值是可变的) 设置一个变量(起个名字)，让其代表和指向某一个具体的值。
JS中的注释的快捷键：
- 单行注释：ctrl + /
- 批量注释(块注释)：shift + alt +A
1、JS中创建变量的几种方式
-
ES3：var
-
ES6：let、const
-
function：创建函数
-
class：创建一个类
-
import/require 基于ES6Moudle或者Common.js 规范导入模块
//1.基于var创建一个叫做n的变量，让其指向具体的值10
var n=10;
//基于var创建一个叫做m的变量，但此时没有指向任何的值,默认指向undefined
var m;
//在控制台输出n和m所代表的值
console.log(n,m); //->10 undefined
//2.基于ES6中的let创建一个变量，让其指向100，但是后期让其重新指向了200
let a=100;
a=200;
console.log(a); //->200
//3.基于ES6中的const创建一个变量，让其指向1000，此后b就不能再指向其他的值了，
//一旦修改指向，则会报错，所以基于const定义的变量一般也被称为常量。
const b=1000;
b=2000;
console.log(b);//会出现错误：->Uncaught TypeError:Assignment to constant variable
//4.创建一个函数，也可以理解为创建一个变量func,让其指向这个函数
function func(){
}
console.log(func);
//5.创建一个类，也可以理解为创建一个变量Parent，让其指向这个类
class Parent{
}
console.log(Parent);
//6.基于模块规范来导入具体的某个模块,定义一个叫做axios的变量，用来指向导入的这个模块
import axios from './axios';
let axios = require('./axios');
2.JS中变量命名的规范
-
严格区分大小写 let Test = 100; console.log(test);//出现错误：Uncaught ReferenceError: test is not defined
//编写代码时一定要区分大小写问题
let Test = 100;
console.log(test);//出现错误：Uncaught ReferenceError: test is not defined
- 使用驼峰命名法： 由有意义英文组成一个名字，第一个单词首字母小写，其余每一个有意义的单词首字母大写
//学生信息
let studentInformation = {
name:'张菲'
};
let studentInfo = {};
- 项目中常见的有特殊含义的端词组
- 新增/插入/创建：add / insert / create
- 删除/移除：del / delete / remove
- 修改：update
- 查询/获取：select / query / get
- 信息：info
- ...
- 命名规范：使用“$、_、英文字母、数字”命名。
- 数字不能作为开头。
//基于$开头，一般代表使用JQ或者其他使用$的类库获取的内容
let $box = $('.box');
//基于_开头，一般代表是全局或者公共的变量
let _box = {};
//基于数字区分相似名称的变量
let box1 = 10;
let box2 = 20;
//数字不能作为开头
//let 2box = 10;
//想要分隔单词，可以使用_或者驼峰，但是不能是-
//let box-list;//出现错误
let box_list;
let boxList;
//虽然不会报错，但是不推荐使用
let 盒子 = 100;
console.log(盒子);
- 不能使用关键字和保留字
-
关键字：在JS中有特殊含义的，
-
保留字：未来可能会成为关键字的。
-
//不能这样命名
var var = 10
六、JS中常用的数据类型
1、基本数据类型(值类型 / 原始值)
- 数字：number
- 字符串：string
- 布尔：boolean
- 空对象指针 null
- 未定义 undefined
- ES6新增的唯一值类型 symbol
<!-- 基本数据类型 -->
//number数字类型
let n = 10;
n = 10.5;
n = -10;
n = 0;
n = NaN; //NaN: not a numebr,非有效数字
n = Infinity; //Infinity：正无穷大，-Infinity：负无穷大
//string字符串：基于单引号、双引号、反引号(TAB上面的撇)包起来的都是字符串
let str = '';
str = '19';
str = "大家好";
str = `加油`;
str = '[object]';
//boolean布尔:true / false
let boo = true;
boo = false;
//空：null
let nu = null;
nu = undefined;
let un; //->默认值就是undefined
//Symbol:每一个Symbol()都是一个唯一值
let x = Symbol('上课');
let y = Symbol('学校');
console.log(x == y); //->false
2、引用数据类型
- 对象数据类型 object
- 普通对象 {}
- 数组对象 []
- 正则对象 /^$/
- 日期对象 new Date
- 数学函数对象 Math
- ...
- 函数数据类型 function
// Object普通对象: 大括号包起来，里面有零到多组属性名和属性值(键值对)，这些属性名和属性值可以描述当前对象的特征
// (键:值,多组键值对用逗号分隔).
let obj = {
name:'蓝胖子',
age: 10,
teachers: 30
};
//Array数组对象: 中括号包起来，逗号分隔数组中的每一项的值(每一项的值可以是任意类型)
let arr = [10,'字符串',null, true];
//RegExp正则对象: 两个斜杠包起来一大堆你看不懂的符号就是正则
let reg = /$[+-]?(\d|([0-9\d+]))(\.\d+)?^/;
//function函数
function func(x,y){
let total = x + y;
return total;
};
//ES6中的Arrow Function 箭头函数
let fn = () =>{
};
