JavaScript概述和体验
目标
- 学习JavaScript的作用
- 编写第1个JavaScript代码
JavaScript的基本概述
JavaScript简称JS
JavaScript是在1995年时,由Netscape公司在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
网页中各技术的作用
技术 | 作用 |
---|---|
HTML | 编写网页的内容骨架 |
CSS | 对网页进行美化 |
JavaScript | 让网页动起来,可以交互 |
HTML
CSS
JavaScript
为什么要JavaScript
JS的作用: 让网页动起来,可以和用户进行交互
JS体验案例
使用JS在网页上输出5个Hello World
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第1个JS代码</title>
</head>
<body>
<!--所有的脚本语言要写在script标签中-->
<script type="text/javascript">
for (var i=0; i<5; i++) {
//输出到文档(网页)上
document.write("<h1>Hello World!</h1>");
}
</script>
</body>
</html>
JavaScript与Java的区别
特点 | Java | JavaScript |
---|---|---|
面向对象 | 完全面向对象:继承,封装,多态 | 基于对象,不完全符合面向对象的思想 |
运行方式 | 编译型语言,生成中间文件 | 解释型语言,没有中间文件。 |
跨平台 | 可以运行在不同的系统上,安装JVM | 跨平台,运行在浏览器。只要系统有浏览器就可以执行。 |
数据类型 | 强类型语言。 如:int n = “abc”; //错误 | 弱类型语言,变量名可以赋值不同的数据类型 |
大小写 | 区分大小写 | 区分大小写 |
小结
-
为什么要JS?
可以让网页动起来,和用户有交互效果
-
说出网页上各种技术的作用?
HTML:搭建网页的内容骨架
CSS: 美化网页
JS:可以让网页动起来,和用户有交互效果
script标签的使用说明(重点)
目标
- 学习JS语言的三个组成部分
- <script>标签的说明
JavaScript语言组成
组成部分 | 作用 |
---|---|
ECMA Script | 浏览器脚本语言规范,制定所有脚本语言核心基础语法。 |
BOM | Browser Object Model 浏览器对象模型,操作浏览器中各种对象。 |
DOM | Document Object Model 文档对象模型,操作网页中各种元素。 |
[外链图片转存失败(img-6sTENzfC-1565495211898)(/1554077226023.png)]
script标签的说明
- 同一个HTML中可以有多个script标签,每个标签都会执行
- 可以出现在网页中任何的位置
- 每条代码以分号结束,如果一行只有一条语句,分号可以省略。不建议省略
- 引⽤用外部js文件的
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
<script type="text/javascript">
// 所有的脚本语言要写在script标签中
for (var i = 0; i < 5; i++) {
// 输出到文档(网页)上
document.write("Hello World" + i + "<br/>");
}
</script>
</head>
<body>
</body>
</html>
document.write("我是外部脚本" + "<br/>");
JavaScript的注释
小结
-
JS由哪三个部分组成?
ECMA Script: 核心语法
BOM: 浏览器对象模型
DOM:文档对象模型
-
script标签有哪两个属性?
<script src="js文件的位置" type="text/javascript"></script>
JS变量的定义
目标
学习JS变量的定义语法
定义语法
数据类型 | Java中定义变量 | JS中定义变量 |
---|---|---|
格式 | 数据类型 变量名 = 值; | var 变量名 = 值; |
整数 | int i = 5; | var i = 5; |
浮点数 | float f = 3.14; 或 double d = 3.14; | var d = 3.14; |
布尔 | boolean b = true; | var b = true; |
字符 | char c = ‘a’; | JS没有字符,只有字符串 |
字符串 | String str = “abc”; | var str = “abc”; | var str=‘abc’; |
注意事项
-
关于弱类型?
一个变量可以赋值为不同的数据类型
-
在JS中的字符和字符串引号?
在JS中没有字符和字符串的区别,都是字符串,既可以使用双引号也可以使用单引号
-
var定义变量的特点
- var关键字可以省略,建议不要省略。
- 同一个变量可以重复定义。
- 在大括号外也能使用大括号中定义的变量。
案例
输出不同类型的数据
整数
浮点数
布尔
字符串
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS变量</title>
</head>
<body>
<script>
// 整数
var a = 10;
document.write("a: " + a + "<br/>");
// 浮点数
var f = 3.14;
document.write("f: " + f + "<br/>");
// 布尔
var b = true;
document.write("b: " + b + "<br/>");
// 在JS中没有字符和字符串的区别,都是字符串,既可以使用双引号也可以使用单引号
// 字符串
var c = 'abc';
document.write("c: " + c + "<br/>");
// 字符串
var ss = "abc";
document.write("ss: " + ss + "<br/>");
// 一个变量可以赋值为不同的数据类型
var x = 10;
document.write("x: " + x + "<br/>");
x = true;
document.write("x: " + x + "<br/>");
// var关键字可以省略
y = 20;
document.write("y: " + y + "<br/>");
// 同一个变量可以重复定义
y = false;
document.write("y: " + y + "<br/>");
{
var z = "大家好";
}
document.write("z: " + z + "<br/>")
</script>
</body>
</html>
小结
-
在JS中定义变量使用哪个关键字?
var
-
JS是弱类型还是强类型?
弱类型语言
-
JS有没有字符和字符串的区别?
没有,JS中只有字符串, "abc"和‘abc’都是字符串
JS五种数据类型
目标
学习JS中五种数据类型
五种数据类型
关键字 | 说明 |
---|---|
number | 数值类型:包含了整数和小数 |
boolean | 布尔类型:true/false |
string | 字符串类型 |
object | 对象类型:自定义对象和JS内置对象,如:数组 |
undefined | 未定义的类型:未初始化的 |
typeof操作符
作用:获取变量的类型
写法:typeof(变量)或 typeof 变量
案例:数据类型的演示
分别输出整数、浮点数、字符串(单引号和双引号)、布尔、未定义、对象、null的数据类
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型</title>
</head>
<body>
<script type="text/javascript">
// 输出整数、浮点数、字符串(单引号和双引号)、布尔、未定义、对象、null的数据类型
var i = 5;
document.write("整数类型:" + typeof(i)+ "<br/>");
var d = 3.14;
document.write("小数类型:" + typeof(d)+ "<br/>");
var i = 'a';
document.write("字符串:" + typeof(i)+ "<br/>");
var i = "abc";
document.write("字符串:" + typeof(i)+ "<br/>");
var i = true;
document.write("布尔:" + typeof(i)+ "<br/>");
var u;
document.write("未定义:" + typeof(u)+ "<br/>");
var o = {
name:"牛魔王",
age: 18
}; //定义一个对象
document.write("对象类型:" + typeof(o)+ "<br/>");
var n = null; //null表示对象类型,只是这个对象没有值
document.write("null的类型:" + typeof(n) + "<br/>");
</script>
</body>
</html>
小结
请说出JS中有哪五种数据类型?
number: 数值类型,可以是整数和小数
boolean: true/false
string: 字符串类型
object:对象类型
undefined: 未定义类型
null与undefined的区别 | 说明 |
---|---|
null | var obj = null; 表示定义了一个对象,只是现在这个对象为null |
undefined | var obj; 没有使用=赋值,没有初始化的 |
JS数据类型的转换函数
目标
学习JS中类型转换函数(字符串与数字之间的转换)
回顾Java字符串转数字
“17” -> 17
Integer.parseInt(“17”); -> 17
全局函数
概念:在JS中任何地方都可以直接引用的函数
parseInt() | 将一个字符串转成整数。如果不能转换返回NaN |
---|---|
isNaN() | 用来判断变量是否是非数字,非数字返回true |
案例:字符串转数字
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串转数字</title>
</head>
<body>
<script type="text/javascript">
var num1 = "11";
var num2 = "22";
// 字符串是拼接
var num3 = num1 + num2;
document.write(num3 + "<br/>")
// 将字符串转成数字:parseInt()
var num4 = parseInt(num1) + parseInt(num2);
document.write(num4 + "<br/>")
// 能转多少算多少
var num5 = "123a56";
document.write(parseInt(num5) + "<br/>")
// 字符串不能转换成数字,返回NaN(Not a Number)
var num6 = "a123";
document.write(parseInt(num6) + "<br/>")
// 判断一个字符串是否是数字: isNaN, 是数字字符串返回false,不是数字字符串返回true
document.write("<hr/>")
document.write(isNaN("123") + "<br/>")
document.write(isNaN("123a") + "<br/>")
document.write(isNaN("a123") + "<br/>")
</script>
</body>
</html>
小结
JS将字符串转成整数使用哪个方法?
parseInt(字符串);
JS常用的运算符
目标
学习JS中的各种运算符
算术运算符
算术运算符用于执行两个变量或值的算术运算
算术运算符和Java中一模一样
赋值运算符
赋值运算符用于给JavaScript 变量赋值
赋值运算符和Java中一模一样
比较运算符
比较运算符用于逻辑语句的判断,从而确定给定的两个值或变量是否相等。
数字可以与字符串进行比较,字符串可以与字符串进行比较。字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS运算符</title>
</head>
<body>
<script>
var m = 5;
var n = 5;
document.write((m == n) + "<br/>"); // true
var x = "5"; // 会将字符串自动转成数字再比较
document.write((m == x) + "<br/>"); // true
// ===:恒等于,即比较值,也比较类型
document.write((m === n) + "<br/>"); // true,值相等,类型也相同
document.write((m === x) + "<br/>"); // false,值相等,但是类型不相同
</script>
</body>
</html>
逻辑运算符
逻辑运算符用来确定变量或值之间的逻辑关系,支持短路运算
逻辑运算符不建议单与&、单或|
三元运算符
小结
-
JS里面的运算符和Java的运算符基本一样
-
说出运算符 === 的作用?
既比较值,也比较类型。
JS流程控制:if语句
目标
学习JS中if语句使用非boolean类型的条件
if 语句
在一个指定的条件成立时执行代码。
if (条件表达式) {
// 代码块;
}
if…else 语句
在指定的条件成立时执行代码,当条件不成立时执行else的代码。
if (条件表达式) {
// 代码块1;
} else {
// 代码块2;
}
if…else if…else 语句
使用这个语句可以选择执行若干块代码中的一个。
if (条件表达式1) {
// 代码块1;
} else if (条件表达式2) {
// 代码块2;
} else {
// 代码块3;
}
非布尔类型作为条件
数据类型 | 为真 | 为假 |
---|---|---|
number | 1 | 0 |
string | ⾮空串 | 空串:"" |
undefined | 为假 | |
NaN | 为假 | |
object | 非空 | null |
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>if语句</title>
</head>
<body>
<script>
// boolean类型
if (true) {
document.write("真" + "<br/>")
} else {
document.write("假" + "<br/>")
}
// 数值类型
if (1) {
document.write("真" + "<br/>")
} else {
document.write("假" + "<br/>")
}
// 字符串
if ("abc") {
document.write("真" + "<br/>")
} else {
document.write("假" + "<br/>")
}
// 对象类型
var obj = {name:"aa"};
if (obj) {
document.write("真" + "<br/>")
} else {
document.write("假" + "<br/>")
}
</script>
</body>
</html>
小结
-
string中空串表示真还是假?
假
-
数字哪个是真,哪个是假?
非0为真,0为假
-
object哪个是真,哪个是假?
非null为真,null为假
JS流程控制:switch语句
目标
学习switch语句与Java的区别
语法一:case后使用常量,与Java相同
switch (变量名) {
case 常量值:
break;
case 常量值:
break;
default:
break;
}
语法二:case后使用表达式
switch (true) { // 这里的变量名写成true
case 表达式: // 如:n > 5
break;
case 表达式:
break;
default:
break;
}
案例:判断一个学生的等级
通过prompt输入的分数,如果90100之间,输出优秀。8090之间输出良好。60~80输出及格。60以下输出不及格。其它分数输出:分数有误。
相关的方法
效果
分析
- 使用prompt得到输入的分数
- 使用switch对分数进行判断
- 如果在90到100之间,则输出优秀,其它依次类推。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Switch</title>
</head>
<body>
<script type="text/javascript">
// 让用户通过提示框输入值
var score = window.prompt("请输入一个分数", 60);
// document.write(score + "<br/>");
// document.write(typeof(score) + "<br/>");
// switch(true),case后面可以跟表达式
switch (true) {
case score >= 90 && score <= 100:
alert("优秀");
break;
case score >= 60 && score < 90:
alert("及格");
break;
case score >= 0 && score < 60:
alert("不及格");
break;
default:
alert("输入有误");
break;
}
</script>
</body>
</html>
小结
-
如果switch的case后面要使用表达式,switch后面值要写成什么true
switch (true) { case 表达式: break; case 表达式: break; default: break; }
-
学了一个window相关的函数
string prompt(“提示信息”, “默认是”);
JS流程控制:循环语句
目标
使用循环实现9x9乘法表
while语句
条件表达式值为 true 时循环执行代码
while (条件表达式) {
需要执行的代码;
}
do-while语句
最少执行1次循环
do {
需要执行的代码;
} while (条件表达式);
for 语句
循环指定次数
for (var i = 0; i < 10; i++) {
需要执行的代码;
}
break和continue
break: 跳出整个循环,结束整个循环
continue:结束本次循环,继续下次循环
案例:乘法表
以表格的方式输出乘法表,其中行数通过用户输入
效果
分析
- 先制作一个没有表格,无需用户输入的9x9乘法表
- 由用户输入乘法表的行数
- 使用循环嵌套的方式,每个外循环是一行tr,每个内循环是一个td
- 给表格添加样式,设置内间距
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>乘法表</title>
<style>
table {
/*细边框样式*/
border-collapse: collapse;
}
td {
/*设置内边距*/
padding: 4px;
}
</style>
</head>
<body>
<script type="text/javascript">
//用户输入
var num = window.prompt("请输入乘法表的行数:","9");
// " 表示字符串里面的双引号
document.write("<table border=\"1\">");
for(var i=1; i<=num; i++) {
//外循环,每次是一行
document.write("<tr>");
for (var j=1; j<=i; j++) {
//内循环,每次是一个单元格
document.write("<td>");
document.write(j + "×" + i + "=" + i*j);
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
小结
js的while
while (条件) {
循环体;
}
js的for循环和java有一点点区别
for (var i = 0; i < 值; i++) {
循环体
}
99乘法表
嵌套循环,外循环控制行数,内循环控制列数
让用户输入行数,prompt()
给99乘法表添加table,tr,td
JS命名函数和匿名函数(重点)
目标
学习JS的命名函数和匿名函数的使用
回顾Java中的方法
修饰符 返回值类型 方法名(数据类型 变量名) {
方法体;
return 返回值;
}
JS函数的概述
什么是函数:类似于Java中方法,将可以重用的代码起个名字,以后就可以通过这个名字并且传递参数来调用它
JS的两种函数:命名函数,匿名函数
命名函数的格式
自定义函数
定义一个函数实现加法功能
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>命名函数</title>
</head>
<body>
<script type="text/javascript">
// 定义函数
function sum(a,b) {
return a+b;
}
// 调用函数
var result = sum(4,3);
document.write(result + "<br/>");
</script>
</body>
</html>
匿名函数
函数调用代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匿名函数</title>
</head>
<body>
<script>
// 定义一个匿名函数,并将匿名函数赋值给变量
var sum = function (a, b) {
return a + b;
}
// 通过变量名调用函数
var num = sum(10, 20);
document.write(num + "<br/>")
</script>
</body>
</html>
小结
- 定义函数的关键字是什么?
function
-
命名函数的格式
function 函数名(变量名1, 变量名2...) { 函数体; return 值; }
-
函数参数和返回值需要指定数据类型吗?
不需要
JS函数不支持重载
目标
学习JS中函数参数的传递过程
注意
- 关于函数的重载:在JS中没有函数的重载,后面的方法会覆盖前面同名的方法
- 在每个函数的内部都有一个隐藏的数组:arguments,有个属性length
隐藏数组的执行过程
案例:在函数内部输出隐藏数组的长度和元素
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐藏数组arguments</title>
</head>
<body>
<script type="text/javascript">
function sum(a,b) {
document.write("隐藏数组的长度:" + arguments.length + "<br/>");
for (var i = 0; i < arguments.length; i++) {
document.write("第" + i + "个元素:" + arguments[i] + "<br/>");
}
document.write("<hr/>");
document.write("a=" + a + "<br/>");
document.write("b=" + b + "<br/>");
}
//调用
//sum(8); //参数不够
sum(8,9,10); //参数超出
</script>
</body>
</html>
小结
- JS函数是否有重载?
没有重载,相同名称的函数,后面会覆盖前面的 - 每个函数内部都有一个隐藏数组名是:
arguments数组,保存方法传递过来的参数。
JS变量的作用域
目标
学习JS变量的作用域
讲解
JS的变量分为全局变量和局部变量
全局变量:就是定义在函数外面的变量
局部变量:就是定义在函数内的变量
小结
变量重名函数里面不会主动使用函数外面的全局变量
方法中定义局部变量,变量的声明会被提前到函数的最前面
在浏览器中调试JS代码
目标
学习在浏览器中调试JS代码
设置断点
谷歌浏览器的调试界面: F12
注:设置断点以后要重新刷新页面才会在断点停下来
语法错误
小结
在浏览器调试JS代码
谷歌浏览器按F12打开调试界面
点击Sources,选中相应网页
打断点
按F5让浏览器重新执行网页,执行到断点啦
后续操作和idea调试Java一样