基础篇
WEB前引:
骐骥一跃,不能十步;驽马十驾,功在不舍
Section基础
0. js?
ECMAScript+DOM+BOM
ECMAScript(ES): javascript技术实现的核心规格,两个是互依互存的,其实是一回事,ES出现在官方更新文档中,JS出现在程序代码中。
DOM: 文档对象模型
BOM: 浏览器对象模型
1. js中变量
存储数据值的容器
用来存放你页面渲染或后端传送的数据的一个地方而已
2. js运算符
最最最常用仅6种
算术运算符(+ -* / % ++ --)加减乘除及取余数,无限递增递减
赋值运算符(所有的算术运算符后面都加一个=)
字符串运算符 (字符串之间的拼接)
比较运算符(== === != !== > < >= <= )
Tips:重点关注 == (等于)及 === (全等) 与等号相关的判断除了值大小以外还需要判断值类型
逻辑运算符(或与非 || && !)
类型运算符 (typeof 类型检测 instanceof存在检测)计算结果均为布尔值
3. js赋值
利用赋值运算符对变量进行数据变化,常用于数据之间的前端转换
Example:a+= b ----> a= a+b
4. js的数据类型
基本数据类型及引用数据类型
基本六种:Number数值、String字符串、Boolean布尔、Null空、Undefined未定义、Symbol唯一值(新增)
复杂三种:Object对象,Array数组,Function函数
5. 函数
通过 function 关键词进行定义,其后是函数名和括号 ()
是一种语法工具,将常用的计算或功能封装重复调用
Example:
封装:function testFunction(参数1,参数2)
{
需要执行的代码
}
调用:testFunction(参数1, 参数2)
6. 对象
存储变量的容器
键值对(属性:属性值)的容器
Example:var friendMessage = {name:‘lihao’,age:’'24,hoby:‘游戏’}
7. 事件
对浏览器或程序本身开展执行的行为代码
点击时间,触摸时间,定时事件…
8. 方法
对复杂逻辑冗杂的代码进行整合的简便函数
Example:toString()转成字符串 , Number() 转成数值类型 , sort()数据排序…
9. 判断逻辑
通常用来处理多项矛盾逻辑的条件判断语法
a.if (条件) {
如果条件为 true 时执行的代码
}
b.if (条件) {
如果条件为 true 时执行的代码
} else if(条件){
如果条件为 true 时执行的代码
}
c.switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
d.while (条件) {
要执行的代码块
}(如果不控制条件中所用变量的值,将进入无限死循环,会导致浏览器崩溃。)
e.if(条件){ break} , if(条件){continue}(中断,前者为彻底中断,后者只中断当前便继续)
Example:
1.如果小明要吃晚餐,那他肯定会吃最喜欢的汉堡
2.如果小明要吃晚餐,那他肯定会吃最喜欢的汉堡,如果汉堡没了,他就会买辣翅
3.小明去哪里吃晚餐?如果是汉堡,那就去KFC,如果是拌粉,那就去研卤堂,如果是不饿,那就去奶茶店
1. if(小明要吃晚餐){
吃最喜欢的汉堡
}
2. if(小明要吃晚餐){
吃最喜欢的汉堡
}else if(汉堡没了){
买辣翅
}
3. switch(小明去哪里晚餐) {
case 汉堡:
去KFC
break;
case 拌粉:
研卤堂
break;
default:
去奶茶店
}
10. 正则表达式
用特殊的字符来检索或判断数据及变量的规则方法
常用于判断和规避用户提交的数据不符合程序设定,表单判断用得最多, 其次会用于数据之间的替换和检索存是否在
将编造好的正则规则与正则方法搭配使用
正则常用相关方法如下:
事件名 | 相关方法 |
---|---|
检索字符串中指定的值,返该值,并确定其位置 | exec() |
检索字符串中指定的值 | test () |
检索与正则表达式相匹配的值 | search () |
找到一个或多个正则表达式的匹配 | match () |
替换与正则表达式匹配的子串 | replace () |
把字符串分割为字符串数组 | split () |
Example:判断用户的手机号是否合法?
小明输入:1778613KK56
小李输入:17786136656
var phoneNumber = 1778613KK56
var reg = /^1[3|4|5|8][0-9]\d{4,8}$/
reg.test(phoneNumber)
小明不合法,小李合法!
/^1[3|4|5|8][0-9]\d{4,8}$/
^1代表以1开头
[3|4|5|7|8] 第二位可以是3或4或5或7
[0-9]表示0-9中间的任何数字,可以是0或9
\d{4,8} 这个\d跟[0-9]意思一样,都是0-9中间的数字,{4,8}表示匹配前面的最低4位数字最高8位数字
11. 作用域
作用域就是变量与函数的可访问范围,作用域控制着变量与函数的可见性和生命周期
变量的作用域有全局作用域和局部作用域
作用域链是内部属性包含了函数被创建的作用域中对象的集合
Example:作用域的使用范围
函数外部不知道这个人叫什么名字
function function() {
var name = "lihao";
函数内部人人知道这个人的名字
}
var name = "lihao";
函数外部人人知道这个人的名字
function function() {
函数内部人人知道这个人的名字
}
函数外部人人知道这个人的名字
function function() {
name = "lihao";
函数内部人人知道这个人的名字
}
12. this关键词
在方法中,this 指的是所有者对象
单独的情况下,this 指的是全局对象
在函数中,this 指的是全局对象
在函数中,严格模式下,this 是 undefined
在事件中,this 指的是接收事件的元素
13. for循环
for 循环代码块一定的次数
for/in 循环遍历对象的属性
14. Dom
文档对象模型
通俗讲就是开发者可以根据JS 系列方法去操控当前页面的功能以及捕捉到相关元素
Dom其实就是获取、修改、添加或删除 HTML 元素的标准
- 节点(整个文档是一个文档节点,每个 HTML 元素是元素节点,HTML 元素内的文本是文本节点,每个 HTML 属性是属性节点)简而言之就是div容器嵌套的节点关系
- 方法(可以在节点(HTML 元素)上执行的动作)
- 属性(可以在节点(HTML 元素)上获取或处理值的行为)
- 获取(可以访问 HTML DOM - 查找 HTML 元素)
- 修改(修改 HTML = 改变元素、属性、样式和事件)
- 元素(添加、删除和替换 HTML 元素)
- 事件( JavaScript 对 HTML 作出事件行为)
Dom常用相关方法如下:
事件名 | 相关方法及属性 |
---|---|
节点(元素)的文本值 | innerHTML |
节点(元素)的父节点 | parentNode |
节点(元素)的子节点 | childNodes |
节点(元素)的属性节点 | attributes |
创建元素节点 | createElement () |
获取带有指定标签名称的所有元素 | getElementsByTagName () |
带有指定类名的所有元素 | getElementsByClassName () |
获取带有指定 id 的节点 | getElementById() |
插入新的子节点 | appendChild() |
删除子节点 | removeChild() |
替换子节点 | replaceChild() |
插入新的子节点 | appendChild() |
在前面插入新的子节点 | insertBefore() |
返回指定的属性值 | getAttribute() |
设置或修改为指定的值 | setAttribute() |
节点(元素)的子节点 | onkeydown() |
节点(元素)的属性节点 | onkeypress() |
点击 | onclick() |
双击 | ondblclick () |
获得焦点 | onfocus () |
失去焦点 | onblur() |
内容被改变 | onchange() |
键盘按键被按下 | onkeydown() |
键盘按键被按下并且松开 | onkeypress() |
键盘按键被松开 | onkeyup() |
完成加载 | onload() |
鼠标按下 | onmousedown() |
鼠标被移动 | onmousemove() |
鼠标从某元素移开 | onmouseout() |
鼠标在某元素之上 | onmouseover() |
文本框中元素被选中 | onselect() |
点击确认按钮 | onsubmit() |
15. Bom
浏览器对象模型
提供了独立与内容的、可以与浏览器窗口进行互动的对象结构
Bom更多的是与屏幕之间的数据及方法互动,与实际开发交互并不多
使用场景:需要监测屏幕分辨率大小或者是浏览器刷新回退
- Window Screen(屏幕相关信息)
- Window Location (浏览器重定向)
- Window History (浏览器历史)
- Window Navigator (浏览器信息)
Bom常用相关方法如下:
事件名 | 相关方法及属性 |
---|---|
浏览器全称 | navigator.appName |
客户端信息 | navigator.userAgent |
浏览器窗口的内部高度 | window.innerHeight |
浏览器窗口的内部宽度 | window.innerWidth |
可视屏幕高度 | screen.availHeight |
可视屏幕宽度 | screen.availWidth |
打开新窗口 | window.open() |
关闭当前窗口 | window.close() |
移动当前窗口 | window.moveTo() |
调整当前窗口的尺寸 | window.resizeTo() |
重新加载 | location.reload() |
前进 | history.go(1)/history.forward() |
后退 | history.go(-1)/history.back() |
获取URL | location.herf |
跳转页面 | location.herf |
16. Json
用于存储和传输数据的格式
轻量级的数据交换格式
通常用于服务端向网页传递数据
语法规则:数据为 键/值 对。
数据由逗号分隔。
大括号保存对象
方括号保存数组
常用方法:JSON.parse(将 JSON 字符串转换为 JS 对象),JSON.stringify(将 JS值转换为 JSON 字符串)
Example:JSON格式
{
"friend": [
{ "name":"lihao" , "sex":"boy" },
{ "name":"lihua" , "sex":"boy" },
{ "name":"liling" , "sex":"girl" }
]
}