JavaScript
组成
ECMAScript
规定了js基础语法核心知识
比如:变量、分支语句、循环语句、对象等等
Web APIs
DOM
操作文档,比如对页面元素进行移动、大小、添加删除等操作
BOM
操作浏览器,比如页面弹窗,检测窗口宽度,存储数据到浏览器等等
书写位置
1.内部
直接写在html中用script标签包住
script标签写在</body>上面
<body>
<script>
// 页面弹出警示框
alert('hello')
</script>
</body>
2.外部
代码写在以.js结尾的文件里
外部会使代码更加有序更易于复用,且没有脚本的混合,HTML也会更易读
<body>
<!-- 通过src引入外部js文件 中间不要写内容-->
<script src="文件名.js"></script>
</body>
3.内联
代码写在标签内部
<body>
<button onclick="alert('')"></button>
</body>
输出语法
document.write('输出内容')
向body内输出内容
如果输出的内容写的是标签,也会被解析成网页元素
alert('输出内容')
页面弹出警告对话框
console.log('控制台打印')
控制台输出语法,程序员调试使用
输入语法
prompt('输入内容')
显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字
<body>
<script>
prompt('请输入您的名字')
</script>
</body>
代码执行顺序
按html文档流顺序执行代码
alert()和prompt()它们会跳过页面渲染先被执行
字面量
在计算机中描述事/物
1000是数字字面量
还有字符串字面量、数组字面量[]、对象字面量{}等等
变量
存储数据的容器
基本使用
1.声明变量(定义变量)
首先创建变量
let 变量名
声明变量由两部分组成:声明关键字、变量名(标识符)
let即关键字,关键字是系统提供的专门来声明(定义)变量的词语
2.变量赋值
变量名=数值
为了方便,在声明的同时直接赋值 (变量的初始化)
let age=18
3.更新变量
let不允许多次声明一个变量
let age=18
age=19
4.声明多个变量
多个变量中间用逗号隔开
同时打印也用逗号隔开
let age=18,uname='pink'
但是最好用let分别声明
let age=18
let uname='pink'
变量本质
程序在内存中申请的一块用来存放数据的小空间
let和var的区别
var声明:
- 可以先使用再声明
- var声明过的变量可以重复声明
- 变量提示、全局变量、没有块级作用域
数组
基本使用
1.声明语法
let 数组名=[数据1,数据2,......,数据n]
2.使用数组
数组名[索引号]
length用来获取数组长度
长度=索引号+1
console.log(arr.length)
常量
使用const声明的变量,让某个变量永远不变
数据类型
基本数据类型
数字型number
算术运算符
NaN代表一个计算错误,是粘性的,任何对NaN的操作都会返回NaN
字符串型string
通过单引号’ ‘、双引号“ ”、反引号``包裹的字符
引号可以相互嵌套但是不能自己套自己
+ 运算符 可以实现字符串的拼接
let age=18
document.write('我今年 ' +age+ ' 岁了')
模板字符串
外面用反引号 `` 包含
里面用${变量名}包含
<script>
let age=18
document.write(`我今年${age}岁了`)
</script>
布尔型boolean
表示肯定或否定时在计算机中对应的类型
true表示肯定的数据
false表示否定的数据
未定义类型undefined
只声明变量不赋值的情况下,变量的默认值为undefined,一般很少【直接】为某个变量赋值undefined
使用场景:我们开发中经常声明一个变量,等待传送过来的数据
如果我们不知道这个数据是否传递过来,此时我们可以通过检测这个变量是不是undefined,就判断用户是否有传递数据过来
空类型null
代表一个”空“、”无“、”值未知“的特殊值,作为尚未创建的对象
undefined代表没有赋值
null表示赋值了但是内容为空
检测数据类型
typeof运算符可以返回被检测的数据类型
运算符形式:typeof 检测对象
函数形式:typeof (检测对象)
类型转换
使用表单、prompt获取过来的数据默认是字符串类型的,此时不能直接简单的进行加法运算,需要转换变量的数据类型
隐式转换
某些运算符被执行时,系统内部自动将数据类型进行转换
规则
-
+号两边只要有一个是字符串,都会把另外一个转成字符串
-
除了+以外的算术运算符都会把数据转成数字类型
-
+号作为正号解析可以转换成数字型
+prompt('请输入一个数字:')此时输入的数字被转换成了数字型 -
任何数据和字符串相加结果都是字符串
缺点
转换类型不明确,靠经验才能总结
显式转换
为了避免隐式转换带来的问题,通常根逻辑需要对数据进行显式转换
自己写代码告诉系统该转成什么类型
Number(数据)
parseInt(数据) 只保留整数
parseFloat(数据) 可以保留小数
运算符
赋值运算符
**=**右边的值赋值给左边
一元运算符
需要一个表达式
自增++
让变量的值加一
前置自增:++i先自增再使用
后置自增:i++ 先使用再自增
自减--
让变量的值减一
比较运算符
**===**左右两边是否类型和值都相等
**!==**左右两边是否不全等
比较结果为boolean类型
不同类型比较有隐式转换,最终转换成number型再比较
NaN不等于任何字符包括它自己
字符串比较,是比较对应的ASCII码
从左往右依次比较,第一位一样再比较第二位
逻辑运算符
运算符优先级
语句
表达式可以被求值的代码
语句可以执行的代码
分支语句
if分支
单分支
if(条件){
满足条件要执行的代码
}
小括号的条件为true才会执行大括号
小括号内结果若不是布尔类型,会发生隐式转换为布尔类型
除了0所有的数字(包括小数负数)都为真
除了空字符串所有的字符串都为真
双分支
if()...else
多分支
if()...else if()...else
三元运算符
条件?满足条件执行的代码:不满足条件执行的代码
数字补0案例
用户输入一个数,若小于10,则在前面补0
<script>
let num = +prompt('请您输入一个数字:')
num < 10 ? alert('0' + num) : alert(num)
</script>
switch语句
switch(){
case 值1:
代码1
break
case2 值2:
代码2
break
default:
代码n
break
}
一般要搭配break使用,否则容易造成case穿透
循环语句
断点调试
浏览器打开调试界面
按F12打开开发者工具
点到source一栏
选择代码文件
while循环
变量起始值2
while(循环/终止条件){
要重复循环的代码(循环体)
变量变化量(自增或自减)
}
大括号里代码执行完毕后不会跳出,而是继续回到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再回到小括号判断条件直到括号内条件不满足退出循环