JS相关知识点总结

知识点：

• 数据类型：数值、字符串、布尔值、数组、函数常见的属性和方法
  语句和运算符： 条件、循环、异常处理语句，一元、二元、三元运算符
  DOM：获取元素、修改元素、事件
  BOM：window等各种对象，cookie
  ajax 正则表达式 闭包

定义
JavaScript 是世界上最流行的脚本语言。
JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
JavaScript 被设计为向 HTML 页面增加交互性。
js可以看作是网页版的函数，给网页增添一些额外的功能，vue.js其实也是函数，不过这个函数的形式跟Python不太一样，掌握其使用的方式和应用。

基础
HTML中的脚本必须位于
JavaScript语句 告诉浏览器做什么 分行按序执行 句尾加分号（可选）区分大小写 忽略空格
JS是脚本语言逐行执行，而对传统编程来说，会在执行前编译所有代码
注释 // / / 一条语句中可声明多个变量
JS库：也称框架，对于处理某些特定的高级程序设计有帮助
使用
写入HTML输出 doucument.write(’’)
对事件作出反应 点击 onclick是众多事件的一种
改变HTML内容 x=document.getElementByID(‘demo’) x.innerHTML=‘hello JS’ 图像 样式 x.style.color=’#ff0000’
写到文档输出 document.write() 若在文档加载完成后执行此命令 会覆盖整个HTML页面
验证输入 if isNaN(x) {alert(‘Not Numeric’)}
正确获得客户端浏览器的名称：navigator.appName

原生js调用函数需要加括号，点击触发事件是onclick，注意跟vue的区别
运算符
比较运算符：
== 等于 可能会改变变量的类型
=== 值等于 不改变变量的类型 单纯作比较 用这个表示
逻辑运算符：&& || ！与或非
条件运算符：variablename=(condition)?value1:value2 condition为真赋值value1，否则value2
表达式和语句的区别?
表达式返回一个值，通常用在判断条件中，有时会伴随运算符出现
语句执行了一定的动作。程序是由一条条语句构成的。
条件表达式：
if…else
switch: switch(n)
{
case1:
codeblock
break;
case2:
…
default：
…
}

是HTML的标签，表示换行
循环表达式：
for(1;2;3)
for/in 循环遍历对象的属性
break：中断循环。不带标签只能用在循环或switch中，带了标签可用于任何代码块
continue：跳出此次循环，但不中断，继续下次循环；只能用在循环中
异常处理语句：
try 语句测试代码块的错误
catch 处理错误 try和catch是成对出现的
throw 创建自定义错误，创建或抛出异常(exception)
JavaScript 表单验证
JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证
例如：用户是否填写表单中的必填项目 输入数据是否合法
对象/数据类型
所有事物都是对象。内建对象：字符串 数值 数组 函数等，另外JS还允许自定义对象
对象是带有属性和方法的特殊数据类型
访问对象的属性和方法，后者带括号
创建对象有两种方式
1. 定义并创建对象的实例 person=new Object() person.name=’’
person=new Object(); .
person.firstname=“John”;
person.lastname=“Doe”;
person.age=50;
person.eyecolor=“blue”;
也可以直接使用对象字面量来创建对象
person={firstname:“John”,lastname:“Doe”,age:50,eyecolor:“blue”};
2 .使用函数来定义对象，然后创建新的对象实例
function person(name,age) {
this.name=name;
this.age=age;
}
var myFather=new person(‘David’,50)
// var x = person // 创建了一个变量来引用person这个函数，所做的任何操作都会影响它
person.sex = “boy”; console.log(person.sex) => undefined
person.prototype.sex = “boy”
JS里没有类的概念，JS基于prototype，不是基于类
对象构造器生成后，是无法直接添加新的属性和方法的，但是可以在原型链上添加/也可以通过修改对象（函数）构造器来增加新的属性和方法
所有的对象都是从prototype（原型对象）中继承属性和方法的。当寻找一个对象的属性时，会向上一层一层的寻找，直到找到该属性或到达原型链的顶端 Object.prototype?
基本数据类型：Number，String，Boolean，Undefined，Null
复杂数据类型：Object，Array，Function，RegExp，Date，Error
全局数据类型：Math
JS有 5 种原始类型（primitive type），即 Undefined、Null、Boolean、Number 和 String
Number对象
JS使用64位浮点格式来表示数字，没有整数、浮点数、长短整数之分
0 0x 八进制和十六进制，一般数值前缀不要加0，否则解释为八进制数
toString(n) 可以将数值转换为n进制的字符串，n可以是任何值，最好取 2 8 16
NaN - 非数字值 isNaN(parm) 不是数值时返回true，否则返回false
一些属性和方法 略 用时再补
String对象
字符串需要用引号引起来，引号里用到引号可以用 转义字符 \ 加引号
长度属性：str.length
添加样式：var txt=‘Good boy’ document.write(txt.toUpperCase())
查找字符串：str.indexOf(subStr) 找到了返回子字符串首次出现的位置，未找到返回-1
内容匹配：str.match(subStr) 若子字符串存在，返回该字符串，否则返回Null
内容替换：str.replace(原有的字符，新的字符) 返回的是替换后的字符串，str不变
属性： length prototype constructor
方法： concat indexOf search slice split substring toLowerCase
Date对象
Date():当前时间日期
getTime(): 1970.1.1至今毫秒数
setFullYear():设置指定的日期 var d=new Date() d.setFullYear(1992,10,3) document.write(d) 显示的是十一月
toUTCString():返回UTC时间 var d=new Date() document.write(d.toUTCString())
getDay()
显示钟表：函数
Array对象
定义数组：var myArray=new Array(1,2,3) 字面量：var x=[1,2,3]
增加属性和方法还是要去原型链上操作，增加和修改元素可以直接操作
常见方法：concat reverse sort slice splice pop push unshift…
数组常用的方法：push/ pop/ unshift/ shift/ sort/ reverse/ map/ filter/ reduce/ forEach
Boolean对象：布尔值为False的情况：0 ‘’ null undefined NaN false
函数
函数也是对象，由于其比较重要，分离出来单独作为一个章节
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块
调用函数时可以向其传值，这些值被称为参数
函数可以有返回值，遇到return时函数停止，但JS代码不会停止，从调用处继续执行
变量：局部变量：函数内声明的变量，只能在函数内部访问，函数运行完后就会被删除。全局变量：函数外声明的变量，在页面关闭后被删除。
数字和字符串相加，数字被转换成字符串 5 + ‘5’ = ‘55’
常见函数
=> 箭头函数 是一个匿名函数 x => xx 前面是参数 后面是返回值
array.forEach(function()) 调用数组的每个元素，并将元素传递给回调函数
array.filter(function()) 创建一个新的数组，数组中的元素为原数组中符合条件的所有元素
forEach some findIndex filter es6 里的新特性
includes( ) 判断字符串中是否包含指定的子字符串 如果包含返回true 否则返回 false
Math算数对象
Math.round() 对一个数四舍五入
Math.random() 返回0到1之间的随机数
Math.max() 返回给定的数中的较大数
Math.min() 返回给定的数中的较小数
Math.floor(Math.random()11) 生成0到10之间的数
RegExp：regular expression
使用
var str = “visit Runoob”;
var patt=/runoob/i
str.match(patt);
=> Runoob
方法
test() 检索字符串中是否含有指定值，返回bool值
exec() 检索字符串中是否含有指定值，返回检索的值 可以传递第二个参数
compile() 改变检索的内容，也可以添加或删除第二个参数
HTML DOM
事件
用户对页面所做的操作，如单击、双击、滑动 例如通过onclick()来实现
DOM允许JavaScript改变HTML元素的样式 document.getElementById().style.property=new style
HTML使JavaScript有能力对HTML事件做出反应
Date()显示当前的时间日期
onload和onunload事件会在用户进入或离开页面时被触发
onchange事件通常结合输入字段来使用，当输入完成时对输入字段做改变
onmouseover和onmouseout事件在鼠标移入移出时触发函数
onmousedown和onmouseup事件在鼠标点击和释放后触发
获取元素
通过HTML DOM，可以访问JavaScript HTML文档的所有元素
当网页被加载时，浏览器会创建页面的文档对象模型DOM
查找HTML元素：通过ID var x=document.getElementByID()
通过标签名 var y=x.getElementsByTagName()
通过类名 var x =document.getElementByClass()
DOM属性
childNodes：节点树
nodeType：1 文本节点 ；2 属性节点；3 文本节点
nodeValue：文本节点才有这个属性，上一级元素节点的第一个子节点就是文本节点
firstChild lastChild
element.getAttribute(‘href’) 简写为 element.href / src 同理
修改元素
a. 创建新的HTML元素：首先创建该元素（元素节点），然后向一个已存在的元素追加该元素

a. 删除已有HTML元素：必须先获得该元素的父元素

b.

window对象
消息框
警告框：确保用户可以得到某些信息 alert(‘文本’)
确认框：使用户可以验证或者接受某些信息 confirm(‘文本’)
提示框：提醒用户在进入页面前输入某个值 prompt(‘文本’,‘默认值’)
计时事件：
设定一定的时间后再执行代码，而不是调用函数后立即执行
setTimeout( )：未来的某时执行代码
clearTimeout( )：取消setTimeout( )
cookie
存储在本地的一个文本（变量），记录了用户的相关信息
失效形式：一种是关闭页面后失效，另一种是设置了失效时间，到期后失效
内容格式：键值对 cookie1=value1，这些信息以字符串的形式存在
cookie的相关操作 document.cookie
cookie有大小限制，每个cookie不超过4kb
由于cookie存储在本地，可以直接访问，所以不要存放重要信息
cookie有域和路径的概念。不能跨域访问，某个网页的cookie只能被这个网页和网页的子目录下的网页访问
Ajax
使用
创建xml对象 xml = XMLHttpRequest(), 所有的浏览器都支持这个对象，xml用于在后台与服务器交换数据
监听状态变化，对响应结果进行处理 onreadystatechange = function(){}
发送请求 xml.open(method,url) xml.send()
xml对象的属性
onreadystatechange 事件函数，监听readyState状态的变化执行相应的动作
readyState：0 1 2 3 4，5种状态，4个过程
status 200：‘OK’ 404：未找到页面
响应结果
responseText 居多
responseXML