-
谷歌
- webkit 国内常用 谷歌 qq浏览器
- gecko 火狐
- presto Open
- trident IE
控制台结构
- Elememts: 查看结构样式，可以在线修改调试
- Console: 查看输出结果和报错信息，是js调试利器
- Sources: 查看项目源码，目录结构。
- Network: 查看当前网站所有资源的请求信息（包括和服务器的HTTP报文信息）、加载时间等（项目优化）
- Application: 查看当前网络数据存储和资源文件（盗图偷数据~~）
JS做客户端语言（node.js）
按照相关的JS 语发，去操作页面元素，有时还有操作浏览器里面的一些功能
- ECMAScript3/5/6…: JS的语法规范（变量、数据类型、操作语句等）
- DOM（document object model: 文档对象模型，提供一些JS的属性和方法，用来操作DOM 元素
- BOM(browser object model): 浏览器对象模型，提供一些JS 属性和方法，用来操作浏览器的（比如浏览器的类型，浏览器窗口大小）
JS 中的变量（variable）
变量：可变的量，用来存相应的值,可以改变这个值
//ES3
var a=3；
a=13;
console.log(a);//13
//ES6
let b=3; //Es6 新增
b=13;
console.log(b)//13
const c=100;// ES6新增
function fn(){}// 创建函数也相当于创建变量
class A{}// 创建类也相当于创建变量
//ES6的模块导入也可以创建变量
import B from './B.js';
//Symbol 创建唯一值
let n=Symbol(100)
JS 命名规范
- 严格区分大小写
- 以字母、数字、下划线、$ ，数字不开头，
let Test=100;
let $box //=> 一般JQ 获取的$开头
let _box //=> 一般公共变量 _ 开头
- 使用驼峰命名法： 首字母小写，其余单词首字母 大写（命名语义化，使用英文）
let studentInformation;
let syudentInfo; //部分简写
//常用的缩写：add/insert/create/new(增加)、update(更新修改)、delete/del/remove/rm(删除)、sel/select/query/get(查询获取) info(信息)
- 不能使用 关键字
var let const function import ...
JS 常用数据类型 （data type）
- 基本数据类型
- 数字 number
常规数字和NaN - 字符串string
单引号 、双引号、反引号（撇）所包含的 - 布尔 boolean
true false - 空对象指针null
- 未定义undefined
- 数字 number
- 引用数据类型
- 对象数据类型 object
- { } 普通数组
- [ ] 数组对象
- / ^ [ + - ] ? ( \ d | ( [1-9])\d )?$/ 正则对象
- Math数学函数对象
- 日期对象
- 类数值
- …
- 函数数据类型function
- 对象数据类型 object
JS数据转换
- Number( [ var ] )
- parseInt/parseFloat( [ var ]，[j进制]) // 第一个非有效数字结束 空数组 要先转空字符 [ ] => ’ ’
转布尔类型
只有 0、NaN、’ '、null 、undefined，五个值转false 其他 true
- Boolean( [ var ]):
- !: <=> Boolean
null / undefined
null /undefined 都代表没有
- null : 意料之中（空值 不占内存 。一般 都是开始并不知道值或数据类型）
- undefined : 意料之外 （不是我决定的）
let num; //=> 默认没有赋值 默认值 undfined
obect 对象数据类型-普通对象
{ [ key ]: [ value ], … } 任何一个对象都是由零到多组键值对 key : value 属性名和属性都是字符串
let person ={
name: ' five',
age '22',
height: '178cm',
weight: '64kg',
1:100
};
//获取方式
//=> 对象.属性名
//=> 对象[ 属性名 ]
console.log( person.name)；// five
console.log( person[ ' age ' ]);// 22
console.log(person.sex)；//undefined
console.log(person[1]);// 100
console.log(person.1)// 报错 语法错误 属性名是数字 不能以
//设置属性名属性
person.GF= ‘ LHL’;
console.log('GF');
// 删除属性
//=> 真删除: 把属性彻底干掉
//=> 假删除： 属性还在，值为空
数组是特殊的对象数据类型
/*
1.属性值默认 属性名 默认生成数字，从零开始 ，连续递增，代表每一项位置的数值的位置 即索引
*/
let ary=[12,'哈哈哈'，true,13];
console.log(ary[0]); //12
console.log(ary[ary.length-1]); //13
浏览器 想要执行JS代码
1. 从电脑内存分配出一块内存，用来执行代码（栈内存 => Stack (变量存储空间 值储存空间) ）
2. 分配一个主线程用来 自上而下执行
JS 数据类型检测
- typeof [ var ] : 用来检测数据类型的运算符 无法细分具体对象数据具体类型。
- instanceof : 用来检测当前实例是否率属于某个类
- constructor : 基于构造函数的检测数据类型（也基于类的方式）
- Object.prototype.toString.call(): 检测数据类型最好的办法
JS 操作语句：判断、循环
函数 function
函数就是一个方法或则功能的体，函数就是把实现某个功能的代码放到一起进行分装，以后想要操作实现这个功能，只需要执行即可 => ‘封装’：减少页面中冗余代码，提高代码重复使用率（低耦合高内聚）
- 创建函数
- 形参
- 返回值
- 执行函数
- 实参
- arguments
- 函数底层运行机制
- …
创建函数
//ES5
function [ 函数名 ]( [ 形参1 ], ... ){
}//形参默认 undfined
//ES6
let res=(a,b)=>a+b;
//匿名函数
//匿名函数：把一个函数本身作为值赋值给其他东西，一般靠驱动触发执行（靠某个事件触发）
document.body.onclick =function(){}
setTimeout(function(){}.1000)
//自执行函数
(function(n){
//n=>100
})(100);
windows.onload =function(){
// 事件： 当页面中结构和内容都加载完全才会执行
}
//JQuery
$(document).ready(function(){ })
原型链 (MDN)
__proto__ (myobj)
...
__proto__ (myObject)
...
__proto__ （Object）
....
//原型链 最终基于对象原型Object 一层一层形成链
obj.prototype 使用原型链上的东西
