JavaScript 基础 - Day1
了解变量、数据类型、运算符等基础概念,能够实现数据类型的转换,结合四则运算体会如何编程。
一.JavaScript的引入方式
1.1引入方式
JavaScript 程序不能独立运行,它需要被嵌入 HTML 中,然后浏览器才能执行 JavaScript 代码。通过 script
标签将 JavaScript 代码引入到 HTML 中,有两种方式:
内部形式
通过 script
标签包裹 JavaScript 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 内联形式:通过 script 标签包裹 JavaScript 代码 -->
<script>
alert('Hello World!');
</script>
</body>
</html>
外部形式
一般将 JavaScript 代码写在独立的以 .js 结尾的文件中,然后通过 script
标签的 src
属性引入
// demo.js
document.write('嗨,欢迎来传智播学习前端技术!');
<!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 文件,那么 标签的代码会被忽略!!!如下代码所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js">
// 此处的代码会被忽略掉!!!!
alert(666);
</script>
</body>
</html>
1.2 注释和结束符
通过注释可以屏蔽代码被执行或者添加备注信息,JavaScript 支持两种形式注释语法:
单行注释
使用 //
注释单行代码
多行注释
使用 /* */
注释多行代码
结束符
在 JavaScript 中 ;
代表一段代码的结束,多数情况下可以省略 ;
使用回车(enter)替代。
1.3 输入和输出
输出
JavaScript 可以接收用户的输入,然后再将输入的结果输出:
alert()
、document.wirte()
输入
向 prompt()
输入任意内容会以弹窗形式出现在浏览器中,一般提示用户输入一些内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 输入输出</title>
</head>
<body>
<script>
// 1. 输入的任意数字,都会以弹窗形式展示
document.write('要输出的内容');
alert('要输出的内容');
// 2. 以弹窗形式提示用户输入姓名,注意这里的文字使用英文的引号
prompt('请输入您的姓名:');
</script>
</body>
</html>
二.变量
理解变量是计算机存储数据的“容器”,掌握变量的声明方式
变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆,通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】(数据)
<script>
// x 符号代表了 5 这个数值
x = 5;
// y 符号代表了 6 这个数值
y = 6;
//举例: 在 JavaScript 中使用变量可以将某个数据(数值)记录下来!
// 将用户输入的内容保存在 num 这个变量(容器)中
num = prompt('请输入一数字!');
// 通过 num 变量(容器)将用户输入的内容输出出来
alert(num);
document.write(num);
</script>
2.1 声明和赋值
声明(定义)变量有两部分构成:声明关键字、变量名(标识)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
<script>
// let 变量名
// 声明(定义)变量有两部分构成:声明关键字、变量名(标识)
// let 即关键字,所谓关键字是系统提供的专门用来声明(定义)变量的词语
// age 即变量的名称,也叫标识符
let age;
age = 18;
alert('祝你永远都是' + age + '岁');
</script>
</body>
</html>
关键字是 JavaScript 中内置的一些英文词汇(单词或缩写),它们代表某些特定的含义,如 let
的含义是声明变量的,看到 let
后就可想到这行代码的意思是在声明变量,如 let age;
let
和 var
都是 JavaScript 中的声明变量的关键字,推荐使用 let
声明变量!!!
赋值
声明(定义)变量相当于创造了一个空的“容器”,通过赋值向这个容器中添加数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
<script>
// 声明(定义)变量有两部分构成:声明关键字、变量名(标识)
// let 即关键字,所谓关键字是系统提供的专门用来声明(定义)变量的词语
// age 即变量的名称,也叫标识符
let age;
// 赋值,将 18 这个数据存入了 age 这个“容器”中
age = 18;
// 这样 age 的值就成了 18
document.write(age);
// 也可以声明和赋值同时进行
let str = 'hello world!';
alert(str);
</script>
</body>
</html>
2.3 变量名命名规则
关于变量的名称(标识符)有一系列的规则需要遵守:
- 只能是字母、数字、下划线、$,且不能能数字开头
- 字母区分大小写,如 Age 和 age 是不同的变量
- JavaScript 内部已占用于单词(关键字或保留字)不允许使用
- 尽量保证变量具有一定的语义,见字知义
注:所谓关键字是指 JavaScript 内部使用的词语,如 let
和var
,保留字是指 JavaScript 内部目前没有使用的词语,但是将来可能会使用词语。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 变量名命名规则</title>
</head>
<body>
<script>
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 是保留字
</script>
</body>
</html>
三.数据类型
计算机程序可以处理大量的数据,为了方便数据的管理,将数据分成了不同的类型:
注:通过 typeof 关键字检测数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 数据类型</title>
</head>
<body>
<script>
// 检测 1 是什么类型数据,结果为 number
document.write(typeof 1);
</script>
</body>
</html>
3.1 数值类型
即我们数学中学习到的数字,可以是整数、小数、正数、负数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 数据类型</title>
</head>
<body>
<script>
let score = 100; // 正整数
let price = 12.345; // 小数
let temperature = -40; // 负数
document.write(typeof score); // 结果为 number
document.write(typeof price); // 结果为 number
document.write(typeof temperature); // 结果为 number
</script>
</body>
</html>
3.2 字符串类型
通过单引号( ''
) 、双引号( ""
)或反引号包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号。
注意事项:
- 无论单引号或是双引号必须成对使用
- 单引号/双引号可以互相嵌套,但是不以自已嵌套自已
- 必要时可以使用转义符
\
,输出单引号或双引号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 数据类型</title>
</head>
<body>
<script>
let user_name = '小明'; // 使用单引号
let gender = "男"; // 使用双引号
let str = '123'; // 看上去是数字,但是用引号包裹了就成了字符串了
let str1 = ''; // 这种情况叫空字符串
documeent.write(typeof user_name); // 结果为 string
documeent.write(typeof gender); // 结果为 string
documeent.write(typeof str); // 结果为 string
</script>
</body>
</html>
3.3 布尔类型
表示肯定或否定时在计算机中对应的是布尔类型数据,它有两个固定的值 true
和 false
,表示肯定的数据用 true
,表示否定的数据用 false
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 数据类型</title>
</head>
<body>
<script>
let isCool = true;
isCool = false;
document.write(typeof isCool); // 结果为 boolean
</script>
</body>
</html>
3.4 undefined
未定义是比较特殊的类型,只有一个值 undefined,只声明变量,不赋值的情况下,变量的默认值为 undefined,一般很少【直接】为某个变量赋值为 undefined。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 数据类型</title>
</head>
<body>
<script>
// 只声明了变量,并末赋值
let tmp;
document.write(typeof tmp); // 结果为 undefined
</script>
</body>
</html>
注:JavaScript 中变量的值决定了变量的数据类型。
3.5模板字符串
1.作用
- 拼接字符串和变量
- 在没有模板字符串之前拼接变量较麻烦
doucument.write('大家好,我是' + name + ',今年' + age + '岁了')
2.符号
- ``
- 在英文输入模式下按下tab键上方的键
- 在内容拼接变量时,用${}包住变量
doucument.write(`大家好,我是 n a m e ,今年 {name},今年 name,今年{age - 20 }岁了`)
<script>
let name = prompt('请输入您的名字:')
let age = prompt('请输入您的年龄:')
document.write(`我叫<span>${name}</span>,今年${age}岁了`)
</script>
四.类型转换
在 JavaScript 中数据被分成了不同的类型,如数值、字符串、布尔值、undefined,在实际编程的过程中,不同数据类型之间存在着转换的关系。
4.1 隐式转换
某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。
4.2显式转换
4.3Number
通过 Number
显示转换成数值类型,当转换失败时结果为 NaN
(Not a Number)即不是一个数字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
<script>
let t = '12';
let f = 8;
// 显式将字符串 12 转换成数值 12
t = Number(t);
// 检测转换后的类型
// console.log(typeof t);
console.log(t + f); // 结果为 20
// 并不是所有的值都可以被转成数值类型
let str = 'hello';
// 将 hello 转成数值是不现实的,当无法转换成
// 数值时,得到的结果为 NaN (Not a Number)
console.log(Number(str));
</script>
</body>
</html>
五.综合案例
1.拼接字符
<script>
let name = prompt('请输入您的名字:')
let age = prompt('请输入您的年龄:')
document.write(`我叫<span>${name}</span>,今年${age}岁了`)
</script>
2.输入两个数,计算和
<script>
let a1 = prompt('请输入第一个数:')
let a2 = prompt('请输入第二个数:')
document.write(`两个数的和是:${Number(a1) + Number(a2)}`)
</script>
3.案例
<style>
* {
margin: 0;
padding: 0;
}
table {
margin: 0 auto;
text-align: center;
border-collapse: collapse;
}
table th,
td {
border: 1px solid #000;
padding: 15px;
}
table caption {
margin: 15px 0;
}
</style>
<script>
//1.输入 price num address 三个变量
let price = +prompt('请输入商品价格:')
let num = +prompt('请输入购买的数量:')
let address = prompt('请输入收货的地址:')
let total = price * num
//2.渲染表格
document.write(`
<table>
<caption>
<h2>订单确认</h2>
</caption>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<th>IPhone Pro Max 128GB</th>
<th>${price}</th>
<th>${num}</th>
<th>${total}</th>
<th>${address}</th>
</tr>
</table>
`)
</script>