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
通过下标可以捕获分组
捕获方式 \下标
【断言】
语法格式：
( ?<=断言条件 )正则表达式 匹配一个正则表达式，左边必须满足断言条件
正则表达式( ?=断言条件 ) 匹配一个正则表达式，右边必须满足断言条件
( ?<！断言条件 )正则表达式 匹配一个正则表达式，左边必须不满足断言条件
正则表达式( ?！断言条件 ) 匹配一个正则表达式，右边必须不满足断言条件
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
