1、引入方式
1.1、内部方式
通过script标签包裹JavaScript代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 内联形式:通过 script 标签包裹 JavaScript 代码 -->
<script>
alert('嗨,我们一起学习JavaScript!')
</script>
</body>
</html>
1.2、外部方式
一般将 JavaScript 代码写在独立的以 .js 结尾的文件中,然后通过 script 标签的 src 属性引入//
demo.js
document.write('嗨,我们一起学习JavaScript!')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js"></script>
</body>
</html>
注意
如果 script 标签使用 src 属性引入了某 .js 文件,那么 标签的代码会被忽略!!!
2、注释
通过注释可以屏蔽代码被执行或者添加备注信息,JavaScript 支持两种形式注释语法:
2.1、单行注释
使用 // 注释单行代码
// 这种是单行注释的语法
// 一次只能注释一行
// 可以重复注释
document.write('嗨,我们一起JavaScript');
2.2、多行注释
使用 /* */ 注释多行代码
/* 这种的是多行注释的语法 */
/*
更常见的多行注释是这种写法
在些可以任意换行
多少行都可以
*/
3、输入输出语句
3.1、 输出语句
alert 页面弹出警示框
alert('你好,js')
document.write 向页面文档输入内容
document.write('今日特价')
document.write('<h4>今日特价</h4>')
console.log在控制台输出
console.log('给咱们程序员使用的')
3.2、输入语句
向 prompt() 输入任意内容会以弹窗形式出现在浏览器中,一般提示用户输入一些内容。
<script>
// 1. 以弹窗形式提示用户输入姓名,注意这里的文字使用英文的引号
prompt('请输入您的姓名:')
</script>
4、变量
变量是计算机中用来存储数据的“容器”,变量不是数据本身,它们仅仅是一个用于存储数值的容器。
声明变量并赋值
声明(定义)变量有两部分构成:声明关键字、变量名(标识)
// age 即变量的名称,也叫标识符
let age
// 赋值,将 18 这个数据存入了 age 这个“容器”中
age = 18
变量更新
变量赋值后,还可以通过简单地给它一个不同的值来更新它。
// 声明一个变量age并赋初始值18
let age = 18
age = 19 // 更新变量的值为19
声明多个变量
语法:多个变量中间用逗号隔开。
// 1. 一次声明多个变量的简写方式 (了解 能认出来就可以了)
// let uname = '刘诗诗', sex = '女'
变量的命名规则
规则:
- 只能是字母、数字、下划线、$,且不能能数字开头
- 字母区分大小写,如 Age 和 age 是不同的变量
- JavaScript 内部已占用于单词(关键字或保留字)不允许使用
- 尽量保证变量具有一定的语义,见字知义
规范:
- 起名要有意义
- 遵守小驼峰命名法
5、常量
常量不允许重新赋值,声明的时候必须赋值(初始化)
// 常量: 也是一个容器用来保存的数据
const pi = 3.14
console.log(pi)
// 注意事项:
// 1. 常量里面的值是不允许修改的
// 2. 常量必须要初始化(声明常量的时候必须要赋值)
6、数据类型
基本数据类型
number 数字型
// 1. 数字型: 用于计算的, js数字类型包含: 整数、小数
let num1 = 18.88
console.log(typeof num1) // number typeof 关键字检测数据类型
string 字符串型
// 字符串类型: 被引号包裹的一段文字信息 单引号 双引号 反引号
let goods = '笔记本电脑'
let address = "JavaScript"
let color = `蓝色`
console.log(typeof goods) // string
console.log(typeof address) // string
console.log(typeof color) // string
注意事项:
// 变量是不能加引号的,变量加了引号就不是盒子了,是一个字符串
console.log('goods')
// 字符串嵌套的问题. 不能嵌套自己, 外单内双 或者 外双内单
console.log('今日特价"跳楼大甩卖"速速抢购')
console.log("今日特价'跳楼大甩卖'速速抢购")
模版字符串
// 1. 字符串拼接
let age = 18
console.log('xx今年' + age + '岁')
// 2. 模板字符串
console.log(`xx今年${age}岁`)
// 3. 模板字符串里面的字符串可以换行
console.log(`明月几时有
把酒问青天
不知天上宫阙
今夕是何年`)
注意:反引号中间的字符串可以换行的
布尔类型
表示肯定或否定时在计算机中对应的是布尔类型数据,它有两个固定的值 true 和 false,表示肯定的数据用 true,表示否定的数据用 false。
<script>
let isCool = true
isCool = false
document.write(typeof isCool) // 结果为 boolean
</script>
undefined
未定义是比较特殊的类型,只有一个值 undefined,只声明变量,不赋值的情况下,变量的默认值为 undefined,一般很少【直接】为某个变量赋值为 undefined。
<script>
// 只声明了变量,并末赋值
let tmp;
document.write(typeof tmp) // 结果为 undefined
</script>
null
可以通过将变量的值设置为 null 来清空变量。
let person={
firstname : "John",
lastname : "Doe",
id : 5566
};
person = null
引用数据类型
object
function
array
正则(RegExp)
日期(Date)
7、运算符
7.1、算数运算符
| 运算符 | 作用 |
|---|---|
| + | 求和 |
| - | 求差 |
| * | 求积 |
| / | 求商 |
| % | 取模(取余数),开发中经常用于作为某个数字是否被整除 |
注意:在计算失败时,显示的结果是 NaN (not a number)
7.2、赋值运算符
对变量进行赋值的运算符
= 将等号右边的值赋予给左边, 要求左边必须是一个变量
| 运算符 | 作用 |
|---|---|
| += | 加法赋值 |
| -= | 减法赋值 |
| *= | 乘法赋值 |
| /= | 除法赋值 |
| %= | 取余赋值 |
7.3、自增、自检
| 符号 | 作用 | 说明 |
|---|---|---|
| ++ | 自增 | 变量自身的值加1,例如: x++ |
| -- | 自减 | 变量自身的值减1,例如: x-- |
// ++在前和++在后的区别。 如果单独使用,没有区别,如果参与了运算就有区别
// ++在前 前缀式 : 先对变量值+1, 然后拿着变量值做运算
// let x = 3
// let y = ++x
// console.log(y) // 4
// console.log(x) // 4
// ++在后 后缀式 : 先拿着变量值运算,再对变量值+1
let x = 3
let y = x++
console.log(y) // 3
console.log(x) // 4
注意:
只有变量能够使用自增和自减运算符
++、-- 可以在变量前面也可以在变量后面,比如: x++ 或者 ++x
7.4、比较运算符
用场景:比较两个数据大小、是否相等,根据比较结果返回一个布尔值(true / false)
| 运算符 | 作用 |
|---|---|
| 左边是否大于右边 | |
| < | 左边是否小于右边 |
| >= | 左边是否大于或等于右边 |
| <= | 左边是否小于或等于右边 |
| === | 左右两边是否类型和值都相等(重点) |
| == | 左右两边值是否相等 |
| != | 左右值不相等 |
| !== | 左右两边是否不全等 |
7.5、逻辑运算符
使用场景:可以把多个布尔值放到一起运算,最终返回一个布尔值 && 逻辑与 符号两边有一个假的结果为假 || 逻辑或 符号两边有一个真的结果为真 ! 逻辑非 true变false false变true
7.6、运算符优先级
()
++ -- !
先 * / % 后 + -
> >= < <=
先 && 后 ||
=
总结
本文记录了JavaScript的基础使用。