JavaScript基本语法
JavaScript的历史
JavaScript在1992年有网景公司开发(Navigator),995年Sun公司收购了JScript原来叫JScript,由于不够出名,更名为JavaScript
JavaScript的组成部分
JavaSscrpt的组成部分:DOM BOM ECMAscript。 ECMAscript是用于制定Js规范,统一js标准;DOM全称browser object model,浏览器对象模型。用于与浏览器做交互的窗口,DOM 全称document object model文档对象模型,他的作用是用于获取网页元素节点
什么是JavaScript
特点 轻量级 弱类型 脚本语言
轻量级:没有复杂的依赖
弱类型:没有太严格的规范
脚本语言:html css是标记语言,是一个名词,就好比每一个国家使用每一个国家的语言,每一种种族使用自己的种族语。
使用JavaScript方法
行内式
实例1
2
3
4
5<div onclick="alert('helloworld')">
点击一下会弹出
</div>
<!-- 注意 引号混合使用,需外双内单,不能两双或两单 -->
<a href="javascript:alert('hello world');">快点我</a>内嵌式
利用script标签 实例1
2
3
4
5<script>
// 这里写js逻辑部分,script可以放在页面任意部分,但是必须放在body后面,
// 因为代码的执行顺序是从上往下执行的,一但书写书写错误,那么会影响整个页面的加载
console.log('控制台打印输出 hello world')
</script>外链式
实例
1
2
3// 利用script的src属性引入外部js文件 script标签需放在body后面,
//script拥有src属性之后,script标签内部不要再放任何内容
<script src="./js/index.js"></script>
变量的定义与赋值
JavaScript自带一些关键字和保留字,常见的关键字的保留字详情有JavaScript常见关键字和保留字,使用 var
关键字即可定义一个变量
1 | var number = 10 |
根据ECMAScript制定规范,变量的命令我们一般采用驼峰命名发,即首字母小写,后面字母大写,变量的命名规则有以下几点
- 由数字 字母 下划线 $符构成
- 不能以数字开头
- 严格分区大小写,不鞥使用中文
- 不能以关键字个保留字命名
- 命名语义化
数据类型
ES5的数据类型分为两大类,分别是基本数据类型与复杂数据类型,复杂数据类型也成引用数据类型
常见的基本数据类型有Number String Boolean Null Undefiend五个构成,
示例
1 | //定义Number |
ES常见的数据类型有 Function Arr Object 正则
示例
1 | // 创建对象 |
简单数据类型与复杂数据类型的区别
简单数据类型又叫做值类型,复杂数据类型又叫做引用数据类型。他们存储的方式不同,一个是存在栈,一个存储在。简单数据类型在存储时,存储的是变量本身,他的存储位置在栈。复杂数据类型,在存储时,变量中存储的仅仅是一个地址
检测与转换数据类型
关键词 typeof
只能检测基本数据类型,不能检测复杂数据类型 写法1 typeof 变量名 写法2 typeof(变量名)
1 | var num = 10; |
为什么判断NaN是一个Number?
NaN不是一个数字,但是它是属于一个数字类型
转换数据类型
- 通过关键词
Number()
parseInt()
parseFlart()
可以实现字符串对数字的转换,示例 - 通过
Boolean()
可以实现非布尔值转换为布尔值 - 通过
toString()
可以实现非字符串转字符串
1 | var num = 10; |
总结:
parseInt会把数据转换为数字类型,之后开始从左往后查找,遇到第一个不为数字的字符就会返回这个数据前面的数字,如果遇到小数点,也会停止查找,返回小数点前面的数字
parseFlart方法会把数据转换为数字类型,之后开始自从左往右开始查找,遇到第一个不为数字的字符就会停止查找并返回这个字符前面的数字,如果遇到小数点,如果小数点后面是纯数字,就会正常输出小数点后面的内容,如果小数点后面有非数字的字符,那么就会遇到第一个非数字字符停止查找,输出非数字前面之前的内容
注意:如果转换的非数字不存在数字,就会返回NaN (Not on number
)
在js里,在非布尔值转布尔值中,只有0 NaN ‘’ null undefined 都为false,其他的都为true
在js中,在非字符串转字符串里,undefined和null没有toString方法
算数运算符
常见的算数运算符有 + - * / % 示例
1 | var a = 10; |
比较运算符
比较运算符有 > < >= <= == != === !==
1 | 比较运算符有 > < >= <= == != === !== |
总结
== 代表的是比较的是数值,=== 比较的是数值与类型
赋值运算符
赋值运算符有 = += -= *= /= %= 示例
1 | var num = 10; |
总结:=此时的含义就是把等号右边的内容赋值给等号左边,+的优先级大于等于,所以num=10时,在做加法运算,在做赋值运算
逻辑运算符
逻辑运算符 ||(或者) &&(与) !(非)
1 | var money = 6; |
总结:
- || 同假则假 一真为真
- && 同真则真 一假则假
- ! 取反 真则假 假则真
一元运算符
一元运算符也称自增自减运算符,有 ++i(前置++) i++(后置加加) i– –i
1 | var i = 10; |
如何理解i++ ++i
i++ 先赋值,在累加,i– 先累加 在赋值
分支结构
分支之if语句 示例
1 | // 单分支 |
分支之Switch语法 示例
1 | Switch(变量) { |
总结
Switch...case
不能直接进行范围判断- 条件判断必须是全等的判断,数值与类型必须全等才能匹配上
- 如果在
case
里面忘记写default,那么会根据顺序结构,依次向下执行,于是会把向下的结果都输出
三元运算符
三元运算符也叫三目运算符 语法:条件表达式?表达式1:表达式2 如果条件表达是成立,则执行表达式1,否则执行表达式2
1 | // 判断基偶数 |
三元运算符只能改基本的if…else语句 if…else但是不能改多分支语句
循环
循环之while语句 执行条件:初始值 结束条件 执行体 自增方法
1 | // while (结束条件) { 执行体; 自增条件 } |
区别:
do...while
不管条件是否成立都是执行一遍代码体while
只有条件成立才会成立代码体
注意:如果执行体没有自增条件,就会形成死循环
循环之for语句
1 | // for (初始化变量; 结束条件; 自增条件) { 执行体 } |
注意:break
需要放在if里面才能我们想要的结果,如果放在if条件外面,for里面,那么会终止整个程序的运行
总结:
break
关键字是终止本次循环continue
关键字是终止本次循环,进入下一次循环
函数
函数是一个容器,里面可以装很多代码,它的作用是重复的代码进行整合,把重复的代码放在一起,需要的时候直接调用是可以了。前面学的的Number() parseInt() parseFloat() String()这些方法,都可以叫函数,函数就是方法,方法就是函数。
代码示例
1 | // 声明式 |
注意:声明式函数调用可以喊页面中任意位置,赋值式函数调用只能在声明之后调用,否则会报错 myFn in not function
函数的传参
1 | var myFn = function(a,b,c) { // a b c 形参 |
总结
- 形参的个数大于实参,那么多余的形参个数的值是 undefined
- 实参的个数大于形参,那么多余的实参个数会被删除
- 每一个函数都有一个内置的参数叫做
arguments
,它是一个伪数组,他的特点是有长度,有下标,它里面内置了一个属性length
可以获取到他的长度 - 函数定义的变量或者计算出来的结果,在函数外面不好调用,在函数外面调用的时候,就需要使用
return
关键字 return
后面的语句将不再执行- 如果
return
后面有值,那么调用函数后返回的结果就是return后面的结果;如果return后面没有写内容,那么返回 undefined - 如果不写
return
,那么函数的返回结果就是 undefined
注意:如果直接写在 return
后面的语句会正常执行,但如果return后面写了分号或者折行后将不再执行
JS的预解析
1 | console.log(num) // undefined |
解析说明:
在进行 consolelog 之前,js会进行 预解析,它会先解析带有 var
和 function
关键字的变量,首先会进行变量提升,第一行会输出 undefined,是因为代码从上往下执行,把 var num
提升到上面,相等于第一行之前隐藏了第一行代码,只是我们看不到,然后代码才从上往下执行,但是没有赋值,直到第二行才给num赋值,第四行能够正常输出,遇到fn的时候就知道fn是一个函数,所以能够正常执行
作用域
作用域是指定义的变量的作用范围,全局作用域示例
1 | var num = 10; |
总结
- 写在
script
第一层的变量都是全局变量 - 写在全局的变量都会存储在
window
这个对象上 - 写在全局的变量可以在任意位置使用,直接写变量名的不会进行变量提升,
局部作用域(函数存在局部作用域)
1 | fn() |
在函数体中用 var
定义的变量,只能在函数体中起作用,这样的变量作用域叫做局部作用域;如果在函数体中定义的变量没有带var,那么代表的就是全局作用域的变量,但是必须在函数调用之后使用,否则 xxx is not defined*
变量的查找与赋值
1 | var num = 10; |
规则: 如果有就先赋值给自己作用域下的变量,如果没有择取上一级查找,如果上一级没有,会一直查找到window对象上,如果window中也没有才会报 xxx in not undefined
函数与事件的关系
1 | <div class= "box" id="myWrap" onClick="myClick()"></div> |
1 | .box {width:100px;height:100px;background-color:blue;} |
1 | function myClick() {console.log('被点击了')} |
常用鼠标事件
序号 | 事件名 | 作用 |
---|---|---|
1 | onclick | 点击事件 |
2 | ondblclick | 双击事件 |
3 | onmouseover | 鼠标滑过 |
4 | onmousemove | 移动事件 |
5 | onmouseup | 鼠标抬起事件 |
6 | oninput | 输入事件 |
7 | onchange | 输入内容触发事件 |
8 | onkeydown | 鼠标按下事件 |
9 | onkeyup | 鼠标抬起事件 |
递归
递归:递归就是函数自己调用自己
图片理解
代码示例
1 | // 求1-5的和 |
分析:
- n(5)->此时n=5,那么if条件不成立,所以执行return fn(4)+5; ->10+5
- fn(4)->此时n=4,那么if条件不成立:所以执行return fn(3)+fn(4)->6+4
- fn(3)->此时n=3,那么if条什不城立.,所以执行return fn(2)+fn(3) -> 3+3
- fn(2)->此时n=2,那么if条件不成立:所以执行return fn(1)+fn(2)->1+2 =3
- fn(1)->比时n=1,if条什成立,则返回1
对象的基本使用
万物皆对象对象,但是他是个具体的事物,比如一个人可以叫对象,但是一群人不能叫对象.
对象的示例
1 | // 字面量对象创建 |
通过内置构造函数new
创建对象
1 | var obj = new Object({ name: 'zs', age: '18' ,gender:'男'}) |
JavaScript基本语法-数据操作方法
数组
数组是一组数据的有序结合,他可以存储任意数据类型的值
数组创建之字面量
1 | var arr = [] |
通过内置构造函数new Array()
创建
1 | var arr2 new Array(1,3,'abc',['x','y','z']) |
一但通过构造函数的方式创建数组,那么如果数组中只放一个数字,那么这个数字代表的
是数组的长度,如果放多个数字,代表的是数组的内容
总结:数组有下标,有长度,长度与下标差一
数组的常用方法
1 | var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] |
方法 | 作用 | 代码示例 |
---|---|---|
push() | 在数组末尾添加元素,不限制个数 返回值是他的长度 | arr1.push(‘.net’,’go’) |
unshift() | 在数组前面添加元素,不限制个数,返回值是他的长度 | arr1.unshift(‘c#’,’vb’) |
pop() | 删除元素末尾的元素,返回值是它删除的元素 | arr1.pop() |
shift() | 删除元素开头的元素,返回值是它删除的元素 | arr1.shift() |
reverse() | 反转数组,返回值是反转后的数组 | arr1.reverse() |
sort() | 数组排序,默认是从小到大排序,但只能在10以内, 如果是10以上的数,需要传一个函数 |
var result = arr.sort(function(a,b){return a-b})a-b是升序 b-a是降序 |
concat() | 数组合并,返回值是合并后的新数组 , 谁写在合并的前面谁就在数组的前面 |
var result1 = arr.concat(arr1) |
join() | 把数组转换为字符串,返回值是转换后的字符串,如果不给参数, 默认一逗号隔开 , 如果有参数,就以参数中的值为连接符 |
arr.join(“*”) |
slice() | 查找数组中的某几项,如果只给一个参数,代表从开始索引截取到最后所有 ,返回值为所截取的索引 |
arr1.slice(开始索引,结束所有)</br/>两个参数,第一个参数为开始索引,第二个参数为结束索引,包含开始索引,不包含结束索引 |
splice() | 三个参数,返回值为删除的元素,如果只是添加,不删除内容, 那么会在你写的这个索引值位置添加 |
arr.splice(开始所有,删除个数,替换删除个数的内容) |
数组排序
把数组中的数组按照一定规则进行排序,通常在排序的时候我们排序的都是数组,排序分为冒泡排序和选择排序
冒泡排序:俩俩比较,不符合规则换位,难点在于表达式的使用与循环模型的应用
数组换位表达式 示例
1 | var arr = [3,2,5,4,2,1] |
注意:数组之中下标对应的数据只有一个,如果我们给对应下标的位置执行赋值,那么原有的数据就会被覆盖,换位的核心是把被覆盖的数据进行临时存储
用图片表示排序
代码编写
1 | // 从小到大排序 |
选择排序
假定最大最小值,判定后进行数据换位,他和冒泡排序的区别在于冒泡排序是从后往前排的,而选择排序是从前往后排的。它的核心在于把数组分为两个部分一部分为比较的数据位置,另一部分为剩余参与比较的位置
代码示例
1 | // 从小到大排序 |
总结
- 我们在完成比对之后,要把最小值和比较和比较数据位置的数据进行互换
- 我们在比较最小值的时候一定要记录最小值的下标,我们声明一个变量记录最小值下标即可
- 在经历一轮排序之后,我们可以确定数组的第0位就是数组之中最小值,我们把数组中最小值放在数组中第0位
数组去重
去除数组的重复项,可以通过双数组去重和查找去重实现,双数组去重的核心就是判定 newArr中是否已经存在我们将要存放的数据,我们使用indexOf
工具判定新数组中是否存在要存放的数据,如果data在数据中存在,返回下标,否则返回-1,代码示例
1 | var arr = [1, 1, 2, 3, 3, 3, 2, 2, 2, 4, 4, 4, 5, 5, 5, 5, 5]; |
查找去重
通过 splice
配合双层循环实现
1 | // 1. 获取所有的基准数据 ; 下标获取用循环更合适; |
字符串
创建字符串
1 | var str1 = "hello world" |
单引号和双引号创建字符串完全相同没有区别,在字符串之中使用’或者”字符这种时候我们可以区分双引号和单引号!
使用技巧:如果我们在字符串之中使用到了单引号,那么创建字符串时的引号就是双引号
1 | var str3 = "i'm Lilei"; |
如果我非得不区分!不用上面的技巧可以不可以使用单引号或者双引号字符,那可以,在字符前加上\转义运算就可以了;
1 | var str4 = 'i\'m Lilei'; |
构造函数创建字符串
构造函数 :就是调用函数前加 new
的函数
1 | var str5 = new String("hello world"); |
这种方式创建出来的字符串,它的数据类型是object使用起来和正常的字符串没有区别,如果想要转换常规的字符串那么直接调用 str5.tostring()
即可!
字符串概念
字符:计算机可以支持的字符进行了多次的扩张和多次的修改!目前所有计算机都支持的字符集是ASCII,ASCII码有128位字符构成!默认支持英语。更高级的字符集都是基于ASCII码进行扩展!我们目前的主流编码主要是unicode编码集;这个编码集共有65535个字符。我们所有的字符都可以转换成unicode编码,我们转换的方式\u
字符编码可以表示一个字符.unicode表示的字符和我们直接输入的字符是完全一致的
1 | var letter1 = "\u4e00"; |
字符串:一堆字符放在一起,我们就把这堆字符称之为字符串!
JavaScript基本网页制作
JavaScript进阶
1 |