JavaScript笔记
【ECMA】
ECMASCript 前端脚本语言的标准规范
EC6.0
【JavaSCript】
用来定义页面的行为,以及和用户的交互
前端脚本语言
是运行再浏览器中的脚本语言,是由浏览器负责解释执行
JavaSCript代码直接写在HTML网页中
1.(变量)
变量的声明:
通常使用var或者let或者const来声明变量
语法格式:
var 变量名;
let 变量名;
const 变量名;
例如:
var a;
let b;
const c;
【区别】let var const
var 在同一个作用域中,可以重复声明同一个变量
let 在同一个作用域中,不可以重复声明同一个变量,一个变量只能声明一次
const 不可以被改变的变量,并且必须要初始化
变量都是有作用域的
=========================================================
2.( 数据类型 )
数字类型 number
字符串类型 string
布尔类型 boolean
空类型 null
未定义类型 umdefined
独一无二的类型 symbol
对象类型 object
数字类型:包括整数和浮点数
浮点数最多可以有16位有效数字,如果超过16位,最后一位数字是不精确的
字符串类型:用双引号或者单引号 引起来的都是字符串类型
“abc”
“123”
‘abc’
‘123’
‘a’
空类型:当变量的值为null的时候,就为空类型
null表示之不存在
未定义类型:当变量没有值的时候,就是未定义类型
没有明确类型的变量,就是nudefined
只有一个值:nudefined
在JavaScript中声明变量的时候是不需要明确变量的类型的
在给变量赋值的时候才明确的变量的类型
这种写法,叫做 弱类型变量
可以通过 typeof 关键字 来判断变量的类型
ps : typeof 对一个null类型值进行判断的时候,类型是object 这是JS的一个bug,
=========================================================
3.JavaScript中的运算符
算术运算符
赋值运算符
关系运算符
逻辑运算符
条件运算符
JavaScript的对象类型
数字类型 Number
布尔类型 Boolean
字符串类型 String
数组类型 Array
(1)数字类型 Number
构造方法:用来构造数字对象
let a = new Number (100);
方法:对数字进行处理
toFixed(2) 四舍五入保留指定的小数位
toPecision(2) 保留指定的精度 [ 有效数字 ]
属性:表示一些特殊的值
MAX_VALUE 最大值
MIN_VALUE 最小值
POSITIVE_INFINITY 无穷大 值为Infinity
NEGATIVE_INFINITY 无穷小 值为-Infinity
NaN 不是数字的数值 (Not a Number)
Infinity 无穷大
-Infinity 无穷小
(2)Boolean对象
为假的值:false 空字符串 null 0 NaN
其他的为真:true 非空字符集 非0数字
(3)字符串类型String
属性:length获得字符串的长度
方法:
charAt(index) 获得指定index索引位置的字符 例如charAt(1) 就是获得1位置得字符
indexOf(str) 获得指定子字符串str首次出现的索引位置,如果没有出现就得到-1
lastIndexOf(str) 获得指定子字符串str最后次出现的索引位置
subStr(start,length) 从start开始,截取length个字符
subString(start,end) 从start开始,到end结束,截取字符串 [ 不包含end ]
trim() 去掉字符串首尾的空格
replace(old,new) 替换字符串
split(str) 切割字符串
startWith(str) 判断是不是以str开头 结果为boolean值
endWith(str) 判断是不是以str结尾 结果为boolean值
toLowerCase() 转换成小写字母
(4)数组对象
定义:用来保存一组数据得类型
一个变量只能表示一个数据
1.数组的使用
一个数组中是可以存放多个数据的
这些数据叫做数组的元素
每一个元素都有一个编号,这个编号叫做数组的下标[索引]
索引是从0开始的连续的整数
通过索引可以操作数组的任意一个元素
数组的长度:数组中有多少个元素
数组的最大索引=数组长度-1
JavaScript的数组长度是可以改变的
只要增加了数据,就可以自动增加长度
获得数组长度的方式:
数组名.length
2.数组中的常用方法
push(值) 在数组的末尾添加元素
splice(start,len);从start索引开始,删除len个元素,包含start位置
reverse() 反转数组
sort() 对数组中的元素按照从小到大排序
JavaScript中的流程控制
程序默认会按照代码的编写顺序一行一行依次执行
1.分支结构
1)if… if…else… if…else if…else
2)switch case
2.循环结构
1)for
=========================================================
4.【函数】
定义:一堆代码的集合
定义格式:
1)普通函数
function 函数名(){
代码块;
}
调用格式:
函数名();
------------------------------------------------------
2)有参数的函数
function 函数名(参数列表){
代码块;
}
调用函数:可以传入对应个数的数值,如果传入的参数个数要函数中定义的个数不一致,也是可以的
函数名(参数值);
------------------------------------------------------
3)有返回值的函数
function 函数名(参数列表){
...
return 值;
}
调用函数:可以使用一个变量来接受返回值
let aa = 函数名(参数值);
==============================================================
5.JavaScript中的特殊数据类型:函数类型
function add(a,b){
return a+b;
}
let abc =add;
let aa = add();
let reduce = function(a,b){
return a-b;
}
(1)自定义对象类型
JavaScript是面向对象的编程语言
面向过程和面向对象是编程中的两种不同的思想
面向过程
所关注的是做一件事情的步骤,流程
面向对象
所关注的做事情的人或者物
(2)如何定义对象 【方式一】
let a = { } ;
let a ={
变量名:值
变量名:值
变量名:值
};
对象中定义什么内容?
变量
函数
【举例】
如何描述学生?
姓名:张三
年龄:20
性别:男
电话:13812345678
let stu = {
name:“张三”,
age:20,
sex:“男”,
tel:“13812345678”,
study:function(){
console.log(this.name+","+this.age+","+this.sex+","+this.tel)
}
};
在对象外部使用变量
stu.name
stu.study()
在对象内部使用变量需要在变量前加一个this,表示当前对象
this.name
this.study()
使用对象构造器 【方式二】
1.定义构造器
function Puke(type,num){
this.type = type;
this.num = num;
this.info =function(){
console.log(this.type+" "+this.num);
}
}
2.调用构造器创建对象
let pai =new Puke(“黑桃”,“A”);
let pai =new Puke(“红桃”,“K”);
. . . . .
使用Object创建对象【方式三】
方式1:
let obj = new Object();
obj.name=“zhangsan”;
obj.age=20;
obj.sex=“男”;
方式2:
let a={name:"zhangsan",age:20,sex:"男"}
let obj = new Object(a);
======================================================
JavaScript中操作DOM对象
DOM : Docu Object Model
文档对象模型:
将HTML文件作为一个对象存在 -->Document
HTML中的每一个《标签》or《元素》都是一个对象 -->Element
HTML中的每一个《属性》都是一个对象 -->Attribute
HTML中的每一个《文本》都是一个对象 -->Text
JS操作DOM–>通过JS来对HTML页面进行操作 [ 增 删 改 查 ]
如何通过JavaScript操作HTML?
在JavaScrpit中已经内置了一个document对象
当浏览器加载完整个HTML页面的时候,就会自动创建一个document
1.获得HTML页面中的标签
[ 老方式 ]
document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
document.getElementsByClassName();
[ 新方式 ]
document.querySelecter("");
document.querySelecterAll("");
拿到父标签
let parent = 子标签对象.parentElement
标签转换成了文档对象
文档
<a id="aa" href="http://www.baidu.com">这是超链接</a>
对象
let a={
id:"aa",
href:"http://www.baidu.com",
textContent:"这是超链接"
}
2.根据标签对象可以获得标签中的属性和文本
也可以修改标签中的属性值和文本的值
标签对象名.属性名 = 值;
let value = 标签对象名.属性名;
获得文本
let text = 标签对象名.textContent;
let text = 标签对象名.innerText;
let text = 标签对象名.innerHTML;
修改文本的值
标签对象名.textContent="";
标签对象名.innerText="";
标签对象名.innerHTML="";
3.增加标签
let 子标签 = document.createElement(“h2”);
父标签.append(子标签);
4.移除标签
父标签.removeChild(子标签);
事件:在页面上发生了一个操作
鼠标事件:
onmousedown 鼠标按键按下
onmouseup 鼠标按键松开
onmouseenter 光标进入
onmouseout 光标离开
onclick 鼠标按键点击[按下+松开]
键盘事件
onkeypress
onkeydown
onkeyup
框架事件
onload 页面加载完成[页面在浏览器中完成显示过程]
onunload 页面卸载完成[浏览器关闭的时候,先清空浏览器中的页面数据]
表单事件
onblur 表单项失去焦点
onfoucs 表单项获得焦点
onchange 输入框内容发生改变
onsubmit 当提交按钮被点击
事件监听机制
给组件绑定一个监听器,用来监听对应的事件是否发生
监听谁?
监听什么事件?
给组件添加监听器
编写监听函数
点击按钮的监听器方法
function ButtonAddNews(){
alert(“AAAAAAAAAAAA”);
}
给组件绑定事件监听器
<button onclick="ButtonAddNews()">添加</button>
==========================================================
事件的绑定方式:
1.在标签[组件]中定义一个 属性,属性的值绑定了一个JS代码
添加
2.在JavaScript中动态绑定
let btn = document.querySelecter("");
btn.addEventListener(“事件”,回调函数);
比如:
btn.addEventListener(“click”,function(event){})
通过JS操作CSS
CSS的优先级
Style > ID选择器 > 类选择器 >标签选择器
1.通过style属性来修改css
DOM Style对象
标签对象.style.CSS属性="值";
注意:在JavaScript中CSS属性的写法和CSS中的属性写法不一样
CSS中多个单词使用 - 隔开
JavaScript中,使用驼峰命名法
font-size fontSize
margin-top marginTop
background-color backgroundColor
2.通过class属性/ID选择器 来重置选择器
标签对象.className=“类选择器1 类选择器2”
标签对象.id=“ID选择器”
===========================================================
JavaScript中的内置对象
DOM Document对象
document 表示整个html网页文档
document.body.clintWidth body标签的宽度
document.body.clintHeight body标签的高度
BOM对象 Browser对象
window对象 整个浏览器窗口
属性:
window.innerWidth 浏览器的内部宽度
window.innerHeight 浏览器的内部高度[不包含标题栏,地址栏,状态栏等的高度]
方法:
window.alert(); 弹出提示框
window.close(); 关闭窗口
window.open()打开新窗口
window.open("网页地址")在新窗口中打开
window.open("网页地址" ,'_blank 或者 _self 或者 _top') 在指定的位置打开页面
_blank 新窗口
_self 当前窗口
window.open("网页地址", '..' ,'width=100,height=100') 指定新窗口大小
let t = window.setTimeout("函数",1000) 延迟1000ms执行一次函数
let t = window.setInterval("函数",1000) 每间隔1000ms重复执行一次
window.clearTimeout(t) 结束指定的setTimeout
window.clearInterval(t) 结束指定的setInterval
===========================================================
Screen 屏幕对象
screen.availWidth 屏幕的分辨率宽度
screen.availHeight 屏幕的分辨率高度[不包含任务栏的高度]
screen.width 屏幕的分辨率宽度
screen.height 屏幕的分辨率高度[包含任务栏高度]
Navigater
浏览器的相关信息
navigater.appName
navigator.appVersion
navigator.appCodeName
History 历史记录
history.back()
history.foward()
history.go(数字); 数字是正数就是foward,也就是前进,数字多大就前进多少
数字是负数就是back,也就是后退,数字多大就后退多少
==========================================================
正则表达式
1.定义:
正则表达式是一个字符串
正则表达式是一个用来对字符串进行处理的字符串
字符串的处理
匹配 match
提取 match
替换 relpace
切割 split
2.正则表达式的组成
字符
数量
边界词
修饰词
分组
1)字符:
任何一个字符都可以作为正则表达式的字符
[abcd] 表示一个字符 a 或者 b 或者 c 或者 d
[a-z] 表示所有小写字母
[A-Z] 表示所有大写字母
[h-m] 表示h到m之间的所有小写字母
[^abc] 表示出了abc之外的所有字符
[0-9] 表示所有的阿拉伯数字
[a-zA-Z_0-9] 表示单词字符[小写字母 大写字母,_, 阿拉伯数字 ]
预定义字符
. 表示一个任意字符
\w 表示单词字符,相当于[a-zA-Z_0-9]
\W 表示非单词字符
\d 表示所有的数字,相当于[0-9]
\D 表示非数字
\s 表示空白字符 空格 \r \n \t
\S 表示非空白字符
2)数量词
数量词用在字符的后面,用来定义字符的个数
[a]{n} 表示a出现n次
[a]{n,} 表示a至少出现n次
[a]{n,m} 表示a至少出现n次,最多出现m次
[a]? 表示a出现0次或者1次
[a]* 表示a出现0次或者多次
[a]+ 表示a出现1次或者多次
贪婪型数量词
JavaScript中默认是贪婪性的数量
java中在数量词后用+表示贪婪性
懒惰型数量词
{n,}+ 数量是n次及以上,但尽可能多
{n,i}? 数量是n次到 i 次,但尽可能少
?? 数量是0次或1次,但尽可能少
*? 数量是0次或多次,但尽可能少
+? 数量是1次或多次,但尽可能少
3)边界词
^ 行开头
$ 行结尾
\b 单词边界
转义字符 \
转义字符是用来对字符用途进行转换
4)修饰词
g 全局匹配 默认情况下正则表达式只匹配一次,全局匹配会将所有符合要求的内容匹配出来
i 忽略大小写
语法格式:/正则表达式/gi
5)分组及分组的捕获
使用 ( ) 来对正则表达式进行分组
整个表达式默认是一个分组,下标默认是0
每一个分组都有一个默认的下标
下表是从0开始的连续的整数
由于一般情况下整个表达式分组的括号是不写的,所以我们看到的第一个括号,下标是1
通过下标可以捕获分组
捕获方式 \下标
【断言】
语法格式:
( ?<=断言条件 )正则表达式 匹配一个正则表达式,左边必须满足断言条件
正则表达式( ?=断言条件 ) 匹配一个正则表达式,右边必须满足断言条件
( ?<!断言条件 )正则表达式 匹配一个正则表达式,左边必须不满足断言条件
正则表达式( ?!断言条件 ) 匹配一个正则表达式,右边必须不满足断言条件