JavaScript概述和体验
目标
-
JavaScript的作用
-
编写第1个JavaScript代码
为什么要用JavaScript
运行在网页上脚本(Script)
网页中各技术的作用
| 技术 | 作用 |
|---|---|
| HTML | 创建网页的结构 |
| CSS | 网页的美化 |
| JavaScript | 用于网页的交互，让网页变得更加生动，提高用户的体验 |
JS体验案例
需求
使用JS在网页上输出5个Hello World
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript的初体验</title>
</head>
<body>
<!--JavaScript脚本必须放在script标签中，MIME类型：大类型/小类型 -->
<script type="text/javascript">
for (var i = 0; i < 5; i++) {
//在文档上写东西，整个网页就是一个文档document
document.write("<h1>Hello World!</h1>");
}
</script>
</body>
</html>
小结
-
什么要JS？ 让网页更生动，改善用户的体验
-
说说网页上各种技术的作用：HTML，CSS，JS
JavaScript的两种引入方式
目标
-
JS语言的三个组成部分
-
<script>标签的说明
语言组成
| 组成部分 | 作用 |
|---|---|
| ECMA Script | 所有脚本语言规范，构成了JavaScript语法基础 |
| BOM | Browser Object Model 浏览器对象模型，用来操作浏览器中各种对象 |
| DOM | Document Object Model 文档对象模型，用来操作网页中各种元素 |
script标签的说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript的初体验</title>
</head>
<body>
<!--JavaScript脚本必须放在script标签中，MIME类型：大类型/小类型 -->
<script type="text/javascript">
for (var i = 0; i < 5; i++) {
//在文档上写东西，整个网页就是一个文档document
document.write("<h1>Hello World!</h1>");
}
</script>
<!--
1. 标签个数：在同一个网页中可以出现多个script标签
2. 位置：script标签可以放在网页中任意位置，甚至是html之外
3. 语句后分号：如果一行代码一条语句，分号可以省略，不建议省略
4. 以后js脚本通常放在HTML外面，导入来使用，使用script标签来导入。
属性：src 指定要导入的外部js文件
必须是一个有主体的标签
-->
<script src="js/out.js" type="text/javascript"></script>
</body>
</html>
JavaScript的注释
JavaScript的三种输出方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的三种输出方式</title>
</head>
<body>
<script type="text/javascript">
// 1.输出到浏览器的控制台
console.log("你好，我是JavaScript");
//2. 输出到文档网页上
document.write("输出到网页上");
//3. 弹出信息框
alert("这是一个信息框");
</script>
</body>
</html>
小结
-
JS由哪三个部分组成？
-
ECMAScript
-
BOM
-
DOM
-
-
script标签有哪两个属性？
-
src 导入外部js脚本
-
type 指定脚本的类型，可选
-
-
有哪三种输出方式？
-
console.log()
-
document.write()
-
alert()
-
变量的定义
目标
-
变量的定义的语法
-
var关键字的使用
定义语法
ES 6中有三个定义变量的关键字：
var 以前使用比较多的一个关键字，用来定义变量
let 6以后多出来的定义变量的关键字
const 定义常量，类似于java final关键字
定义代码模板
设置idea支持ES6
变量的定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>变量定义</title> </head> <body> <!--输入sc以后，按ctrl+j--> <script type="text/javascript"> var i = 5; //定义整数 let m = 6; //默认idea不支持，要修改EC为6 const PI = 3.14; //常量 document.write(i + "<br/>"); document.write(m + "<br/>"); //PI = 5; 不能重新赋值 document.write(PI + "<br/>"); </script> </body> </html>
| 数据类型 | Java中定义变量 | JS中定义变量 |
|---|---|---|
| 整数 | int i = 5; | var i=5; |
| 浮点数 | float f = 3.14f; 或 double d=3.14; | var f=3.14; |
| 布尔 | boolean b = true; | var b=true; |
| 字符 | char c = 'a'; | var c = 'a'; //没有字符类型，只有字符串 |
| 字符串 | String str = "abc"; | var str = "abc"; |
注意事项
//1. 关于弱类型？ /* 同一个变量可以赋值为不同的数据类型 */ var num = 666; //整数 num = true; //布尔 num = "abc"; //字符串类型，注：js中没有字符类型，只有字符串 document.write(num + "<br/>"); //2. 在JS中的字符和字符串引号？ //JS中字符串既可以使用单引号 ' ，也可以使用双引号 " ，还可以使用反引号 ` (Esc下面：波浪线) let s1 = 'abcd'; let s2 = "xyz"; let s3 = `hello`; document.write(s1 + s2 + s3 + "<br/>");
var和let的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>var和let的区别</title>
</head>
<body>
<script type="text/javascript">
//1.作用域不同：var定义的变量在代码块中不受{}限制，let定义的变量是受限制
{
var x = 5;
}
document.write(x + "<br/>"); //可以输出，不受{}限制
{
let y = 6;
}
//document.write(y + "<br/>"); //找不到y的值，出错
//2.重新定义变量区别：var可以修改变量的值
var a = 10;
{
var a = 2;
}
document.write(a + "<br/>"); //2
let b = 5;
{
let b = 3; //不可见
}
document.write(b + "<br/>"); //5
//3.const关键字，如果是对象，它的属性可以修改
const person = {"name": "NewBoy", "age": 18};
document.write(person.name + "<br/>");
document.write(person.age + "<br/>");
//person = {}; //不行的
person.age = 19;
document.write(person.age + "<br/>");
</script>
</body>
</html>
小结
-
在JS中定义变量使用哪个关键字？
-
var
-
let
-
-
JS是弱类型还是强类型？
弱类型
-
有没有字符和字符串的区别？
没有字符类型，只有字符串，字符串使用：" ' `
五种数据类型
目标
JS中有哪五种数据类型
五种数据类型
| 关键字 | 说明 |
|---|---|
| number | 数值型，包括整数和浮点数 |
| boolean | 布尔类型，true或false |
| string | 字符串类型，可以使用单引号，双引号，反引号 |
| object | 对象类型 |
| undefined | 未定义的类型 |
typeof操作符
作用：判断一个变量的数据类型
写法：
-
typeof 变量名
-
typeof(变量名)
案例：数据类型的演示
需求
分别输出整数、浮点数、字符串(单引号和双引号)、布尔、未定义、对象、null的数据类型
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五种数据类型</title>
</head>
<body>
<script type="text/javascript">
//分别输出整数、浮点数、字符串(单引号和双引号)、布尔、未定义、对象、null的数据类型
let i = 5;
document.write(typeof(i)+ "<br/>"); //number
let f = 3.4;
document.write(typeof(f) + "<br/>"); //number
let c = 'a';
document.write(typeof(c) + "<br/>"); //string
let s = "abc";
document.write(typeof(s) + "<br/>"); //string
let b = true;
document.write(typeof(b) + "<br/>"); //boolean
let u;
document.write(typeof(u) + "<br/>"); //undefined
let n = {name: "jack", age: 18};
document.write(typeof(n) + "<br/>"); //object
/**
* 注：null和undefined的区别
* 1. null本质上是一个对象类型，只是这个对象没有值
* 2. undefined 未知的类型
*/
let x = null;
document.write(typeof(x) + "<br/>"); //object
</script>
</body>
</html>
小结
| null与undefined的区别 | 说明 |
|---|---|
| null | null本质上是一个对象类型，只是这个对象没有值 |
| undefined | 未知的类型，没有初始化 |
在浏览器中调试代码
目标
如何在浏览器中调试JS代码
设置断点
注：设置断点以后要重新刷新页面才会在断点停下来
语法错误
常用的运算符
目标
学习JS中的各种运算符
算术运算符
算术运算符用于执行两个变量或值的算术运算
赋值运算符
赋值运算符用于给JavaScript 变量赋值
比较运算符
比较运算符用于逻辑语句的判断，从而确定给定的两个值或变量是否相等。
数字可以与字符串进行比较，字符串可以与字符串进行比较。字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>运算符</title> </head> <body> <script type="text/javascript"> let s1 = 5; let s2 = "5"; document.write((s1 == s2) + "<br/>"); //true 比较值是否相等 document.write((s1 === s2) + "<br/>"); //恒等于，既比较值，又比较类型 document.write((s1!=s2) + "<br/>"); //false document.write((s1!==s2) + "<br/>"); //恒不等于 true </script> </body> </html>
逻辑运算符
逻辑运算符用来确定变量或值之间的逻辑关系，支持短路运算
逻辑运算符不存在单与&、单或|
三元运算符
小结
-
运算符 === 有什么作用？
既比较值，又比较类型
学习总结
-
能够说出JS中五种数据类型
| 关键字 | 说明 |
|---|---|
| number | 数值 |
| boolean | 布尔 |
| string | 字符串 |
| object | 对象 |
| undefined | 未定义 |
-
能够使用JS中常用的运算符
-
算术运算符
-
赋值运算符
-
比较运算符 === !==
-
逻辑运算符
-
三元运算符
-
1218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
