文章目录

Days3.Javascript学习
- 1.计算机硬件
- 2.认识程序运行中的内存
- 3.程序结构
- 4.结构语句
- - 1.单分支结构语句
  - 2.双分支结构语句
  - 3.多分支结构语句
  - 4.嵌套结构
  - 5.switch-case选择结构
  - - 限号案例
- 5.案例开发
- - 剪刀石头布图片版
  - 老虎棒子鸡案例

Days3.Javascript学习

1.计算机硬件

硬盘Disk：存储源代码的地方，也称为磁盘

内存Memory：程序运行的时候，加载数据的地方

处理器CPU：程序运行的时候，执行数据运算的地方

2.认识程序运行中的内存

栈内存Stack：临时分配数据的地方，分配空间和释放空间的速度快，稳定性较差

堆内存Heap：长久分配数据的地方，分配的数据的存储稳定性强，但是分配空间和释放空间较慢

方法区Static：存储运行的程序源文件的位置，所有程序运行需要的数据都从这个位置读取

3.程序结构

顺序结构：代码从上到下逐行执行

选择结构：根据某个指定的条件，决定运行指定的代码块

循环结构：根据某个指定的条件，决定是否重复执行某个代码块

JavaScript中针对选择结构，提供了两种语法：

if-else选择结构

swtich-case选择结构

JavaScript针对循环结构，提供了多种语法：

for循环

while循环

do-while循环

for..in循环

4.结构语句

1.单分支结构语句

//单分支结构// 1，单分支结构语法var age=19;if(age>=18){console.log("成年");}console.log("好好学习，天天向上")

2.双分支结构语句

 // 双分支结构// 2.双分支结果语法var score=89;console.log("考试即将开始")if(score>=60){console.log("考试合格")}else{console.log("考试不合格")}console.log("考试结束")

3.多分支结构语句

 // 多分支结构// 3.多分支结构语法// var score2=89;var score2=prompt("请输入成绩");if(score2>0 && score2<60){console.log("不及格");}else if(score2>=60 && score2<80){console.log("及格");}else if(score2>=80 && score2<90){console.log("良好");}else if(score2>=90 && score2<=100){console.log("优秀");}

4.嵌套结构

  // 嵌套结构var score3=prompt("请输入成绩");if(score3>0 && score3<60){console.log("不及格");if(score3>0 &&score3<40){console.log("留级");}else{console.log("继续学习");}}else if(score3>=60 && score3<80){console.log("及格");}else if(score3>=80 && score3<90){console.log("良好");}else if(score3>=90 && score3<=100){console.log("优秀");}

5.switch-case选择结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><input type="text"  id="answer" placeholder="请输入答案（A/B/C/D）"><button id="btn">验证答案是否正确</button><script>// 用户进行选择判断var _an=document.getElementById("answer")var _btn=document.getElementById("btn")_btn.onclick=function(){// 获取了用户输入的答案var _anl=_an.value// switch-case基本语法// 将_val变量中的数据，和case后面的值进行相等判断，相等的话就执行对应case中的代码switch(_anl){case 'A':console.log("A错1")break;case 'B':console.log("B错2")break;case 'C':console.log("C错3")break;  case 'D':console.log("D错4")break;  default:console.log("没有这个号");}}</script>
</body>
</html>

限号案例

 // 车牌尾号var num=prompt("请输入车牌尾号")switch(num){case '1':case '6': console.log("周一");break;case '2':case '7': console.log("周二");break;case '3':case '8': console.log("周三");break;case '4':case '9': console.log("周四");break;case '5':case '0': console.log("周五");break;default:console.log("没有这个尾号");}

5.案例开发

剪刀石头布图片版

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{font-size: 22px;font-weight: bolder;}img{width: 200px;height: 200px;}</style>
</head>
<body><p>用户：点击对应的图片选择自己的出招</p><img src="../img/shitou.png" alt="" id="shitou"><img src="../img/jiandao.png" alt="" id="jiandao"><img src="../img/bu.png" alt="" id="bu"><div class="box1">
<p>电脑：电脑出招随机出现的，当用户点击了判断按钮，电脑就可以出招</p>
<img src="../img/deng.png" alt="" id="dnimg">
</div>
<button id="btn">判断</button>
<div id="jieguo"><p>游戏结果</p>
<img src="../img/deng.png" alt="" id="jieguotu">
</div><script>// 用户出招var _shitou=document.getElementById("shitou");var _jiandao=document.getElementById("jiandao");var _bu=document.getElementById("bu");var _userChuzhao="";_shitou.onclick=function(){_userChuzhao="石头"_shitou.style.border="2px solid red"_jiandao.style.border="none"_bu.style.border="none"}_jiandao.onclick=function(){_userChuzhao="剪刀"_shitou.style.border="none"_jiandao.style.border="2px solid red"_bu.style.border="none"}_bu.onclick=function(){_userChuzhao="布"_shitou.style.border="none"_jiandao.style.border="none"_bu.style.border="2px solid red"}// 电脑出招var _btn=document.getElementById("btn");var _dnChuzhao=""var _dnimg=document.getElementById("dnimg");_btn.onclick=function(){var num=Math.ceil(Math.random()*3)if(num===1){_dnChuzhao="剪刀"_dnimg.src="../img/jiandao.png"}else if(num===2){_dnChuzhao="石头"_dnimg.src="../img/shitou.png"}else if(num===3){_dnChuzhao="布"_dnimg.src="../img/bu.png"}// 判断结果// var _jieguo=document.getElementById("jieguo")var _jieguotu=document.getElementById("jieguotu")if((_userChuzhao==="剪刀" && _dnChuzhao==="布")||(_userChuzhao==="石头" && _dnChuzhao==="剪刀")||(_userChuzhao==="布" && _dnChuzhao==="石头")){_jieguotu.src="../img/ying.png"}else if(_userChuzhao===_dnChuzhao){_jieguotu.src="../img/pingju.png"}else{_jieguotu.src="../img/shu.png"}}</script>
</body>
</html>

老虎棒子鸡案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{width: 200px;height: 200px;}p{font-size: 22px;font-weight: bolder;}</style>
</head>
<body><p>用户：请选择动物出场</p><img src="../img/laohu.png" alt="" id="laohu"><img src="../img/ji.png" alt="" id="ji"><img src="../img/chong.png" alt="" id="chong"><img src="../img/bang.png" alt="" id="bang">
<div class="dn"><p>电脑：随机派出动物出场当用户点击判断按钮便可出场</p><img src="../img/deng.png" alt="" id="dengd">
</div>
<button id="btn">判断</button>
<div id="jieguo"><p>游戏结果</p><img src="../img/deng.png" alt="" id="dengd1">
</div><script>// 用户输出var _laohu=document.getElementById("laohu");var _ji=document.getElementById("ji");var _chong=document.getElementById("chong");var _bang=document.getElementById("bang");var _userChuchang="";_laohu.onclick=function(){_userChuchang="老虎";_laohu.style.border="2px solid red"_ji.style.border="none";_chong.style.border="none";_bang.style.border="none";}_ji.onclick=function(){_userChuchang="鸡";_laohu.style.border="none"_ji.style.border="2px solid red";_chong.style.border="none";_bang.style.border="none";}_chong.onclick=function(){_userChuchang="虫子";_laohu.style.border="none"_ji.style.border="none";_chong.style.border="2px solid red";_bang.style.border="none";}_bang.onclick=function(){_userChuchang="棒子";_laohu.style.border="none"_ji.style.border="none";_chong.style.border="none";_bang.style.border="2px solid red";}// 电脑出场var _dengd=document.getElementById("dengd");var _btn=document.getElementById("btn");var _dnChuchang="";_btn.onclick=function(){num=Math.ceil(Math.random()*4);if(num===1){_dnChuchang="老虎"_dengd.src="../img/laohu.png"}else if(num===2){_dnChuchang="鸡"_dengd.src="../img/ji.png"}else if(num===3){_dnChuchang="虫子"_dengd.src="../img/chong.png"}else if(num===4){_dnChuchang="棒子"_dengd.src="../img/bang.png"}// 判断结果var _dengd1=document.getElementById("dengd1");if((_userChuchang==="老虎" && _dnChuchang==="鸡")||(_userChuchang==="鸡" && _dnChuchang==="虫子")||(_userChuchang==="虫子" && _dnChuchang==="棒子")||(_userChuchang==="棒子" && _dnChuchang==="老虎")){_dengd1.src="../img/ying.png"}else if(_userChuchang===_dnChuchang){_dengd1.src="../img/pingju.png"}else if((_userChuchang==="鸡" && _dnChuchang==="老虎")||(_userChuchang==="虫子" && _dnChuchang==="鸡")||(_userChuchang==="棒子" && _dnChuchang==="虫子")||(_userChuchang==="老虎" && _dnChuchang==="棒子")){_dengd1.src="../img/shu.png"}else{_dengd1.src="../img/wuxiao.png"}}</script>
</body>
</html>

  }else if((_userChuchang==="鸡" && _dnChuchang==="老虎")||(_userChuchang==="虫子" && _dnChuchang==="鸡")||(_userChuchang==="棒子" && _dnChuchang==="虫子")||(_userChuchang==="老虎" && _dnChuchang==="棒子")){_dengd1.src="../img/shu.png"}else{_dengd1.src="../img/wuxiao.png"}
}
</script>

```

Days3.Javascript学习相关推荐

Javascript学习7 - 脚本化浏览器窗口
原文:Javascript学习7 - 脚本化浏览器窗口本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...
Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
《Javascript入门学习全集》 Javascript学习第二季（实战4）
Javascript学习第二季(实战4) 上章的例子虽然实现了功能,也做了相应的判断,也符合标准了.但还有一个问题就是: Choose an image. 在html中只是为了图片切换而做的,而 ...
Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
JavaScript学习知识点归纳
JavaScript学习包括几大方面: 1.基础语法 2.JavaScript核心对象 3.DOM操作 4.BOM操作 5.正则表达式 6.AJAX 7.面向对象编程以下依次为各版块相关内容==&g ...
JavaScript学习笔记（五）
JavaScript学习笔记(五) ①Array类本地对象 ②Date类 ①Global对象对象的类型内置对象 ②Math对象宿主对象今天继续学习JS中的对象,昨天内置对象Global对 ...
JavaScript学习笔记（备忘录）
JavaScript学习笔记(备忘录) ===运算符判断数值和类型是否相等.如: console.log('s'==='s') //输出trueconsole.log('1'===1) //输出fa ...
Java程序猿的JavaScript学习笔记（10—— jQuery-在“类”层面扩展）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
JavaScript学习笔记（十）——学习心得与经验小结
JavaScript学习笔记(十)--学习心得与经验小结目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/mixer/archi ...

Days3.Javascript学习

文章目录

Days3.Javascript学习

1.计算机硬件

2.认识程序运行中的内存

3.程序结构

4.结构语句

1.单分支结构语句

2.双分支结构语句

3.多分支结构语句

4.嵌套结构

5.switch-case选择结构

限号案例

5.案例开发

剪刀石头布图片版

老虎棒子鸡案例

Days3.Javascript学习相关推荐

最新文章

热门文章