一.JavaScript介绍
1.JavaScript是什么
- JavaScript是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。
2.JavaScript作用
-
JavaScript作用
:确定网页的行为交互(教网页做事情)
3. JavaScript组成
- JavaScript由ECMAScript、DOM、BOM三部分组成
ECMAScript
- JavaScript的核心:
ECMAScript
定义了JavaScript的语言规范- JavaScript的核心:描述了语言的基本语法和数据类型,
ECMAScript
是一套标准,定义了一种语言的标准与具体实现无关
DOM
- 文档对象模型:
- 一套操作页面元素的API
- DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作
BOM
- 浏览器对象模型
- 一套操作浏览器功能的API
- 通过
BOM
可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等
4.JavaScript书写位置
1.内部样式(内嵌式)
- 通过
script
标签包裹 JavaScript 代码 - 如果
js
代码较少较少的话可以使用,比较复杂的话不推荐
<script>
// 页面弹出警示框
alert('JavaScript书写位置')
</script>
2.外部样式
- 一般将 JavaScript 代码写在独立的以 .js 结尾的文件中,然后通过
script
标签的src
属性引入
// my.js
alert('JavaScript书写位置')
<script src="my.js">
// 中间不要写内容
</script>
3.行内样式
<button οnclick="alert('点我')">点我了解JavaScript</button>
二.注释和结束符
1.单行注释
- 使用
//
注释单行代码 -
通过注释可以屏蔽代码被执行或者添加备注信息,JavaScript 支持两种形式注释语法:
-
快捷键:
ctrl + /
//这是单行注释
//一次只能注释一行
2.多行注释
-
使用
/* */
注释多行代码 -
快捷键:
shift + alt + A (或ctrl+shift+/)
/* 这是多行注释
一次可以注释多行代码*/
3.结束符
-
在 JavaScript 中
;
代表一段代码的结束,多数情况下可以省略;
使用回车(enter)替代。
三.输入和输出语法
1.输出
-
将数据显示到网页
document.write(' JavaScript')
- 在网页弹出一个提示框,输出数据
alert('JavaScript')
- 控制台输出语法,程序员调试使用
console.log('JavaScript')
2.输入
-
在网页弹出一个输入框,让用户输入数据
prompt('请输入您的姓名')
- 在网页弹出一个确认框,让用户输入 确认/取消 二选一
confirm("你确定选择这个产品吗?")
四.数据类型
1.数据类型介绍
1. 为什么要有数据类型 ?
- JavaScript不能识别所有的数据,任何编程语言编译器不同, 都有属于自己的数据类型
2. 数据类型分类:
- 基本数据类型:数字 字符串 布尔 未定义 空
- 引用数据类型:函数 数组 对象
2.基本数据类型
// 1 数字型(Number)
//number类型作用 : 数学计算
console.log(123456) // 整数
console.log(12.345) // 小数
// 2 字符串类型(string)
// 一切以 单引号'' 双引号"" 反引号`` 包起来的内容
//string类型作用 : 用于显示网页文本
console.log('我爱JavaScript')
console.log("学好js,年薪20000w")
console.log(`js是世界上最好的语言`)
console.log('我爱'python'')// 报错
console.log('我爱"JavaScript"')//正确
// 3 布尔类型(boolean) true(真) 和 false(假)
//boolean作用 : 条件判断
console.log(true)
console.log(false)
// 4 未定义(undefined) 没有值
console.log(undefined)
// 5 空类型 (null ) 空值
console.log(null)
3.数据类型检测
-
typeof 运算符可以返回被检测的数据类型。它支持两种语法形式:
-
作为运算符:
typeof
数据 (常用的写法) -
函数形式:
typeof
(数据)
console.log(typeof 123) //Number
console.log(typeof '123') //String
console.log(typeof true) //Boolean
console.log(typeof undefined) //undefined
console.log(typeof null) //object
五.变量
1.变量含义
-
变量就是计算机中用来存储数据的容器,它可以让计算机变得有记忆.简单理解变量就是一个装东西的盒子
-
变量作用:用来存放数据
2.声明变量
声明(定义)变量有两部分构成:声明关键字、变量名(标识)
<script>
// let 变量名
// 声明(定义)变量有两部分构成:声明关键字、变量名(标识)
// let 即关键字,所谓关键字是系统提供的专门用来声明(定义)变量的词语
// age 即变量的名称,也叫标识符
let age
</script>
- 关键字是 JavaScript 中内置的一些英文词汇(单词或缩写),它们代表某些特定的含义,如
let
的含义是声明变量的,看到let
后就可想到这行代码的意思是在声明变量,如let age;
let
和var
都是 JavaScript 中的声明变量的关键字,推荐使用let
声明变量!!!
3.变量赋值
-
声明(定义)变量相当于创造了一个空的“容器”,通过赋值向这个容器中添加数据。
<script> // 1 声明变量: let 变量名 let age // 声明变量未赋值 undefined // 2 变量赋值: 变量名 = 值 // = 理解为赋值 将等号右边的值赋给左边 age = 20 // 3 变量取值: 变量名 console.log(age) // 4 变量初始化: let 变量名 = 值 // 声明变量同时赋值就叫做变量初始化 let num = 10 console.log(num) // 中文变量名 强烈不推荐 有低版本浏览器兼容性问题 let 大象 = 18 console.log(大象) </script>
4.变量更新
1.变量更新
-
变量赋值后,还可以通过简单地给它一个不同的值来更新它
// 1 更新变量 先销毁旧值 然后存入新值(喜新厌旧)
let num = 20
num = 30
console.log(num)
// 2 let 不允许多次声明一个变量
let num = 100
//3 变量之间赋值 : 取出变量的数据拷贝一份,然后复制
let num1 = 10
// 变量赋值的时候不是把原始值给别人,而是复制一份
let num2 = num1
console.log( num1,num2) //10 , 10
2.声明多个变量
-
多个变量之间使用逗号隔开
// 声明多个变量
let age = 18, uname = '吴彦祖'
console.log(age, uname)
//提倡声明方式 一行声明一个变量,可读性比较好
let age = 18
let uname = '吴彦祖'
console.log(age, uname)
5.交换变量
-
有2个变量:
num1
里面放的是 10,num2
里面放的是20,最后变为num1
里面放的是 20 ,num2
里面放的是 10
// 1 声明 num1 num2 2个变量并赋值
let num1 = 10
let num2 = 20
// 2 声明临时变量
let temp
temp = num1
num1 = num2
num2 = temp
console.log(num1, num2)
6.变量命名规范
- 关于变量的名称(标识符)有一系列的规则需要遵守:
- 只能是字母、数字、下划线、$,且不能能数字开头
- 字母区分大小写,如 Age 和 age 是不同的变量
- JavaScript 内部已占用于单词(关键字或保留字)不允许使用
- 尽量保证变量具有一定的语义,见字知义
- 注:所谓关键字是指 JavaScript 内部使用的词语,如
let
和var
,保留字是指 JavaScript 内部目前没有使用的词语,但是将来可能会使用词语
let age = 18 // 正确
let age1 = 18 // 正确
let _age = 18 // 正确
// let 1age = 18; // 错误,不可以数字开头
let $age = 18 // 正确
let Age = 24 // 正确,它与小写的 age 是不同的变量
// let let = 18; // 错误,let 是关键字
let int = 123 // 不推荐,int 是保留字
7.常量
-
概念:使用 const 声明的变量称为“常量”
-
使用场景:当某个变量永远不会改变的时候,就可以使用 const 来声明,而不是let
-
命名规范:和变量一致
六.运算符与表达式
1.表达式
-
表达式:由运算符组成的式子,一定会有运算结果(运算数据)
表达式一定会有运算结果
console.log(1 + 2)
console.log(4 > 5)
let num = 1 + 2
2.算术运算符
-
数学运算符也叫算术运算符,主要包括加(+)、减(-)、乘(*)、除(/)、取余(%)
// 1 算术运算符(用于数学的算术运算)
// + - * / %(取模)
// 运算符 运算的符号
console.log(1 + 1) // 2
console.log(1 * 1) // 1
console.log(1 / 1) // 1
console.log(6 - 2) //4
// % 取模 取余
console.log(4 % 2) // 0
console.log(10 % 3) // 1
3.字符拼接
-
+
运算符 可以实现字符串的拼接 -
口诀:数字相加,字符相连
console.log(1 + 1) // 2
console.log('我叫' + '赛文奥特曼') // 我叫赛文奥特曼
// +号只要遇到字符串,就是连接符(拼接符)
console.log('赛文' + 20)
let age = 25
// 控制台输出我今年xx岁了
// 无法取到变量的值,当做字符串的一部分
console.log('我今年age岁了')
console.log('我今年' + age + '岁了')
4.模板字符串
-
作用 字符串和变量进行拼接
-
模板字符串 外面用`` 里面 ${变量名}
// 作用 字符串和变量进行拼接
// 使用方式:外面用`` 里面${变量名}
let age = 20
document.write(`我今年${age}岁了`)
5.赋值运算符
- 赋值运算符:对变量进行赋值的运算符
- 赋值运算符(
=
)将等号右边的值赋予给左边, 要求左边必须是一个容器 - 其它赋值运算符:
+=,-=,*=,/=,%=
;使用这些运算符可以在对变量赋值时进行快速操作
let num = 1
// 采取赋值运算符
// num = num + 1
// num += 1
num += 3
console.log(num)
6.一元运算符
-
一元运算符:正负号
- 前置自增:++i
- 后置自增:i++
/* 前置自增 后置自增 */
// 每次都会进行加1操作
// ++i i++
let i = 1
++i // i+=1
console.log(i) // 2
// 后置自增
let j = 1
j++ // j+=1
console.log(j) // 2
// 实际开发中 后置用的更多
7.比较运算符
-
应用场景:比较两个数据大小、是否相等
-
>
: 左边是否大于右边 -
<
: 左边是否小于右边 -
>=
: 左边是否大于或等于右边 -
<=
: 左边是否小于或等于右边 -
==
: 左右两边值是否相等 -
===
: 左右两边是否类型和值都相等(全等) -
!==
: 左右两边是否不全等(不全等) -
!=
: 不等
-
比较结果为boolean类型,即只会得到 true 或 false
/* 比较运算的结果为布尔类型 只会返回true或false */
console.log(3 > 4) // false
console.log(3 >=3) // true
// == (相等) 只比较值 不比较数据类型
console.log(4 == 4) // true
console.log(4 == '4')// true
// === (全等)
// 判断值和数据类型 都一样才可以
// 先比较类型 后比较值
/* 以后判断是否相等 请使用 === */
console.log(2 === '2') // false
// !== (不全等) 判断值和数据类型
console.log(4 !== '4') // true
// != 不等
// != 和 ==(相等) 结果一定相反
console.log(4 != '4') // false
8.逻辑运算符
-
逻辑运算符用来解决多重条件判断
/* 1 逻辑与 && 一假则假 二元运算符
// 只要有一个不满足 就是 false
*/
console.log(true && true) // true
console.log(false && true)// false
console.log(3 < 5 && 3 > 2) // true
console.log(3 < 5 && 3 < 2) // false
console.log('---------------')
/* 2 逻辑或 || 一真则真
只要有一个满足 就为true
*/
console.log(true || true) // true
console.log(false || true) // true
console.log(false || false) // false
console.log('---------------')
// 3 逻辑非 ! 取反 一元运算符
//取反
console.log(!true) // false
console.log(!false) // true
let num = 6
console.log(num > 5 && num < 10) // true
9.运算符优先级
优先级 | 运算符 | 顺序 |
1 | 小括号 | ( ) |
2 | 一元运算符 | ++ -- ! |
3 | 算数运算符 | 先 * / 后+ - |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先&& 后 || |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |