一、JavaScript介绍
JavaScript 是一种运行在客户端（浏览器）的编程语言
1、JavaScript 书写位置
1、内部 JavaScript
直接写在html文件里，用script标签包住[规范：script标签写在<body>上面]
<body>
<script>
alert("hellp")
</script>
</body>2、 外部 JavaScript（js文件多的时候）
代码写在以.js结尾的文件里建立并通过script标签，引入到html页面中；
<body>
<!-- 通过src进入外部文件js -->
<script src=".jx"></script>
</body>3、 内联 JavaScript
代码写在标签内部
<script>
<button onclick="alert()"></button>
</script>
2、JavaScript 的注释 与结束符
<body>
<script>
//单行注释；一次只能注释一行，可以多次注释 快捷键：ctrl + /
/* 多行注释可以任意换行多少行都可以 快捷键：shift + alt + A */
</script>
</body>结束符：是；分号，可以省略
3、JavaScript的输入和输出语法
<body>
<script>
//输出语法
//语法一
document.write('要输出的内容')//向body内输出内容
//如果输出的内容写的是标签，也会被解析成网页元素，如
document.write('<h1>要输出的内容</h1>')
//语法二
alert('要输出的内容')//作用:页面弹出警告对话框
//语法三
console.log("控制台")//控制台输出语法，程序员调试使用
//输入语法
prompt('想要输入的')//会弹出弹窗
</script>
</body>执行顺序，按照html文档里进行顺序，但是alert跟prompt优先执行
二、JavaScript的变量
1、变量的介绍
变量就是计算机用来存储数据的“容器”；注意变量指的是容器不是数据
2、变量的使用
<body>
<script>
// 1、声明标量；
// 语法：let 变量名
/* 举例：*/ let a
// 2、变量赋值：定义完一个变量后在变量名后加一个“=”
/* 举例：*/ a=10
// 3、声明变量时直接赋值
/* 举例：*/ let b=100
// 4、更新变量：变量赋值后，给他一个不同的值类更新他
/* 举例：*/let age=18
age=19 //但是let不能多次声明一个变量
// 5、声明多个变量：之间用，号隔开;但是不推荐，可读性比较低
/* 举例：*/ let p=10,o=100
</script>
</body>3、变量命名规则
1、不能用关键字
2、只能用下划线、字母、数字、$组成，且数字不能开
3、字母严格区分大小写，如 Age 和 age 是不同的变量
4、变量-数组
<script>
1、声明数组
let 数组名=[数组1，数组2，数组3，。。。，数组n]
//数组的编号也就是索引或者下标从0开始，以此类推
2、取值语法
数组名[下标]
例如：let 数组名=[数组1，数组2，数组3，。。。，数组n]
数组名[1]
document.write(数组名[1])//也就是打印结果为‘数组2’
3、数组中数据的个数
利用length来求数据的个数（长度）； 例如：
let 数组名=[数组1，数组2，数组3]
console.log(数组名.length); //也就是三个
</script>三、JavaScript的常量
1、概念：利用 const 声明的变量称为“常量”
2、常量不允许重新赋值,声明的时候必须赋值（初始化），并且后续不能更改
<script>
例如：const a=1
a=3//此处就没用
</script>四、数字数据类型和算术运算符
1、数字类型（Number）
正数、负数、小数等 统一称为 数字类型
<script>
NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果
例如： console.log('你好'-2) //此处就会返回NaN
任何对 NaN 的操作都会返回 NaN
列如：console.log(NaN-2) //返回NaN
</script>2、算术运算符
主要包括加+、减-、乘*、除/、取余（求模）%
3、字符串类型（string）
通过单引号（ ''） 、双引号（ ""）或反引号( ` ) 包裹的数据都叫字符串
<script>
let a = '小明' //使用单引号
let b = "小明" //使用双引号
let c = `小明` //使用反引号
let number ='123456' //把数字变成了字符串
let st ='' //空字符串
</script>
注意事项：
1、无论单引号或是双引号必须成对使用
2. 单引号/双引号可以互相嵌套，（口诀：外双内单，或者外单内双）
3. 必要时可以使用转义符 \，输出单引号或双引号
4、字符串拼接
数字相加，字符相连
<script>
document.write('我'+'你') //输出 我你
let a='ni',b='我'
document.write(a+b) //输出ni我
</script>5、模板字符串
用在拼接字符串和变量 （普通拼接太麻烦）
语法：外部用``反引号；用${}包住使用变量
<script>
let name = prompt("请输入您的姓名"), age = prompt("请输入您的年龄")
document.write(`大家好，我是${name},我今年${age}岁`)
</script>
6、布尔类型（boolean）
它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）
7、未定义类型（undefined）
只声明变量，不赋值的情况下，变量的默认值为 undefined
<script>
let a //声明变量但是未赋值
document.write(a) //输出undefined
</script>8、null（空类型）
<script>
null 仅仅是一个代表“无”、“空”或“值未知”的特殊
let obj = null
console.log(obj); //null
</script>9、null 和 undefined 区别
undefined 表示没有赋值
null 表示赋值了，但是内容为空
10、检测数据类型
通过 typeof 关键字检测数据类型
语法：1. 作为运算符： typeof x
2. 函数形式： typeof(x)
<script>
let a = '1'
console.log(typeof a); //运行结果为string
</script>五、类型转换
使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算
1、隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换
规则：+ 号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串
<script>
console.log('你好' + 2)//输出为 你好2
console.log('11' + 11);//输出为 1111
console.log('11' - 11);//输出为 0
console.log('1' * 2);//输出为 2
console.log(typeof '123');//输出为 string
console.log(typeof +'123');//输出为 number
console.log(+'11' + 11);//输出为 22
</script>2、显式转换
自己写代码告诉系统该转成什么类型；第一个字母都要大写
转换为数字型
方法：1、Number(数据)--如果字符串内容里有非数字，转换失败时结果为 NaN
2、parseInt(数据)--只保留整数
3、parseFloat(数据)--可以保留小数
<script>
let str ='1234'
console.log(Number(str));//转换为数字类型
</script>4、为Boolean型转换
语法：
Boolean(内容)
console.log(Boolean( 3));//输出为ture
console.log(Boolean( undefined));//输出为false
记忆： ‘’、0、undefined、null、false、NaN 转换为布尔值后都是false, 其余则为 true
转换为字符型: String(数据)
六、运算符
1、赋值运算符
‘=’赋值将等号右边的值赋予给左边, 要求左边必须是一个容器
其他赋值：+=；-= Ø；*= ； /= ； %=； 相当于num=num+1等于num+=1
2、自增自减运算符
自增：i++或者++i；自减：i--或者--i（通常使用在计数中）
<script>
1、 前置自增、自减
let a = 1, b = 1
console.log(++a + 2);//先给num加一再使用；结果为4
console.log(--b + 2);//先num减去一再使用，结果为2
2、 后置自增、自减
let c = 1, d = 1
console.log(c++ + 3);//先使用num再加一；结果为4
console.log(d-- + 3);//先使用num再减一；结果为4
</script>注意：前置自增自减和后置自增独立使用时二者并没有差别！
面试题：
<script>
let i = 1
console.log(i++ + ++i + i);//结果为7
/* 解释：i先使用一次，把使用完后的值给第二个i使用，再把使用完后的给第三个使用
也就是i++是1，使用完后i=2，再把i=2给++i使用，使用后i=3，最后使用i+3
式子也就是：1 +3 +3*/
</script>3、比较运算符
浮点数（小数）不参加比较，因为精度不好控制
字符串比较是比较的字符对应的ASCII码
注意：
<script>
1、比较运算符有隐式转换， 把‘2’ 转换为2.双等号只判断值
console.log(2 == '2');//答案是true
2、=== 全等判断要求 值和 数据类型都一样才行
console.log(2 === '2');//结果是false
3、NaN 不等于任何人包括他自己
console.log(NaN === NaN);//结果是false
三种区别：
= 是赋值
== 是判断 只要求值相等，不要求数据类型一样即可返回true
=== 是全等 要求值和数据类型都一样返回的才是true
</script>4、逻辑运算符
5、逻辑中断
alert(11&&22)//都是真，返回最后一个真值
alert(11||22)//都是真，输出第一个真值
alert(false && 22) //第一个错误直接输出错误值
alert(false || 22)//第一个错了第二个对的，打印第二个对的6、条件运算符
<script>
条件运算符“？”是一个三目；
语法： 表达式1 ？ 结果1： 结果二
先分析表达式一的值，如果值为真，则执行结果一，如果为假则执行结果二
let a = 10, b = 67, c
c = a > b ? '你好' : '帅哥'
alert(c)//运行结果为 帅哥
</script>7、运算符优先级
七、判断语句
1、表达式和语句
<script>
表达式是可以被求值的代码
如： x = 7 ；3 + 4；num++
语句是一段可以执行的代码。
如： prompt() 可以弹出一个输入框，还有 if语句 for 循环语句等等
</script>表达式：因为表达式可被求值，所以它可以写在赋值语句的右侧。
语句：而语句不一定有值，所以比如 alert() for和break 等语句就不能被用于赋值。
2、分支语句
1、If分支语句
<script>
//除了0以外所有的数字都为真
//所有的空字符串都为真‘ ’
1、if语句的单分支使用语法
if（条件）{//括号内的条件为真时，才能进入大括号里执行代码
满足条件要执行的代码
}
2、if语句的双分支使用语法
if (条件) {
满足条件要执行的代码
} else {
不满足if条件执行的代码
}
3、多分支if语法
if (条件1)// 先判断条件1，若满足条件1就执行代码1，其他不执行
{
代码1
}else if(条件2){// 若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
代码2
}else if(条件n)
{
代码n
}else{//若以上条件都不满足，执行else里的代码n
当以上代码都不运行时，运行此代码
}
</script>2、三元运算符 （三个操作数)
<script>
语法： 条件？ 满足条件执行的代码：不满足条件执行的代码
如：判断输入的数字的最大值
let num1 = +prompt("请输入第一个数")
let num2 = +prompt("请输入第二个数")
let sum = num1 > num2 ? num1 : num2
alert(`最大值为${sum}`)//${}表示占位引用
</script>3、switch语句
<script>
语法：//找到跟小括号里数据全等（===）的case值，并执行里面对应的代码
switch (数据){//必须存在break不然不会结束，会打印所有
case 值1:
代码1
break
case 值2:
代码2
break
default:
代码n
break
}
</script>八、循环语句
1、while循环
<script>
语法：
while(循环条件){
要重复进行的代码（循环体）
}
</script>三要素：1、变量起始值
2. 终止条件（没有终止条件，循环会一直执行，造成死循环）
3. 变量变化量（用自增或者自减）
<script>
let i = 1 //变量起始值
while (i <= 10) {//终止条件（没有终止条件，循环会一直执行，造成死循环）
document.write("要打印十次<br>")
i++//变量变化量（用自增或者自减）
}
</script>2、do—while循环 （不常用，基本不用）
区别于其他的循环主要特点是。意味着循环体将会无条件的执行一次
<script>
语法：
do{
执行语句
}while (循环条件)
</script>3、for循环
<script>
语法：
for (变量初始值; 终止条件; 变量变化量) {
循环体
}
</script>
</body>4、 循环退出
break:退出整个循环
continue:结束满足本次条件的循环，继续下次循环
5、无限循环
1、while(true) 来构造“无限”循环，需要使用break退出循环。
2、for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环。
6、for循环嵌套
<script>
语法：
for (外部声明记录循环次数的变量; 循环条件;变化值) {
for(内部声明记录循环次数的变量; 循环条件;变化值){
循环体
}
}
</script>九、数组
1、数组的基本使用
1、声明语法
let 数组名 = [数据1，数据2，...数据n]
数组的顺序编号是从0开始的2、取值语法
数组名[下标]
如：let name = ['22','33','55']
name[0]//输出223、 数组长度
数组中数据的个数为数组的长度，通过数组的length属性获得
如：name.length//name的数组的长度就为34、遍历数组 （重点）
用循环把数组中每个元素都访问到
<script>
for(let i =0;i<数组名.length;i++){
数组名[i]
}
例如：
let nums = [10, 20, 30, 40, 50]
for (let i = 0; i < nums.length; i++) {
document.write(nums[i])//依次打印数组里面的内容
}
</script>2、操作数组
1、操作数组-修改
语法：
<script>
let arr = [1, 2]
arr[0] = 3
alert(arr)//3,2修改了元素
arr[1] = arr[1] + "你好"
alert(arr)//3,2你好
</script>2、 操作数组-新增
<script>
1、数组名.push（） 将一个或多个元素添加到数组的末尾，并返回该数组的新长度
语法： arr.push(元素1,元素2,....,元素n)
例如： let arr = ['red', 'green']
arr.push('pingk')
alert(arr);//打印red,green,pingk
alert(arr.push('pingk'))//直接显示提添加后的数组长度
2、数组名.unshift() 将一个或多个元素添加到数组的开头，并返回该数组的新长度
语法： arr.unshift(元素1,元素2,....,元素n)
let a = ['ll', 'o', 'world']
a.unshift('he')
alert(a)//he,ll,o,world
alert( a.unshift('he'))//输出长度，输出添加后的新长度
</script>3 、操作数组-删除
<script>
1、数组.pop（）从数组中删除最后一个元素，并返回该元素的值
语法： arr.pop()
例如：
let arr=['red','gren']
arr.pop()//每次删除最后的一个
alert(arr)//red
2、数组.shift（）从数组中删除第一个元素，并返回该元素的值
语法： arr.shift()
例如：
let arr=['red','gren']
arr.shift()//每次开始的第一个
alert(arr)//gren
3、数组.splice（） 删除指定元素
语法：arr.splice(start(起始位置),deletecount(删除几个元素))
例如：
let arr=['red','gren','bule']
arr.splice(1,2)//从下标1开始删除俩，也就是gren和bule被删除了
alert(arr)//red
</script>4、数组排序
<script>
数组.sort（）
语法：
1、顺序
arr.sort(function(a,b)){
return a-b
}
2、降序
arr.sort(function(a,b)){
return b-a
}
例如：
let arr = [1,2,4,5,3]
arr.sort(function(a,b)){
return b-a}
alert(arr)//12345
</script>十、函数
1、函数的使用
1、函数使用语法：
function 函数名（）{
函数体
}
2、函数的调用语法
函数名（）
注意：声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数2、 函数传参
1、声明语法：
//声明语法中的参数列表是形参
function 函数名（参数列表）{
函数体
}
2、调用语法：
//调用语法中的参数列表是实参
函数名（传递的参数列表）
注意：1、多个函数传递参数时，括号里面要加逗号分隔两个参数
2、 形参不给值，默认是undefined
3、出现 undefined + undefined 结果NaN
3、用户不输入实参，可以给 形参默认值，可以默认为 0, 这样程序更严谨
例如
function getsum(x=0,y=0){
alert(x+y)
}
getsum()//结果时0，而不是NaN
getsum(1,2)//结果是33、函数的返回值
语法：
return 数据
1、 使用方法：例如：
function getSum(x, y) {
return x + y
}
let num = getSum(10, 20)
document.write(num)
2、返回多个值
语法： return [a, b]
实例： //以最大值最小值为案例
function getSum(arr = []) {
let max = arr[0]
for (let i = 0; i < arr.length; i++) {
if (arr[i] > max) { max = arr[i] }
}//上述为最大值
let min = arr[0]
for (let i = 0; i < arr.length; i++) {
if (arr[i] < min) { min = arr[i] }
}//上述为最小值
return [max, min]}
使用多个返回值
let newArr = getSum([1, 2, 2, 34, 4, 5, 6])
document.write(newArr)//打印返回的整个数组
document.write(`最大值为${newArr[0]}，最小值为${newArr[1]}`)//打印所用到的数组数据信息
4、函数使用注意点
1、定义了两个相同的函数，后面的函数会覆盖前面的；如：
function fn() { alert(2) }
function fn() { alert(3) }//只会打印后面的3
2、参数不匹配
function fn(x, y) { alert(x + y) }
//（1）实参多于形参，剩下的实参不参加运算
fn(3, 4, 5)//只会计算前两个4+3=7
//（2）实参少于形参
fn(3) //结果就是 1 + undefined = NaN
3、 return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写；如：
function fn(x, y) {、
return
x + y
}//输出的化结果为undefined5、函数的作用域
分为全局变量和局部变量
1、作用域
let num = 10 //全局变量
function fn(){
let str = 'nihao '//局部变量
2、注意：如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐；例如：
function fn(){
num=10 //局部变量来看强烈不允许
fn()
console.log(num)}
3、 形参可以看做是函数的局部变量；如：
function fun(x,y){
console.log(x)
fun(1，2)
console.log(x) //此时使用x的化会报错因为局部变量不能够被使用
4、访问原则：采取就近原则的方式来查找变量最终的值；例如：
let num= 10
function fn(){let num = 20
function fun(){
letrnum = 30
console.log(num)}
fun()}
fn()//输出结果为306、匿名函数
1、函数表达式
声明语法：
let fn = function(){//定义
函数体
}
调用：
fn()//函数表达式，必须先声明函数表达式，后调用
普通的定义可以使用在定义，但是匿名函数必须声明才能使用
2、立即执行函数
语法：
(function () { alert(11) })();
最前面的括号相当于声明，最后的括号相当于调用
(function (形参) { 函数执行体 })(实参)
如：
(function (x, y) { alert(x > y) })(3, 4)
扫一扫
3096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
