js基础
2017-08-20 本文已影响0人
奶瓶SAMA
一个html页面由那几部分组成的？
html(超文本标记语言)、css(层叠样式表)、js(动态脚本语言)(操作页面上所有元素，让元素具有动态的效果)
前端工程师工作的内容：
拿到UI设计图：切图---->html+css静态布局----->用js写一些动态效果----->ajax和后台进行交互，把数据绑定到页面上---->用nodejs服务平台做源代码的管理---->用nodejs做后台
用到的开发工具有：
Dw、sublime、webstrom、hbuild、eclipse......
将css引入到页面中的几种方式？
1、行内样式 style=””
2、内嵌式（将css样式写在style标签块中，放到head里面）
3、外链式 <link>
4、导入式 @import “index.css”(不常用)
将js引入到页面中的几种方式？
1、行内引入（不推荐）onclick=”alert(‘xxx’)”
2、内嵌式 <script> </script> 将js代码写在script脚本块中间
3、外链式 将js代码写在外面的文件中，通过src引入
（在外链式中，script脚本块中间不可以写js代码，写了也不执行）
为什么先加载css，后加载js？
1、如果在网速慢的情况下，不先加载css，会先出现html结构然后出现css，会有短暂的乱码状态
2、js通常是获取html标签给予动态操作效果的
Js中常用的四种输出方式？
alert() 浏览器的弹框
document.write() 页面中输出内容
console.log() 控制台输出
innerHTML/innerText:向指定元素中添加内容
Js层级关系？
浏览器---->文档--->html----->head/body--->....
浏览器-----在js中叫做window，我们把window称为浏览器对象
文档------在js中叫做document，我们把document称为文档对象
Html、head、body叫做元素对象
js主要有哪几大部分？
Js:javascript是一门轻量级的脚本语言，主要分为三大模块：
1、ECMAScript:定义了js里面的命名规范、变量、数据类型、基本语法、操作语句等最核心的东西
2、DOM document object model 文档对象模型
3、BOM browser object model 浏览器对象模型
Js有哪些命名规范？
1、js严格区分大小写
2、使用驼峰命名法
1>首字母小写，其余每个有意义的单词首字母大写
2?可以使用数字、字母、下划线、$（数字不能作为首位
3、不能使用关键字和保留字
Js中的变量和数据类型？
Js中的变量是一个抽象的概念，变量是用来存储值和代表值。
在js中定义一个变量非常简单：
var name=’张三’; 定义一个变量name，把字符串张三赋给这个变量 。
Js中的变量是松散类型的：通过var变量名就可以存储任何数据类型。
比如：
var num=12;
var name=”张三”
var boo=true
var n=null
var m=undefined
var obj={} //对象数据类型
var ary=[1,2,3] //数组 也是对象数据类型
var reg=/^\d$/ //正则 也是对象数据类型
var fn=function(){} //函数数据类型
js中的数据类型分类：
1、基本数据类型：
数字(number)、字符串(string)、布尔(boolean)、null、undefined/2、、引用数据类型：
2、对象数据类型(object)
函数数据类型(function)
数据类型详细解读：
number数据类型中的NaN、isNaN、Number、parseInt/parseFloat
boolean数据类型中的!和!!的作用
object数据类型是由属性名和属性值组成的
Js中常用的内置类：Object、Array、Date、ReExp、String
number数据类型：整数、负数、0、小数、NaN (NaN != NaN )
isNaN():检测一个值是否为有效数字，是有效数字返回false
思考:isNaN('123')；
Number():强制将其他的数据类型转换为number类型，要求如果是字符串，字符串中一定都需要是数字才可以转换
非强制数据类型转换
parseInt() 从左到右，一个个字符查找，把是数字的转换为有效数字，中途如果遇到了一个非有效数字，就不继续查找了
parseFloat()和上面一样，可以多识别一个小数点
boolean数据类型：true false
! 一个叹号是取反，首先将值转换为布尔类型的，然后再取反
!! 两个叹号：相当于转换为布尔类型
数据类型转换的规则:
1、如果只有一个值，判断这个值是真假，遵循：只有0 NaN “” null undefined,返回的是false，其余的是true
2、如果两个值比较是否相等，遵循这个原则：val1==val2 两个值可能不是同一类型的，如果是==比较的话，会进行默认类型转换
1>对象==对象 永远不相等
2>对象==字符串 先将对象转换为字符串(调用toString()方法)，然后在进行比较。
注意：[] 转换为字符串是”” {}转换成字符串"[object Object]"
3>对象==布尔类型 对象先转换为字符串(toString()),然后把字符串再转换为数字(Number())类型,布尔类型也转换为数字(true是1 false是0)，最后让两个数字比较。
注意：Number("")空字符串转换成Number类型---->0
思考: []==0 []==false [""]==false ?
4>对象==数字 对象先转换为字符串(toString()),然后把字符串转换为数字(Number)
5>数字==布尔 布尔类型转换为数字 思考：2==true
6>数字==字符串 字符串转换为数字
7>字符串==布尔 都换为数字
8>null==undefined 结果是true
9> null或者undefined和其他数据类型比较都不相等
3、除了==是比较，===也是比较(判断是否绝对相等)，如果数据类型不一样
例如：var1===val2 如果数据类型不一样，肯定不相等 思考:0==false 0===false
数据类型-object对象数据类型
特点：由多组键值对组成，由多组[属性名和属性值]组成
属性名和属性值是用来描述这个对象特征的比如：var obj={name:’张三’,age:18}
创建对象有2种方式：
1、字面量创建方式 var obj={}
2、实例创建方式 var obj=new Object();
1>给对象添加属性名和属性值 obj.name=’张三’ 或者 obj[“name”]=’张三’
2>修改对象的属性名和属性值 obj[“name”]=’李四’
3>获取属性名和属性值 console.log(obj[“name”]) 或者 console.log(obj.name) 如果属性民不存在默认返回undefined
4>删除属性名和属性值 obj.name=null//假删除 delete obj.name//真删除
对象数据类型中的object对象数据类型，还可以细分：对象类(Object)、数组类(Array)、正则类(RegExp)、时间类(Date)、Math数学函数等等对应的实例对象、数组、正则、时间等等
Js对象、类、实例的区别：对象是泛指，js中万物皆对象，类是对象的组成部分，实例是类中的一个具体的事物
基本数据类型和引用数据类型的区别
思考：
var num1=12;
var num2=num1;
num2++;
console.log(num1);
var obj1={name:’张三’};
var obj2=obj1;
obj2.name=’李四’
console.log(obj1.name)
发现：基本数据类型没有跟着改变，引用数据类型跟着改变了。
结论：基本数据类型和引用数据类型的本质区别：基本数据类型操作的是值，而引用数据类型操作的是内存地址
typeof检测数据类型
typeof
返回值是字符串，包含了数据类型字符 “number”、 “string” 、“boolean” 、“undefined” “object” 、“function”
typeof的局限性：不能检查object下细分的类型，检查返回的都是“object”
思考:console.log(typeof (typeof (typeof [])) )
js中的三个判断
If else、三元运算符、switch case
1>If else if else 最常用的判断，能都解决所有的判断需求
2>三元运算符：应用于简单的if else情况
3>switch case：应用于不同情况下的不同操作
作业：背景切换
Js中的三个循环
For循环
For in循环
While循环
for循环四部曲：
1、设置初始值 var i=0
2、设置循环执行条件 i<5
3、执行循环体中的内容 {包起来的部分}
4、每一轮循环完成后都执行我们的i++累加操作
break、continue
相同点：
在循环体中，只要遇到这2个关键字，循环体中break、continue后面代码就不执行了
不同点：
break:在循环体中，出现break，整个循环就直接的结束了,i++最后的累加操作也不执行
continue：在循环体中，出现continue，当前的这一轮循环结束，继续进行下一轮的循环,
I++继续执行
思考：
for(var i=0;i<10;i++){
if(i<=5){
i+=2;
continue;
}
i+=3;
break;
console.log(i);
}
console.log(i);
for in 循环:用来循环一个对象中的属性名和属性值
对象中有多少键值对我们就循环多少次
顺序问题：首先循环数字的属性名（按照从小到大），在把剩下的属性名按照我们写的顺序循环
for(var key in value){
console.log(key)//每一次循环获取的属性名
console.log(value[key])//获取属性值
}
作业：隔行变色
选项卡切换
隔行变色的99乘法表
数据类型中的函数数据类型
1、function 函数---->具备某个功能的一个方法，方法本身没有什么意义的，只有执行这个方法实现了对应功能才有自己的价值
2、函数由两部分组成：创建一个函数、执行这个函数
3、创建一个函数可以执行多次，一般情况下，每次执行函数和上一次执行没有任何的关系
举例：
function sum(){
var total=null;
total=1+1;
console.log(total);
}
sum;//sum后面不加()，代表的就是当前函数本身 sum
sum();//sum后面加(),代表的是执行当前函数
函数执行的目的：把函数之前存储的那些字符串编程js代码，让后让js代码从上到下依次执行
当浏览器加载页面的时候首先会提供一个供js代码执行的环境--->全局作用域
创建一个函数 3个步骤
1>开辟新的内存空间，浏览器为其分配一个16进制的地址，我们假设地址是xxxfff000
2>把函数体中的js代码当做字符串存储到内存当中,创建的时候都是一堆字符串，函数本身没有任何意义
3>在把这个地址赋值给当前的函数名sum->sum
函数执行 2个步骤
1>当函数执行的时候，首先会提供一个函数体中代码执行的环境--->私有作用域
2>把函数体中的代码字符串变为js代码从上到下执行
函数执行的时候，首先会形成一个新的私有作用域，供函数体中的代码从上往下执行，形成的那个私有的作用域，保护了里面的私有变量的成员不受外界的干扰(外界也获取不到也修改不了)-->我们把函数执行的时候形成的这种保护机制叫做‘闭包’;
形参
案例：随便传入两个数，求和
注意:如果是两个形参(入口)，调用的时候只传入一个实参，另一个默认的形参值是undefined。
返回值
return：当前函数提供的出口，因为不提供出口，闭包机制导致了函数外面无法获取函数里面的这个值，如果想在外面用这个值的话，需要用return 把这个值返回出来——>返回值机制(外面想用哪个，就把哪个值返回)
函数中如果没有return默认返回的是undefined
return;--->返回undefined
在函数体中return后面代码都不会执行了
arguments
案例：任意数求和：随便给我几个数（具体几个不知道，就没有办法定义形参的个数了），求出和。
arguments：不管写不写形参，也不管是否传递值，arguments始终是存在的，用来接收函数传来进来参数的的一个集合
匿名函数：
1>自执行函数:定义函数和执行函数一起执行了 （+ - ! ~） ()()
2>函数表达式 odiv.onclick= function () {}
数组
数组也是对象，我们看到的是它的属性值，属性名是索引。
length：数组的长度。 通过.或者[]来访问 数组中有一个叫做length的属性，这个属性是浏览器天生就给数组添加的（不是我们自己编写的属性）
案例：for循环数组 for in循环
数组中的常用15个方法
1.方法的作用
2.需要传递那些参数
3.是否有返回值，返回值的什么
4.通过此方法是否对原来的数组产生了什么影响
关于数组的增加、修改、删除
添加数组末尾一项: arr.push() 或 arr[x] 或 arr[arr.length] 或splice()
删除数组最后一项：arr.pop() 或 arr.length--
删除数组中的首项：arr.shift()
向数组开头增加一项：arr.unshift()
增、删、改 arr.splice(n,m) 从索引n开始，删除m个元素，把删除的内容以一个新的数组返回，原来的数组改变
删除
arr.splice(n) 从索引n开始，删除到数组末尾
arr.splice(0); 清空数组，把之前的数组克隆了一份一模一样的
arr.splice();一个参数也没有，返回的是一个空数组
修改
arr.splice(n,m,x)从索引n开始，删除m个元素，用x替换删除的部分
增加
arr.splice(n,0,x)从索引n开始，一个都不删（返回的是一个空数组），把x增加到索引n的前面，原来的数组改变
思考：用splice的方法完成添加数组末尾一项，删除一项
如果直接是arr[n]=m; 如果n是前面不连续，数组中会出现undefined
关于数组的截取和拼接
arr.slice(n,m) 从索引n开始，一直到索引m（不含m），将找到的部分数组返回，原来的数组不变
arr.slice(n) 从索引n开始周一直找到数组末尾
arr.slice(0) 把原来的参数克隆一模一样的
arr.concat(arr1):把两个数组拼接到一起，原来的数组不变
arr.concat()把arr克隆一份一模一样的数组
把数组转换为字符串
arr.toString()把数组转换为字符串，原来的数组不变
arr.join('+') 把数组按照指定的分隔符拼接成字符串，原来的数组不变
eval() js中把字符串变成js表达式执行的一个方法
思考:给数组中的每一项进行相加求和
排序和排列
arr.reverse()把数组倒过来排序，原来的数组改变
arr.sort()按照数组的第一位从小到大排序（只能处理10以内的数组进行排序）
由小到大
arr.sort(function (a,b) {
return a-b;
});
由大到小
arr.sort(function (a,b) {
return b-a;
})
只有在标准浏览器中兼容的方法，在ie6~8下不兼容
indexOf()、lastIndexOf() (字符串中也有这两个方法,字符串中的这两个方法兼容所有的浏览器，而数组的这两个方法是不兼容的)
indexOf()、lastIndexOf() 当前内容在数组中第一次/最后一次出现位置的索引，如果数组中没有这一项，返回的结果是-1，如果有这一项，索引是几就返回几，原来的数组不变
forEach和map
forEach：数组中有几项，我们的函数就执行几次，原来的数组不变
map和forEach的语法是一样的，但是比forEach多加了一个把原来内容进行替换的功能,原来的数组不变，返回的新数组会变化
递归：当前函数自己调用自己执行 （了解）
思考：实现1-100之间求和（用递归的方法实现）
DOM
DOM：document object model 文档对象模型
在DOM中提供了很多获取元素的方法和之间的关系属性以及操作这些元素的方法
DOM模型就是描述整个html页面中节点关系的图谱
document.getElementById('tab');
document.getElementsByTagName('div')
document.getElementsByName('a') //通过name来获取一组元素 //在ie下只对表单元素起作用
document.getElementsByClassName('tab')//获取多个这几个方法，即使你获取的一个，它也是一个集合
document.documentElement//获取html元素
document.body//获取body元素
获取页面的宽度 兼容所有浏览器的获取当前屏幕的宽度
var curWidth=document.documentElement.clientWidth||document.body.clientWidth;
在移动端获取元素的常用方法(因为ie6~8下不兼容)
document.querySelector();//获取一个
document.querySelectorAll();//获取多个
练习:全选反选
获取关系的属性
odiv.childNodes 获取元素所有子节点
odiv.children 获取元素所有子元素
odiv.parentNode 获取元素父亲节点
odiv.previousSibling 获取上一个哥哥节点
odiv.previousElementSibling获取上一个哥哥元素
odiv.nextSibling 获取下一个弟弟节点
odiv.nextElementSibling 获取下一个弟弟元素
odiv.firstChild获取所有子节点中的第一个节点
odiv.lastChild获取所有子节点中的最后一个节点
节点:元素 标签 文字 注释……都是节点
在js中我们需要掌握的节点类型
nodeType nodeName nodeValue
Js中的节点类型：
元素节点（元素标签） 1 大写的标签名 null
文本节点（文字） 3 #text 文字内容
注释节点（注释） 8 #comment 注释内容
document 9 #document null
动态创建一个元素对象
对节点的操作
添加
父级.appendChild(要添加的元素) 追加子元素
父级.insertBefore(添加谁,被插入到谁之前) 在指定元素前面添加一个新的元素
删除
父级.removeChild 删除子节点
克隆
Obj.cloneNode()//克隆元素 true把元素里面的所有元素都克隆，默认是false，只克隆当前的
替换
父级.replaceChild(新节点，被替换的节点)
增加元素的属性名和属性值
1>Obj.setAttribute(属性名,属性值) 更改页面的结构 ，移除用removeAttribute
getAttribute获取
2>通过.的形式设置 不改结构
练习：动态创建遮罩层
Math方法和应用
Math.abs();
Math.ceil();
Math.floor();
Math.round();
Math.max();
Math.min();
Math.random(); //范围是 >=0 <1
Math.round();
思考：随机取出0 或1
随机取出0-10之间的整数
随机取出10-20之间的整数
随机取出20-30之间的整数
随机取出n-m之间的整数
结论：Math.round(Math.random()*(m-n)+n);
作业：点击随机出现验证码
字符串常用的方法及应用（String类介绍 ）
一个字符串是由多个字符组成的
str.length 获取字符串中字符的个数
字符串中存在索引，也是从0开始的
空格、换行这些特殊符号也是一个字符
str.charAt(n); 获取指定索引位置的字符
str.charCodeAt(n);获取指定位置的字符对应的ASII值
ASII值：每一个字母、汉字、特殊符号都有一个对应的码值(Unicode)
字符串的截取
var str='wo sohi zhaonwg xiao huoan';
str.substr(n,m)从索引n截取m个字符
str.substring(0,5);//从索引n开始，找到索引m处(不包含m)，将找到的字符返回
str.slice(n,m);//从索引n开始，找到索引m处(不包含m)，将找到的字符返回 slice支持负值索引
查找字符的索引
str.indexOf(字符)//获取指定字符在字符串中第一次出现的索引的位置
str.lastIndexOf(字符)//获取指定字符在字符串中最后一次出现的索引位置
如果没有这个字符，返回的是-1，基于这个理念，我们经常用这两个方法来判断字符串中是否包含某个字符
大小写转换
str.toLowerCase();
str.toUpperCase()
替换
str.replace(要替换的老字符，替换成的新字符);
在不使用正则的情况下，调用一次方法，只能替换一次
一般情况下，都是作用正则来替换的
字符串转换为数组
将字符串按照指定的分隔符拆分成数组
string.split('+');根据+来拆分成数组
string.split('');将每一个字符拆分成数组
作业：
var time="2017-2-9 11:59:3";
2017年02月09日 11点59分03秒
Date日期
练习1：获取当前时间
练习2：倒计时
练习3：钟表
