11.17 日志
1.1.1 练习debug
找到source，某一js代码行设置断点:
单步运行:
观察变量，根据情况做好到代码调整.
1.1.2 课堂练习:
同时使用debug来查看过程和结果.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" value="10" id="num">
<input type="button" value="计算">
<input type="text" value="0" id="result">
</body>
</html>
操作步骤:
1. 设计页面，并给文本框设置id。并设置按钮的id
2. 找按钮的单击事件 onclick
3. 获取id为num的文本框的值.存储在变量n
4. 定义循环语句，循环变量从1开始，循环到n为止，将值累加，存储在sum中
5.将sum赋值到id为result的文本框中
6.运行代码，查看结果，并debug查看运行过程.
1.2 运算符
算术运算符: + - * / % ++ --
比较[关系]运算符: > < != >= <= == === 得到的结果一定是true/false ->boolean的值
赋值运算符: = += -= *= /=
逻辑运算符: && || ! 针对boolean值
位运算符等等.
1.3 流程控制
1.3.1 条件结构:
如果..就怎么…
if(条件)
{
}
如果..就怎么…否则…
if(条件)
{
}
else{
}
如果1….就1…
如果2….就2…
否则…
if(条件1)
{
}
else if(条件2)
{
}
else{
}
练习:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="age" placeholder="请输入你的年龄" value="18">
<input type="button" value="电影推荐" id="btn1">
<input type="button" value="书籍推荐">
<script>
//按钮的单击事件
document.getElementById("btn1").onclick = function fun01(){
//得到用户输入的年龄
let age = parseInt(document.getElementById("age").value);
//条件判断
if(age>0 && age<=3){
//先alert
alert("眼睛尚未发育完全，不建议观看.")
}
else if(age<=10){
alert("《猫和老鼠大战凹凸曼》!")
}
else if(age<=18){
alert("《哪吒之魔童降世》")
}else if(age<=30){
alert("《楚门的世界》")
}else{
alert("还要别人推荐吗？")
}
}
</script>
</body>
</html>
1.3.2 优化一下:
提示信息显示，我们希望能在页面上直接展示，而不是弹窗输出.
增加了图片展示，视频展示.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="age" placeholder="请输入你的年龄" value="18">
<input type="button" value="电影推荐" id="btn1">
<input type="button" value="书籍推荐">
<div>
<h4 id="mname">电影名称</h4>
<p>简介</p>
<span>图片和视频</span><br/>
<p style="display: inline-block">
<img src="imgs/default.png" id="pic" style="width: 200px ;height: 300px">
</p>
<p style="display: inline-block" >
<video width="600px" height="300px" controls id="vid">
<source src="video/cat.mp4">
</video>
</p>
</div>
<script>
//按钮的单击事件
document.getElementById("btn1").onclick = function fun01(){
//得到用户输入的年龄
let age = parseInt(document.getElementById("age").value);
//将提示信息存储在一个变量中
let msg = "暂无推荐.";
//将图片保存在一个变量中
let img = "default.png";
//将视频名称存储在一个变量中
let vid ="default.mp4";
//条件判断
if(age>0 && age<=3){
//先alert
msg = "眼睛尚未发育完全，不建议观看.";
}
else if(age<=10){
msg = "《猫和老鼠大战凹凸曼》!";
img = "cat.png";
vid ="cat.mp4";
}
else if(age<=18){
msg = "《哪吒之魔童降世》";
img = "nn.png";
vid ="nn.mp4";
}else if(age<=30){
msg = "《楚门的世界》";
img = "chmen.png";
vid ="chmen.mp4";
}else{
msg = "还要别人推荐吗？";
}
//将信息显示在div的h4中
document.getElementById("mname").innerHTML ="<span style='color: darkred'>"+msg+"</span>";
//简介 ..自己去完成
// 图片
document.getElementById("pic").src="imgs/"+img;
//视频的显示
document.getElementById("vid").src="video/"+vid;
}
</script>
</body>
</html>
1.3.3 switch:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
let n=2;
// 小括号内表达式计算的时候会得到一个结果
//n*2 和case后面的常量值进行比较 ,如果"相等",只能是相等,没办法像我们if一样做区间的判断.
//switch(n*2){
//如果所有case和常量表达式结果都不相等，那么将会执行default,default相当于else.只能有一个，当然也可以省略
//break也可以省略，但是不会跳出switch结构啦。
switch(n){
case 1:
//语句
console.log("猪脚饭");
break;
case 2:
//语句
console.log("沙茶面");
break;
case 3:
//语句
console.log("漳州卤面");
break;
case 4:
//语句
console.log("手枪腿");
break;
default :
//语句
console.log("汉堡");
break;
}
</script>
</body>
</html>
浙公网安备 33010602011771号