js组成的3个部分
ECMAscript,BOM,DOM三部分
js书写位置
js是一门编程语言(高级语言)
js代码有三个位置可以书写(与css类似):
1.可以写在script标签下
<script>
alert('你好,js')
</script>
2.行内式
<button onclick="alert('你好,js')">你好,js</button>
3.外部式(外联式)
新建一个js文件(可以直接写js代码),然后引入
<script src="./js外部式.js"></script>
js中的输入与输出
1.弹出提示框
<script>
alert('你好,js')
</script>
2.弹出输入框
<script>
prompt('请输入一个数值')
</script>
3.弹出确认框
<script>
confirm('你喜欢我吗?')
</script>
4.在控制台打印
<script>
console.log('你觉得我在那里?');
</script>
在页面中显示
// 括号内可以输入html标签,必须要用引号括起来
document.write('<p>你好,js</p>')
数据类型
数据类型:String(字符串)、number(数字型)、boolean(布尔)、null(空)、undefined(未定义)
String(字符串):一切以 '单引号' "双引号" ``(反引号),包起来的内容都是字符串型
作用:用于展示文本
number(数字型):数值 数学中的任何数字
作用:一般用于数学计算
boolean(布尔):只有两个值 true(真),false(假)
作用:一般用于判断条件真假
nall(空):空值 只有一个值 空
undefined(未定义):未定义 只有一个值 undefined
变量
作用:在内存中存储数据
声明变量
声明变量:let(新版本,推荐使用),var
解释:在内存中开辟部分空间来存储数据
let 不允许重复定义相同的变量否则会报错
<script>
let age
</script>
变量赋值
把数据存储到变量中去
<script>
let age
age = 18
</script>
或者
<script>
// 一步到位
let age = 18
</script>
变量重新赋值
变量重新赋值会先把原有的数据销毁,在进行赋值
<script>
// 定义变量
let age = 18
// 重新赋值,销毁原有的数据,然后再赋值
age = 20
</script>
变量与变量之间交换数据
变量之间的赋值方式:先取出变量中的数据,复制拷贝,然后再赋值
因为变量重新赋值销毁原有的数据,所以我们需要定义3个变量,一个变量充当中介的作用
<script>
let i = 100
let j = 200
//中介
let k
// 先把i的数值赋值给k,这是k=100
k = i
// 吧j的值赋值给i,这是i=200
i = j
// 最后再把k的值赋值给j,这是j=100
j = k
</script>
变量的命名规范
如果有多个单词组成则采用小驼峰命名法(userName):首单词首字母小写,后面单词首字母大写
命名规则:强制遵守,不遵守则程序报错
变量名必须以: 字母、下划线_ 、符号、数字
变量不能使用关键字作为变量名
变量的调用方法
<script>
// 可以直接在输出代码的小括号中写入变量名,不需要加引号
let i = 100
let age = 18
alert(i)
console.log(age)
</script>
检测数据类型
<script>
// 用typeof来检测数据类型
let i = 100
// typeof写在前面然后用空格隔开变量名
console.log(typeof age)
</script>
常量的定义方法
推荐使用 const
<script>
// 圆周率
const PI = 3.14
console.log(PI)
</script>
字面量
js中的数据有两种使用方法
第一种 : 先存入变量中, 通过变量取值语法来使用
变量 : 指的是内存中的一块空间,里面的数据是可变的。(变量是内存空间)
第二种 : 不存入变量中,直接拿来使用
字面量 : 指的是一个固定的数据(字面量是数据)
运算符
加(+),减(-),乘(*),除(/),取余(%)
表达式 : 由运算符组成的式子
算术表达式 :由算术运算符组成的式子 例如 1+1
注意: 任何表达式,都一定会有运算结果
赋值运算符
<script>
let i = 100
// i = i +100
i+ = 100
//乘法除法取余减法均同理
</script>
自增/自减(后置)
<script>
let i = 100
// i = i+1
i++
// i = i-1
i--
</script>
连接符
<script>
let i = 18
// 如果输出语句中存在文字,则需要用+;俗称"引引加加"
alert('我今年'+i+'岁')
console.log('我今年'+i+'岁')
//新整方法 `${变量名}` 必须要用反引号
console.log(`我今年${i}岁`)
</script>
关系表达式
1.关系运算符作用 : 比较两个数据的关系
> >= < <= ==(相等) !=(不等) ===(全等) !==(不全等)
2.关系表达式 : 由关系运算符组成的式子 例如: 2 > 1
重点: 关系表达式的运算结果一定是布尔类型 : true成立 false不成立
=号注意点
= : 赋值运算符 右边数据存入左边容器
== : 相等运算 只比较值,不比较数据类型
=== : 全等运算 既比较值,也比较数据类型
逻辑运算符
0.关系运算符:某种条件的关系(成立/不成立),例如我的年龄大于你的年龄30>20
1.逻辑运算符:多个条件之间的关系
2.逻辑运算符只有三种
* && :逻辑与 ,读作并且
* || :逻辑或,读作或者
* ! :逻辑非,读作取反
* true(真)变false(假),false(假)变true(真)
3.逻辑表达式: 表达式1 逻辑运算符 表达式2
运算符优先级
运算符优先级: 不同的运算符在一个式子中的运算顺序
() : 优先级最高
一元: ++ -- !
算术
关系
逻辑
赋值
逗号
开发中遇到复杂的式子,一般使用()小括号提升优先级