JavaScript笔记
title: JavaScript笔记
date: 2023-03-22 15:51:10
tags: JavaScript
category: 编程
JavaScript笔记
JS基础
打印输出
<script>
// 文档输出内容
document.write("Hello World")
document.write('<h1>一级标题</h1>')
// 页面弹出警告对话框
alert("弹出的内容")
// 控制台打印输出
console.log("Hello World");
</script>变量
<script>
// 声明变量
let age
// 赋值
age = 18
// 打印输出
console.log(age);
document.write(age)
// 直接声明+赋值
let age2 = 19
document.write(age2)
</script>键入
<script>
// 用户输入
// prompt("请输入用户名")
let name = prompt("请输入用户名")
// 打印键入值
document.write(name)
</script>变量交换
<script>
let num1 = 1
let num2 = 2
let temp
temp = num1
num1 = num2
num2 = temp
document.write(num1,num2)
</script>数组
<script>
// 声明数组
let list = [1,2,3,4,5]
// 全部打印
// document.write(list)
// 打印3
document.write(list[2])
// 数组元素的个数
document.write(list.length)
</script>常量
<script>
// 常量的声明
const PI =3.14
document.write(PI)
</script>数据类型与检测
<script>
// 检测数据类型 typeof
//基本数字类型
//1.数字类型 Number 包括整数 小数 正负数
// let num =10
// document.write(num)
// + - * 除 / 取余 %
// console.log(1+1);
// 例 算圆的面积
// let r = prompt("请输入圆的半径")
// let re = 3.14*r*r
// document.write(re)
// 2.字符串类型string
// let str = "Alax"
// console.log(str);
// 模板字符串 拼接字符串和变量 ``+{}
// let age =18
// document.write(`我今年${age}岁了`)
// 例
// let name = prompt("请输入您的姓名")
// let age = prompt("请输入您的年龄")
// document.write(`我叫${name},今年${age}岁了`)
//3.布尔 boolean
// let isCool = true
// console.log(isCool);
// 例子
// console.log(3>4);
// 4.未定义 undefined
// 声明一个变量未赋值即使undefined
// let num
// console.log(typeof num);
// console.log(num);
// 5.空 null
// let a = null
// console.log(a);
// null的数据类型是object
// console.log(typeof a);
</script>数据类型转换
<script>
// 1.隐式转换
//console.log(1+1); //2
// console.log("Alax"+1); //Alax1
//console.log(2-2); //0
//console.log(2-'2'); //0
//console.log(+12);
//console.log(+'123'); //+有转换成数字型的作用
// 2.显示转换
// let str = '123'
// console.log(Number(str)); //字符转数字
// console.log(Number('AlaxEleven')); //无法转换
// let num = prompt('输入年纪') //num为字符串
// console.log(Number(num)); //字符串转数字
// let num2 = Number(prompt("请输入年纪")) //字符串转数字
// let num3 = +prompt("请输入年纪") //字符串转数字
// parseInt 取整数部分
// console.log(parseInt('12px')); //12
// console.log(parseInt('12.34px')); //12
//console.log(parseInt('12.94')); //12
// parseFloat 保留小数
// console.log(parseFloat('12px')); //12
// console.log(parseFloat('12.34px')); //12.34
// console.log(parseFloat('12.94')); //12.94
</script>综合案例
<body>
<h2>订单确认</h2>
<script>
// 用户输入
let price = +prompt("请输入商品价格")
let num = +prompt("请输入商品数量")
let address = prompt("请输入收货地址")
// 2.计算价格
let total = price * num
// 3.页面打印
document.write(`
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收获地址</th>
</tr>
<tr>
<td>小米13Ultra</td>
<td>${price}元</td>
<td>${num}</td>
<td>${total}</td>
<td>${address}</td>
</tr>
</table>
`)
</script>运算符
赋值运算符
<script>
let num =1
num=num +1
console.log(num) //2
</script>一元运算符
<script>
// let num =10
// num = num +1
// num+=1
// 前置自增
// let i = 1
// ++i
// console.log(i);
// 后置自增
// let j = 1
// j++
// console.log(j);
</script>自增运算符
<script>
// let num =10
// num = num +1
// num+=1
// 前置自增
// let i = 1
// ++i
// console.log(i);
// 后置自增
// let j = 1
// j++
// console.log(j);
</script>比较运算符
<script>
/*
> 左边是否大于右边
< 左边是否小于右边
>= 左边是否大于或等于右边
<= 左边是否小于或等于右边
== 左右两边值是否相等
=== 左右两边是否类型和值都相等
!== 左右两边是否不全等
*/
</script>逻辑运算符
&&与
||或
! 非运算符优先级
| 优先级 | 运算符 | 顺序 | ||
|---|---|---|---|---|
| 1 | 小括号 | () | ||
| 2 | 一元运算符 | ++ -- ！ | ||
| 3 | 算术运算符 | 先*/% 后+- | ||
| 4 | 关系运算符 | > >= < <= | ||
| 5 | 相等运算符 | == != === !== | ||
| 6 | 逻辑运算符 | 先&& 后\ | \ | |
| 7 | 赋值运算符 | = | ||
| 8 | 逗号运算符 | ， |
表达式和语句
if单分支语句
<script>
//if单分支语句
/*
if(条件){
}*/
// 除了0所有的数字都为真
// 除了''所有的字符串都为真
if(true){
console.log("语句执行");
}
</script>if双分支语句
<script>
// if双分支语句
/*if(条件){
满足则执行
}
else{
不满足则执行
}*/
// 例子
// 1.用户输入
/*
let name = prompt("请输入用户名:")
let pwd = prompt("请输入密码:")
// 2.判断输出
if(name === 'Alax' && pwd === '123456')
{
alert("登陆成功")
}
else{
alert("用户或密码错误")
} */
// 2. 判断闰年
// 能被4整除但不能被100整除，或者被400整除
// 用户输入
/*
let year = +prompt("请输入年份")
// 判断输出
if(year % 4 ===0 && year % 100 !==0 || year%400 ===0)
{
alert(`"${year}年是闰年"`)
}else{
alert(`"${year}年是平年"`)
}*/
</script>if多分支语句
<script>
if(条件){
代码1
}else if(条件2){
代码2
}else if(条件3){
代码3
}
</script>三元运算符
<script>
// 条件 ? 满足条件执行 : 不满足执行
3 < 5 ? alert("真的") : alert("假的")
// 案例 数字补0
// 输入1个数 小于10 前面补0
// 输入
let num = prompt("请输入一个数字")
// 输出
num = num <10 ? 0 +num :num
alert(num)
</script>