JS起步"/>
前端之JS起步
前端之JS起步
- 前提
- 程序员思维
- 简易版“猜数字”游戏
- 代码
- 函数
- 事件监听
- 循环 loop
- 输出百以内的素数
- let 和 var 之间的区别
- 错误
- 我的猜数游戏
- 我的猜数游戏(真·自己写的·改进版)
前提
常量用于存储不希望更改的数据，用关键字 const 创建，本例中用常量来保存对界面元素的引用。界面元素的文字可能会改变，但引用是不变的。
程序员思维
- 程序运行的目的,
- 为达目的应选定的代码类型，
- 以及如何使这些代码协同运行。
简易版“猜数字”游戏
游戏应随机选择一个 100 以内的自然数, 然后邀请玩家在 10 轮以内猜出这个数字。每轮后都应告知玩家的答案正确与否，如果出错了，则告诉他数字是低了还是高了。并且应显示出玩家前一轮所猜的数字。一旦玩家猜对，或者用尽所有机会，游戏将结束。游戏结束后，可以让玩家选择再次开始。
改进:
输入之后回车确定
游戏结束后, 空格重新开始
代码
结构:
<!DOCTYPE html>
<html lang="zh-cmn-Hans"><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>猜数字小游戏</title><link rel="stylesheet" href="./styles/js-number-guess-game.css">
</head><body><!-- 标题 --><h1>猜数字游戏</h1><!-- 描述 --><p>我刚才随机选定了一个100以内的自然数。看你能否在 10 次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。</p><!-- 猜数表格 --><div class="form"><label for="guessField">请猜数: </label><input type="text" id="guessField" class="guessField"><input type="submit" value="确定" class="guessSubmit"></div><!-- 结果,每次猜的数和提示 --><div class="resultParas"><p class="guesses"></p><p class="lastResult"></p><p class="lowOrHi"></p></div><script src="./scripts/js-number-guess-game.js"></script>
</body></html>
样式:
<style>
html {font-family: sans-serif, '黑体';
}body {width: 50%;max-width: 800px;margin: 0 auto;font-size: 1.2rem;font-weight: bold;line-height: 1.5;background: url('../images/bg.png');background-position-x: 50%;background-position-y: 25%;background-attachment: fixed;
}h1 {text-align: center;text-shadow: 1px 1px 1px blue, 3px 3px 1px blue;
}@media screen and (max-width:768px) {body {width: 98%;margin: 0 auto;font-size: 1.5rem;}
}
</style>
行为:
/*** 添加保留数据的变量; */
// 随机1到100, 向下取整.
let randomNumber = Math.floor(Math.random() * 100) + 1;// 定义常量 -- 保存对界面元素的引用
// 结果
const guesses = document.querySelector('.guesses'); //之前猜的数
const lastResult = document.querySelector('.lastResult'); //上次是对还是错
const lowOrHi = document.querySelector('.lowOrHi'); //上次高了还是低了// 猜测
const guessSubmit = document.querySelector('.guessSubmit'); //提交
const guessField = document.querySelector('.guessField'); //输入这次猜的数// 猜测次数, 开启新游戏按钮
let guessCount = 1;
let resetButton;// 函数:猜数
function checkGuess() {let userGuess = Number(guessField.value); //取出玩家输入的数if (guessCount === 1) { //第一次输入数字guesses.textContent = '上次猜的数：'; //初始化猜数过程记录的开头}guesses.textContent += userGuess + ' '; //更新猜数过程记录// 判断if (userGuess === randomNumber) {lastResult.textContent = '恭喜你！猜对了';lastResult.style.backgroundColor = 'green';lowOrHi.textContent = '';setGameOver();} else if (guessCount === 10) {lastResult.textContent = '!!!GAME OVER!!!';setGameOver();} else {lastResult.textContent = '你猜错了！';lastResult.style.backgroundColor = 'red';if (userGuess < randomNumber) {lowOrHi.textContent = '你猜低了！';} else if (userGuess > randomNumber) {lowOrHi.textContent = '你猜高了';}}// 判断出错, 猜测次数+1, 猜数数字清空, 将焦点赋予猜数的输入框guessCount++;guessField.value = '';guessField.focus();
}
// 事件监听
guessSubmit.addEventListener('click', checkGuess);// 函数: 游戏结束
function setGameOver() {guessField.disabled = true; //输入框,确定按钮不可选中guessSubmit.disabled = true;resetButton = document.createElement('button'); //添加一个新按钮 -- 开始新游戏resetButton.textContent = '开始新游戏';document.body.appendChild(resetButton); //放到内容的结尾resetButton.addEventListener('click', resetGame); //设置监听
}// 函数: 开始新游戏
function resetGame() {guessCount = 1; //次数重设为1// 提示重设const resetParas = document.querySelectorAll('.resultParas p');for (let i = 0; i < resetParas.length; i++) {resetParas[i].textContent = '';}// 删除重新开始按钮resetButton.parentNode.removeChild(resetButton);guessField.disabled = false;guessSubmit.disabled = false;guessField.value = '';guessField.focus();lastResult.style.backgroundColor = 'white';// 重新生成一个数randomNumber = Math.floor(Math.random() * 100) + 1;
}
函数
函数是可复用的代码块，可以一次编写，反复运行，从而节省了大量的重复代码。
事件监听
// 事件监听
guessSubmit.addEventListener('click', checkGuess);
界面元素 guessSubmit 被点击时, 执行 checkGuess .
循环 loop
for (起始值; 循环条件; 增加器) { 循环代码; }
输出百以内的素数
function f() {var k;var res = "";for (let i = 2; i < 101; i++) {k = 0;for (let j = 2; j <= Math.sqrt(i); j++) {if (i % j === 0) {k = 1;break;}}if (k === 0) {res += i + " ";}}console.log(res);
}
f();
let 和 var 之间的区别
1.作用域不同:
var是函数作用域，let是块作用域。
在函数中声明了var，整个函数内都是有效的，比如说在for循环内定义的一个var变量，实际上其在for循环以外也是可以访问的
而let由于是块作用域，所以如果在块作用域内定义的变量，比如说在for循环内，在其外面是不可被访问的.
2.let不能在定义之前访问该变量，但是var可以。
let必须先声明，再使用。而var先使用后声明也行，只不过直接使用但没有定义的时候，其值是undefined.
重点:var有一个变量提升的过程，当整个函数作用域被创建的时候，实际上var定义的变量都会被创建，并且如果此时没有初始化的话，则默认为初始化一个undefined.
我的尝试:
var a = 10;
f();
alert(a);function f() {alert(a);var a = 0;alert(a);
}
输出结果:
undefined
0
10
好似js的执行顺序是这样的:
function f() {alert(a);var a = 0;alert(a);
}
f();
var a = 10;
alert(a);
有种函数的声明和使用都在最前面的样子.
错误
1.语法错误, 函数名错误 – 大小写错误, 获取元素对象时少用了点.
2.逻辑错误,
Math.random() 随机范围是[0, 1)
我的猜数游戏
disabled input禁止输入.
guess.focus(); 焦点在…上.
网页实例(这是编写边抄的)
我的猜数游戏(真·自己写的·改进版)
好工具一定要分享给最好的朋友，ProcessOn助您和好友一起高效办公！各位大大帮帮忙, 这东西挺好用的.
网页实例(这是一大早起来, 思路贼清晰的时候写的: 改进: 1. 确定绑定回车; 2. 开始新游戏绑定空格 ; 3. 加了背景图片)
更多推荐
前端之JS起步
发布评论