《JavaScript基础-分享》
建立学习目标
- 能够使用JS中的流程控制语句(if, switch,for, while)
- 能够在 JS 中定义命名函数和匿名函数(方法)
- 能够使用 JS 中常用的事件
- 能够使用 JavaScript 对 CSS 样式进行操作
- 能够使用数组中常用的方法
- 能够使用日期对象常用的方法
使用工具建立一个文件：
使用Visual 建立一个文件步骤：选择文件–>新建文件–>Ctrl+s -->起名，保存格式选择HTML–>进入文本–>输入一个英文感叹号–>回车–>完成
学习内容
常用语法
<script>
alert("hello Word!")
1.输入框
prompt("你好啊");
2.弹出警告框
alert("Hello");
3.控制台输出
console.log("hello js");
备注：在网页不能直接看到输出内容，需要在Chrome中按F12或ctrl+shift+i ，里面有很多个功能分栏，第二个就是console控制台，可以在上面输入console.log 回车就能执行，如果有多行代码需要打的话 回车是shift+回车
4.页面内容输出
document.write("hello js");
document.write("<br>");
document.write("hello js");
</script>
流程控制：if 语句
目标
JS中if语句使用非boolean类型的条件
if 语句：
在一个指定的条件成立时执行代码。
if(条件表达式) {
//代码块;
}
if…else 语句
在指定的条件成立时执行代码，当条件不成立时执行另外的代码。
if(条件表达式) {
//代码块;
}
else {
//代码块;
}
if…else if…else 语句
使用这个语句可以选择执行若干块代码中的一个。
if (条件表达式) {
//代码块;
}
else if(条件表达式) {
//代码块;
}
else {
//代码块;
}
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>if语句</title>
</head>
<body>
<script type="text/javascript">
/*
1. Java中判断条件必须是布尔类型的值
2. 在JS中可以使用非布尔类型的表达式
真 假
number 非0 0
string 非空串 空串 ""
object 非空 null
undefined 永远为假
NaN (Not a Number) 永远为假
3. 建议判断条件还是使用boolean类型比较好
*/
/*
if(0) {
document.write("真" + "<br/>");
}
else {
document.write("假" + "<br/>");
}
*/
/*
if("") {
document.write("真" + "<br/>");
}
else {
document.write("假" + "<br/>");
}
*/
/*
var person = {}; //创建一个对象
if(null) {
document.write("真" + "<br/>");
}
else {
document.write("假" + "<br/>");
}
*/
let u; //undefined
if(u) {
document.write("真" + "<br/>");
}
else {
document.write("假" + "<br/>");
}
</script>
</body>
</html>
小结：非布尔类型的表达式
| 数据类型 | 为真 | 为假 |
|---|---|---|
| number | 非0 | 0 |
| string | 非空串 | “” |
| undefined | 为假 | |
| NaN(Not a Number) | 为假 | |
| object | 非空 | null |
流程控制：switch语句
目标
- switch语句与Java的区别
- window对象的方法
语法一：case后使用常量，与Java相同
如果变量名等于某个分支的常量值，就执行这个代码段。如果所有的条件都不满足就执行default代码。
switch(变量名) {
case 常量值:
break;
case 常量值：
break;
default:
break;
}
语法二：case后使用表达式
- switch后面一定要是真
- 每个条件都可以使用表达式
- 如果上面所有的表达式都不匹配，就执行default
switch(true) { //这里的变量名写成true
case 表达式: //如：n > 5
break;
case 表达式:
break;
default:
break;
}
相关的方法
调用方法方式：
- window.prompt()， window.alert()
- prompt(), alert()
注：只要是window对象的方法，window对象都可以省略
| window对象的方法名 | 作用 |
|---|---|
| string prompt(“提示信息”,"默认值”) | 输入框，参数： 1. 输入的提示信息 2. 一开始出现在输入框中值 返回值：就是用户输入的信息，字符串类型 |
| alert(“提示信息”) | 输出信息框 |
输入框
信息提示框
案例：判断一个学生的等级
通过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">
/*
通过prompt输入的分数，如果90~100之间，输出优秀。80~90之间输出良好。60~80输出及格。60以下输出不及格。其它分数输出:分数有误。
*/
//1. 让用户输入分数
let score = window.prompt("请输入您的分数：","60"); //score是一个字符串类型
//document.write(typeof(score) + "<br/>");
//2. 通过分数判断用户的等级
switch (true) {
//3. 输出用户的等级(比较运算符，会自动将字符串转成数值类型进行比较)
case score >=90 && score <=100 :
document.write("优秀" + "<br/>");
break;
case score >=80 && score <90 :
document.write("良好" + "<br/>");
break;
case score >=60 && score <80 :
document.write("及格" + "<br/>");
break;
case score >=0 && score <60 :
document.write("不及格" + "<br/>");
break;
default:
document.write("分数有误" + "<br/>");
}
</script>
</body>
</html>
小结
如果switch的case后面要使用表达式，switch后面值要写成什么？ true
流程控制：循环语句
目标
使用循环实现9x9乘法表
while语句：
当指定的条件为 true 时循环执行代码，也支持非boolean类型的条件
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: 3px;
}
</style>
</head>
<body>
<script type="text/javascript">
let num = prompt("请输入乘法表的数：","9"); //字符串类型
//放在表格中
document.write("<table border='1'>"); //如果字符串中有双引号，必须使用\"进行转义
//固定的行和列：9
for (let i = 1; i <= num; i++) {
//外循环控制多少行
document.write("<tr>"); //表示一行
for (let 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>
命名函数和匿名函数
目标
命名函数和匿名函数的使用
函数的概述
-
什么是函数
一个代码块，给代码块起个名字，以后可以通过名字来调用它，实现重用的功能。类似于Java中方法
-
两种函数：
- 命名函数：有名字的函数，可以通过名字来多次调用
- 匿名函数：没有名字的函数，不可重用，只能使用一次。但可以通过一个变量来指向它，实现重用。
命名函数的格式
function 函数名(参数列表) {
//代码块
return 返回值; //可选：如果这个函数有返回值，使用return，没有就不使用
}
自定义函数
需求
定义一个函数实现加法功能
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的使用</title>
</head>
<body>
<script type="text/javascript">
/*
定义一个函数实现加法功能，参数列表不需要写var或let关键字
*/
function sum(a,b) {
return a + b;
}
//函数不调用不执行
let c = sum(3, 5);
document.write("计算结果是：" + c + "<br/>");
</script>
</body>
</html>
注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于函数的重载</title>
</head>
<body>
<script type="text/javascript">
/*
1. 在JS中没有函数的重载，后面出现的同名函数会覆盖前面的同名函数
2. 实参个数与形参的个数无关，只会按函数名字去调用
3. 在每个函数的内部都有一个隐藏的数组，名字叫arguments
*/
//定义了一个函数
function sum(a,b) {
alert(2);
}
function sum(a) {
alert(1);
}
function sum(a,b,c) {
//形参
alert(3);
}
//调用
sum(3, 5); //实参
</script>
</body>
</html>
隐藏数组的执行过程
案例：在函数内部输出隐藏数组的长度和元素
效果
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OHe0zMJ5-1593831638573)(assets/image-20200413104148051.png)]](https://i-blog.csdnimg.cn/blog_migrate/c334c9a854c1ebc1211e5dd32512a322.png)
代码
<!DOCTYPE html>
<
最低0.47元/天 解锁文章
3916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
