目录
1.JavaScript介绍
什么是JavaScript?
JavaScript的作用
JavaScript的组成
JavaScript的书写位置
JavaScript的输入输出语法
2.变量
什么是变量?
变量的基本使用
变量的命名规则与规范
数组
3.常量
4.数据类型
基本数据类型
number 数字型
string 字符串型
boolean 布尔型
undefined 未定义型
null 空类型
引用数据类型
object 对象
数据类型的转换
隐式转换
显示转换
检测数据类型
typeof
5.运算符
赋值运算符
一元运算符
比较运算符
逻辑运算符
运算符优先级
1.JavaScript介绍
什么是JavaScript?
JavaScript是一种运行在客户端(浏览器)的web编程语言,实现人机交互效果。
JavaScript的作用
1.网页特效(监听用户的一些行为让网页做出对应的反馈)
2.表单验证(针对表单数据的合法性进行判断)
3.数据交互(获取后台的数据,渲染到前端)
4.服务端编程(node.js)
JavaScript的组成
1.ECMAScript
规定了js的基础语法核心知识
2.Web APIS
BOM:操作浏览器
DOM:操作文档
JavaScript的书写位置
行内JavaScript
<body>
<button onclick="alert('笔芯')">点击我</button>
</body>
内部JavaScript
<body>
<script>
alert("你好,我是内部JavaScript");
</script>
</body>
外部JavaScript
<script src="./js/my.js"></script>
JavaScript的书写位置和CSS的书写位置差不多
JavaScript的输入输出语法
输入语法
prompt('请输入您的年龄:')
输出语法
// 1. 文档输出内容
document.write('我在页面输出')
// 2. 控制台打印输出
console.log('我在控制台')
// 3.页面弹出警示框
alert('我直接弹出')
2.变量
什么是变量?
变量是计算机用来存储数据的一个‘容器’,可以让计算机变得有记忆,变量不是数据本身。
变量的基本使用
声明一个变量可以用var let const 但是var的问题很多,现基础用let,后面会说const
// 1. 声明一个变量 let(用于声明变量的关键字) age(变量名)
let age
// // 2. 赋值
age = 18
console.log(age)
// 3. 声明的同时直接赋值 变量的初始化
let age = 18
变量可以一次声明多个变量
使用变量的小案例
声明两个变量并交换两个变量的值
let num1 = "成家";
let num2 = "立业";
let temp;
// 赋值的话都是把右边的值赋值给左边
temp = num1;
num1 = num2;
num2 = temp;
console.log(num1);
console.log(num2);
变量的命名规则与规范
1.规则
不能使用关键字。
关键字:有特殊含义的字符,JavaScript内置的一些英语词汇。例如:let,var,if等。
只能用下划线,字母,数字,$组成,且数字不能开头。
字母严格区分大小写。
2.规范
起名要有意义
遵守小驼峰命名法
数组
数组是有序的数据的集合,数组的下标从0开始。
//声明一个数组 数组[]
let arr = ['小红', '小明', '小芳', 10]
//使用数组 数组名[索引号]
console.log(arr[0]) // 小红
//数组长度=索引号+1
console.log(arr.length) // 4
3.常量
使用const声明的变量称为‘常量’
常量不允许重新赋值并且在声明的时候必须初始化(赋值)
命名规范和变量一致
当某个变量一直不会改变的时候,就可以用constr来声明。
4.数据类型
基本数据类型
number 数字型
平常使用的数字就是number数字型,可以是整数,小数,负数,正数。
数据类型的计算主要包括(+求和,-求差,*求积,/求商,%取余)
例如:求一个长为5m宽为2m的长方形的周长和面积
//声明这个长方形的长并赋值
let num1 = 5;
// 声明这个长方形的宽并赋值
let num2 = 2;
// 声明这个长方形的周长并求值
let sum = 5 * 2 + 2 * 2;
// 声明这个长方形的面积并求值
let area = 5 * 2;
console.log(sum); //14
console.log(area);//10
string 字符串型
通过单引号(''),双引号(""),反引号(``)包裹的数据都叫字符串型
console.log(11);//number型
console.log(`11`);//string型
蓝色为number型 黑色为string型
模板字符串 使用反引号`` 里面包裹 ${} `${变量名} `
let uname = prompt('请输入您的姓名:')
let age = prompt('请输入您的年龄:')
// 输出
document.write(`大家好,我叫${uname}, 我今年${age}岁了`)
boolean 布尔型
表示肯定或否定时在计算机中对应的是布尔类型数据
有两个固定的值一个是真(true)一个是假(fales),表示肯定的数据用true,表示否定的数据用false。
console.log(3 > 4);//fales
console.log(3 < 4);//true
undefined 未定义型
只有一个值undefined。
在只声明变量,不赋值的情况下,变量的默认值为undefined。
let num;
console.log(num);//undefined
null 空类型
JavaScript中的null仅仅是一个代表“无”,“空”或“值未知”的特殊值。
官方解释:null作为尚未创建的对象
let obj = null;
console.log(obj);//null
null和undefined的区别:
null表示赋值了,但是内容为空。
undefined表示没有赋值
引用数据类型
object 对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
//声明一个对象 声明关键字 对象名={}
let person={
firstname : "John",
lastname : "Doe",
id : 5566
};
数据类型的转换
隐式转换
某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。
+号两边只要有一个是字符串类型,都会把另外一个转换成字符串
除了+以外的算术运算符 比如- * / % 等都会把数据转成数字类型
+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串
显示转换
Number(数据) 转换成数字类型
parseInt(数据) 只保留整数
parseFloat(数据) 可以保留小数
String(数据) 转换成字符串类型
变量.toString(进制)
检测数据类型
typeof
typeof运算符可以返回被检查的数据类型。它支持两种语法形式:
1.作为运算符:typeof x(常用的写法)
2.函数的形式:typeof(x)
let num = 10;
console.log(typeof num);//number
let str = "pink";
console.log(typeof str);//string
let str1 = "10";
console.log(typeof str1);//string
let flag = false;
console.log(typeof flag);//boolean
let un;
console.log(typeof un);//undefined
let obj = null;
console.log(typeof obj);//object
综合案例
用户输入商品价格和商品数量,总价是自动计算
<!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>
h2 {
text-align: center;
}
table {
/* 合并相邻边框 */
border-collapse: collapse;
height: 80px;
margin: 0 auto;
text-align: center;
}
th {
padding: 5px 30px;
}
table,
th,
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<h2>订单确认</h2>
<script>
// 1 用户输入
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>Xiaomi 10</td>
<td>${price}元</td>
<td>${num}</td>
<td>${total}元</td>
<td>${address}</td>
</tr>
</table>
`);
</script>
</body>
</html>
5.运算符
赋值运算符
对变量进行赋值的运算符。=,+=,-=,*=,/=,%=
let num = 1;
// num = num + 1 //2
// 采取赋值运算符 简化
num += 1;//2
console.log(num);
一元运算符
目前常用的一元运算符:自增(i++)和自减(i--)
let i = 1;
i++;
console.log(i); //2
let sum = 5;
sum--;
console.log(sum);//4
比较运算符
> : 左边是否大于右边
<: 左边是否小于右边
>=: 左边是否大于或等于右边
<=: 左边是否小于或等于右边
==: 左右两边值是否相等
===: 左右两边是否类型和值都相等
!==: 左右两边是否不全等
比较结果为boolean类型,即只会得到 true 或 false
逻辑运算符
符号 | 名称 | 日常读法 | 特点 | 口诀 |
&& | 逻辑与 | 并且 | 符号两边都为true结果才为true | 一假则假 |
|| | 逻辑或 | 或者 | 符号两边有一个true就为true | 一真则真 |
! | 逻辑非 | 取反 | true变false false变true | 真变假,假变真 |
判断闰年案例:用户输入一个年份,判断是否为闰年
<script>
let year = +prompt("请输入一个年份");
if ((year % 4 == 0 && year % 100 !== 0) || year % 400 === 0) {
alert(`${year}是闰年`);
} else {
alert(`${year}是平年`);
}
</script>
运算符优先级
小括号>一元运算符>算术运算符>关系运算符>逻辑运算符