目录
一 js简介
---是一种运行在客户端(浏览器)的编程语言,实现人机交互
作用
1.网页特效
2.表单验证
3.数据交互
4.服务端编程(node.js)
组织构成(重要)
1.ECMAScript:javaScript基本语法
例如:数据类型 , 循环结构 ,数组 , 对象 , 选择结构...
2.DOM(核心):文档对象模型
宗旨:一切的标签 , 属性 , 注释等内容都可以当作对象看待,可以通过这些对象去操作 页面。
eg:<h3>hello</h3>h3>: 把h3标签看作一个对象 , 就可以去操作它的内容
3.BOM:浏览器对象模型
宗旨:一切与浏览器交换的信息都当作对象来看,例如:历史记录,浏览器分别率,url信 息...
二 ECMAScript
一 JavaScript引入
1.内部
2.外部
二 注释
1.单行注释://
2.多行注释:/* */
三 格式
;号表示一个语句结束 , 但是如果你换行了, 就不需要再加上;
四 输出方式
1.文档输出(HTML):document.write("")
2.控制台输出(Console):console.log("")
3.弹窗输出(alter): alter("")
五 数据类型和变量
1.基本数据类型
number(数字型) , string(字符串) , boolean , null , undefine ,
2.引用类型
---[var]/[let]/[const] 变量名 = 值 ;
-
Object(对象类型)
-
array(数组对象)
- function(函数)
-
变量定义
1. var :修饰的变量实际上是全局变量
```javascript
<script>
if(true){
// 全局变量
var age = 18 ;
}
document.write(age) ;
</script>
```
//2. let:修饰的变量实际上是局部变量
<script>
if(true){
// 局部变量
let age = 18 ;
document.write(age) ;
}
</script>
3. const:修饰的变量表示常量
<script>
if(true){
// const:修饰的变量表示常量 , 同时它修饰的变量是一个局部变量
const age = 18 ;
// 不能再重新赋值
// age = 20 ;
document.write(age) ;
}
---变量名 = 值(默认的是var)
---可以先定义,后赋值
---可以先赋值 , 后定义
六 函数
1.typeof() : 查看数据类型
2.parseInt(String str): 转换为number
3.变量名定义规范:参照java
七 运算符
1.拼接运算
大部分与java一致,但是注意以下:
<script>
// number之间的算数运算
// 与java不同的是 。 Java的字符串类型只能用+做拼接 , 而js字符串也可以做算数运算
document.write("20"-18) ; //得到2
//需要注意的是:如果做的是‘+’ 运算 , 仍然和java一样十年拼接运算
document.write("20"-18) ; //得到"2018"
</script>
2.条件运算符
&& , || , !
3.逻辑运算符
== :只比较值
===: 除了比较值还比较数据类型
4.复合运算符
age+=18 ; //js不支持java的符合运算符
4.位运算符
1.位运算NOT(~)
2.AND(&)
3.OR(|)
4.XOR(^)
注意:
&&:左边为false右边就不会再看了
&:就算左边为false , 仍然会看右边
八 选择结构和循环结构
选择结构:
1.if...else
2.switch( ) {}(支持number , var , boolean)
循环结构:
while
for
do...while
增强for...in循环(和java增强for循环比把:换成in , 但它是遍历下标的)
增强for...of循环(把 in换成了of , 而且它遍历的是值而不是索引)
九 数组
一 js数组定义
1.var/let 数组名称 = [值列表] ;
eg: var value = [2,4,6,8] ;
2.var/let 数组名称 = new Array() ;
var/let 数组名称 = new Array(size) ;
var/let 数组名称 = new Array(element...) ;
二 重点:
1.类型不单一
2.长度不固定
3.js数组是动态可变的
三 数组API
1.concat() :两个数组连接
javascript
var v1 = [1,3,5]
var v2 = [2,4,6]
//数组链接
v1 = v1.concat(v2)
for(let value of v1){
document.write(value)//1 3 5 2 4 6
}
2.erery(): 检测每一个元素是否符合条件(自己指定条件)(整个数组里面必须所有的元素都满足这个条件才会返回true)
//检测每一个元素是否符合条件(自己指定条件)(整个数组里面必须所有的元素都满足这个条件才会返回true)
let result = v1.every(function(value){
return value>2
})
document.write(result)//false(因为数组里面的1和2元素不满足条件)
3.filter(): 数组过滤 , 检测每一个元素并返回符合条件过滤后的数组
//数组过滤 , 检测每一个元素并返回符合条件过滤后的数组
let arrs = v1.filter(function(value){
return value>3 ;
})
for(let value of v1){
document.write(value) //5 4 6(只过滤出来所有大于3的元素)
}
4.forEach(): 遍历数组方式
//forEach遍历数组方式
arrs.forEach(function(value){
document.write(value) //5 4 6
})
5.find(): 返回这个数组里面符合条件的第一个元素
//返回这个数组里面符合条件的第一个元素
var ele = v1.find(function(value){
return value>5
})
document.write(ele) //6 (5,4,6里面只有6是第一个大于5的数)
6.join(): 把数组的所有元素放到一个字符串
//把数组的所有元素放到一个字符串
let str = arrs.join("-")//指定符号连接
document.write(str) //5-4-6
7.lastIndexOf():搜索数组中的元素,并返回它最后出现的位置
//lastIndexOf():搜索数组中的元素,并返回它最后出现的位置
let lio = arrs.lastIndexOf(4)
document.write(lio+"<br>") //1
8.pop(): 删除数组中的最后一个元素,并返回删除的元素
//pop(): 删除数组中的最后一个元素,并返回删除的元素
let p = arrs.pop()
document.write(p)//6
document.write("<br>")
for(let value of arrs){
document.write(value)//5 4
}
9.shift(): 删除并返回数组的第一个元素
10.splice(start , count , item1...itemX): 从数组中添加或者删除元素
//splice(start , count , item1...itemX): 从数组中添加或者删除元素
/*
start:表示要添加删除的起始位置
count:表示要删除的元素个数(从start位置开始删除)
item1...itemX:表示从start开始要添加的元素(可以不写,即不添加元素)
*/
arrs.splice(1,0,"添加的第一个元素" , "添加的第二个元素") //表示从第1个元素开始 , 删除0个元
素 , 添加两个元素
for(let value of arrs){
document.write(value) //5 添加的第一个元素 添加的第二个元素 4
}
11.sort(): 对数组的元素进行排序
//sort(): 对数组的元素进行排序
arrs.sort()
for(let value of arrs){
document.write(value) //4 5 添加的第一个元素 添加的第二个元素
}
12.some(): 检测数组元素中是否有元素符合指定条件
//some(): 检测数组元素中是否有元素符合指定条件
var so = arrs.some(function(value){
return value>4 //检测是否有元素大于4
})
document.write(so+"<br>") //true
13.push(): 向数组的末尾添加一个或更多元素 , 并返回新的长度
14.reverse(): 反转数组的元素顺序
15.slice(): 选取数组的一部分,并返回新的数组
十 函数(function)
一 函数的定义
1.function 函数名(参数列表){
//函数体
//return 返回值
}
注意:无需返回类型!
参数可以是普通参数 , 对象参数 , 函数参数
<script>
function add(a , b){
return a+b
}
</script>
2.闭包函数
//闭包函数
var val = (function (value){
return value+1 ;
})(10)//这相当于定一个函数 , 然后又调用了它,传入参数为10
document.write(val+"<br>") //11
3.箭头函数
//箭头函数(类似java的lamda表达式)
//参数=>函数体
//遍历函数
var values = [1,3,5,7,9]
values.forEach((value , index)=>{
document.write(index+":"+value)
})
十一 对象
1.var/let 对象名称 = {对象属性}
对象属性调用:对象.属性名
对象方法调用: 对象.方法名
2.var/let 对象名称 = new Object() ;
eg: var obg = new Object() ;
obj.name = "张三" //虽然没有name属性 , 但是js会自动帮你创建
3.通过类创建对象
<script>
//创建一个学生类
class student{
//构造方法
constructor(name , age , sex){
this.name = name
this.age = age
this.sex = sex
}
//学习方法
study(){
document.write(this.name+"好好学习")
}
}
//通过类的构造方法创建对象
var stu = new student("张三" , 18 , "男")
stu.study() ; //张三好好学习
</script>
三 DOM文档对象模型
一 Document
1.结点获取
<script>
//通过id获取标签吧对象
let p = document.getElementById("a")
// 操作标签内容
p.innerText = "<h3>怀化学院</h3>"
p.innerHTML="<a>哈哈</a>"
// 操作样式
p.style.color="yellow"
p.setAttribute("class" , "box") //样式类型 样式名称 --> .box{}
// 通过name名字获取标签对象
let name = document.getElementsByName("like") //因为名字不是唯一的 , 所以得到的name是一个数组
//通过标签名获取标签对象
let lis = document.getElementsByTagName("li") //获取所有<li>标签对象 , 得到的也是一个数组
// 通过class类名来获取标签对象
let cla = document.getElementsByClassName("age") //因为class选择器也不是唯一的 , 所以得到的也是一个数组
</script>
2.结点创建
<script>
// 创建元素节点
let h3 = document.createElement("h3")
document.write(h3.value)//节点值 undefine
document.write(h3.nodeType)//节点类型 1
document.write(h3.nodeName)//节点名 h3
// 创建属性节点
let atr = document.createAttribute("class")
atr.value="b1" //设置属性值为b1
//创建注释节点
let com = document.createComment("这是一个注释")
//创建文本节点
let tex = document.createTextNode("hello , world")
</script>
3.节点添加
1.appendChild():末尾追加子节点
4.节点关系
1.childNodes:所有子节点(包含空格)
childs:所有子节点(不包含空格)
2.firstChile:第一个子节点
3.nextSibling:同辈节点的下一个节点
4.parentNode:父节点(只有一个)
二 正则表达式
1.正则表达式定义
1./pattern/attributes
2.new RegExp(pattern , attributes)
2. 匹配模式
下面是一个判断电话号码是否正确的正则表达式示例:
<body>
<p>电话号码: <input type="text" name="phone" id="phone"> <span id="msg"></span></p>
</body>
<script>
phone.onblur = function(){
var phone = document.getElementById("phone")
// 验证电话号码
// 定义电话号码正则表达式(/...(正则表达式).../m)
let reg = /^1[3456789]\d{9}$/m
// input输入的值是否与正则表达式reg匹配
if(reg.test(phone.value)){
var msg = document.getElementById("msg")
msg.innerHTML="格式正确!"
msg.style.color = "red"
}else{
var msg = document.getElementById("msg")
msg.innerHTML="格式错误!"
msg.style.color = "red"
}
}
</script>
四 BOM浏览器对象模型
1. Windows对象常用属性
tips:
文档对象模型顶层对象:--Document
浏览器模型顶层对象:--Windows
浏览器和文档对象顶层模型: --Windows
本周博客到这里就结束了, 加油!