JavaScript 基础
一
1.1JS的组成
ECMAScript:规定了js基础语法核心知识 比如:变量,分支语句,循环语句,对象等
WEBAPIs:
DOM: 操作文档,比如:对页面元素进行移动,大小,提娜佳删除等操作
BOM:操作浏览器,比如:页面弹窗,存储数据大浏览器等
1.2JavaScript输入输出语法
- 输出语法
语法一
document.write('要出的内容')//向body内输出内容
doucument.write('<h1>我是标题标签</h1>')//可以输出标签
语法二
alert('要弹出的内容')//页面弹出警告对话框
语法三
console.log('看看对不不对')//控制台输出语法,程序员调试使用
小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>document.write('你是狗吧')
console.log('zhehshi魔法')
alert('hapihapi')
</script>
</body>
</html>
- 输入语法
语法一
prompt('请输入你的年龄:')//显示一个对话框,其中包含一条文字信息,用来提示用户输入文字
二
2.1变量
变量就是容器,可以用来存储数据
2.2变量的基本使用
2.2.1变量的初始化
声明变量,变量名称,变量赋值
let声名的变量不允许多次声名
let age = 18
let uname = 'pink老师'
console.log(num)
console.log(uname)
2.2.2变量的更新
let age = 18, uname = 'pink老师'
age = 19
//此处不能写let age = 19 let声名的变量不允许多次声名
uname = 'orange老师'
console.log(num, uname)
2.3变量的本质
内存:计算机中存储数据的地方,相当于一个空间
变量本质:是程序在内存中申请的一块用来存放数据的小空间
2.4变量命名规则与规范
规则(必须遵守):
- 不能用关键字if,var,let,for等
- 只能用下划线,字母,数字,$组成且数字不能开头
- 字母严格区分大小写,如Age与age是不同变量
规范(最好遵守):
- 起名要有意义
- 遵守小驼峰命名法:第一个单词首字母小写,后面每个单词首字母大写例userName
2.5数组(Array)
JS的数组跟c语言的数组不一样在c中一个数组中的元素都需要是同一个数据类型,JS中随便
将一组数据存储到一个变量名称
let arr = [10,20,30,40]
//let arr = ['刘德华','张学友','黎明','郭富城']
console.log(arr[i])//其中i是索引号或下标号
console.log(arr.length)//数组长度=索引号+1
2.6常量
- 概念使用const声名的变量称为常量
- 当某个变量永远不会改变的时候,就可以用const来声明,而不是let
- 命名规范和变量一样
- 使用
const G = 9.8
console.log(G)
- 注意:常量不允许重新赋值,生命的时候必须初始化
- 小技巧:不需要重新赋值的数据使用const
| let | var | const |
|---|---|---|
| 现在实际开发变量声明方式(局部变量用完就死翘翘了) | 以前声名变量方式,会有很多问题 | 类似于let,但值无法被修改 |
2.7数据类型
数据类型分为两类:基本数据类型和引用数据类型
基本数据类型:
- number数字型
- 默认值:0
三个特数量infinity,代表无穷大,打鱼人和数量
-infinity,代表无穷大,打鱼人和数量
NaN:代表一个非数值
可以是整数,小数,正数,负数
算术运算符中先乘除取余(从左到右)再加减
- string字符串型 :默认值:’ ’
通过单引号(‘’),双引号(“”)或反引号(``)漂号都是字符串类型
使用’+'可以实现字符串的拼接
console.log('pink'+'老师')
模板字符串
let uname = prompt('您的姓名:')
let age = prompt('您的年龄:')
document.write(`大家好,我叫${uname},今年${age}岁了`)
- boolean布尔型默认值:false
只有两个固定的值true和false
let iStudy = true
console.log(iStudy)
- undefined未定义型 默认值:undefined
只有一个值,只声名变量不赋值的变量为未定义型
如果检测变量为undefined说明值还未传过来
- null空类型
不确定存什么数据类型时使用
表示已经赋值,但为空,undefined没有赋值.
将来有个变量存放的是一个对象,但对象还没创建号,先给个null
引用数据类型:
- object对象
检测数据类型
通过typeof关键字检测数据类型,typeof可以返回被检测的数据类型
let age = 18 ,uname = '刘德华' ,flag = true
console.log(typeof uname ,age)//两种写法
console.log(typeof(flag))//两种写法
2.8类型转换
易错点:使用表单,prompt获取过来的数据默认是字符串类型的,此时就不能进行简单的加法运算
2.8.1隐式转换为数字型
某些运算再执行时系统会自动将数据类型进行转换,这种转换成为隐式转换
规则:
- +号两边只要有一个是字符串,就会把另一个转化为字符串
- 除了+号以外的运算符如-*/等都会把数据类型转换为数字类型
- +'123’可以将字符串类型转化为数字类型
小测验
console.log(11 + 11)//22
console.log('11' + 11)//1111
console.log(11 - 11)//0
console.log('11' - 11)//0
console.log(1 * 1)//1
console.log('1' * 1)//1
console.log(typeof '123')//string
console.log(typeof +'123')//number
console.log(+'11' + 11)//22
2.8.2显式转换为数字型
自己强制转换
-
Number(数据) 转换成数字型
-
parseInt(数据) 只保留整数
-
parseFloat(数据) 可以保留小数
-
prompt(1 + ‘’)//在数字后面加上空的字符串能转化为字符串型
比较两个浮点数(浮点数一般都是小数点后14位数),所以比较多时候
console.log(parseFloat('12px'))//12不是12.0
console.log(parseFloat('12.34px'))//12.34
console.log(parseFloat('12.69px'))//12.69
console.log(parseFloat('abc12px'))//NaN 数字前面不能有字符串
2.8.3转换为字符串型
- num.toString
- string()
测试
let num1 = +prompt('请输入第一个数字:')
let num2 = +prompt('请输入第二个数字:')
alert(num1 + num2)
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
h2 {
text-align: center;
}
table {
border-collapse: collapse;
height: 100px;
}
table,
th,
tr,
td {
margin: 0 auto;
border: 1px solid #000;
}
td,
th {
padding: 0 30px;
text-align: center;
}
</style>
<body>
<h2>订单确认</h2>
<script>
let num = +prompt('请输入商品数量:')
let price = +prompt('请输入商品价格:')
let address = prompt('请输入收货地址:')
let total = num * price
document.write(` <table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米手机青春版PLUS</td>
<td>${price}元</td>
<td>${num}</td>
<td>${total}元</td>
<td>${address}</td>
</tr>
</table>`)
</script>
</body>
</html>
三
3.1运算符
- 赋值运算符
= 将等号右边的值赋予左边,要求左边必须是一个容器
+= -= *= /=
- 一元运算符
+'123’中的+
自增一元运算符 ++
let i = 1
console.log(i++ + ++i + i)//7
-
比较运算符
比较字符对应的ASCII码
===:左右两边是否类型和值都相等(全等)
!==:不全等
console.log(2 == '2')//true 其中有隐式转换
console.log(2 === '2')//false 严格判断 推荐
console.log(NaN === NaN)//false 严格判断
- 逻辑运算符
与或非
运算符的优先级
| 优先级 | 运算符 | 包含 |
|---|---|---|
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++ – ! |
| 3 | 算术运算符 | 先* % /再+ - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === 和 ! == |
| 6 | 逻辑运算符 | 先&&后|| |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
一元运算符中逻辑非优先级很高
逻辑与比逻辑或优先级高
3.2语句
- 表达式和语句
表达式:是可以被求值的代码,有值
语句:是一段可以被执行的代码,不一定有值
- 分支语句
if分支
三元运算符分支
使用场景:比if双分支更简单发写法,可以使用三元表达式
语法:条件 ? 满足条件执行的代码 : 不满足条件执行的代码
一般用来取值
let sum = 3 < 5 ? 3 : 5
console.log(sum)
数字补0案例
let num = prompt('请输入:')
num = num < 10 ? 0 + num : num
alert(num)
switch语句分支
找到跟小括号里面数据全等的case值并执行里面对应的代码
若没有全等===的则执行default里的代码
一般用于等值判断,不用于区间判断
/*switch(数据){
case 值1:
代码一
break//退出switch
case 值2:
break//退出switch
default:
代码n
break//退出switch
}*/
测验
let num1 = +prompt('请输入第一个数:')
let num2 = +prompt('请输入第二个数:')
let y = prompt('请输入要进行的操作符:')
switch (y) {
case '+':
alert(num1 + num2)
break
case '-':
alert(num1 - num2)
break
case '*':
alert(num1 * num2)
break
case '/':
alert(num1 / num2)
break
case '%':
alert(num1 % num2)
break
default:
alert('error')
}
- 循环语句
循环退出
break:退出循环
一般用于结果已经找到
continue:退出本次循环,进行下一次循环.上一行加i++
一般用于跳过某一项
测试存钱取钱
let money = 100
while (true) {
let re = +prompt(`
请您选择操作
1.存钱
2.取钱
3.查看余额
4.退出
`)
if (re === 4) break
if (re === 1) {
let cun = +prompt(`请输入要存的金额:`)
money += cun
}
if (re === 2) {
let qu = prompt(`请输入要取的金额:`)
money -= qu
}
if (re === 3) {
alert(money)
}
}
for循环最大作用就是打印数组
let arr = ['刘德华', '刘晓强', '刘晓庆','刘若英']
for(let i = 0;i < arr.length;i++)
console.log(arr[i])
for循环嵌套
打印5*5星星
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 5; j++) {
document.write('⭐')
}
document.write('<br>')
}
倒三角
for (let i = 1; i <= 5; i++) {
for (let j = 1; j <= i; j++) {
document.write('⭐')
}
document.write('<br>')
}
乘法口诀表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
display: inline-block;
height: 20px;
width: 90px;
text-align: center;
border: 3px solid pink;
margin: 5px 5px;
border-radius: 10px;
box-shadow: 5px 2px #eee;
}
</style>
</head>
<body>
<script>
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= i; j++) {
document.write(`<span>${j}*${i} = ${i * j}</span>`)
}
document.write('<br>')
}
</script>
</body>
</html>
3.3数组
求已知数组的和与平均值
let sum = 0
let arr = [2, 6, 1, 7, 4]
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
document.write(sum)
document.write('<br >')
document.write(sum / arr.length)
求已知数组最大值最小值
<script>
let arr = [2, 6, 1, 77, 52, 25, 7]
let max = arr[0], min = arr[0]
for (let i = 0; i < arr.length; i++) {
if (arr[i] > max) max = arr[i]//arr[i] > max ? max= arr[i] : max
if (arr[i] < min) min = arr[i]//
}
document.write(`最大值是${max}<br> 最小值是${min}`)
</script>
3.3.2操作数组
- 查:查询数组数据(访问数组数据)
- 改:重新赋值 数组[下标]=新值
用下标直接改就完事了 统一改可以for用循环
增数组添加新的数据
arr.push(新增的内容)
方法将一个或多个元素添加到数组的末尾,并且返回新数组的长度
<script>
let arr = ['pink', 'hotpink']
arr.push('deeppink','lightpink')
console.log(arr)
console.log(arr.push('deeppink'))//arr.push()返回值是新数组的长度2+2
</script>
arr.unshift(新增的内容)
将一个或者多个元素添加到数组的开头,并且返回新数组的长度
语法同arr.push()
筛选数组中的元素
let arr = [2, 0, 6, 1, 77, 0, 52, 25, 7]
let a = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] >= 10) a.push(arr[i])
}
document.write(a)
删:删除数组中的数据
arr.pop()
删除数组中的最后一个元素,并且返回该元素的值
arr.shift()
删除第一个元素,并且返回删除的值
arr.splice(操作的下标,删除的个数) 可以删除指定的元素
使用场景:随机抽奖,中奖的用户就需要从数组里删除,不允许重复抽奖
点击删除按钮,相关数据会从商品数据中删除
let arr = ['pink', 'deeppink', 'lightpink']
arr.splice(1, 1)
console.log(arr)//arr=['pink','lightpink']
3.4综合案例渲染柱形图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
justify-content: space-around;
align-items: flex-end;
text-align: center;
height: 500px;
width: 1000px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
margin: 100px auto 0;
}
.box .shuju {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: pink;
width: 50px;
}
.box .shuju span {
margin-top: -20px;
}
.box .shuju h5 {
/* margin-left: -10px; */
margin-bottom: -20px;
}
</style>
</head>
<body>
<script>
let arr = []
for (let i = 1; i <= 4; i++) {
let num = prompt(`请输入第${i}季度`)
arr.push(num)
}
document.write(`<div class="box"> `)
for (let i = 0; i < 4; i++) {
document.write(`<div class="shuju" style="height:${arr[i]}px">
<span>${arr[i]}</span>
<h5>第${i + 1}季度</h5>
</div>`)
}
document.write(`</div> `)
</script>
</body>
</html>
3.5冒泡排序
//原理 <script>
let temp
let arr = [1, 54, 4, 45, 484, 5, 7, 84, 84, 4, 8489, 7489, 4]
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
temp = arr[j + 1]
arr[j + 1] = arr[j]
arr[j] = temp
}
}
}
document.write(arr)
</script>
实际开发中使用函数
let arr = [2,1,3,5,4]
arr.sort()
document.write(arr)//arr=[1,2,3,4,5]默认升序用函数可实现降序
5924
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
