js(1)
js简介
javascript是一种运行在客户端（浏览器）的编程语言，实现人机交互的效果。
作用：
- 网页特效（监听用户的一些行为让网页做出反馈）
- 表单验证（针对表单数据的合法性进行判断）
- 数据交互（获取后台的数据，渲染到前端）
- 服务端编程（node.js）
js的组成：
ECMAScript:
规定了js基础语法核心知识（如：变量、分支语句、循环语句、对象等）
Web APls:
DOM操作文档，比如对页面元素进行移动、大小、添加删除等操作。
BOM操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等。
书写位置
内部js
直接写在html文件里，用script标签包住，script标签写在</body>上面
<body>
<script>
alert('警示框')
</script>
</body>
注：将js放在body闭合标签之前，是为了让网页在浏览器窗口中完全加载。
外部js
代码写在.js文件里
<body>
<script src="my.js"></script>
</body>
注：script标签中间无需写代码，否则会被忽略。
行内js
写在标签内部（了解）
<body>
<botton onclick="alert('警示框')">点击</botton>
</body>
js注释
//单行注释 ctrl + /
/*多行注释 shift + alt + a */
js结束符
使用：英文；代表结束，可以省略。
js输入输出语法
输出语法：
语法一：
document.write('要输出的内容')
作用：向body内输出内容
注：如果输出的内容写的是标签，也会被解析成网页元素。
语法二：
alert('要输出的内容')
作用：页面弹出警告对话框。
语法三：
console.log('控制台打印')
作用：控制台输出语法，程序员调试使用，用户不可见。（在检查，console中可见）
输入语法：
prompt('输入')
作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。
js代码执行顺序：
- 按html文档顺序执行js代码
- alert()和prompt()会跳过页面渲染先被执行
字面量
字面量(literal)是在计算机中描述事物
如：作文字数1000 1000是数字字面量；
‘程序员’ 是字符串字面量；
[]数组字面量；{}对象字面量 等。
变量
存储数据的盒子。
变量的基本使用
声明变量：
let 变量名
- 声明变量由两部分组成：声明关键字、变量名（标识）
- let即关键字，关键字是系统提供的专门用来声明变量的词语
let age
- 声明一个age变量
- age即变量名称，也叫标识符
变量赋值：
let age
age=18
//变量的初始化
let age=18
更新变量：
let age=18
age=19
注：let不允许多次声明一个变量。
声明多个变量：
多个变量之间用逗号分隔。
let age=18,uname='you'(不建议)
console.log(age,uname)
let age=18
let uname='you'
console.log(age,uname)
例题：
<script>
//输入用户名
//prompt('请输入姓名')
//内部处理保存数据
let uname=prompt('请输入姓名')
//在网页上打印输出
document.write(uname)
</script>
变量命名规则：
- 不能用关键字
- 只能用下划线、字母、数字、$组成，且不能是数字开头
- 字母严格区分大小写
- 小驼峰命名法：第一个单词首字母小写，后面每一个单词首字母大写
常量
- 使用
const声明一个不会改变的变量 - 命名规范同变量
- 常量不允许重新赋值，声明的时候必须赋值
- 不需要重新赋值的数据使用
const
const G=9.8
数据类型
基本数据类型
number数字型
let age = 18//整数
let price = 88.9//小数
js中正数、负数、小数等统一称为数字类型
注：js是弱数据类型，变量属于哪种类型，赋值后才确认；java是强数据类型，比如int a=3必须是整数
string字符串型
- 字符串型可以是引号中的任意文本单引号、双引号、反引号（1旁边）
- 推荐使用单引号表示字符串
- 因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号
let uname='小明' //使用单引号
let gender="12345" //使用双引号
let goods=`小米` //使用反双引号
let str='' //空字符串
注：嵌套引号使用“外单内双”或“外双内单”
也可使用转义符"\"
字符串的拼接
多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
注意：字符串 + 任何类型 =拼接之后的新字符串
+号总结口诀：数值相加，字符相连
//1 字符串相加
alert('hello'+' '+'World');//hello World
//2 数值字符串相加alert('100'+'100');//100100
//3 数值字符串+数值alert('12'+12);//1212
模板字符串
- 使用反引号``
- 内容拼接变量时，用${}包住变量
let age = 18
document.write('我今年${age}岁了')
boolean布尔型
布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。
var flag =true;
console.log(flag +1);
// 2 true当加法来看当1来看
undefined未定义型
一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）
undefined 和 字符串 相加，会拼接字符串undefined 和 数字相加，最后结果是NaN
// 如果一个变量声明未赋值，就是undefined 未定义数据类型
let str;
console.log(str); //undefined
//和字符串
let variable =undefined;
console.log(variable+'Pink');
//variablePink
//和数字
console.log(variable +18);//NaN
null空类型
一个声明变量给 null 值，里面存的值为空
null是一个对象。
var space =null;
console.log(space+'pink');
//nullpink
console.llog(space +1);// 1
引用数据类型
object对象
检测数据类型
作为运算符
typeof x(常用写法)
使用：
let num=10
console.log(typeof num) //number
let str='pink'
console.log(typeof str) //string
函数形式
typeof(x)
数据类型的转换
由prompt,alert,表单元素，单选框复选框得到的数据默认都是字符串。
隐式转换
某些运算符执行时，系统内部自动将数据类型进行转换。
- +号两边只要有一个是字符串，就会把另一个也转换为字符串
console.log(2+'2') //22
- 除了+号以外的算数运算符，都会把数据类型转换成数字类型
console.log(2-'2') //0
- +号作为正号解析可以转换成数字型
console.log(+'123') //转换为数字型
- 任何数据和字符串相加的结果都是字符串
显示转换
写代码进行类型转换
转换为数字型
Number(数据)
//例1
let str='123'
console.log(Number(str))
//例2
let num=prompt('输入年薪')
console.log(Number(num))
//例3
let num=Number(prompt('输入年薪'))
console.log(num)
//使用隐式转换
let num=+prompt('输入年薪')
console.log(num)
- 转换为数字类型
- 如果字符串内容里有非数字，转换失败时结果为NaN
- NaN也是number类型的数据，代表非数字
parseInt(数据)
只保留整数,不会四舍五入
console.log(parseInt('2.9px'))//2
parseFloat(数据)
可以保留小数
console.log(parseFloat('12px'))//12
console.log(parseInt('12.9px'))//12.9
运算符
算数运算符
| 运算符 | 描述 |
|---|---|
| + | 加 |
| - | 减 |
| * | 乘 |
| / | 除 |
| % | 取模（余数） |
赋值运算符
=将等号右边的值赋给左边，要求左边必须是一个容器
自增运算符
1、前置自增和后置自增如果单独使用效果是一样的
2、后置递增：先表达式返回原值后面变量再+1
3、前置递增：先变量+1，后表达式返回原值
4、与其他代码连用时，执行结果会不同
比较运算符
| 运算符 | 说明 |
|---|---|
< ，> | 大于，小于 |
<=,>= | 小于（大于）等于 |
!=,== | （不）等于 |
!==, === | 绝对（不）相等（值和类型） |
逻辑运算符
运算符优先级
| 运算符（优先级） | 顺序 |
|---|---|
| 小括号1 | () |
| 一元运算符2 | ++ – ！ |
| 算数运算符3 | 先* / %后+ - |
| 关系运算符4 | > >= < <= |
| 相等运算符5 | == != === !== |
| 逻辑运算符6 | 先&&后|| |
| 赋值运算符7 | = |
| 逗号运算符8 | , |
表达式和语句
表达式
可以被求值的代码，JavaScript引擎会将其计算出一个结果。可以写在赋值语句的右侧。
语句
一段可以执行的代码，如prompt()可以弹出一个输入框，if语句，for循环语句等。
程序的三大流程控制语句
- 从上往下执行，顺序结构
- 根据条件选择执行代码，分支结构
- 某段代码被重复执行，循环结构
分支语句
if分支
if单分支语句
由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果
// 结构
if(条件表达式){
// 执行语句
}
条件表达式为真，则继续执行大括号里面代码，为假则不执行
双分支语句
结构
if(条件表达式){
}
else{
}
多分支语句
就是利用多个条件来选择不同的语句执行得到不同的结果多选1的过程
//结构
if(条件表达式1){
//语句1
}
else if(条件表达式2){
//语句2
}
else if(条件表达式3){
//语句3
}
else{
//最后的语句
}
- 如果条件表达式1满足就执行 语句1执行完毕后，退出整个if 分支语句
- 如果条件表达式1不满足，则判断条件表达式2 满足的话，执行语句2 以此类推
- 如果上面的所有条件表达式都不成立，则执行else 里面的语句注意点。多分支语句还是多选1 最后只能有一个语句执行
- else if 里面的条件理论上是可以任意多个的else if 中间有个空格了
三元运算符
？和:配合使用
条件?满足条件执行的代码:不满足条件执行的代码
switch语句
switch(表达式){
case 值1:
代码1
break
case 值2:
代码2
break
default:
代码n
break
}
- 找到跟小括号里的数据全等的case值，并执行里面的代码
- 若没有全等==的则执行default里面的代码
注：switch case语句一般用于等值判断，不适合区间判断。
switch case语句一般需要break关键字使用，否则会造成case穿透
循环结构
断点调试
1、F12打开开发者工具
2、点sources一栏
3、选择代码文件
while循环
while(循环条件){
循环体
}
满足小括号里的条件为true才会进入循环体执行代码
while大括号里代码执行完毕不会跳出，会继续到小括号判断是否满足，若满足继续执行循环体，直到不满足时，跳出。
while循环三要素
1、变量起始值
2、终止条件（否则会造成死循环）
3、变量变化量（用自增或自减）
let i=1
while(i<=3){
document.write('循环三次<br>')
i++
}
循环退出
break:退出循环
let i=1
while(i<=5){
if(i===3){
break//退出整个循环
}
console.log(`这是${}`)
i++
}
continue:结束本次循环，继续下次循环
let i=1
while(i<=5){
if(i===3){
continue//退出本次循环，本次循环下面的语句不执行
}
console.log(`这是${}`)
i++
}
区别：
- continue一般用于排除或者跳过某一个选项的时候
- break一般用于已经得到结果的时候，后续循环不再需要执行
for循环
for(变量起始值;终止条件;变量变化量){
循环体
}
例：遍历数组
let arr=['1','2','3']
for(let i=0;i<=arr.length-1;i++){
console.log(arr[i])
}
循环嵌套
for(外部声明纪录循环次数的变量;循环条件;变化值){
for(内部声明纪录循环次数的变量;循环条件;变化值){
循环体
}
}
例：九九乘法表
<script>
//打印 九九乘法口诀表
var str = '';
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= i; j++) {
//1×2=2
//str=str;
str = str + j + '×' + i + '=' + i * j + '\t';
//'\t'表示此公式运行完以后，在一个tab空格
}
str = str + '\n';
}
console.log(str);
</script>
NaN
NaN代表一个错误，它是一个不正确的或者一个未定义的数学操作所得到的结果
console.log('老师'-2) // NaN
NaN是粘性的，任何对NaN的操作都会返回NaN
console.log(NaN+2) // NaN
数组
数组基本使用
声明数组
let 数组名=['数据1'，'数据2'，'数据3']
取值语法
//数组名[下标]
let name=['2','3','4']
name[0] //2
name[1] //3
数组长度
//数组长度
let arr=['2','3','4']
console.log(arr.length) //3
操作数组
查：数组[下标]
改：数组[下标]=新值
/*打印一个没有赋值的数组元素，结果是undefined*/
let arr=[]
console.log(arr[0])//undefined
let arr=['pink','red','green']
//修改
arr[0]='hotpink'
增：数组添加新的数据
- arr.push(新增内容)在数组末尾插入
将一个或多个元素添加到数组的末尾，并返回该数组的新长度(返回值为数组的新长度，在console中)
arr.push(元素1，元素2，元素n)
let arr=['red','green']
arr.push('pink')
console.log(arr)
//['red','green','pink']
- arr.unshift(新增内容)在数组开头插入
arr.unshift(元素1，元素2，元素n)
let arr=['red','green']
arr.unshift('pink')
console.log(arr)
//['pink','red','green']
删：删除数组中的数据
- arr.pop()
从数组中删除最后一个元素，并返回该元素的值
let arr=['red','green','blue']
console.log(arr.pop())//blue
//或者
arr.pop()
console.log(arr)
- arr.shift()
从数组中删除第一个元素，并返回该元素的值
let arr=['red','green','blue']
console.log(arr.shift())//red
//或者
arr.shift()
console.log(arr)
- arr.splice(操作的下标，删除的个数)
arr.splice(start,deleteCount)
start起始位置：
- 指定修改开始位置（从0计数）
deleteCount：
- 表示要移除的数组元素的个数
- 可选的。如果省略则默认从指定的起始位置删除到最后
案例：数组的筛选
<script>
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
//声明新数组
let newArr = []
//遍历旧数组
for (let i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
//满足条件追加给新数组
newArr.push(arr[i])
i++
}
}
console.log(newArr)
</script>
冒泡排序
- 冒泡排序是一种简单的排序算法。
- 它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
- 这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
- 比如数组[2,3,1,4,5]经过排序成为[1,2,3,4,5] 或者[5,4,3,2,1]
1、一共需要的趟数，用外层for循环
长度是数组长度减1 arr.length-1
2、每一趟交换次数，用内层for循环
长度就是数组长度减去次数，次数是从0次开始的 arr.length-i-1
<script>
// 冒泡排序
let arr = [4, 1, 2, 3, 5];
for (let i = 0; i<arr.length-1; i++) { // 外层循环管趟数
for (let j = 0;j<arr.length-i-1; j++) {
// 内部交换2个变量的值 前一个和后面一个数组元素相比较
if (arr[j] > arr[j + 1]) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
</script>
数组排序
arr.sort()方法可以排序
let arr=[4,2,5,1,3]
//升序排列写法
arr.sort(function(a,b){
return a-b
})
console.log(arr)//[1,2,3,4,5]
//降序排列写法
arr.sort(function(a,b){
return b-a
})
console.log(arr)//[5,4,3,2,1]
也就是说该数列已经排序完成。
- 这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
- 比如数组[2,3,1,4,5]经过排序成为[1,2,3,4,5] 或者[5,4,3,2,1]
[外链图片转存中…(img-PictTdRp-1683364495100)]
1、一共需要的趟数，用外层for循环
长度是数组长度减1 arr.length-1
2、每一趟交换次数，用内层for循环
长度就是数组长度减去次数，次数是从0次开始的 arr.length-i-1
<script>
// 冒泡排序
let arr = [4, 1, 2, 3, 5];
for (let i = 0; i<arr.length-1; i++) { // 外层循环管趟数
for (let j = 0;j<arr.length-i-1; j++) {
// 内部交换2个变量的值 前一个和后面一个数组元素相比较
if (arr[j] > arr[j + 1]) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
</script>
数组排序
arr.sort()方法可以排序
let arr=[4,2,5,1,3]
//升序排列写法
arr.sort(function(a,b){
return a-b
})
console.log(arr)//[1,2,3,4,5]
//降序排列写法
arr.sort(function(a,b){
return b-a
})
console.log(arr)//[5,4,3,2,1]
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
