目录
1、WEB标准
标准 | 内容 | 说明 |
---|---|---|
结构 | HTML | 网页元素的结构和内容 |
表现 | CSS | 网页元素的外观和位置,包括:板式、颜色、大小等 |
行为 | JavaScript | 网页模型的定义与交互 |
2、基础语法
2.1JavaScript简介
2.1.1JavaScript是什么
一种运行在客户端(浏览器)的编程语言,实现人机交互效果。
作用:
网页特效(监听用户的一些行为让网页做出对应的反馈)
表单验证(针对表单数据的合法性进行判断)
数据交互(获取后台的数据,渲染到前端)
服务端编程(node.js)
2.1.2JavaScript的组成
ECMAScript(JavaScript的语言基础)规定了JavaScript的基础语法核心知识,比如:变量、分支语句、循环语句、对象等等。
Web APIs
DOM(页面文档对象模型)操作文档,比如对页面元素进行移动、大小、添加删除等操作
BOM(浏览器对象模型)操作浏览器,比如页面弹窗,监测窗口宽度,存储数据到浏览器等等
2.1.3JavaScript书写位置
内联JavaScript:代码写在标签内部
内部JavaScript:直接写在html文件里,用script标签包住
外部JavaScript:代码写在以.js结尾的文件里,通过script标签,引入到html页面中
2.1.4JavaScript的注释
//单行注释 ctrl+/
/*块注释*/ 快捷键shift+alt+A
2.1.5JavaScript输入输出语法
输出语法:
document.write('要输入的内容');
alert('要输出的内容');
console.log('控制台打印');
输入语法:
prompt('请输入您的姓名:');
2.2变量
2.2.1变量是什么
计算机中用来存储数据的“容器”,简单理解是一个个盒子。
变量的作用:用来存放数据的。注意变量指的是容器而不是数据。
2.2.2变量基本使用
(1)声明变量:要想使用变量,首先需要创建变量(专业说法:声明变量)
语法:let 变量名
(2)变量赋值:定义了一个变量后,你就能够初始化它(赋值)。在变量名之后更上一个“=”,然后是数值。
(3)更新变量:变量赋值后,还可以通过简单地给它一个不同的值来更新它。
注:let一个变量不能多次声明,let可以一次声明多个变量。
2.2.3变量的本质
内存:计算机中存储数据的地方,相当于一个空间
变量:是程序在内存中申请的一块用来存放数据的小空间
2.2.4变量命名规则与规范
规则:
不能用关键字;
只能用下划线,字母,数字,$组成,且数字不能开头
字母严格区分大小写
规范:
起名要有意义
遵守小驼峰命名法
第一个单词首字母小写,后面每个字母首字母大写
2.2.5变量拓展——let和var的区别
let为了解决var的一些问题
var声明:
可以先使用再声明
var声明过的变量可以重复声明
比如var有变量提升、全局变量、没有块级作用域等等
结论:以后声明变量统一使用let
2.2.6变量拓展——数组
数组(Array)是一种可以按顺序保存多个数据
let arr = [ ]
let 数组名 = [数组名1, 数组名2, ......]
元素:数组中保存的每个数据都叫数据元素
下标:数组中数据的编号
长度:数组中数据的个数,通过数组的length属性获得
2.3数据类型
2.3.1数据类型
为什么要给数据分类?
(1)更加充分和高效的利用内存
(2)更加方便程序员使用数据
数据类型分为两大类:
(1)基本数据类型
number 数字型
string 字符串型
boolean 布尔型
undefined 未定义型 表示没有赋值
null 空类型 表示赋值了,但是内容为空
(2)引用数据类型
object 对象
function 函数
array 数组
2.3.2检测数据类型
console.log(typeof num)
2.4类型转换
2.4.1为什么要类型转换
把一种数据类型的变量转换成我们需要的数据类型
2.4.2隐式转换
某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换
规则:+号两边只有一个是字符串,都会把另外一个转成字符串
除了 + 以外的算术运算符,比如 - * /等都会把数据转成数字类型
缺点:转换类型不明确,靠经验才能总结
小技巧:+号作为正号解析可以转换成Number
2.4.3显式转换
编写程序时过度依靠系统内部的隐式转换是不严谨的,因为隐式转换规律并不清晰,大多是靠经验总结的规律。为了避免因隐式转换带来的问题,通常根逻辑需要对数据进行显示转换。
概念:自己写代码告诉系统该转成什么类型
转换成数字型:
Number(数据):
转成数字类型
如果字符串内容是有非数字,转换失败时结果为NaN(Not a Number)即不是一个数字
NaN也是number类型的数据,代表非数字
parseInt(数据):只保留整数
parseFloat(数据):可以保留小数
String(数据):变量.toString(进制)
3、流程控制
3.1运算符
3.1.1算术运算符
数学运算符也叫算术运算符,主要包括加(+)、减(-)、乘(*)、除(/)、取模即取余数(%)
JavaScript中优先级越高越先被执行,优先级相同时以书从左向右执行,即先乘除后加减,有括号先算括号里的
3.1.2赋值运算符
以前:num = num + 1
现在:num += 1
3.1.3一元运算符
自增:++,作用:让变量的值 +1
let i = 2
let o = 2
//先自增后运算
console.log(++i)
//先运算后自增
console.log(o++)
输出结果为:i=3 ,o=2
自减: --,作用:让变量的值-1
3.1.4比较运算符
包括:>、<、<=、>=、==(左右两边是否相等)、===(左右两边是否类型和值都相等)、!==(左右两边是否不全等)
注:(1)比较结果只能是Boolean类型,即只会得到true或false
(2)=是赋值;==是判断,只要求值相等,不要求数据类型一样即可返回true;===是全等,要求值和数据类型都一样返回的才是ture
字符串比较,是比较的字符对应的ASCⅡ码
从左往右依次比较
如果第一位一样在比较第二位,以此类推
比较的少,了解即可
NaN不等于任何值,包括它本身
尽量不要比较小数,因为小数有精度问题
不同类型之间比较会发生隐式转换
3.1.5逻辑运算符
符号 | 名称 | 日常读法 | 特点 | 口诀 |
---|---|---|---|---|
&& | 逻辑与 | 并且 | 符号两边都为true结果才是true | 一假则假 |
|| | 逻辑或 | 或者 | 符号两边有一个true就为true | 一真为真 |
! | 逻辑非 | 取反 | true变false,false变true | 真变假,假变真 |
3.1.6运算符优先级
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++ -- ! |
3 | 算数运算符 | 先 * / % 后 + - |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先 && 后 || |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
3.2分支语句
3.2.1表达式和语句
表达式是一组代码的集合
语句:js整句或命令,js语句是以分号结束(可以省略)
3.2.2分支语句
If分支语句
单分支、双分支、多分支
(不展开详细概述)
三元运算符
?与:配合使用
语法:
条件 ? 满足条件执行的代码 : 不满足条件执行的代码
switch语句
switch(数据){
case 值1:
代码1
break
case 值2:
代码2
break
default:
代码n
break
}
找到跟小括号里数据全等的case值,并执行里面对应的代码
若没有全等===的则执行default里的代码
注:
switch case语句一般用于等值判断,不适合区间判断
switch case一般需要配合break关键字使用,没有break会造成case穿透
3.2.3循环语句
断点调试
作用:学习时可以帮助更好的理解代码运行,工作时可以更快的找到bug
浏览器打开调试界面
1、按F12打开开发者工具
2、点到sources一栏
3、选择代码文件
断点:在某句代码上加的标点就叫断点,当程序执行到这句有标记的代码时会暂停下来。
while循环
循环:重复执行某段代码,而while:在...期间
while(循环条件){
要重复执行的代码(循环体)
}
//条件判断是否为真,为真,执行代码,为假,跳出循环
(2)循环的注意事项:
循环的本质就是以某个变量为起始值,然后不断产生变化量,慢慢靠近终止条件的过程。
循环需要具备三要素:
变量起始值
终止条件(没有终止条件,循环会一直执行,造成死循环)
变量变化量(用自增或者自减)
for循环
for循环基本使用
也是重复执行代码
好处:把声明起始值、循环条件、变化值写到一起,让人一目了然
for( 声明记录循环次数的变量; 循环条件; 变化值){
循环体
}
for循环和while循环有什么区别?
当如果明确了循环的次数的时候推荐使用for循环
当不明确循环的次数的时候推荐使用while循环
循环退出
循环结束:
continue:结束本次循环,继续下次循环
break:跳出所在的循环
for循环嵌套
for(外部声明记录循环次数的变量;循环条件;变换值){
for(内部声明记录循环次数的变量;循环条件;变化值){
循环体
}
//一个循环里在套一个循环,一般用在for循环里
}
4、数组
4.1数组是什么
数组(Array)是一种可以按顺序保存数据的数据类型
4.1.1声明语法
let 数组名 = [ 数据1,数据2,...,]
数组可以存储任意类型的数据
在数组中,数组的编号也叫索引或下标
在计算机中的编号是从0开始的
数组是按顺序保存的,所以每个数据都有自己的编号
4.1.2取值语法
数组名[下标]
4.1.3一些术语
元素:数组中保存的每个数据都叫数组元素
下标:数组中数据的编号
长度:数组中数据的个数。通过数组的length属性获得
4.1.4遍历数组
用循环把数组中的每个元素都访问到,一般会用for循环遍历
语法:
for(int i = 0; i < 数组名.length;i++){
数组名[i]
}
4.2操作数组
数组本质是数据集合,操作数据无非是增删改查
语法:
查 | 查询数组数据 | 数组[下标]或者我们称之为访问数组数据 |
改 | 重新赋值 | 数组[下标] = 数值 |
增 | 数组添加新的数据 | arr.push(新增的内容)方法将一个或多个元素添加到数组的末尾,并且返回到数组的新长度 arr.unshift(新增的内容)方法将一个或多个元素添加到数组的开头,并且返回到数组的新长度 |
删 | 删除数组中的数据 | arr.pop()方法从数组中删除最后一个元素,并返回该元素的值 arr.shift()方法从数组中删除第一个元素,并返回该元素的值 arr.splice(操作的下标,删除的个数)方法删除指定的元素。e.g:arr.splice(start,deleteCount) start起始位置:指定修改的开始位置(从0计数) //从哪里开始删 deleteCount:表示要移除的数组元素的个数 可选的。如果省略则默认从指定的起始位置删除到最后 //删几个 |
5、函数
5.1为什么需要函数
函数:
function,是被设计为执行特定任务的代码块
说明:
函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势是有利于精简代码方便复用。
5.2函数使用
5.2.1函数的声明语法
function 函数名(){
函数体
}
5.2.2函数名命名方法
和变量命名基本一致
尽量小驼峰命名法
前缀应该为动词
命名建议:常用动词约定
5.2.3函数调用方法
//函数调用,这些函数体内的代码逻辑会被执行
函数名()
//函数一次声明可以多次调用,每一次函数调用函数体里面的代码都会重新执行一次
注:声明(定义)的函数必须调用才会真正被执行,使用()调用函数
5.2.4函数体
函数体是函数的构成部分,它负责将相同或相似代码“包裹”起来,直到函数调用时函数体内的代码才会被执行,函数的功能代码都要写在函数体当中。
5.3函数传参
5.3.1为什么要有参数的函数
若函数完成功能需要调用者传入数据,那么就需要用有参数的函数
这样可以极大提高函数的灵活性
5.3.2有参数的函数声明和调用
声明方法:
function 函数名(参数列表){
函数体
}
参数列表:
传入数据列表
声明这个函数需要传入几个数据
多个数据用逗号隔开
调佣语法:
函数名(传递的参数列表)
//调用函数时,需要传入几个数据就写几个,用逗号隔开
5.3.3形参和实参
形参:声明函数时写在函数名右边小括号里的叫形参(形式上的参数)
实参:调用函数时写在函数名右边小括号里的叫实参(实际上的参数)
形参可以理解为是在这个函数内声明的变量(比如num1 = 10 )实参可以理解为是给这个变量赋值
开发中尽量保持形参和实参个数一致
使用过的alert('打印'),parseInt('11'),Number('11')本质上都是函数调用的传参
5.4函数返回值
5.4.1为什么要让函数有返回值
函数:函数是被设计为执行特定任务的代码块
缺点:把计算机后的结果处理方式写死了,内部处理了
优点:把处理结果返回给调用者
5.4.2用return返回数据
当函数需要返回数据出去时,用return关键字
语法:return 数据
function fn(){
return 20
}
//fn()
//return 相当于 执行了一句话 fn() = 20
document.write(fn())
//输出20
//进一次深入研究 有的时候函数名字比较长
function getMyResult(){
return 20
}
//document.write(getMyResult())
let re = getMyResult()
document.write(re)
//输出20
细节:
在函数体重使用return关键字能将内部的执行结果交给函数外部使用
函数内部只能一次return,并且return后面代码不会再被执行,所以return后面的数据不要换行写
return会立即结束当前函数,退出函数的作用,return后面的代码不在执行
函数可以没有return,这种情况函数默认返回值为undefined
5.5作用域
5.5.1作用域概述
通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域,作用域的使用提高了程序的逻辑的局部性,增强了程序的可靠性,减少了名字冲突。
全局作用域 | 全局有效 | 作用于所有代码执行的环境(整个script标签内部)或者一个独立的.js文件 |
局部作用域 | 局部有效 | 作用于函数内的代码环境,就是局部作用域,因为跟函数有关系,所以也称之为函数作用域 |
块级作用域 | {}内有效 | 块级作用域由{ }包括,if语句和for语句里面的{}等 |
5.5.2变量的作用域
在JavaScript中,根据作用域的不同,变量可以分为:
全局变量 | 函数外部let的变量 | 全局变量在任何区域都可以访问和修改 |
局部变量 | 函数内部let的变量 | 局部变量只能在当前函数内部访问和修改 |
块级变量 | {}内部的let变量 | let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问 |
变量有一个坑,特殊情况:
变量函数内部或者块级作用域内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐,但是有一种情况,函数内部的形参可以看做是局部变量。
5.5.3变量访问原则——作用域链
原则:作用域链:采取就近原则的方式来查找变量最终的值
只要是代码,就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链
5.6匿名函数
5.6.1匿名函数
将匿名函数赋值给一个变量,并且通过变量名称进行调用,我们讲这个成为函数表达式
语法:
let fn = function(){
//函数体
}
调用:fn() //函数名
其中函数的形参和实参使用跟具名函数一致
5.6.2立即执行函数
场景介绍:避免全局变量之间的污染
语法:
//方法1
(function(x,y){
console.log(x+y)
})(1,2);
//方法2
(function(){
console.log(11)
}());
//不需要调用,立即执行
注:多个立即执行函数要用分号隔开,要不然会报错
6、对象
6.1什么是对象
对象(object):JavaScript里的一种数据类型
可以理解为是一种无序的数据集合
可以用来详细的描述某个事物
比如描述 人 的信息:
静态特征:可以使用数字,字符串,数组,布尔类型等表示(如:身高,体重)
动态行为:使用函数表示(如:唱,跳,rap)
6.2对象使用
6.2.1对象声明语法
let 对象名 = { }
6.2.2对象那个有属性和方法组成
属性:信息或叫特征(名词)
方法:功能或叫行为(动词)
let 对象名 = {
属性名: 属性值,
方法名: 函数
}
6.2.3属性
数据描述性是信息称为属性,如人的姓名、身高、年龄、性别等,一般都是名词性的
let person = {
uname:'andy',
age:18,
sex:'男'
}
属性都是成对出现的,包括属性名和值,它们之间使用英文冒号 : 分隔
多个属性之间使用英文逗号 , 分隔
属性就是依附在对象上的变量(外面是变量,对象内是属性)
属性名可以使用 " " 或 ' ' ,一般情况下省略,除非名称遇到特殊符号如空格、中横线等
6.2.4属性访问
声明对象,并添加了若干属性后,可以使用 . 或 [] 获得对象中属性对应的值,称之为属性访问
简单理解就是获得了对象里面的属性值
6.2.5对象中的方法
数据行为性的信息称为方法,一般是动词性的,其本质是函数
let person = {
name:'andy',
sayHi:function(){
document.write('hi~~')
}
}
方法是由方法名和函数两部分构成,它们之间使用冒号 : 分隔
多个属性之间使用英文逗号 , 分隔
方法是依附在对象中的函数
方法名可以使用 " " 或 ' ' ,一般情况下省略,除非名称遇到特殊符号加空格、中横线等
6.2.6对象中的方法访问
声明对象,并添加了若干方法后,可以使用,调用对象中函数,称之为方法调用
let person = {
name: 'andy',
sayHi: function(){
document.write('hi~~')
}
}
//对象名.方法名()
person.sayHi()
注:千万别忘了给方法名后面加小括号
6.3操作对象
对象本质是无序的数据集合,操作数据无非是增删改查
语法:
查 | 查询对象 | 对象.属性 或者 对象['属性'] 对象,方法() |
改 | 重新赋值 | 对象.属性 = 值 对象,方法() = function(){} |
增 | 对象添加新的数据 | 对象名.新属性名 = 新值 |
删 | 删除对象中的属性 | delete 对象名.属性名 |
6.4遍历对象
能够遍历输出对象里面的元素
对象没有像数组一样的length属性,所以无法确定长度
对象里面是无序的键值对,没有规律,不像数组里面有规律的下标
let obj = {
name:'小明',
age:18,
sex:'男'
}
//for in 循环语句
//语法
//for (let k in 对象){}
//k 变量 k 或者 key
for(let k in obj){
console.log(k) //属性名
console.log(obj[k]) //属性值
// k === 'uname' === 'age' === 'sex'
// obj['sex'] === 18
}
遍历对象的语句——for in
遍历对象中,for k in obj,获得对象属性的是哪个,获得值是那个?
获得对象属性的是k
获得对象值是obj[k]
6.5内置对象
6.5.1内置对象是什么
JavaScript内部提供的对象,包括各种属性和方法给开发者调用