JS的介绍
语言类型
- HTML: 是一门超文本标记语言，“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
- CSS : 层叠样式表。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
- JS：JavaScript：是脚本语言，是基于对象的语言，是弱数据类型的语言，是基于事件驱动的语言，可以写业务逻辑
基于对象：就是说对象已经被定义好了，只需要用对象即可
弱数据类型：对数据类型不敏感，(java是强数据类型的语言)
基于事件驱动：即点击，键盘等各种事件驱动
运行在浏览器：有浏览器即可。无需编译：由浏览器直接解释
一般用来给HTML网页增加动态、交互、拖拽等功能。
JS的基本组成部分
1、ECMAScript(ES):
ES是JavaScript的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)ECMAScript是一套标准，定义了一种语言（比如JS）是什么样子。
2、文档对象模型(DOM)
document object model文档对象模型，里面提供了元素属性啥的，可以让我们操作页面中的元素操作DOM时，想操作谁，先获取谁。
操作DOM的本质是=获取(想操作谁就先获取谁)+触发(获取后可以绑定自己想要的事件)+改变(事件函数触发后就能发生对应的改变)
DOM元素的获取方式
1、直接通过元素的ID获取 只支持高版本浏览器
2、通过getElementById('ID'), getElementsByTagName('标签名'), getElementsByClassName('类的名称')
3、浏览器对象模型（BOM）：
对浏览器窗口进行访问和操作。这是浏览器里默认的了解就行
JS书写的注意事项
- script脚本推荐放在最下边好处：防止因网络问题，页面加载时间长，出现空白；即便网络问题，浏览器也把DOM加载渲染完成，等待从服务端下载完js脚本，出现效果
- css不放在最下面原因通俗地讲：好比先穿好衣服在出去，浏览器先把css样式准备好，在加载结构层，使得页面有样子；如果放在下面，因为页面是从上往下加载，没有css，就剩下裸露的标签，很难看，使得用户体验不好
- 综上两点所述故css脚本必须在script上面
JS的导入方式
- 内嵌式 在页面中直接写入
<script type="text/javascript">js代码</script>。- 外链式 在页面中引入外部文件
<script src="xx.js"></script>。- 行内式 在标签中(也就是元素里)直接写
<input type="button" value="点击有惊喜" onclick="javascript:alert('哈哈哈哈')"/>
JS的输出方式
- console.log(js,cs,html)；在控制台输出，可以输出一个或者多个，其间用逗号隔开
- console.dir(js)；在控制台输出详细信息，用法同上
- alert('hello world')；在页面上弹出helloworld
- alert都是把要输出的内容首先转换为字符串然后在输出（调用了toString）
- document.write("hello world"); 在页面中直接显示hello world
- document.getElementById("search").value = "hello world" ；给id为search这个文本框添加的内容
- innerHTML/innerText ->给除了表单元素的标签赋值内容
- document.getElementById("div1").innerHTML = "吧啦吧啦吧啦吧啦";
JS中的常量及变量
变量命名规范
- 由字母(a-zA-Z)数字(0-9)下划线(_)以及美元符号($)
- 不能由数字开头
- 命名尽量用英文并且具有一定的含义
- 如果有多个英文单词,后面单词的首字母大写(遵循驼峰式命名)
- 不能使用关键字
- 首字母不要大写，大写是有特殊含义的
常量
常量的值是不可变的，反之为变量。常量用const定义
变量（var，let）
JS数据类型的分类、检测以及区别
数据类型
一、基本数据类型(值类型)
注意：基本数据类型是操作值的
1、数字类型
数字类型包括整数、小数、NAN
数据类型的转换
注意：引用数据类型要转为数字类型，先转为字符串在转为数字类型（隐式转换）
1、Number()将其他数据类型转化为纯数字类型，若没有数字类型则返回NAN
2、parseInt()将其他数据类型转为数字类型并取整，若没有数字则返回NAN
3、parseFloat()将其他数据类型转为数字类型并取小数点，若没有数字则返回NAN
2、字符串
字符串的各种方法
所有字符串的方法都不会改变原字符串
1、字符串的拼接
- 使用+号进行拼接 注意：只要数据两边有一边是字符串就行
- ES6用法，用反引号包住，变量需要用${}包住。例如：
2、获取字符串中对应索引的数据
- str[0] 获取字符串str中第一个字符
- str.charAt(0) 获取字符串str中第一个字符 注意：以上两者的区别是当str中无此索引时，str[0]返回的是undefined，charAt[0]返回的是空字符串
- str.charCodeAt(0) 获取字符串对应索引字符的ASCII码
3、字符串的转换
-
str.toLocaleUpprCase() 将字符串转为大写
-
str.toLoCaleString() 将字符串转为小写
-
str.slice(n,m) 从索引n复制到索引m（但是不包括索引m）
-
str.substr(n,m) 从索引n获取m个
-
str.split('+') 以指定的分割符，把字符串分割为数组
- 注意：这个返回值是数组。例如：'123'.split('2') 返回值['1','3']
-
str.replace('要被替代的字符'，'用来代替的字符') 替换
-
eval('str'):将字符串str当成有效的表达式来求值并返回计算结果。eval里面必须是字符串，如果其他数据类型想调用eval函数，则需要先转化为字符串再进行计算，例如eval(ary.jion('+'))返回值是改数组各项值相加的结果
3、布尔类型
- Boolean() 将其他数据类型转化为布尔类型，返回值只有ture或者false
- 注意：'' , null ,NAN ,0,undefined 返回值都是false
- 取反(!)取反的返回值也是布尔类型，其中有隐式转换
二、引用数据类型（引用数据类型都是操作地址的）
1、数组
数组的创建
- 字面量创建：var ary = [1,2]
- 实例化-构建函数创建：var ary = new Array(1,2,3,4)
数组的增删改查
1、原数组发生改变的方法
- ary.push(1，2) 向数组的最后一项或者多项添加数据
- ary.unshift(1,2) 向数组的最前面一项添加一项或者多项数据
- ary.pop() 删除数组中的最后一项
- ary.shift() 删除数组中最前面的一项
- ary.length-1 删除数字对应索引位置的数据
- ary.splice()
- 情况一：splice(x) 只传一个参数，表示从索引x开始删除到末尾；
- 情况二：splice(x,y) 传两个参数，表示从索引x开始向后删除y个
- 情况三： splice(x,y,z,f) 传三个或者三个以上的参数时，表示从索引x往后删除y项，并将第三位后面的参数替换删除的地方
2、不改变原数组的方法
- indexOf：查找数组中对应数据的索引值，如果没有则返回-1。这是从左到右查找对应值；只要找到就会输出结果；如果后面有重复的内容也不会输出其索引值。普遍用于数组的查重
- lastIndexOf:查找数组中对应值的索引值；如果没有返回-1；普遍用于数组的查重；这是从右到左查找对应值；只要找到就会输出结果；如果前面有重复的内容也不会输出其索引值
- ary.includes("x")：查找数组中是否有x这个数据；如果有返回结果ture；如果没有返回false。可以用来判断数组中是否有这个数据
- ary.slice() 返回值都是一个新的数组
- 情况一：ary.slice() 如果没有传参，则表示复制一份原有数组，返回值是一个新的数组
- 情况二：ary.slice(x) 只传了一个参数，则表示从索引x开始一直复制到数组的末尾
- 情况三：ary.slice(x,y) 若传了两个参数，则表示从索引x开始往后复制y个
- 情况四：ary.slice(-x) 若传了一个负数则表示从倒数的索引x开始往后复制
- ary.sort()：数组的自动排序，数字从0到9依次递增，如果大于10，则会按照十位数的数接着排
- 数字大于10时；且想用sort排序则可以这样用ary.sort(function(a,b){return a-b})当return里的值是a-b时表示数组从小到大进行排序，若是b-a则表示从大到小排序
- ary.resever()：表示将数组倒序排列，返回的倒序数组和原数组相等
- ary.concat()
- ary.concat(x,y,z)：表示将x,y,z拼接到数组里，返回值是一个拼接好的新数组如果拼接的是数组则先将其拆开后再进行拼接
- ary.concat()：若没有传参则表示复制一份原有数组
- ary.toString()：表示将数组转化为新的字符串
- ary.join():表示以指定分割符将数组转化为字符串。若没有传参则默认是逗号为分割符
数组的去重
1、利用对象属性名不能重复去重:先创建一个空数组和空对象，然后循环老数组，把老数组的每一项赋值给对象的属性名，然后再循环对象；将对象中的属性名添加到新数组中
3、最简单的方法就是利用indexOf去重，创建一个空数组，循环老数组，判断新数组里是否存在老数组的数据，如果没有就将老数组的这一项添加到新数组中。
2、普通对象
普通对象；例如{属性名：属性值}；普通对象是用大括号包住的。其中属性值可以时数字。而属性名和属性值成为键值对，一个对象中可有多个键值对，多个键值对间用逗号隔开普通对象中的属性名不可以是数字加字母,但可以是数字。且属性名都是字符串，只是平时将其省略了
对象的方法
- 查
- 打点的方式：obj.k
- 中括号的方式：obj[Number]
- 注意：以上两种方式使用方法不同，其中打点的方式时，k不能是数字，而中括号的方式是适用于k是数字的时候
- 改和增 改和增的方式和用法和上面一致，只需要直接赋值就可以。例如：
obj.name='hello';obj[2]=3- 删
- 假删除：obj.name = null 赋值为null只是假删除，obj中还是有这一项只是它的值为null 而已
- 真删除：delete obj[k] 直接将obj中属性名为k的那一项删除
3、函数
1、函数的应用
- 回调函数(递归函数)：回调函数就是函数调用另一个函数，递归函数是回调函数的特殊例子，递归函数是自己调用自己；使用回调函数时必须设置有边界点，否则会导致函数陷入死循环。
- 回调函数：
- 递归函数：
- 不定项求和：求0到100累加求和
- 利用函数模拟验证码
- 奇偶行变色
4、Math
Math的各种方法
- Math.abc():取绝对值
- Math.ceil():向上取整
- Math.foolr():向下取整
- Math.round():四舍五入
- Math.random():取0到1中间的随机小数（不包括1）
- Math.max():取其中数字的最大值
- Math.min():取其中数字的最小值
- Math.PI:获取圆周率
- Math.pow(x,y):x的y次方
- Math.sqrt(x,y):x开y次方
5、Date(日期)
日期的各种方法
- new Date():获取本机此刻时间
- new Date().getFullYear():获取本年份
- new Date().gerMonth():获取本月份；注意：它的月份中是0到11，0为咱们的1月份
- new Date().getDay():获取星期几；注意：它的星期也是0到6；同上
- new Date().getData():获取日期
- new Date().getHours():获取当前的小时
- new Date().getMinutes():获取当前分钟数
- new Date().getSeconds():获取当前秒数
- new Date().getTime():得到现在时间减去1970年1月1日0时0分0秒的毫秒数
JS中数据类型的检测
- 1、typeOf():检测该数据类型。返回值是字符串的形式，例如
- typeof可以准确的判断基本数据类型；但是不能判断引用数据类型（除了函数）
- 2、instanceof():判断已知数据类型的方法；注意:这个只能判断引用数据类型，若是值类型则返回的都是false
- 3、[].constructor:获取当前实例的构造器
- 4、
Object.prototype.toString.call([])//'[objec Array]'
622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
