??專欄【?前端易錯(cuò)合集】
??喜歡的詩(shī)句：更喜岷山千里雪 三軍過后盡開顏。
??音樂分享【如愿】
大一同學(xué)小吉，歡迎并且感謝大家指出我的問題??
目錄
?文章來源地址http://www.zghlxwxcb.cn/news/detail-477750.html
??JavaScript嵌入網(wǎng)頁(yè)的方式
??alert("這是一個(gè)JavaScript例子"); ????(或者window.alert())
???document.write("這是一個(gè)JavaScript例子"); ?
??console.log("這是一個(gè)JavaScript例子"); ?
??document.getElementById("d1").innerHTML="這是一個(gè)JavaScript例子"; ?
??注意，下面這種情況會(huì)沒有上面的效果
??在HTML里面內(nèi)嵌JavaScript
?注意
??函數(shù)
?編輯??鏈接樣式引用
?基本格式
??JavaScript對(duì)象
??語(yǔ)法格式
??引用對(duì)象的方法或?qū)傩缘恼Z(yǔ)法格式
??對(duì)象廢除?
??練習(xí)
?創(chuàng)建一個(gè)HTML網(wǎng)頁(yè)，使用if語(yǔ)句根據(jù)不同的時(shí)間，在網(wǎng)頁(yè)上面顯示不同的時(shí)間
?動(dòng)態(tài)表格
?結(jié)構(gòu)表現(xiàn)和行為
?編輯
??分析
?全選效果
??為下拉列表添加元素
??方法一
??方法二?
???分析
?實(shí)現(xiàn)頁(yè)面打開5秒后出現(xiàn)警示對(duì)話框“hello”
?制作年歷?
?
??JavaScript嵌入網(wǎng)頁(yè)的方式
??alert("這是一個(gè)JavaScript例子"); ????(或者window.alert())
在窗口出現(xiàn)彈窗?
<!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>
<script>
alert("這是一個(gè)JavaScript例子");
</script>
</head>
<body>
</body>
</html>
???document.write("這是一個(gè)JavaScript例子"); ?
把文本信息顯示在桌面上
<!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>
<script>
document.write("這是一個(gè)JavaScript例子");
</script>
</head>
<body>
</body>
</html>
??console.log("這是一個(gè)JavaScript例子"); ?
把信息顯示在控制臺(tái)上
<!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>
<script>
console.log("這是一個(gè)JavaScript例子");
</script>
</head>
<body>
<h1 id="d1">
</body>
</html>
?
??document.getElementById("d1").innerHTML="這是一個(gè)JavaScript例子"; ?
獲取界面的id="d1"的元素，使其? 顯示在桌面上
??注意：document.getElementById("d1")是獲取?id對(duì)象
<!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>
<body>
<h1 id="d1">
<script>
document.getElementById("d1").innerHTML="這是一個(gè)JavaScript例子";
</script>
</body>
</html>
??注意，下面這種情況會(huì)沒有上面的效果
?因?yàn)槭且@取id="d1"的HTML元素，但是在執(zhí)行<script></script>語(yǔ)句時(shí)，該元素還沒有加載，所以就不會(huì)顯示
??在HTML里面內(nèi)嵌JavaScript
<!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>
<script>
console.log("這是一個(gè)JavaScript例子");
</script>
</head>
<body>
<h1 onclick="javascript:alert('這是一個(gè)JavaScript例子');">
今后大家一起學(xué)習(xí)JavaScript知識(shí)
</h1>
</body>
</html>
點(diǎn)擊該字符后，會(huì)觸發(fā)onclick事件，從而調(diào)用其中的JavaScript代碼?
?注意
‘這是一個(gè)JavaScript例子’，為什么要用單引號(hào)，而不是雙引號(hào)呢
因?yàn)椋琂avaScript里面的字符串是用單引號(hào)或雙引號(hào)括起來的一個(gè)或多個(gè)字符，但是當(dāng)外面有雙引號(hào)時(shí)，里面的字符串只能用單引號(hào)括起來，反之亦然
??函數(shù)
如果有多條語(yǔ)句，代碼會(huì)寫的很長(zhǎng)，寫在網(wǎng)頁(yè)標(biāo)記就回很亂，這時(shí)就可以把這些代碼封裝成一個(gè)函數(shù)，然后進(jìn)行調(diào)用
通常把函數(shù)定義放在網(wǎng)頁(yè)頭部，以保證被調(diào)用時(shí)已經(jīng)加載
<!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>
<script type="text/javascript">
function fun(){
alert("這是一個(gè)JavaScript例子");
}
</script>
</head>
<body>
<h1 onclick="fun()">
今后大家將一起學(xué)習(xí)JavaScript知識(shí)
</h1>
</body>
</html>??鏈接樣式引用
有時(shí)需要在若干個(gè)頁(yè)面中運(yùn)行相同的js代碼，為了避免重復(fù)和方便修改，通常將js代碼放在外部的JavaScript文件中（以.js為后綴）
?基本格式
<script src="URL" type="text/javascript"></script>
URL是說明外部JavaScript文件的位置，其含義是將外部JavaScript文件內(nèi)容導(dǎo)入HTML文件的該位置
js_1.js
function fun(){
alert("這是一個(gè)JavaScript例子");
}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>
<script src="js_1.js" type="text/javascript">
alert("這是一個(gè)JavaScript例子");
</script>
</head>
<body>
<h1 onclick="fun();">
今后大家將一起學(xué)習(xí)JavaScript知識(shí)
</h1>
</body>
</html>??JavaScript對(duì)象
??語(yǔ)法格式
var 引用變量 = new 對(duì)象類型名();
??引用對(duì)象的方法或?qū)傩缘恼Z(yǔ)法格式
引用變量 . 方法名（[參數(shù)]）
引用變量 . 屬性
??例如
var today=new Date();
var prompt="今天是"+today.getFullYear()+"年"+(today.getMonth()+1)+"月";
prompt=prompt+today.getDate()+"日";
document.write(prompt);網(wǎng)頁(yè)中每個(gè)標(biāo)記在加載時(shí)，會(huì)自動(dòng)創(chuàng)建對(duì)應(yīng)類型的對(duì)象。通過document.getElementById()等方法來獲取對(duì)象，然后修改網(wǎng)頁(yè)對(duì)象的屬性，達(dá)到動(dòng)態(tài)控制網(wǎng)頁(yè)的效果，例如
var obj1=document.getElementById("stationList");
obj1.style.display="block";?也可以寫成下面的鏈?zhǔn)讲僮?/p>
var obj1=document.getElementById("stationList").style.display="block";??對(duì)象廢除?
var today=new Date();
today=null;??練習(xí)
?創(chuàng)建一個(gè)HTML網(wǎng)頁(yè)，使用if語(yǔ)句根據(jù)不同的時(shí)間，在網(wǎng)頁(yè)上面顯示不同的時(shí)間
根據(jù)現(xiàn)在的時(shí)間來顯示?
<!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>
<body>
<script type="text/javascript">
var d=new Date();
var time=d.getHours();
if(time<10){
document.write("<b>Good morning</b>");
}
else if(time>10&&time<16){
document.write("<b>Good day</b>");
}
else{
document.write("<b>Hello World</b>");
}
</script>
</body>
</html>
?動(dòng)態(tài)表格
【JavaScript】動(dòng)態(tài)表格_js動(dòng)態(tài)表格_在下小吉.的博客-CSDN博客
?結(jié)構(gòu)表現(xiàn)和行為
<!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>
<link rel="stylesheet" href="">
<style>
.c0{color: red;}
.c1{color: green;text-align:center;}
</style>
</head>
<body>
<input type="radio" name="color">紅色
<input type="radio" name="color">綠色并居中
<h1 class="">我要努力學(xué)好網(wǎng)頁(yè)設(shè)計(jì)</h1>
</body>
<script>
let h1 = document.querySelector("h1");
let input = document.getElementsByName("color");
for (let i=0;i<input.length;i++){
input[i].onclick = function(){
if(input[i].checked == true){
h1.className = 'c'+i;
}
}
}
</script>
</html>
按下第一個(gè)后
按下第二個(gè)后
??
??分析
為什么代碼里面的function沒有被調(diào)用，但是仍然能夠執(zhí)行呢
在這段代碼中，function()確實(shí)沒有被直接調(diào)用。它是在單選框元素的onclick事件發(fā)生時(shí)才會(huì)執(zhí)行。
具體來說，這里使用了匿名函數(shù)定義方式，將一個(gè)函數(shù)作為事件處理函數(shù)傳遞給input[i].onclick屬性。這個(gè)函數(shù)沒有名字，因此稱之為匿名函數(shù)。
if(input[i].checked == true){ h1.className = 'c'+i; }
在事件處理函數(shù)內(nèi)部，使用if條件判斷語(yǔ)句判斷當(dāng)前單選框元素是否被選中。如果被選中，則執(zhí)行h1.className = 'c'+i，將標(biāo)題的樣式類名更改為c0或c1，從而改變標(biāo)題的字體顏色或?qū)R方式。
?全選效果
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>全選效果</title>
<style type = "text/css">
td{ text-align:center;
font-size:13px;
line-height:25px;
}
</style>
<script type = "text/JavaScript">
function check() {
var oInput = document.getElementsByName("product");
for ( var i = 0; i < oInput.length; i++ ) {
if (document.getElementById("all").checked == true) {//all，實(shí)現(xiàn)全選
oInput.item(i).checked = true;
// oInput[i].checked = true; //這兩種方法都可以
}
else {
oInput[i].checked = false;
}
}
}
</script>
</head>
<body>
<table border = "1" cellspacing = "0" cellpadding = "0" width = "300px;" >
<tr>
<td><input id = "all" type = "checkbox" value = "全選" onclick = "check();"/>全選</td>
<td>商品名稱</td>
<td>價(jià)格（元）</td>
</tr>
<tr>
<td><input name = "product" type = "checkbox" value = "1" /></td>
<td>網(wǎng)頁(yè)設(shè)計(jì)</td>
<td>28</td>
</tr>
<tr>
<td><input name = "product" type = "checkbox" value = "2" /></td>
<td>CSS + DIV布局</td>
<td>28</td>
</tr>
<tr>
<td><input name = "product" type = "checkbox" value = "3" /></td>
<td>JavaScript程序設(shè)計(jì)</td>
<td>28</td>
</tr>
</table>
</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>
<script type="text/javascript">
var citys=new Array('北京','上海','天津','重慶');
window.onload=function(){ //匿名函數(shù)
var obj1=document.getElementById("stationList");
for(i=0;i<citys.length;i++)
{
var newoption=new Option(citys[i]);//創(chuàng)建一個(gè)新的option元素
obj1.add(newoption);
}
}
</script>
</head>
<body>
<select id="stationList">
</select>
</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>
fieldset{
padding: 20px;width: 200px;
margin: 0 auto;
}
#fromStation{
width: 100px;
}
#stationList{
margin-left: 72px;width: 104px;
display: none;
}
</style>
<script type="text/javascript">
function showSelect(){
document.getElementById("stationList").style.display="block";
}
function setText(selectobj,textId){
document.getElementById(textId).value=selectobj.options[selectobj.selectedIndex].text;
}
</script>
</head>
<body>
<fieldset>
<legend>余票查詢</legend>
出發(fā)地<input id="formStation" placeholder="簡(jiǎn)碼/漢字" onclick="showSelect()"><br>
<select id="stationList" size="5" onclick="setText(this,'formStation')">
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重慶</option>
</select>
</fieldset>
</body>
</html>
???分析
οnclick="setText(this,'formStation')為什么要傳入formstation
在 JavaScript 中，可以通過document.getElementById()方法獲取一個(gè)指定 ID 的 HTML 元素對(duì)象，并操作該元素屬性或內(nèi)容。因此，在代碼中使用 document.getElementById(textId) 獲取具有指定 ID 的文本框?qū)ο?，然后通過對(duì)該文本框的value屬性進(jìn)行設(shè)置，在選中 option 元素時(shí)將其文本值自動(dòng)填充到文本框中。
因此，代碼中需要傳入 setText() 函數(shù)的第二個(gè)參數(shù) textId，指定要填充文本框的 ID，這里是formStation。具體來說，當(dāng)用戶選中一個(gè) option 元素時(shí)，被調(diào)用的 setText() 函數(shù)會(huì)將這個(gè) option 的文本內(nèi)容填充到 ID 為 formStation 的文本框中，使得用戶輸入起來更加方便。
?document.getElementById("stationList").style.display="block";為什么要有這一段代碼
這段代碼的作用是將 ID 為 "stationList" 的下拉列表框顯示出來。
具體來說，當(dāng)用戶在文本框中點(diǎn)擊一次時(shí)，就會(huì)觸發(fā) showSelect() 函數(shù)。該函數(shù)會(huì)獲取 ID 為"stationList" 的下拉列表框的對(duì)象，并將其 display 屬性設(shè)置為 "block"，使得該下拉列表框在網(wǎng)頁(yè)上呈現(xiàn)出來（默認(rèn)情況下，該下拉列表框的 display 屬性為 "none"，即不可見狀態(tài)）。
?實(shí)現(xiàn)頁(yè)面打開5秒后出現(xiàn)警示對(duì)話框“hello”
<!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>
<script>
function hello() {
alert("hello");
}
setTimeout(hello, 5000);
</script>
</head>
<body>
</body>
</html>
?制作年歷?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作年歷</title>
<style>
body {
display: flex;
flex-wrap: wrap;
}
table {
width: 33.33%;
padding: 15px 10px;
box-sizing: border-box;
}
th {
background-color: #0000ff;
height: 30px;
}
td {
background-color: pink;
height: 20px;
text-align: center;
}
</style>
<script>
var year = prompt("請(qǐng)輸入年份：", "2022");
document.write(calendar(year));
function calendar(y) {
// var w=new Date(y,0).getDay(); //獲取指定年份1月1日是星期幾
var str = "";
for (var m = 1; m <= 12; m++) {
str += "<table>"
str += "<tr><th colspan='7'>" + y + "年" + m + "月</th></tr>"; //日歷最上面，合并單元格，起到居中的效果
str += "<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>"
var max = new Date(y, m, 0).getDate();//獲取每個(gè)月份有多少天 y:年 m:月 0：日
var w = new Date(y, m - 1).getDay(); //獲取每月1號(hào)的星期值 y:年 m:月 沒有傳入日，默認(rèn)為1號(hào)
str += "<tr>";
for (var d = 1; d <= max; d++) { //遍歷該月份
if (w && d == 1) { //該月的第一天不是星期天，則填充空格
str += "<td colspan=" + w + "></td>";
}
str += "<td>" + d + "</td>"; //設(shè)置日歷的日期部分的框架
if (w == 6 && d != max) str += "</tr><tr>"; //如果是周六但不是該月最后一天，則換行
else if (d == max) str += "</tr>" //該月最后一天
w = (w + 1 > 6) ? 0 : w + 1; //控制星期的值在0-6之間
}
str += "</table>";
}
return str;
}
</script>
</head>
<body></body>
</html>
??如果大家有不明白的地方，或者文章有問題，歡迎大家在評(píng)論區(qū)討論，指正??文章來源：http://www.zghlxwxcb.cn/news/detail-477750.html
?
到了這里，關(guān)于【JavaScript】講解JavaScript的基礎(chǔ)知識(shí)并且配有案例講解的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
