JavaScript
JavaScript 是一種腳本晴圾，一門(mén)編程語(yǔ)言颂砸，它可以在網(wǎng)頁(yè)上實(shí)現(xiàn)復(fù)雜的功能，網(wǎng)頁(yè)展現(xiàn)給你的不再是簡(jiǎn)單的靜態(tài)信息死姚，而是實(shí)時(shí)的內(nèi)容更新人乓，交互式的地圖，2D/3D 動(dòng)畫(huà)都毒，滾動(dòng)播放的視頻等等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信搜索：伊洛的小屋</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Name：伊洛Yiluo</p>
<script>
const para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
const name = prompt('輸入公眾號(hào)名字：');
para.textContent = '公眾號(hào)：' + name;
}
</script>
</body>
</html>
運(yùn)行
JavaScript 運(yùn)行次序
從上往下的順序執(zhí)行代碼
添加 JavaScript
通過(guò)<Script>標(biāo)簽
<script>
// JavaScript 代碼
</script>
外部 JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信搜索：伊洛的小屋</title>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="demo.js" async></script>
</head>
<body>
<button>CLICK ME</button>
</body>
</html>
注釋
// 我是一條注釋
/*
我也是
一條注釋
*/
變量
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;
使用關(guān)鍵字 let創(chuàng)建變量色罚，常量用于存儲(chǔ)不希望更改的數(shù)據(jù)，用關(guān)鍵字 const 創(chuàng)建账劲，使用等號(hào)=和一個(gè)值來(lái)為變量賦值戳护，
函數(shù)
function checkGuess() {
alert('我是一個(gè)占位符');
}
函數(shù)是可復(fù)用的代碼塊金抡，可以一次編寫(xiě)，反復(fù)運(yùn)行腌且，從而節(jié)省了大量的重復(fù)代碼,關(guān)鍵字 function 梗肝、一個(gè)函數(shù)名、一對(duì)小括號(hào)定義了一個(gè)函數(shù)铺董。 隨后是一對(duì)花括號(hào){}巫击。花括號(hào)內(nèi)部是調(diào)用函數(shù)時(shí)要運(yùn)行的所有代碼
運(yùn)行一個(gè)函數(shù)代碼時(shí)精续，可以輸入函數(shù)名加一對(duì)小括號(hào)
checkGuess();
運(yùn)算符
做數(shù)學(xué)運(yùn)算坝锰，連接字符串，以及其他類(lèi)似的事情
條件語(yǔ)句（Conditional）
function checkGuess() {
let userGuess = Number(guessField.value);
if (guessCount === 1) {
guesses.textContent = '上次猜的數(shù)：';
}
guesses.textContent += userGuess + ' ';
if (userGuess === randomNumber) {
lastResult.textContent = '恭喜你重付！猜對(duì)了';
lastResult.style.backgroundColor = 'green';
lowOrHi.textContent = '';
setGameOver();
} else if (guessCount === 10) {
lastResult.textContent = '!!!GAME OVER!!!';
setGameOver();
} else {
lastResult.textContent = '你猜錯(cuò)了顷级！';
lastResult.style.backgroundColor = 'red';
if(userGuess < randomNumber) {
lowOrHi.textContent = '你猜低了！';
} else if(userGuess > randomNumber) {
lowOrHi.textContent = '你猜高了';
}
}
guessCount++;
guessField.value = '';
guessField.focus();
}
循環(huán)
1.起始值
2.退出條件
3.增加器
結(jié)合HTML頁(yè)面簡(jiǎn)單的猜數(shù)游戲
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>游戲時(shí)間</title>
<link rel="stylesheet" href="index.css">
<script async src="demo.js"></script>
</head>
<body>
<h1>猜猜數(shù)字吧</h1>
<p>隨機(jī)選定100以內(nèi)的自然數(shù)确垫，要求10 次以內(nèi)猜中</p>
<div class="form">
<label for="guessField">請(qǐng)猜數(shù): </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>
</body>
</html>
