一.javascript介绍
javascript是什么
1.概念：
是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
2.作用：
3.组成：
ECMAScript:
规定了Js基础语法核心知识，如：变量、分支语句、循环语句、对象等
Web APIs:
- DOM:操作文档，如对页面元素进行移动，大小， 添加删除等操作
- BOM：操作浏览器，如页面弹窗，检测窗口宽 度，存储数据到浏览器等
查资料网站：mdn
javascript书写位置
1.内部js
直接写在html文件里，用script标签包住
规范：script标签写在</body>上
拓展：alert('你好，js')页面弹出警告对话框
eg:
2.外部js
代码写在以,js结尾的文件里
语法：通过script标签，引入到htnl页面中
3.内联js
代码写在标签内部
javascript注释、结束符
注释
结束符
输入和输出语法
语法的概念：人和计算机打交道的规则约定
输入输出也可以理解为人和计算机的交互，用户通过键盘，鼠标向计算机输入信息，计算机处理后再展示结果给用户，这就是一次输入输出过程。
输出语法：
1.
document：文档
作用：向body内输出内容
注意：若输出内容为标签，也会被解析成网页元素
2.
页面弹出警告对话框
3.
控制台输出语法，程序员调试使用 console(控制台)log(日志)
页面不显示，调试工具里看
输入语法：
1.
作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
执行顺序：
字面量
在计算机中描述 事/物
二.变量
1.变量是什么
变量是计算机存储数据的容器
1.变量：
一个装东西的盒子，是计算机中用来存储数据的容器，它可以让计算机变得有记忆。
变量是容器，不是数据
生活中的变量：HTML标签、教师、宿舍.....
2.变量基本使用
1.声明变量 （一个变量只能声明一次）
语法：声明关键字（let：允许、许可、让）、变量名（标识）
eg:(age 即为变量名，也是标识符)
2.变量赋值：
变量名=值 （把值赋给变量）
变量初始化
3.更新变量
变量赋值后，还可以通过简单地给它一个不同的值来更新它。
一次只能存一个值，19覆盖18
4.声明多个变量
案例1：
案例2：
交换两个变量值：使用一个临时变量作为中间存储
3.变量的本质
内存：计算机中存储数据的地方，相当于一个空间
4.变量命名规则与规范
规则：必须遵守，否则报错
规范：建议，不报错
1.规则：
- 不能用关键字
关键字：有特殊含义的字符，js内置的一些英语词汇，如：let、var、if、for等。
- 只能用下划线(_)、字母(a)、数字、$组成，且不能用数字开头。
- 字母严格区分大小写，如Age和age是不同变量
2.规范
- 起名要有意义
- 遵守小驼峰算命法
第一个单词首字母小写，后面每个单词首字母大写，如：userName
5.let和var的区别
三.常量
1.概念：
使用const声明的变量
2.使用场景：
当某个变量永远不会改变的时候，就可以使用const来声明
3.命名规范
和变量一致
4.常量使用
<script>
// 声明一个常量
const G = 9.8
// 输出这个常量
console.log(G);
// 常量不允许再次赋值
// 常量声明的同时必须赋值(即初始化)
</script>
注意：
- 常量不允许再次赋值
- 常量声明的同时必须赋值(即初始化)
四.数据类型
1.数据类型
js数据类型分为两大类:
- 基本数据类型（简单数据类型/值类型）：在存储变量中存储的是值本身
number数字型
string字符串型
boolean布尔型
undefined未定义型
null空类型
- 引用数据类型（复杂类型）：存的是地址
通过new关键字创建的对象（系统对象，自定义对象），如object、array、date等
object对象
1.number数字型
- 整数、小数、正数、负数
- js是弱数据型语言，只有赋值了才知道是什么数据类型
1.1算术运算符
数字可以有很多操作，比如，加减乘除，取余。所以数字型经常和算术运算符一起搭配使用。
优先级：
- 优先级相同时，从左向右执行
- 乘、除、取余优先级相同
- 加、减优先级相
- 乘、除、取余优先级大于加、减
- 使用（）可以提升优先级
- 总结：先乘除取余，后加减，有（）先（）
特殊结果：
NaN:代表错误计算
2.string字符串类型
let str = 'annanan' let str1 = "nanan" let str2 = `nanan`
- 符号会找离它最近的另一半配对
字符串拼接
场景：+运算符
口诀：数字相加，字符相连
// 字符串拼接 1.数字相加2.字符相连
console.log(10 + 10);
console.log('周杰伦' + '帅')
console.log(uname + age)
console.log('周杰伦' + age + '岁了')
模板字符串
最外层用反引号` `包裹，里面用${变量名}
let age = 19
document.write(`我今年${age}岁了`)
3.boolean布尔型
有两个固定值： true(真）、false(假）
let weatherCool = false console.log(weatherCool);
4.undefined未定义类型
只有一个值:undefined
出现场景：只声明变量，不赋值的情况下，变量的默认值为undefined,一般很少直接为某个变量赋值为undefined.
5.null空数据类型
let nu = null console.log(nu);
null和undefined区别：
- undefined 表示没有赋值
- null表示赋值了，赋值为空
- undefined+1得到nan null+1得到1
null使用场景：作为尚未创建的对象（将来有个变量里存放的是一个对象，但现在对象还没创建好，可以先给null）
2.检测数据类型
第一种：在控制台看
第二种：通过typeof关键字检测数据类型
1.作为运算符（常见）：
typeof x
let num = 18 console.log(typeof num);
2.作为函数形式：
typeof(x)
let num = 18 console.log(typeof (num));
五.类型转换
1.为什么需要类型转换
例如使用表单，prompt获取过来的数据默认是字符串类型的，此时会影响数字型简单的直接运算
eg:
// prompt输入的数据默认字符串类型.此时会出现变量为数字类型,而输入数据显示字符串类型
let num = prompt('请输入年龄')
let num1 = prompt('请输入年龄')
document.write(num + num1);
// 若输入17, 18 结果会是1718.所以需要类型转换
2.隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换
- 规则
- +号两边只要有一个时字符串，都会把另外一个转换成字符串
- 除了+号以外的算数运算符，都会把数据转换成数字类型
- 技巧
- +号作为正号解析可以转换数据为数字型
- 任何数据和字符串相加结果都是字符串型
// prompt输入的数据默认字符串类型.此时会出现变量为数字类型,而输入数据显示字符串类型
let num = prompt('请输入年龄')
let num1 = prompt('请输入年龄')
document.write(num + num1);
// 若输入17, 18 结果会是1718.所以需要类型转换
// 1.隐式转换(+有一个字符串就转另一个也字符串,其他运算符全转成数据类型)
console.log(2 + '2'); //结果为22,+号系统自动把第一个2转换为字符串类型
console.log('haha' + 1); //结果为haha1,+号系统自动把1转换为字符串类型
console.log(2 - '2'); //结果为0,-号系统自动把第二个2转换为数字型
// +号转换字符串型为数字型
console.log(+'123'); //结果为数字型123
console.log(typeof +'123'); //检测一个结果为数字型123的数据类型:number
3.显示转换
自己写代码告诉系统应该转换成什么类型
转换为数字型
let str = '123'
console.log(Number(str));
let num2 = 123
console.log(String(num2));
//或者
let num3 = Number(prompt('请输入..'))
// parseInt转换,只保留整数
console.log(parseInt('12px'));//结果为12
console.log(parseInt('12.57px'));//结果为12
// parsefloat,保留小数
console.log(parsefloat('12px'));//结果为12
console.log(parsefloat('12.57px'));//结果为12.57
// 只能取前面是数字的情况
console.log(parsefloat('px12.57px'));//结果为nan
六.运算符
1.赋值运算符
- 对变量进行赋值的运算符 =
将等号右边的值赋给左边，要求左边必须是一个容器
其他赋值运算符
- +=
let num = 1 num = num + 1
let num = 1 num += 1
- -=
- *=
- /=
- %=
2.一元运算符
自增：
- 符号： ++
- 作用：变量值加1
前置自增：
let num = 10 ++num //num值加1
先自加再使用
let i = 1 console.log(++i + 1); // 先自加1，i值变为2，再加1。结果为3
后置自增：（常用）
let num = 10 num++ //后置自增，num值加1
先使用再自加
let e = 1 console.log(e++ + 1); /* 包含e++在内的整行代码执行完之后e才会自加，所以e先为1，加1.输出结果为2. 此时执行完成整句代码，e自加1，e值为2 */
注意：不参与运算时前置后置无区别
自减
- 符号 --
- 作用：变量值减1
3.比较运算符
- > 左边是否大于右边
- < 左边是否小于右边
- >= 左边是否大于等于右边
- <= 左边是否小于等于右边
- == 左右两边值是否相等 （判断）
- === 左右两边是否类型和值都相等 （全等）判断是否相等，推荐这个
- !== 左右两边是否不全等
比较结果为boolean布尔型，即只有true和false两种结果。
- 字符串比较：比较对应的ASCII码(a97A65 b+）
- 从左往右依次比较
- 如果第一位一样再比较第二位，以此类推
- 比较的少，了解即可
- NaN不等于任何值，包括它本身。涉及到NaN的都是false
- 尽量不比较小数，因为小数有精度问题
- 不同类型之间比较会发生隐式转换
- 最终把数据隐式转换成number类型再比较
- 所以再开发中，如果进行精确的比较我们更喜欢===或!==
4.逻辑运算符
| 符号 | 名称 | 日常读法 | 特点 |
| && | 逻辑与 | 并且 | 同真才真 |
| || | 逻辑或 | 或者 | 同假才假 |
| ！ | 逻辑非 | 取反 | 真变假，假变真 |
5.运算符优先级
| 优先级 | 运算符 | 顺序 |
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++ -- ! |
| 3 | 算术运算符 | 先*/%后+- |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先！后&&后|| |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | ， |
七.语句
1.表达式和语句
- 表达式 ：
是可以被求值的代码，可以写在赋值语句的右侧。eg:num=3+4
- 语句：
可以被执行的代码,不一定有值，比如alert() for和break等语句就不能被用于赋值
2.分支语句
程序三大流程控制语句
- 写几句代码就从上往下执行几句，叫做顺序结构
- 根据条件选择执行代码，叫做分支结构
- 某段代码被重复执行，就叫循环结构
分支语句
选择性执行想要的代码
分支语句包含：
- if分支语句
- 三元运算符
- swich语句
1.if语句：
有三种使用：单分支、双分支、多分枝
单分支使用语法：
if（条件）{
满足条件要执行的代码
}
- 括号内的条件为true时，进入大括号里执行代码
- 小括号内结果若不是布尔型时，会发生隐式转换为布尔类型
- 如果大括号只有一个语句，大括号可以省略，但不提倡
双分支：
if (条件) {
满足条件执行的代码
} else {
不满足条件要执行的代码
}
多分支语句：
if (条件1) {
代码1
} else if (条件2){
代码2
} else if (条件3){
代码3
} else{
代码n
}
2.三元运算符
符号：？和：配合使用
语法：
条件？满足条件执行的代码：不满足条件执行的代码
let first = +prompt('请输入第一个数')
let second = +prompt('请输入第二个数')
first > second ? conlose.log(`最大值为：${first}`) : console.log(`最大值为：${second}`)
3.swich语句
switch (数据) {
case 值1:
代码1
break
case 值2；
代码1
break
default:
代码n
break
}
释义：
- 找到和swich()里的数据全等的case值，并执行case里的代码
- 若没有全等===的，则执行default里的代码
4.if多分支语句和swich的区别
断点调试
3.循环
3.1while循环结构
while：在..期间，在满足条件期间，重复执行代码
1.基本语法：
while (循环条件) {
代码(循环体)
}
- 满足whlie()里的条件则执行代码
- while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足则再次执行，再判断，直到不满足时跳出循环。
2.while三要素
循环的本质就是以某个变量为起始量，然后不断产生变化量，慢慢靠近终止条件的过程。
- 变量起始值
- 终止条件（没有终止条件，循环就会一直执行，造成死循环）
- 变量变化量（自增自减）
let i = 1 //起始值
while (i <= 3) { //终止条件
document.write('循环三次')
i++ //变量变化量
}
3.循环退出
循环结束：
- break: 退出循环
- continue: 结束本次循环，继续下次循环
3.2 for循环-基本使用
语法：
优点： 可以把声明起始值、循环条件、变化值写在一起，是最常用的循环结构。
for (变量起始值; 终止条件; 变量变化值) {
//循环体
}
执行过程：
- 先执行let i=1,且只执行一次
- 判断i<=3 满足则执行代码打印 再开始i++进行下一次判断循环，不满足则跳出循环
循环数组：
需求：将数组['张飞','赵云','张飞','关羽','黄忠']依次打印出来
let arr = ['张飞', '赵云', '张飞', '关羽', '黄忠']
for (let a = 0; a <= arr.length - 1; a++) {
// arr.length - 1即数组长度减1，4
//也可以去掉=号，直接写a<arr.length
document.write(arr[a])
}
退出循环
- continue 退出本次循环，一般用于排除或者跳过某一个选项的时候
- break 退出整个for循环，一般用于结果已经得到，后续循环不需要了
for循环嵌套
外层执行一次，内层执行所有次
3.3 for 和while区别
八.数组
1.介绍
array 是一种可以按顺序保存数据的数据类型
1.因为一个变量只能存储一个单独数据，所以有数组可以将一组数据存在单个变量名下 ,实现一个变量存储多个值
声明语法：
let name=['张三'，'里斯'，...'李四']
2.注意：
- 按顺序保存，每个数据都有自己的编号(索引，下标)[0] [1]....
- 可以存储任意类型数据
- 使用数组中某一数据：
3.术语：
2.声明语法
// 1.字面量声明数组
let arr = [1, 2, 444, 33, 15]
// 2。使用new Array 构造函数声明
let arr1 = new Array(1, 2, 3, 4)
3.遍历数组
4.练习
5.操作数组（增删改查）
返回新数组长度
let arr = []
// 增：
arr[2] = 1000
arr.push(1, 2, 3, 4, 5, 6, 7, 8, 9) //在后面加
arr.unshift(6, 7) //在前面加
//删：
arr.pop() //删除从后面开始的1个，只能删一个
arr.shift() //删除从前面开始的第1个，只能删一个
arr.splice(0, 2) //开始删除的下标，删除个数
//改：
arr[0] = 900
// arr[i] = arr[i] + '10000' (写在for循环里)
案例
冒泡 排序
数组排序
九.函数
1.为什么要用函数
2.函数使用
函数声明： function
命名规范：
函数调用：
3.函数传参
声明语法：
调用方法：
形参和实参：
总结：
4.参数默认值：
形参默认值为0
5.函数返回值： return
语法：
返回值返回的是函数调用者
eg:
总结：
break:结束循环或swich
return:结束循环
6.函数作用域：
通常来说，一般程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域
作用域好处：提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
分类： 全局作用域、局部作用域
总结：
7.匿名函数
使用方式:
- 函数表达式
- 立即执行函数
1.函数表达式
将匿名函数赋值给一个变量，并且通过变量名称进行调用
语法：
调用：
变量名（）
如：fn()
区别：
具名函数可以在任何位置调用
匿名函数要先声明表达式再调用
2.立即执行函数
避免全局变量之间的污染
语法： 第二个小括号本质是调用函数
第一种写法：
第二种写法：
注意：立即执行函数后必须加分号，也可以加在前面
总结：
双击c+d选中相同修改
8.逻辑中断
1.逻辑运算符里的短路
通过左边能得到整个语句的结果，没必要判断右边
&&：
2.转换为布尔型
显示转换：
隐式转换：
十.对象
- 对象（object）:js里的一种数据类型
- 可以理解为一种无序的数据集合， 注意：数组 是有序的数据集合
- 用来描述某个事物，例如描述一个人
-
对象使用
对象声明语法：
对象由属性和方法组成
属性：信息或特征（名词），如手机大小，颜色，等等
方法：功能或行为（动词），如手机打电话，发短信等
增删改查 注意后来追加的都用=
注意： 命名时尽量不用name,可以用’‘或""包起来
此时查的方法为：（此方法命名两种都可以调用）
对象中的方法：
- 方法是由方法名和函数两部分组成，用：分割
- 多个属性之间用，
- 方法是依附在对象中的函数
- 方法名可以使用“”或‘’，一般省略，除非名称遇到特殊符号如空格、中横线等
方法调用：
对象名.方法名
遍历对象：
遍历数组对象
内置对象
math: math对象是js提供的一个“数学”对象
parseInt 只取整数部分 可以写字符串 但floor不行，只能放数字型
内置对象—生成任意范围随机数
- Math.random() 随机数函数，返回一个0-1之间，并且包括0不包括1的随机小数[0,1)
- 生成0-10的随机整数 [0,10]
Math.floor(Math.random() * ( 10 + 1 ))
- 生成5-10的随机整数[5-10]
Math.floor(Math.random()*(5+1))+5
- 生成N-M之间的随机数
Math.floor(Math.random()*(M-N+1))+N
随机点名案例
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '貂蝉', '上官'] let random = Math.floor(Math.random() * (arr.length)) document.write(arr[random])
改进：
猜数字游戏
function getrandom(N, M) {
return Math.floor(Math.random() * ( M- N + 1)) + N
}
//循环 不知道多少次，所以用while
while (true) {
let random = getrandom(1, 10)
let num = +prompt('输入0-10之间的一个整数')
if (num > random) {
alert('猜大了，继续')
} else if (num < random) {
alert('猜小了，继续')
} else {
alert('猜对了')
break
}
}
改进：
限定次数
//限定3次，有次数，所以用for
let flag = true //开关变量
for (let i = 1; i <= 3; i++) {
let num = +prompt('输入0-10之间的一个整数')
if (num > random) {
alert('猜大了')
} else if (num < random) {
alert('猜小了')
} else {
flag = false //猜对了，次数没用完时不报次数用完
alert('猜对了')
break
}
}
//写在循环外
if (flag) {
alert('次数已经用完')
}
生成随机颜色
null 空对象 检测类型为object
综合案例
拓展
2557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
