(1) 快速入门
JavaScript是一门弱类型的编程语言
创建第一个demo01.html
,开发第一个JavaScript
交互应用
- 获取用户点击行为,用户通过鼠标点击了按钮之后,发生了一些操作行为;使用
HTML/css
无法实现 - 点击行为发生后,浏览器中弹出了一个窗口(浏览器软件内置),使用
HTML/css
无法实现 - 总结:需要用户和网页进行交互时,使用
JavaScript
编程语言来实现需要的功能,单纯通过HTML/css
无法实现。
<!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 id="btn" onclick="show()">点击我试试</button>
<!-- 页面中添加一段脚本代码 -->
<script>
function show() {
alert("讨厌,点我干吗...")
}
</script>
</body>
</html>
(2) 代码位置
网页中使用JavaScript
编写交互代码,可以出现在哪些位置?
- 标签行内
- 页面内嵌
- 外部关联文件
编写demo02.html
,学习javascript
代码的三个位置
- 总结:企业项目开发中,推荐使用外联
.js
文件完成脚本代码的编写- 最大程度的提高代码的复用性
- 将结构代码和程序代码分离,方便代码的维护
- 一般禁止使用标签内嵌
js
代码;页面特殊的js
代码可以使用页面内嵌。
<!DOCTYPE html>
<html lang="zh">
<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>
<!-- 1、标签内嵌 -->
<button onclick="alert('我是行内js代码')">点击我试试</button>
<hr>
<!-- 2、页面内嵌 -->
<button id="btn" onclick="show()">页面内嵌</button>
<!-- 网页中编写一对script标签,js代码写在标签内部 -->
<script>
// 编写了js代码
function show() {
alert("页面内嵌代码执行.")
}
</script>
<!-- 3、外部文件关联 -->
<hr>
<button onclick="handler()">外部文件关联</button>
<!-- script标签通过src属性,引入一个外部js文件; script标签必须成对出现 -->
<script src="./js/comm.js"></script>
</body>
</html>
// ./js/comm.js
function handler() {
alert("李白,是个刺客...")
}
(3) 注释
什么是注释:出现在代码中用于解释说明的文字,不会随着代码执行
注释有那几种:
- 行内注释
- 多行注释
- 文档注释
都用在什么地方:
- 行内注释:主要针对一行或者多行代码的关键性描述
- 多行注释:主要针对一行或者多行复杂的代码,进行详细描述
- 文档注释:一般出现在
js
文件中,描述文档开发作者、开发时间、功能描述等作用
<!DOCTYPE html>
<html lang="zh">
<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、单行注释
// 一般针对一行或者多行代码进行关键性作用描述
// 页面中弹出一个警告对话框, alert(额勒特),浏览器内置警告对话框
// alert("hello javascript!")
/*
2、多行注释
一般针对一行或者多行关键性代码(功能比较复杂、条目较多)添加注释内容
prompt(普让普特),浏览器内置交互对话框,接受用户输入数据
括号中第一个数据:对话框中提示的文本内容
括号中第二个数据:对话框中默认输入的内容
*/
prompt("请输入您的年龄:", 0)
</script>
</body>
</html>
(4) 解释型执行
JavaScript
是一门解释型语言:代码执行过程,解释一行,执行一行!
(5) 字面量
字面量:描述的是代码的字面意思,一般情况在JavaScript
中表示字面意思的数据,如数字、字符串等等。
(6) 变量
变量(Variable)
:存储数据的容器,可以在代码中存储数据,然后通过变量名称重复使用这些数据
(7) 运算符
运算符(Operation)
,描述了代码中数据运算的符号
数据存储的时候,经常会用到赋值运算符
符号 | 描述 |
---|---|
= |
将等号右侧的数据,存储到左侧的变量中 |
反映生活中交易行为的运算,主要是算术运算!
符号 | 描述 |
---|---|
+ |
加法运算 |
- |
减法运算 |
* |
乘法运算 |
/ |
除法运算 |
(8) 页面弹窗
JavaScript
可以操作三种浏览器弹窗
- 警告对话框
- 确认对话框
- 交互对话框
// 警告对话框
alert("警告信息,一种重要的提示信息,暂停代码的向下执行,直到用户点击确定")
// 确认对话框
var res = confirm("针对用户的一些危险行为,进行提示,让用户确认自己的选择")
alert("用户的选择:" + res) // res: true / false表示真假两种行为
// 交互对话框
var pmp = prompt("提示信息,提示用户输入的文本内容", "默认数据")
(9) 数据输出
JavaScript
中提供了多种语法,可以将数据输出到指定的位置
-
alert(xxx)
将数据以弹窗的形式展示出来,经常用于代码错误测试打印数据 -
document.write(xxx)
:将数据在网页中输出,不论是错误调试或者项目开发,都严禁使用 -
console.log(xxx)
:将数据在浏览器的控制台中输出展示,使用频率最高。
(10) 页面交互
JavaScript
在浏览器中开发,主要用于服务页面;通过代码获取标签、操作标签内容、操作标签样式
-
document.getElementById('btn')
:获取页面中id="btn"
的一个标签 -
div.innerHTML = xxx
:设置标签中的文本内容 -
div.style.color = 'red'
:设置标签中的文本颜色