js学习第一周

常见浏览器

• webkit内核（v8引擎）
  • 谷歌浏览器
  • safari
  • opera>V14
  • 国产浏览器
  • 手机浏览器
  • ...
• Gecko
  • 火狐Firefox
• Presto
  • opera<V14
• trident
  • IE
  • ie edge开始使用双核（包含Chrome迷你内核）
• 什么是浏览器内核？
  • 浏览器内核准确翻译是渲染引擎，对网页的语法进行解释，并且进行渲染网页，将网页的代码转化为看得到的页面

谷歌控制台

• 谷歌浏览器控制台
  • elements 查看结构样式可以修改这些内容
  • Console 查看输出结果和报错信息，是JS调试的利器
  • Sources：查看项目源码
  • Network:查看当前网站所有资源的请求信息（包括和服务器传输的HTTP报文信息）加载时间（根据加载时间进行项目优化）
  • Application:查看当前网站的数据储存和资源文件

JS做客户端语言

按照相关的JS语法，去操作页面中的元素，有时还要操作浏览器里面的一些功能

• ECMAScript js的语法规范（变量、数据类型。、操作语句）

• DOM（document object model）文档对象模型 提供一些js的属性和方法，用来操作页面中的DOM元素
• BOM（browser object model） 浏览器对象模型 提供一些js的属性和方法用来操作浏览器的

js中的变量 variable

变量：可变的量，在编程语言当中，变量其实就是一个名字用来存储和代表不同值的东西

//es3
var a=12;
console.log(a)=>输出的是a代表的值12
//es6
let b=100;
b=200;

const c=1000; 特殊变量常量 const创建的变量储存的指标谁能被修改
//创建函数也相当于在创建变量
function fn（）{}
//创建类也香港与创建变量
class A{}
//es6的模块导入也可以创建变量
import B from ‘./B.js’
//Symbol创建唯一值
let a=Symbol(100)

js中的命名规范

• 严格区分大小写

let Test=100;
console.log(text)//=>无法输出，因为第一个字母小写了

• 使用数字、字母、下划线、$，数字不能作为开头

let $box; //-->一般用jq获取的以$开头
let _box;//->一般公共变量都是下划线开头
let 1box;//->不可以 但是可以写box1
let 汉字;//->可以是可以但是不推荐使用汉字

• 使用驼峰命名法 首字母小写，其余每一个有意义的单词的首字母都要大写（命名尽可能语义化明显，使用英文单词）

let studentInfomation;
let studentInfo;
//常用的缩写add/insert/create/new(新增)/update（修改）/delete/del、remove/rm(删除)/sel/select/query/get(查询)/info（信息）

• 不能使用关键字和保留字

当下又特殊含义的是关键字，未来可能会成为关键字的叫保留字

关键字和保留字

• 关键字

break	else	new	var	case
finally	return	void	catch	for
switch	while	continue	function	this
with	default	if	throw	delete
in	try	do	instranceof	typeof

• 保留字
  | abstract | enum | int | short | boolean |
  | export |interface | static | byte | extends |
  | long | super | char | final | native |
  | synchronized | class | float | package | throws |
  | const | goto | private | transient | debugger |
  |implements| protected | volatile | double | import |
  |public| | | | |

js中常用的数据类型

• 基本数据类型
  • 数字number 常规数字和NaN
  • 字符串string 所有单引号、双引号、反引号包起来的都是字符串
  • 布尔Boolean true/false
  • 空对象指针null
  • 未定义undefinedd（js独有其他语言都没有）
• 引用数据类型
  • 对象数据类型object
    • {}普通对象
    • []数组对象
    • /^$/正则对象
    • Math数学函数对象
    • 日期对象
  • 函数数据类型function

number数字类型

包含：常规数字、NaN

1. NaN

not a number:不是一个数 但他隶属于数字类类型

2. NaN和任何值（包括自己）都不相等：NaN=！NaN，所以我们不能用相等的方式判断是否为有效数字
3. isNaN检测是否为数字类型

检测一个值是否为非有效数字,如果不是有效数字返回true，反之是有效数字返回false 语法：isNaN（[val]） 再用isNaN进行检测的时候，首先会验证检测的值是否为数字类型，如果发现这个值不是数字类型的，首先会把这个值转化为数字类型，然后再来验证是够为有效数字

把其他类型值转化为数字类型

• Number([val])

把字符串转化为数字，只要字符串中包含任意一个非有效数字字符（第一个点除外）结果都是NaN，空字符串会变成数字0

console.log(Number('12.5'))//12.5
console.log(Number('12.5px'))//NaN
console.log(Number(''))//0
console.log(Number(' '))//0
//布尔值转化为数字
console.log(Number(true))//1
console.log(Number(false))//0
//null--0 undefined--NaN
console.log(Number(null))//0
console.log(Number(undefined))//NaN
//把引用数据类型转化为数字，是先把他们基于toString方法转化为字符串，然后再转化为数字
//{}/{xxx:'xxx'}.toString---'[object object]'---NaN
console.log(Number({name:'xxx'}))//NaN
console.log(Number({}))//NaN
//[].toString---''/[12].toString---'12'/[12,23].toString---'12,23'
console.log(Number([]))//0
console.log(Number([12]))//12
console.log(Number([12,23]))//NaN
console.log(Number(['10']))//10

• parseInt(Int整数)
  parseInt([val],[进制])
• parseFloat(float小数)
  parseFloat([val],[进制])
  两者都是转化数字的方法，对于字符串来说它是从左到右一次查找有效数字字符，直到遇到非有效数字字符，停止查找（不管后面是否还有数字，都不在找了）
• ==
  进行比较的时候，可能要出现把其他类型转化为数字
• Number处理类型转化的时候走的是引擎的底层机制 parseInt和parseFloat走的是另外的机制（不是字符串类型的转化为字符串）

string字符串类型

所有用单引号、双引号、反引号包含起来的都是字符串

1. 把其他类型转化为字符串
2. [val].toString()

null和undefined是禁止直接使用toString方法的，但是转化为字符串就是‘null’/'undefined'
其他情况下别的类型转化为字符串就是在外面包裹一层引号
对象的类型除外{name:'xxx'}.toString()---'[object object]'原因是objectprototype.toString方法不是转换为字符串的，而是用来检测数据类型的

3. 字符串拼接
   四则运算法则中除加法之外，其余都是数学计算 只有加法可能存在字符串拼接（一旦遇到字符串，则不是数学运算，而是字符串拼接）

//加号遇到字符串就是拼接
//10+0+1+0+NaN+‘孟洋’+0+0+10+0    
let a=10+null+true+[]+undefined+'孟洋'+null+[]+10+false
a等于什么？
/**
 * 10+null--10+0--10
 * 10+true--10+1--11
 * 11+[]--空数组转化为对象先变成空字符串，遇到字符串就变成字符串拼接了就不是数字运算了--11+''----‘11’
 * ‘11+undefined’----‘11undefined’
 * ‘11undefined孟洋’---
 * ‘11undefined孟洋’+null-----'11undefined孟洋null'
 * '11undefined孟洋null'+[]--'11undefined孟洋null'+'--'11undefined孟洋null'
 * '11undefined孟洋null'+10---'11undefined孟洋null10'
 * '11undefined孟洋null10'+false----'11undefined孟洋null10false'
 */

Boolean布尔类型

只有两个值 true/false

1. 把其他类型值转化为布尔类型

只有0、NaN、null、undefined、空字符串五个之转化完成false 其余的都转化为true（没有任何的特殊情况）

• Boolean（[val]）
• !/!!
  取反（先转换为布尔，然后取反）
• 条件判断

if(1){
	console.log('哈哈')
}

null/undefined

null和undefined都代表的是没有
null：意料之中（一般都是开始不知道值，我们手动先设置为null，后期再给予赋值操作）

let num=null；//let num=0；一般最好用null作为初始的空值，因为零不是空值，它在占内存中有自己的存在空间（占了个位置）

undefined:意料之外（不是我能决定的）

let num;//创建一个变量没有赋值 默认值是undefined

object对象数据类型-普通对象

{[key]:[value],....}任何一个对象都是由零到多组键值对（属性名：属性值）组成的（并且属性名不能重复，重复的话后面的值覆盖前面的 后面的属性名消失）
获取属性名对应的属性值 对象.属性名/对象['属性名'] 属性名是数字或者字符串格式的
如果当前属性名不存在，默认的属性值是undefined 属性名是数字 则不能使用点的方式获取属性值
删除属性 真删除和假删除 真删除是属性彻底干掉 属性还在 值为空 delete person[1];属性彻底删除 person.weight=null 属性还在 值为空

Array数组是特殊的对象数据类型

1. 我们中括号[]中设置的是属性值，他的属性名是默认生成的数字，从0开始递增，而且这个数字代表每一项的位置，我们把其称之为‘索引’---从0开始 连续递增 代表每一项位置的数字属性名
2. 天生默认一个属性名length，储存数组的长度

let a=12;
let b=a;
b=13;
console.log(a);//12
let n={
	name:'mengyang'
}
let m=n;
m.name='yuanyuan'
clonsole.log(n.name);//‘yuanyuan’

数据类型的区别(堆栈底层机制)

浏览器想要执行js代码：
1.从电脑内存中分配出来一块内存，用来执行代码（栈内存--Stack）
2.分配一个主线程用来自上而下执行js代码---分配一个栈内存
3.栈内存中又分为一个变量储存空间 一个值储存空间
4.主线程中自上而下开始进栈执行---let a=12;共经历两步

1创建变量a，放到当前栈内存变量储存区域中
2创建一个值12 把它储存到当前栈内存值区域中（简单的基本类型值是这样储存的，复杂的引用类型值不是这样做的）
3 =为赋值，其实赋值是让变量和值相互关联的过程

5.执行出栈执行完出栈，下一行代码才能进栈执行

6.复杂值（引用类型）的储存，又分为三个步骤：

1.在内存中分配出一快新的内存，用来储存引用类型值（堆内存--heap）--》内存有一个16进制地址
2.把对象中的键值对依次存储到堆内存当中
3.把堆内存地址和变量关联起来

7.基本类型：按值操作（直接操作的是值）所以也叫作值类型。引用类型：操作的是堆内存的地址（按引用地址操作的）所以也叫作引用类型

练习题

let n=[10,20]
let m=n
let x=m
m[0]=100
x=[30,40]
x[0]=200
m=x
m[1]=300
n[2]=400
console.log(n,m,x) //[100, 20, 400] (2) [200, 300] (2) [200, 300]
~~~
~~~
let a={
	n:1
}
let b=a
	a.x=a={
		n:2
	}
console.log(a.x)
console.log(b)



//浏览器常用的输出方式除了console.log还有什么？
console.log()输出信息
console.dir()输出一个对象的详细信息
window.alert()警告框
window.prompt()提示框 根据提示让用户输入信息并返回
document.write()在页面中展示输出的内容
window.confirm()确认框 返回用户操作的布尔值
console.error()输出错误信息

//<script>标签放到页面头部和尾部的区别以及解决方法？


var a='abc'+123+456;//'abc123456'
var b='456'-'123';//456-123=333
var c=100+true+21.2+null+undefined+'Tencent'+[]+null+9+false;
console.log(a,b,c)
/**
 * 100+1--101
 * 101+21.2---122.2
 * 122.2+0---122.2
 * 122.2+undefined---122.2+NaN---NaN
 * NaN+‘Tencent’----'NaNTencent'+''+'null'+'9'+'false'
 * 'NaNTencentnull9false'
 */

js中的数据类型检测

• typeof[val] （是运算符不是方法就像是1+1中的加号）用来检测数据类型的运算符
  • 基于typeof检测出来的结果
  • 首先是一个字符串
  • 字符串中包含对应的类型
  • 具有局限性 typeof null-->'object' 但是null并不是对象
  • typeof undefined --->'undefined'
  • typeof []/{}/正则/^$/ -->全都是'object' 不能准确的分类
  • typeof function(){}--->'function'
  • 基于typeof无法细分出当前值是普通对象还是数组对象，因为只要是对象数据类型，返回的结果都是'object'
• instanceof：用来检测当前实力是否隶属于某个类
• constructor:基于构造函数检测属于类型（也是基于类的方式）
• Object.prototype.toString.call():检测数据类型最好的方法

js中的操作语句：判断、循环

• 判断

  • if/else

    if(条件){
    	条件成立执行
    }else if(条件2){
    	条件2成立执行
    }else{
    	以上条件都不成立
    }
    
    

  • 三元运算符

    三元运算符是简单的if/else的特殊处理方式
    条件？条件成立处理的事情：不成立处理的事情
    1. 如果处理的事情比较多，我们用括号包起来，每一件事情用逗号分隔
    2. 如果不需要处理事情，可以使用null/undefined占位
    
    

  • switch case

    1. 每一种case情况结束后，最好都加上break
    2. 不加break，当前条件成立执行完成后，后面条件不论是否成立都要执行，知道遇到break为止（不加break可以实现变量在某些值的情况下做相同的事情）
    3. default等价于else，以上都不成立干的事情
    4. 每一种case情况的比较用的都是=== ‘绝对相等’

• 循环

  重复做某些事情就是循环

  • for循环

    1. 创建循环初始值
    2. 设置（验证）循环执行的条件
    3. 条件成立执行循环体中的内容
    4. 当前循环结束执行步长累计操作
    for(var i=0;i<5;i++){
    	console.log(i)
    }
    //循环体中的两个关键词
    5. continue：结束当前这轮循环（continue后面的代码不执行），继续执行下一轮循环
    6. break：强制结束整个循环（break后面代码也不在执行），而且整个循环啥也不干直接结束
    
    

  • for in循环

  • for of循环

  • while循环

  • do while循环

元素对象

1. 基于.dir可以看到一个对象的详细信息
2. id:操作元素的id值
3. className:操作元素的class样式类的值
4. innerHTML:操作的元素的内容（可以识别标签）
5. innerText：和innerHTML的区别是不能识别标签
6. tagName:获取元素的标签名（一般大写）
7. style：操作元素的行内样式 属性值是一个新的对象 （CSSStyleDeclaretion）

函数function

函数就是一个方法或者一个功能体，函数就是把实现某个功能的代码放到一起进行封装，以后想要操作实现这个功能，只需要把函数执行即可---->>封装：减少页面中的冗余代码，提高代码重复使用率（低耦合高内聚）
洗衣机就是一个函数，生产洗衣机就是封装一个函数（把视线某些工呢过的代码封装进来），生产的时候，不知道用户洗衣服的时候放什么水、衣服、洗衣液，我们需要提供出入口（提供的入口在函数中叫做形参，执行的时候放的具体东西在函数中叫做实参），洗完衣服需要能拿出来，洗衣机提供一个出口（在函数中叫做返回值：把函数处理后的结果能够返回给外面用）

• 创建函数
  • 形参
    • 创建函数的时候我们设置了形参变量，但如果执行的时候病没有给传递对应的实参值，那么形参变量默认的只是undefined
  • 返回值
    • 为什么要有返回值？因为函数里面的东西外部用不了，想用的话只有返回
    • return 返回的一定是值 不是变量
    • 函数没有return返回值 默认是undefined
    • 使用return不一定是需要返回值 也有可能只是不想让函数继续执行下去
• 执行函数
  • 实参
• arguments
• 函数底层运行机制
• 匿名函数
  • 匿名函数值函数表达式：把一个匿名函数本身作为值赋值给其他东西，这种函数一般不是手动触发执行，而是靠其他程序触发执行（例如：触发某个事件的时候把她执行）
  • 匿名函数之自执行函数：创建完一个匿名函数 紧接着把当前函数加小括号执行
  • 定时器

==与===

• ==：相等：数据类型不同 先转换为一样的在比较
• ===：绝对相等，必须类型和值都想用才为true
• let i='10'
• i=i+1-->'101'
• i+=1--->'101'
• i++----11
• i++和已上两种不完全一样 他是纯粹的