本节目标
初步了解JavaScript
- JavaScript是什么
- JavaScript书写位置
- 注释
- 结束符
- 输入和输出
- 字面量
1,JavaScript是什么
定义
- JavaScript是一种运行在浏览器的编程语言, 实现人机交互效果
作用
- 网页特效(监听用户的行为, 让网页做出对应的反馈)
- 表单校验(针对表单数据的合法性进行判断)
- 数据交互(获取后台的数据, 渲染到浏览器)
- 服务端编程(node.js)
💡 Tips:区分运行环境
- JS代码运行在浏览器环境, 就是做前端的工作
- JS代码运行在Node环境, 就是做后端的工作
查询
分类
- 安照大类分: JavaScript 由 ECMAScript + Web APIs 组成
- 安装小类分: JavaScript 由 ECMAScript + DOM + BOM 组成
体验
步骤
- 新建html文件
- 生成骨架代码: Vs Code中, 输入 ! , 选择第一个选项, 可以快速生成HTML结构
- 书写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pink {
background-color: rgb(15, 229, 93);
}
</style>
</head>
<body>
<button class=" pink">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script>
let bts = document.querySelectorAll('button');
for (let i = 0; i < bts.length; i++) {
bts[i].addEventListener('click', function () {
document.querySelector('.pink').className = ''
this.className = 'pink'
})
}
</script>
</body>
</html>
- 运行代码:
重点总结
- JavaScript是一种运行在浏览器的编程语言
- JavaScript由 ECMAScript(基础语法) + Web APIs( DOM/BOM ) 组成
2,JavaScript书写位置
内部JS
直接写在HTML文件里, 用<script></script>标签包裹
规范: script标签写在</body>标签上面
原因: 浏览器从上往下加载, 把脚本文件放在body结束标签这里, 可以保证结构加载完成再执行脚本
外部JS
代码写在以 .js 结尾的文件里, 通过script标签,引入到html页面中
引入: <script src="my.js"></script>
注意: script标签中间的位置不要写代码, 否则会被忽略
优势: 外部JS有利于代码复用, 且有利于html文件的清爽, 因此推荐使用
行内JS
代码写在标签内部
示例: <button οnclick="alert('逗你玩')">按钮</button>
课堂练习
需求: 用内部和外部两种方式的JS, 弹出: 努力,奋斗
步骤:
- 新建html文件
- 使用内部JS弹出内容,
- 引入外部JS文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 需求: 用内外两种JS弹出内容 -->
<script src="./index.js"></script>
<script>
alert('加油, 努力')
</script>
</body>
</html>
- 新建外部JS文件, 弹出内容
alert('我是js')
重点总结
- JavaScript的三种书写位置: 内部, 外部, 行内
3,注释
单行注释
- 符号: //
- 作用: // 右边的这一行代码会被忽略
- 快捷键: ctrl + /
多行注释(块注释)
- 符号: /* */
- 作用: 在 /* 和 */ 之间的所有内容都会被忽略
- 快捷键: shift + alt + a
4,结束符
- 符号: 使用英文的分号 ; 作为结束符
- 作用: 代表语句结束
- 说明: 可写可不写, 浏览器可以自动推断语句的结束位置
- 约定: 按照团队要求, 要么都写, 要么都不写
5,输入和输出
输入和输出可以理解为人和计算机的交互, 用户通过键盘, 鼠标向计算机输入信息, 计算机处理后再展示结果给用户, 这就是一次输入和输出的过程
输出语法
文档打印输出
- 语法1: document.write('要输出的内容')
- 作用: 向body输出内容
- 注意: 可以识别标签
警告框输出
- 语法2: document.alert('要输出的内容')
- 作用: 页面弹出警告对话框
控制台输出
- 语法3: console.log('要输出的内容')
- 作用: 控制台输出语法, 普通日志
- 语法4 console.warn('要输出的内容')
- 作用: 控制台输出语法, 警告日志
- 语法5: console.error('要输出的内容')
- 作用: 控制台输出语法, 错误日志
输入语法
输入框
- 语法1 prompt('请输入您的姓名:')
- 作用: 显示一个对话框, 对话框中包含一条提示信息, 用户可以输入文字
- 效果
确认框
- 语法2: document.confirm('确认删除吗?')
- 作用: 显示一个对话框, 对话框中包含一条提示信息, 用户确认或者取消
补充: 代码执行顺序
JavaScript默认从上往下执行代码,
但是alert()和prompt() 它们会跳过页面渲染先被执行( 先作了解 )
课堂练习
需求:
- 在浏览器中弹出对话框: 你好 JS
- 在页面中打印输出: JavaScript 我来了
- 在控制台输出: 它~会魔法吧
步骤:
- 新建html页面
- 书写 js 代码
- 运行代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 输入输出练习 -->
<script>
prompt('你好js')
confirm('删除它?')
document.write('JavaScript我来了')
console.log('它~会魔法吧')
console.warn('警告它!');
</script>
</body>
</html>
6,字面量
在计算机科学中, 用 字面量(literal) 描述计算机中的 所有事/物
示例
- 我的工资是1000, 1000就是数字字面量
- 我的名字是张三, 张三就是字符串字面量
- 还有 []数组字面量, {}对象字面量 等等