WebJavaScript基础篇【高频总结大纲】

最新推荐文章于 2022-07-16 15:59:38 发布

李考拉

最新推荐文章于 2022-07-16 15:59:38 发布

阅读量344

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44980874/article/details/113953875

版权

基础篇

WEB前引：
- Section基础

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" }
     ]
  }