学习目标:掌握JavaScript的引入方式,初步认识JavaScript的作用。
1.引入方式
注:JavaScript 程序不能独立运行,它需要被嵌入 HTML 中,然后浏览器才能执行 JavaScript 代码。通过 script
标签将 JavaScript 代码引入到 HTML 中,有两种方式:内联方式、外部方式。
内部方式:通过 script
标签包裹 JavaScript 代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 内部的js 需要将 js代码书写在 script 标签里面
script 标签一定要放在 结束的 body 标签的前面 -->
<script>
alert('你好 js')
</script>
</body>
</html>
外部形式:一般将 JavaScript 代码写在独立的以 .js 结尾的文件中,然后通过 script
标签的 src
属性引入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 外部的 js 文件 是 通过 script 标签 引入 src 属性中 -->
<!-- 注意点:script标签如果是使用嵌入式就不要使用src属性
引入外部的js代码如果script标签已经使用了src属性
引入外部的js代码就不要在标签的中间书写js代码 -->
<script src="./index.js">
alert('你好')// 此处的代码会被忽略掉!!!!
</script>
<script>
alert('你好')
</script>
</body>
</html>
./index.js文件内容
alert('你好 js')
行内形式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="alert('逗你玩~~')">点击我中奖</button>
</body>
</html>
2.注释与结束符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 下面是 alert
alert('ok')
/* alert('ok')
alert('ok')
alert('ok')
alert('ok')
alert('ok')
alert('ok') */
// 结束符:如果一行中有多条语句每条语句结束都需要写分号
alert('ok1');alert('ok2')
</script>
</body>
</html>
3.输入输出语法
1. 输出 document.write('需要输出的内容')
2. alert('需要输出的内容') 先浏览器弹出警告框
3. console.log('需要输出的内容') 在 浏览器的 调试工具 的 console 选项卡中 显示内容
4. prompt(‘需要输出的内容’) 输入弹框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
document.write('hello小可爱')
document.write('<h1>小弟弟真可爱</h1>')
alert('ok')
console.log('ok')
prompt('请输入你的银行卡密码')
</script>
</body>
</html>
4.变量的基本使用let
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1. 需要使用 let 关键字声明变量
let username
// 2. 需要给变量赋值 变量名 = 值
username = '张三'
// 3. 输出变量的值
// 注意点:想要 输出变量的值 注意不要给变量名 加上 引号
document.write(username)
// 1. 声明变量的同时给变量赋值赋值是使用 = 将 = 右边的值存储到 = 左边的容器里面
let age1 = 18
// 2. 在控制台中输出
console.log(age1)
// 注意点:声明变量时需要使用let关键字但是使用变量时不要在变量的前面加 let 关键字
// 1. 先 声明变量 并赋值
let age2 = 18
// console.log(age2)
// 2. 更新变量的值
age2 = 19
// 3. 输出变量的值
console.log(age2)
// 一次性可以声明多个变量
// let age3 = 18
// let num = 20
let age3 = 18, num = 20
</script>
</body>
</html>
5.弹出输入框并打印所输入的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 需要: 浏览器中弹出对话框: 请输入姓名, 页面中输出:刚才输入的姓名
// 1. 需要准备 输入对话框 需要将 用户输入的内容使用变量存储
// 2. 在 页面上面 输出 document.write 变量的值
let uname = prompt('请输入用户名:')
document.write(uname)
</script>
</body>
</html>
6.交换两个变量的值(必会)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 先声明两个变量
let num1 = 10
let num2 = 20
// 1. 需要准备 临时变量
let temp
// 2. 将 num1 赋值给 temp 变量
temp = num1
// 3. 将 num2 赋值为 num1 变量
num1 = num2
// 4. 将 temp 的值 赋值给 num2
num2 = temp
console.log(num1)
console.log(num2)
</script>
</body>
</html>
7.变量命名规范
<body>
<script>
// 1. 变量名 不能以 js 里面的 关键字 作为 变量名
// let if = 18
// 2. 变量名 不能以数字开头
// let 1234abcd = 20
// 3.小驼峰命名规范
let getUserName = '张三'
</script>
</body>
8.var与let的区别
<body>
<script>
// var 可以 先使用 后声明
// console.log(age)
// var age = 18
// let age = 18
// let age = 18
</script>
</body>
9.数组的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 变量一次只能保存一个数据
// 数组可以一个保存多个数据
// let 变量名 = [数据1,数据1,数据3, ......]
let arr = ['关羽', '张飞', '马超', '赵云', '黄忠']
// 注意:数组 最好只使用 console.log() 打印
// console.log(arr)
// 需求:想要在 控制台里面 打印出 马超
console.log(arr[2])
let week = ['星期天','星期一','星期二','星期三','星期四', '星期五', '星期六']
// 需求:在 控制台 里面 输出星期天
// console.log(week[0])
console.log(week.length)
</script>
</body>
</html>
10.常量的基本使用const
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1. 常量一旦声明了 值是不能修改
// 2. 声明常量时 一定需要赋值
const PI = 3.1415926
// PI = 1
// console.log(PI)
const age = 18
</script>
</body>
</html>
11.数据的基本类型
number:数字
<body>
<script>
// number: 正数 负数 小数
let age = 18
let price = 1999.99
let num = -5000
// js 变量是什么类型 是由 变量的值决定的
// int age
// 算数运算符
// console.log(10 + 5)
// console.log(10 -5)
// console.log(10 * 5)
// console.log(10 / 5)
// console.log(10 % 5)
// console.log(10 % 3)
// console.log();
// % 可以用户判断 某个数字是否是 偶数 或者是 奇数
// 数字 % 2 余数为0 代表是偶数 反之 只要余数不为0 就是奇数
// console.log(7 % 2)
console.log(10 % 2)
console.log(5 % 2)
</script>
</body>
NaN:非数字的所有
<body>
<script>
// NaN 是 number 类型 里面一个 值 Not a Number
// number 类型 正数 负数 小数 NaN
console.log('blackpink' - 2)
console.log(NaN + 2)
</script>
</body>
String:字符串
<body>
<script>
// 凡是用 引号 包裹的数据 称之为 字符串 单引号 双引号 反引号
// 定义字符串 优先使用 单引号
let uname = '小明'
let tel = '13812341234'
let str = ''
// 注意:单双引号
// 双引号 涉及到 字符串 嵌套 双包单
// 单包双
// let str = "我是真爱粉'ikun'"
// console.log(str)
let str = '我是真爱粉"ikun"'
console.log(str)
</script>
</body>
boolean:布尔值
<body>
<script>
// boolean 类型 只有两个值 true | false
let flag = false
console.log(flag)
</script>
</body>
undefined:未定义的
<body>
<script>
// undefined 未定义类型 了解
// 1. 将变量的值 设置为 undefiend
// 2. 只声明变量 不给 变量赋值 使用这个变量
// let v1 = undefined
// console.log(v1)
let v2
console.log(v2)
</script>
</body>
null:空
<body>
<script>
// 空类型
// 将 变量的值 设置 为 null
// 现在 有些程序员 会将 null 类型 作为 未创建的对象
let v1 = null
console.log(v1)
</script>
</body>
检测数据类型:
<body>
<script>
let v1 = 10
console.log(typeof v1)
let v2 = '10'
console.log(typeof v2)
let v3 = true
console.log(typeof v3)
let v4
console.log(typeof v4)
let v5 = null
/* 注释:您也许会问,为什么 typeof 运算符对于 null 值会返回 "Object"。
这实际上是JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。
现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,
它仍然是原始值。*/
console.log(typeof v5)
</script>
</body>
数据类型转换的意义:
<body>
<script>
let money = prompt('请输入您的绩效工资:')
// + 数字相加 字符相连
console.log(15000 + money)
// 将 字符串 转换为 number 类型
// 如果 该字符串里面 只有数字 会被转换为 数字
// 如果 该字符串里面 包含非数字 会被转换为 NaN
// let v1 = NaN
// console.log(typeof v1)
// let str = '1234'
let str = '1234abcd'
// Number(变量名)如果能够转换为数字就变成对应的数字如果转换不了就变成NaN
console.log(Number(str))
</script>
</body>
将其他类型转字符串:
<body>
<script>
// String(变量)
let v1 = 10
console.log(typeof String(v1))
// 变量名.toString()
let v2 = true
console.log(typeof v2.toString())
// 变量名.toString(进制) 可以将变量转换成 对应进制的字符串
let v3 = 14
console.log(v3.toString(16))
// 8421
console.log(v3.toString(2))
</script>
</body>
将其他的类型转换为Boolean:
<body>
<script>
// 注意:'' 0 NaN -0 undefind null false 只有这7种会转成 boolean 的 false 其他的 都是 true
// Boolean(变量) true|false
// 🔔 1. 将 字符串 转换为 boolean 除了 '' 会转成 false 其他的 都是 true
// let v1 = ''
// let v1 = '1234'
// console.log(Boolean(v1))
// 🔔 2. 将 数字 转换为 boolean 除了 0 与 NaN -0 会转成 false 其他的 都是 true
// let v1 = 0
// let v1 = NaN
// let v1 = -0
// let v1 = -1
// console.log(Boolean(v1))
// 🔔 3. 将 undefined 转换为 boolean false
// let v1 = undefined
// console.log(Boolean(v1))
// 🔔 4. 将 null 转换为 boolean false
let v1 = null
console.log(Boolean(v1))
</script>
</body>
*隐式转换:
<body>
<script>
// + 数字相加 字符相连
// console.log(10 + 20)
// console.log('10' + 20)
// console.log('10' - 0)
// console.log('20' * 1 )
// 小技巧:可以利用 + 作为正号
let str = '10'
console.log(+str)
</script>
</body>
12.反引号的意义(模板字符串)
在 js中 单引号和双引号定义的字符串里面,如果出现了变量名,这个变量名是不会被解析的
老版本的写法:用 + 号 字符串拼接 老版本的写法
let uname = '张三'
let str = '他的名字叫' + uname
console.log(str)
这个时候就出现了反引号(``)的使用:
反引号不仅能解析算法,还能解析html标签,可以说非常的实用了~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 模板字符串
// 我叫蔡徐坤,我今年18岁
let uname = '蔡徐坤'
let age = 18
// 在 反引号里面 需要解析变量 ${变量名}
let str = `我叫${uname},我今年${age}岁`
console.log(str)
</script>
</body>
</html>
13.parseInt和parseFloat
1.parseInt() 可以从字符串中 提取整数 如果 字符串的第一个字符不是数字 则得到 NaN 如果第一个字符是数字 则开始提取整数 遇到了非数字就停止提取。
2.parseFloat() 可以从字符串中 提取小数 如果 字符串的第一个字符不是数字 则得到 NaN 如果第一个字符是数字 则开始提取小数 遇到了非数字就停止提取。
<body>
<script>
let str = '100px'
console.log(parseInt(str))
let str1 = '100.5.5px'
console.log(parseFloat(str1))
</script>
</body>
14.总结练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
text-align: center;
margin-top: 100px;
}
table {
border-collapse: collapse;
margin: 0px auto;
height: 80px;
text-align: center;
}
table,
th,
td {
border: 1px solid #000;
}
th {
padding: 10px 20px;
}
</style>
</head>
<body>
<h1>订单确认</h1>
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米手机</td>
<td>200元</td>
<td>2</td>
<td>400元</td>
<td>北京大学</td>
</tr>
</table>
</body>
</html>
<script>
// 1. 需要准备 3个 输入对话框 需要使用 3个变量来保存用户输入的数据
let price = +prompt('请输入商品的价格:')
let num = +prompt('请输入商品的数量:')
let address = prompt('请输入商品的收货地址:')
// 2. 计算 总价格 total 总价格 = 商品的数量 * 商品的价格
let total = price * num
// 3. 将变量的值写入到对应的单元格中document.write()可以将内容输出到body标签里面如果内容时html标签浏览器会解析
document.write(`
<h1>订单确认</h1>
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米手机</td>
<td>${price}元</td>
<td>${num}</td>
<td>${total}元</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
今天的学习就结束啦,大家一定要加油坚持多练习丫~