JS简介
- 什么是JS -- JavaScript的简称,是一种动态脚本语言。可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。
- 什么是动态页面 -- 人机交互 静态页面 -- 没有人机交互
- JS需要安装才能使用吗? -- 不需要
- 什么是BOM -- 浏览器对象模型 DOM -- 文档对象模型
- 详细介绍:
- JavaScript是一种基于对象和事件驱动的客户端脚本语言,最初的设计是为了检验HTML表单输入的正确性,起源于Netscape公司的Livescript语言
-
JavaScript的组成:ECMAsxcript(语法)、Browser Objects(DOM BOM 特性)组成
JavaScript的标识符
- 什么是标识符 -- 变量、函数、属性的名字,或者函数的参数。
- 标识符的命名规则
- 由字母、数字、下划线(_)或者美元($)组成
- 不能以数字开头
- 不能使用关键字,保留字作为标识符
使用script标签在HTML中插入JavaScript,编写内部JavaScript
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*css编写*/ </style> <script type="text/javascript"> //调试工具 -- 弹出框 alert("hello JavaScript"); </script> </head> <body> </body> </html>
引用外部JS文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/js1.js"></script> </head> <body> </body> </html>
JS变量
- 与其他程序设计语言相同,用来临时存储信息
- 创建方法如下: 弱数据类型
-
- var x=1; var x=2,name="zhangsan";
- var x; x=1; var name; name="lisi";
- 注意:Js中的变量,区分类型,但是没有int之类的关键词
JS调试
- alert()弹框调试、console.log控制台输出调试 【输出在页面中document.write()】
- 观察变量值的变化规律,是否符合程序设计的目的
- 语法:
alert(flag); console.log(flag);
JS自定义函数
- JavaScript函数:自定义函数、内置函数
- 自定义函数:是完成某一个功能模块的代码段,可以重复执行,方便管理和维护。
- 创建方法:
1、这种是函数声明,可以先使用后定义。
function fun1(){
代码段;
return;
}
2、这种叫做:函数表达式,必须先定义后使用
var fun1 = function(x){ return x+1; }
JavaScript数据类型
- ECMAScript:
a. 简单数据类型:
1、 undefined
2、 null
3、 boolean
4、 number
5、 string
b. ECMAScript6: es6 新增symbol数据类型
c. 复杂数据类型:Object -- 对象
1、number -- 数字类型,整型、浮点型都包括。
2、string -- 字符串类型,必须放在单引号或者双引号中
3、boolean -- 布尔类型,只有true和false 2种值(布尔常用在条件测试中)
4、undefine -- 未定义,一般指的是已经声明,但是没有赋值的变量,派生自null值, undefined==null ----> 返回的是true
全等(===)和不全等(==)
null==undefined会返回true,因为它们是类似的值;但null===undefined会返回false,因为它们是不同类型的值。
5、null -- 空对象类型,var a = null(释放指向对象的引用); 和 var a = "";有区别;
null 和 undefined 的值相等,但类型不等:
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
var a; // a 自动被赋值为 undefined
特殊类型
- object -- 对象类型,在js中常见的window document array等
- NaN -- 非数字类型,是Number的一种特殊类型,isNaN() 如果是数字 返回false 不是数字 返回true
- isNaN() -- 说明:对接受的数值,先尝试转换为数值,再检测是否为非数值。
它是判断一个值能否被 Number() 合法地转化成数字。
null、空字符串""、空数组[],都可被Number()合法的转为0,于是被isNaN认为是数,返回false。
undefined、空对象{}、空函数等无法转数字,返回true
Number(true)=1,Number(false)=0,所以isNaN对布尔值也返回false
4. 任何涉及NaN的操作(例如NaN/10)都会返回NaN
5. NaN与任何值都不相等,包括NaN本身。
var id="16"; console.log(isNaN(id));//false 转换之后是数字 var id="lisi"; console.log(isNaN(id));//true 转换之后不是数字
type of
- 功能:检测变量类型
- 语法:typeof 变量 或者 typeof(变量)
返回值:string number boolean object undefined function
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null // 返回 object
- NaN 的数据类型是 number
- 数组(Array)的数据类型是 object
- 日期(Date)的数据类型为 object
- null 的数据类型是 object
- 未定义变量的数据类型为 undefined
类型转换
- parseInt() - 转换成整型 parseFloat() - 转换成浮点类型,带小数点
Number() - 包括整数和小数 可以将字符串转换为数字。
字符串只包含数字(如 "3.14") 转换为数字 (如 3.14).
空字符串转换为 0。
其他的字符串会转换为 NaN (不是个数字)。
可将布尔值转换为数字。
(Number(false) // 返回 0 Number(true) // 返回 1)
Boolean() - 转换成逻辑类型(布尔常用在条件测试中)
null、空字符串""、 undefined、0, 返回false
有值的 返回 true
使用 if....else 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码。
- 如果一个参数值不能转换为一个数字将返回 NaN (非数字值)。
- 强制类型转换 隐式类型转换
- 案例演示
- 总结:
- 除0之外的所有数字,换换成布尔型都是true
- 除""之外的所有字符,转换成布尔型都是true
- null和undefined转换成布尔型是false
变量作用域
- 全局变量和局部变量
- 局部变量:在函数内部创建的变量,称为局部变量,其他函数不能使用。
- 全局变量:在函数外部创建的变量,称为全局变量,在函数之间可以共享使用。
比较运算符
- 比较运算符:用于比较两个值,结果true或者false
- 运算符的范围: > >= != < <=
- 实例:x < 10为true //x=2
比较运算符增加知识点
==:相等,只比较值是否相等。
===:全等,比较值得同时比较数据类型是否相等。
!=:不相等,比较值是否不相等。
!==:不全等,比较值得同时比较数据类型是否不相等。
返回都是boolean类型
逻辑运算符
- 包含逻辑与 或 非 等,结果是true或者false
- && (and) / || (or) / ! (非)
- 例如(x<10&&y>1) x=2以及y=5 返回true
- 对于&& 两个都是true结果是true,如果有一个false结果是false
- 逻辑与&&两边布尔值!==,返回布尔值为false的值
- 整个求值的结果都为true,那么则返回最后一个布尔值为true的表达式的值
- 对于|| ,其中一个是true结果就是true,两个都是false结果才为false
- 逻辑或|| ,遇到布尔值true,则返回该值,后面就不读取了
- 布尔值都为false,读取到最后一个,返回最后一个值
三目运算符 -- 三元运算符
- 根据不同的条件,执行不同的操作/返回不同的值
- 格式:条件?"值1":"值2";(值1表示true满足条件返回的值,值2表示false不满足条件返回的值)
- 实例:x>1?"大于":"小于";
算数操作符
- + 加
- - 减
- * 乘
- / 除
- % 取余
递增和递减
- 递增 ++a 与 a++ 都是对a进行递增的操作
- 区别
- ++a先返回递增之后的a的值 -- 先运算(++a=a+1)再赋值(进行当前运算)
- a++ 先返回a的原来的值,再返回递增之后的值 -- 先赋值(a,进行当前运算)再运算(a++=a+1赋值给下一级相同变量a)
- --a/a--递减同理
赋值运算符
- 简单赋值 =
- 复合赋值 += -= *= /= %=
- 例如:a+=b --> a=a+b
运算符的优先级
- () 小括号 -- 优先级高
- ++ -- 自加 自减
- * / % 乘 除 取余
- + - 加 减
- < <= > >= 逻辑运算
- == != 等于 不等于
- && 逻辑与
- || 逻辑或
- 条件?"值1":"值2" 三目运算符
- = 赋值 -- 优先级低
程序控制语句
- 条件判断控制语句
if(判断条件){ }else{ }
多重if嵌套控制语句
if(判断条件){ }else{ if(){ }else{ } }
2. 多条件分支类控制语句演示
//成绩是100分,显示满分
//成绩大于等于90,显示优秀
//成绩大于等于70,显示良好
//成绩大于等于60分,显示及格
//否则,不及格
var myscore=55;
var str;
var n=parseInt(myscore/10);
switch(n){
case 10:
str="manfen";
break;
case 9:
str="youxiu";
break;
case 8:
case 7:
str="lianghao";
break;
case 6:
str="jige";
break;
default:
str="bujige";
break;
}
循环类控制语句
- for循环
- while循环
- do-while循环
//for循环 //1+2+3+4+5+。。。。+100=5050 var i; var sum=0; for(i=0;i<=100;i++){ //sum=sum+i; sum+=i; } console.log(sum);
//1+2+3+4+5+。。。。+100=5050 //while循环是先判断条件,条件满足了再继续执行 var i=0; var sum=0; while(i<=100){ sum=sum+i; i++; } console.log(sum);
//1+2+3+4+5+。。。。+100=5050 // do-while: 先执行一次,执行完之后再进行判断 var i=0; var sum=0; do{ sum=sum+i; i++; }while(i<=100); console.log(sum);
弹出输入框
- 语法:prompt();
- 弹出输入框
- 返回值:
- 点击确定,返回输入的内容
- 点击取消,返回null
字符串的长度
- 语法:string.length
- 功能:获取string字符串的长度
- 返回值:number
内置函数
- 字符函数
- 日期函数
- 数学函数
- 转化函数
var str = "520134199906061234";
//两个参数,索引从0开始,截取到0
//第一个参数表示从哪儿开始,第二个参数表示截取的长度
console.log(str.substr(0,3));
console.log(str.substr(1,3));
console.log(str.substr(3,6));//起始位置 长度
//两个参数,索引从0开始
//第一个参数:起始位置,第二个参数表示:结束位置,算前不算后
console.log(str.substring(0,3));//520
console.log(str.substring(6,10));//1999
console.log(str.substring(6,11));//起始位置 结束位置
var str="Hello world!";
// console.log(str.substr(0,5));//Hello
// console.log(str.substring(0,5));//Hello
console.log(str.substr(3));//一个参数表示索引位置,截取到最后
console.log(str.substring(3));//一个参数表示索引位置,截取到最后
//charAt()获取字符串 但是根据索引位置获取
var str = "520134199906061234";
console.log(str.charAt(16));//3
var n = parseInt(str.charAt(16));
if (n%2 == 0) {
console.log("nv");
} else {
console.log("nan");
}
console.log(str.length);//获取字符串的长度
//indexOf() 参数:索引位置 查找1在str字符串中的第一次出现的位置
//索引从0开始
console.log(str.indexOf(1));//3
//两个参数表示 从索引位置4开始查找,找索引位置4后面的1出现的位置(索引1在位置4后面出现的位置)
console.log(str.indexOf(1,4));//6
//有一个自动类型转换 可以加上""
console.log(str.indexOf("1",4));//6
var str="Hello world!";
//返回某个指定的字符串值在字符串中首次出现位置
document.write(str.indexOf("Hello")+"<br/>");//0
//如果某个指定的额字符串在源字符串中不存在,返回-1
document.write(str.indexOf("wwww")+"<br/>");//-1
//返回某个指定的字符串值在字符串中首次出现位置
document.write(str.indexOf("world"));//6
//document.write可以解析html标签
// document.write("<h1 style='color:red;'>渡课</h1>");
//split -- 将字符串有规律的转换成数组 [11,22,33556,0]
// var str = "aa,ttt,121,gg,kk,aa,bb";
// var arr = str.split(",");
// console.log(arr);
// console.log(arr[7]);
var str = "How are you";
console.log(str.split(" ",2));
var str = "aa,ttt,121,gg,kk,aa,bb";
var arr = str.split(",");
console.log(arr);
console.log(arr[0]);
//concat -- 既可以连接字符串,也可以连接数组
console.log(str.concat(",55",",77",",00"));
console.log(arr.concat("55","77","00"));
//replace:替换(配合正则表达式)
//如下写法只会替换第一个符合要求的字符串
var str = "aa,ttt,121,gg,kk,aa,bb";
console.log(str.replace("aa","dodoke"));
//全部替换的功能
console.log(str.replace(/aa/g,"dodoke"));
日期函数
1、日期函数:
(1) Date getDate getDay getMonth getFullYear (getYear) getHours getMinutes getSeconds
//2020-5-20 15:58 日期格式化 function fun_FmtDate(){ var d1 = new Date(); var yyyy,mm,dd,hh,mi,ss; var time; //逻辑代码 yyyy=d1.getFullYear(); mm=d1.getMonth()+1; dd=d1.getDate(); hh=d1.getHours(); mi=d1.getMinutes(); ss=d1.getSeconds(); time=yyyy+"-"+mm+"-"+dd+" "+hh+":"+mi+":"+ss; return time; } console.log(fun_FmtDate());
数学函数
1、数学函数
(1) Math.round max min abs
//数学函数 var n = 16.654789; console.log(Math.round(n));//js中round只能取整数,不能保留小数,遵循四舍五入。 //保留小数 遵循四舍五入 console.log(n.toFixed(2)); console.log(n.toFixed(0));//17 //取最小 console.log(Math.min(2,6,81,1)); //取最大 console.log(Math.max(2,6,81,1)); //取绝对值 console.log(Math.abs(-3)); console.log(Math.abs(5));
数组
//声明或者创建一个不指定长度的数组,又称之为实例化创建 var arrayObj = new Array(); //声明或者创建一个数组并指定长度的数组 var arrayObj = new Array(5); //声明或者创建一个带有默认值的数组 var arrayObj = new Array(2,4,"a","y",8); //创建一个数组并赋值的简写,又称之为隐式创建数组 var arrayObj = [2,4,"a","y",8]; console.log(arrayObj); console.log("数组arrayObj的长度为:"+arrayObj.length); //数组的赋值,字符索引下标,数组的遍历 console.log(arrayObj[0]);//2 console.log(arrayObj[4]);//8 console.log(arrayObj[5]);//undefined for(var i in arrayObj){ // console.log(i);//获取的是索引值 console.log(arrayObj[i]); } var i; var n=arrayObj.length; for(i=0;i<n;i++){ console.log(arrayObj[i]); }
数组的栈方法
- push()
- unshift()
- pop()
- shift()
push()
- 把它的参数顺序添加到数组的尾部
- arr.push(l1,l2...)
- 返回值:把指定添加到数组后的新长度。number
unshift()
- 把它的参数顺序添加到数组的头部
- arr.unshift(l1,l2...)
- 返回值:把指定添加到数组后的新长度。number
pop()
- 删除arrayObj的最后一个元素
- 语法:arr.pop()
- 返回值:被删除的那个元素
shift()
- 删除arrayObj的第一个元素
- 语法:arr.shift()
- 返回值:被删除的那个元素
数组的方法
join()
- 用于把数组中的所有元素放入一个字符串
- 语法:arr.join(" "),可以自定义转换后的字符串分隔符
- 返回值:字符串
reverse()
- 用于颠倒数组中的元素的顺序
- 语法:arr.reverse()
- 返回值:数组
sort()
- 用于对数组的元素进行排序(依据数值的首位字母或数字进行从小到大排序)
- 语法:arr.sort()
- 返回值:数组
- 说明:
- 即使数组中每一项都是数值,sort()方法比较的也是字符串
- sort()方法可以接收一个比较函数作为参数
sort()
- 用于对数组的元素进行排序(依据数值的首位字母或数字进行从小到大排序)
- 语法:arr.sort()
- 返回值:数组
- 说明:
-
- 即使数组中每一项都是数值,sort()方法比较的也是字符串
- sort()方法可以接收一个比较函数作为参数
sort()
- 用于对数组的元素进行排序(依据数值的首位字母或数字进行从小到大排序)
- 语法:arr.sort()
- 返回值:数组
- 说明:
- 即使数组中每一项都是数值,sort()方法比较的也是字符串
- sort()方法可以接收一个比较函数作为参数
(a-b从小到大,b-a从大到小排序)
数组操作方法
concat()
- 用于连接两个或多个数组
- 语法:arr.concat(arr1,arr2...)
- 返回值:数组
slice()
- 从已有的数组中返回选定的元素
- 语法:arr.slice(start,end) -- 截取
- 参数:
- start -- 必须 规定从何处开始选取,如果是负数,从数组的尾部开始算起, 只有start值,表示从索引位置开始截取到最后
- end -- 可选 规定从何处结束选取,是数组片段结束处的数组下标
- start和end指的是数组中的索引值
- 截取从start到end(不包含的元素),正确的是从start到end-1的元素 -- 算前不算后
- 返回值:数组
DOM基础
- JavaScript由ECMAScript+DOM+BOM组成的。
- DOM: DOCUMENT OBJECT MODEL(文档对象模型)的缩写
掌握基本的DOM查找方法
- document.getElementById() -- 根据id获取唯一的一个元素
- document.getElementsByTagName() -- 返回所有的tag标签引用的集合 -- 返回的是数组
- document.getElementsByName() -- 返回所有的name属性引用的集合 -- 返回的是数组
- document.getElementsByClassName() -- 返回包含带有指定类名的所有元素的集合 -- 返回的是数组
设置元素的样式(css)
- 语法:ele.style.styleName = styleValue
- 功能:设置元素的样式
- 说明:
- ele表示要设置样式的DOM对象
- styleName表示要设置的样式名称 -- 使用驼峰命名方式 -- fontSize
- styleValue -- 要设置的样式的值
innerHTML
- 语法:ele.innerHTML
- 功能:返回ele元素开始和结束标签之间的HTML
- 语法:ele.innerHTML=“html”
- 功能:设置ele元素开始和结束之前的HTML内容为html
className
- 语法:ele.classname
- 功能:返回ele元素的class属性
- 语法:ele.classname = "cls"
- 功能:设置ele元素的class属性为cls
设置DOM元素属性或添加属性
获取属性
- 语法:ele.getAttribute("attribute ")
- 功能:获取ele元素的属性
- 说明;
- ele -- 要操作的DOM对象
- attribute -- 是要获取的html属性(id type class)
设置属性
- 语法:ele.setAttribute("attribute",value)
- 功能:在ele元素上设置属性
- 说明:
- ele -- 要操作的dom对象
- attribute -- 要设置的属性名称
- value -- 要设置的attribute属性值
删除属性
- 语法:ele.removeAttribute(“attribute”)
- 功能:删除ele元素上的attribute属性
- 说明:
- ele -- 要操作的对象
- attribute -- 要删除的属性名称
删除属性值
JavaScript对表单元素进行设置
JavaScript对表单操作分为三种:初始化 赋值 取值
DOM事件
事件
- 就是文档或者浏览器窗口中发生的一些特定的交互瞬间。
HTML事件
- 直接在HTML元素标签内添加的事件,执行脚本。
- 语法:<tag 事件=“执行脚本”></tag>
- 功能:在html元素上绑定事件
- 说明:执行脚本可以是一个函数的调用
鼠标事件
- onload -- 页面加载时触发
- onclick -- 鼠标点击时触发cu
- onmouseover -- 鼠标滑过时触发
- onmouseout -- 鼠标离开时触发
- onfocus -- 获得焦点时触发 -- input标签type为text password / textarea标签
- onblur -- 失去焦点时触发
- onchange -- 域的内容发生改变时触发 -- 一般作用在select、chaecbox、radio
- onsubmit事件 -- 表单中的确认按钮被点击时发生 -- 不是加在按钮上而是表单上
- onmousedown -- 鼠标按钮在元素上按下时触发
- onmouseup -- 在元素上松开鼠标按钮时触发 -- 2和3成就了onclick事件
- onmousemove -- 在鼠标指针移动时触发
- onresize -- 当调整浏览器窗口大小时触发
- onscroll -- 拖动滚动条滚动时触发
键盘事件与keycode属性
- onkeydown -- 在用户按下一个键盘按键时触发
- onkeypress -- 在按下键盘按键时发生(只会响应字母和数字符号)
- onkeyup -- 在键盘按键松开时发生
- keycode:返回onkeypress onkeydown 或者onkeyup事件触发的键的值得字符代码,或者键的代码
this的指向
- 在事件触发函数中,this是对该DOM对象的引用
DOM0级事件
- 通过DOM获取HTML元素
- (获取HTML元素).事件 = 执行脚本
- 语法:ele.事件 = 脚本
- 功能:在DOM对象上绑定事件
- 说明:执行脚本可以是一个匿名函数,也可以是一个函数的调用
总结
- DOM:将文档表现为结构化的表示方法,使得每一个页面元素都是可操控的。DOM将网页和脚本以及其他编程语言联系起来。
- 常见的DOM操作:
- (1) getElementById 返回带有指定的ID元素
-
(2) getElementsByTagName 返回的是包含带有指定标签名的所有元素的节点列表
-
(3) getElementsByClassName 返回的是包含带有指定类名的所有元素的节点列表
-
(4) getElementsByName 获取相同名称(name)的元素的所有节点列表