1.JS概述
1)概念
js全程：JavaScript(一门客户端脚本语言)
a.js能够直接嵌入在html页面中，由浏览器解释执行，不进行预编译
b.用于向页面添加动态交互行为
c.具备与java语言相似的语法，一种网页编程语言html
操做方向：
—操做DOM元素(html元素)
—操做BOM元素(浏览器对象)java
2)js特色：
1.解释执行：不须要预编译，逐行执行
2.基于对象：内置了大量的现成对象es6
3)做用
a.实现客户端数据简单计算
b.客户端表单合法性验证
c.添加浏览器事件的突发
d.网页特殊显示效果的制做
e.实现服务器的异步数据提交web
4)遵循es规范(es6)
a.严格区分大小写
b.数字、字母、下划线、$组成，不能用数字开头
c.驼峰命名法正则表达式
5)写法
a.行内式(定义事件)
在事件中定义操做，直接写js代码
alert(); 弹出警告框
事件：
onclick 鼠标点击
ondblclick 鼠标双击
onmouseover 鼠标移入
onmouseout 鼠标移出
onkeydown 键盘按下
onkeyup 键盘抬起
onblur 失去焦点
onfocus 获取焦点
写法：
οnclick=“函数()”; 事件=“事件触发的函数”;编程
b.内部式(嵌入式)
嵌入在页面的数组
c.外部式(文件调用)
js代码位于单独的.js文件中(注意保存的编码)
写法：
step1：在js文件中写js代码(定义行数)
step2：将.js文件引入到当前页面中
step3：在html行内添加事件，调用函数浏览器
js注释
单行：//注释文字
多行：/注释文字/缓存
js控制台：
不须要页面也能够直接在控制台(console)写js代码
F12(右击检查)---->打开控制台
Enter回车键：执行
Shift+Enter：换行服务器
console.log(内容);//将内容打印到控制台
2.js组成
1)变量(var let const 无)
js是弱类型语言，使用var关键字声明变量
刑如：
var a = 1;
var s = “李四”;
拆：
var a;//a没有类型
var a=1;//初始化a才会有类型，a为number类型
a=“李四”;//a为String类型
typeof 变量名;//用来验证变量名
注意：
1.js是弱类型语言，不一样的变量类型会根据数值自动给定类型
2.变量没有类型，统一用关键字var声明，变量值是有类型的
3.使用“=”进行赋值，没有初始化的变量自动取值为undefined
4.js存在变量声明提高(js会根据不一样的值自动转换为对应的数据类型)
js数据类型
a.基本类型number、string，boolean
number：不区分整数和小数
string：一对引号包裹的字符串(单双引均可以)
----单双引号只能交替引用，特殊字符须要转义 \n \t \s
经常使用函数：
str.indexof("",from[int index]);
返回指定字符串在str中第一次出现的位置(从from开始第一次出现的位置)
str.replace("","");
将指定字符串替换为指定字符串，只替换第一个，属于不彻底替换
boolean:仅有两个值，true、false
能够参与运算，自动做为数值，true值为1，false为0
b.特殊类型undefined、null
undefined
变量声明未初始化，该变量的值和类型均为undefined
null
表明"无值"或者"无对象"，能够经过一个变量赋值null来清空变量内容
c.对象类型object
内置对象 外部对象 自定义对象
数据类型转换：
a.自动转换(直接转换属于默认规则)
number+string=string
boolean+string=string
boolean+number=number
boolean+boolean=number
b.强制转换(利用类型转换函数)
toString();任何类型转换成string类型
parseInt();强转为整数，全局函数，具备截取功能
parseFloat();强转为小数，全局函数，具备截取功能
NaN:Not a Number(不是数字，不能转换成数字)
isNaN();全局函数，判断是否为非数字(true表示非数字，false表示数字)
案例1：
验证用户输入的是否位数字，如果数字则求平方，若不是数字则给出提示。
运算符
a.数学运算符 + - * / % ++ –
+：表示数学加法，或者字符串链接运输
-、*：若字符串参与，将数值字符串以数字参与运算
/：java中7/2=3，js中7/2=3.5
b.关系运算 > >= < <= == !=
==：只比较值，不比较类型
===：比较类型和值
c.逻辑运算符&&(与) ||(或) !(非)
短路逻辑：结果为boolean类型，true或者false
非短路逻辑：结果为number类型(1或者0)
d.三元运算符(三目)
语法：判断表达式？表达式1:表达式2;
注意：js中出现的判断表达式或者调解表达式能够为任意表达式，能够为任何类型
转换规则：
非0数字、非空字符串、{}、对象----->true
0、null、“”、undefined、NaN------->false
案例2：
用户在页面输入一个值，判断是否为50，要求提高用户输入大，小，对？
js的流程控制
a.分支流程if-else ，switch-case
b.循环流程for，while，do-while
案例3：
统计输入框重点敏感字(gun)出现的次数，将敏感字替换为"***"
调错方式：
1.在js代码中添加console.log()或者alert()
2.检查浏览器缓存的js文件，看错误信息
3.浏览器自带的断点debugger调试
内置对象：
简单内置对象：Number String
组合内置对象：Math Date Array
复杂内置对象：Funtion RegExp
1.Number:对象
var age=10;
var salary=new Number(10);//不经常使用
经常使用函数：
num.toFixed(n);
将数值转成为字符串，并经过四舍五入保留小数点后n位，若是位数不够补0
2.String:对象
var str1="abc";
var str2=new String("abc");//不经常使用
经常使用属性与函数：
length;返回字符串长度
toUpperCase();小转大
toLowerCase();大转小
charAt(index);返回指定位置的字符串
indexOf(findStr,[fromIndex]);从指定下标位置查找字符串第一次出现的位置
lastIndexOf(findStr);返回一个指定字符串最后一次出现的位置
substring(start,[end]);截取指定下标位置的字符串(前包括后不包括)
split(byStr,[howmany]);将字符串进行拆分，获得字符串数组(几个)
replace(findStr,toStr);字符串替换(不彻底替换)
组合内置对象：Math Date Array
复杂内置对象：Funtion RegExp
3.Math对象
经常使用函数：
Math.sqrt(a);//返回数字a的平方根
pow(a,b);//返回a的b次幂(方)
random();//返回0-1之间的随机数
round(x);//返回数字x四舍五入最接近的整数
max(x,y,z…);//找出其中最大值
min(x,y,z…);//找出其中最小值
abs(x);//返回x的绝对值
floor();//向下取整
ceil();//向上取整
4.Date对象
var date=new Date();//当前系统时间
var date1=new Date(“2009/02/05”);//指定日期时间
经常使用函数：
getTime();//获取当前时间的毫秒值
getDate();//获取当前日期
getDay();//获取当前一周的第几天
getFullYear();//获取当前的年份
toLocalString();//转换成字符串数据(当前时间)
setDate();//修改日期自己的值
5.Array对象(数组的数据类型能够不一致)
var arr1=[10,“张三”,30,true];//经常使用
var arr2=new Array(10,“张三”,30,true);
var arr3=new Array();
var arr4=new Array(5);//指定数组长度
注意：数组长度是可变的，由内部元素撑开大小
经常使用属性和函数：
length;获取数组长度
reverse();翻转数组
sort([函数名]);数组排序，默认规则：数组的数据首个字母排序；自定义规则：根据传的函数名排序。
6.Function对象
js中函数就是Function对象，函数名就是指向Function对象的引用，
能够直接使用函数名访问函数对象，函数名()是调用函数。
函数定义：
方式一，使用function关键字声明一个函数
function 函数名([参数]){
函数体；
return 返回值；
}
函数的返回值默认返回undefined，可使用return返回具体的值
方式二，匿名函数
var 函数名=function([参数]){
函数体；
return 返回值；
}
方式三，建立一个Function对象
var 函数名=new Function("参数1","参数2","函数体;");
ps：小括号里面前面是函数的参数，后面是函数体
补充：
方式四，箭头函数(c6之后)
var 函数名=([参数])=>{函数体;}
注意:在js中没有相似于java的重载，若是方法名相同，则以最后一个为准
js若是须要实现相似于java的重载效果，可使用arguments对象实现
arguments表明当前方法被传入的全部参数造成的参数数组
arguments.length：函数的参数个数
arguments[i]:取第i个下标的元素
补充：变量的做用域(var 无 let const)
1.var声明的变量，能够修改，不初始化输出undefined，有做用域
定义在函数内部--->私有变量--->整个函数体
定义在函数外部--->全局变量--->整个js(存在变量提高)
2.let是块级做用域，函数内部使用let定义后，对函数外部无影响
3.const定义的变量初始化之后不能够修改--->相似于java常量
4.没有任何关键字声明的变量--->全局变量
全局函数：全部js对象均可以使用
parseInt(); parseFloat(); isNaN();
eval(“js代码”);-----执行函数
只接受合法的表达式和语句/只接受原始的字符串
7.RegExp正则对象
var reg=/正则表达式/tag;
var reg=new RegExp(“正则表达式”,“tag”);
tag标识：
g(globel):设定当前匹配为全局匹配
i(ignore):忽略匹配中的大小写检查
正则表达式的经常使用组成部分：
() 普通
[] 枚举，范围 [12345]/[1-5]
{} 次数，个数
/a/：不彻底匹配
/^a/:以a开头
/a/
:
以
a
结
尾
/
a
/:以a结尾 /^a/:以a结尾/a/:彻底匹配
经常使用函数：
正则对象.text(字符串);
判断一个字符串是否匹配该正则表达式，符合返回true，不符合返回false
String对象中适用正则的函数：
str.replace(reg,toStr);//替换
str.match(reg);//返回匹配字符串匹配正则的内容，造成数组
str.search(reg);//返回字符串第一次匹配正则的下标
外部对象：
BOM(Broswer Object Model):浏览器对象模型
用来访问和操做浏览器窗口，是js有能力和浏览器对话，
执行操做不与页面内容发生直接关系，没有相关标准，但被普遍支持和使用
DOM(Document Object Model):文档对象模型(html文档)
用来操做文档，定义了访问和操做html文档的标准方法，应用程序经过DOM操做，
来实现对html文档数据的操做，当页面被加载时，浏览器会建立页面的文档对象模型(DOM树)，
经过可编程的对象模型，js可以建立动态的html(元素、属性、样式、事件)。
DOM经常使用操做：读取节点的信息、修改节点的信息、建立新节点、删除节点
1.BOM对象
window是前台最大的对象，用来表示浏览器窗口。所有的js都是全局变量、全局对象和全局函数。
好比：alert(111);等价于window.alert(111);
5个属性：
document：窗口中显示的html文档
history：浏览器窗口的历史记录
location：窗口文件地址
screen：浏览器当前屏幕
navigator：浏览器相关信息
5个对象：
Document:
History:
length:返回访问的地址个数
back();返回上一个地址
forward();进入下一个地址
go(index:index<0 回退,index>0 前进)
Location:
href:当前窗口正在浏览的网页地址
reload();从新载入当前页面
Screen:
width;实际的屏幕宽度
height;实际屏幕的高度
availWidth;可用的屏幕宽度
availHeight;可用的屏幕高度
Navigator:
userAgent;获取浏览器相关信息的属性
全局函数：
对话框：
window.alert(msg);//提示对话框(警告框)
window.confirm(msg);//确认对话框
window.prompt();//文本输入框
打开新窗口：
window.open(url);//打开新窗口
定时器：
a.一次性定时器
在一个设定的事件间隔后执行代码，不是函数被调用以后当即执行
var t=window.setTimeout(执行语句|函数名,time);
t表示返回已经启动的定时器对象
time表示时间间隔，单位毫秒
中止定时器：clearTimeout(t);
b.周期性定时器
以必定的时间间隔循环执行代码
var t=setInterval(执行语句|函数名,time);
中止计时器：clearInterval(t);
案例：
显示时间按钮，启动时间按钮，中止时间按钮
DOM对象(DOM树)在页面加载时候由浏览器生成的整个html文档，
操做文档中任何内容，都须要经过document
js能够建立动态的html(元素(节点)、属性、样式、事件)
js对DOM操做：查找、读取、修改、新增、删除
查找(节点)：
1.经过id查找
document.getElementById(“id名”);
若是id值错误，则返回null
2.经过标签名查找
document.getElementsByTagName("标签名");
根据指定标签名返回所有元素组成数组，
若是标签名错误，返回长度为0的节点数组，根据下标定位具体的节点
3.经过添加name属性查找
document.getElementsByName("name属性");
根据指定的name返回所有的元素组成数组
4.经过层次查找节点
ele.parentNode
遵循文档的上下层次结构，查找单个父节点
ele.childNodes
遵循文档的上下层次结构，查找多个子节点
5.根据选择器查找节点
document.querySelector("选择器");
选择符合选择器的第一个节点
document.querySelectorAll("选择器");
选择符合选择器的全部节点
6.根据class属性查找
document.getElementsByClassName("选择器");
根据指定的class返回所有的元素组成的数组
读取、修改(文本、属性、样式…)
innerHTML属性：
设置或者获取位于对象起始和结束标签内的文本
不解析html文本，将文本内容当成字符串打印
innerText属性：
设置或者获取位于对象起始和结束标签内的文本
只能获取解析以后的文本内容
读取：ele.innerHTML ele.innerText
修改：ele.innerHTML=值 ele.innerText=值
读取、修改样式
读取：ele.style
修改：ele.style=“样式:样式值”;
ele.style.样式属性=“样式”;
注意：样式属性的写法 font-size改为fontSize(驼峰写法)
读取、修改属性
读取：ele.属性；
修改：ele.属性=值；
读取：ele.getAttribute(属性名);
修改：ele.setAttribute(属性名,属性值);
获取、修改节点class(推荐)
ele.className
ele.className=值;
案例：
图片的显示和隐藏
轮播图
新增节点：
1.经过innerHTML属性给页面添加节点
ele.innerHTML=“html代码”;
2.经过函数给页面添加节点
a.建立节点
document.createElement(“节点名称”);
b.添加新节点到指定位置
追加：新节点做为父节点的最后一个子节点添加
父节点.appendChild(新节点);
旧节点为参考点，新节点位于此节点以前添加
父节点.insertBefore(新节点,旧节点);
删除节点：
父节点.removeChild(删除的指定节点);
js的事件：
事件是指页面元素状态改变，用户在操做鼠标或者键盘时触发的动做
鼠标事件：
onclick; 鼠标单机
ondblclick; 鼠标双击
onmouseover; 鼠标移入
onmouseout; 鼠标移出
onmousedown; 鼠标按下
onmouseup; 鼠标抬起
键盘事件： e.keyCode 键盘键码值
onkeydown 键盘按键按下
onkeyup 键盘按键抬起
状态事件：
onfocus 获取焦点
onblur 失去焦点
onchange 选择(下拉框、单选框、复选框)
onsubmit 表单提交
onload 加载
事件的定义：
方式一，在元素上添加对应的事件
如：
方式二，在js中直接给元素节点添加事件
元素节点.事件名=function(){}
方式三，元素节点.事件名=函数名；
event对象
任何事件触发以后都会产生一个event对象
事件冒泡：
若子节点和父节点有相同的事件，子节点会向上触发父节点的同名事件
取消事件冒泡：e.cancelBubble=true;
**
js自定义对象
自定义对象是一种特殊的数据类型，有属性和方法封装而成
属性：指与对象有关的值，访问方式：对象名.属性名
方法：指对象能够执行的行为或者能够完成的功能
访问方式：对象名.方法名
建立自定义对象的三种方式：
方式一：直接建立对象(直接建立Object对象)
var user=new Object();
方式二："构造器"建立对象
方式三：JSON建立对象(JSON是一个轻量级数据交换格式)
JSON使用属性名：属性值的方式定义，全部的名称都要用双引号引发来，多个属性直接用逗号隔开
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
