大家好，小編為大家解答用javascript寫簡單網(wǎng)頁家鄉(xiāng)的介紹代碼的問題。很多人還不知道用javascript寫簡單網(wǎng)頁小游戲，現(xiàn)在讓我們一起來看看吧！

function show(參數(shù)){
	//函數(shù)體
}

【HTML③】JavaScript基礎(chǔ)、使用JavaScript制作網(wǎng)頁特效、使用前端庫及UI框架快速開發(fā)

八、JavaScript基礎(chǔ)

1.JavaScript

JavaScript簡稱JS是用于制作網(wǎng)頁的動態(tài)效果的，如：頁面的彈出廣告、浮動廣告、下拉菜單、表單驗(yàn)證等功能都由JavaScript完成;JS是嵌入在網(wǎng)頁中的一個腳本語言;不像Java一樣龐大，但它的靈活度高；JavaScript它是目前所有前端框架的基礎(chǔ);在前端框架中，底層都是使用HTML+CSS+JavaScript實(shí)現(xiàn)的;JavaScript是基于對象的編程語言,寫在頁面中，由瀏覽器運(yùn)行的一個腳本語言；但JavaScript和我們傳統(tǒng)意義上的編程語言一樣；

2.JavaScript的使用:

JS代碼必須編寫在<>js代碼</>標(biāo)簽中,標(biāo)簽可以在網(wǎng)頁的任何位置編寫，一般將該標(biāo)簽放在head標(biāo)簽，目前流行的開發(fā)方式是將放到網(wǎng)頁結(jié)束位置。

3.JS基本語法:

a.數(shù)據(jù)類型，JavaScript屬于弱類型語言，在JS中沒有明確的數(shù)據(jù)類型表示，它根據(jù)變量的值自動確定數(shù)據(jù)類型;
int age = 10;//java中對每個變量都有明確的類型定義
var age =”10”;//js中變量的定義,是根據(jù)值來確定類型的
JavaScript中分三種類型表示所有數(shù)據(jù):
(1)number類型(int,float,double)
(2)string類型(字符、字符串)
(3)boolean邏輯類型(true,false)
使用typeof（變量）函數(shù)可以檢測一個變量的數(shù)據(jù)類型

b.變量的聲明及使用
由于JS是一個弱類型的語言，在JS中沒有明確的數(shù)據(jù)類型，所有在聲明變量時(shí)不需要指定數(shù)據(jù)類型(Java等編程語言在使用時(shí)需要指定具體類型的)
JS通過var關(guān)鍵字來聲明變量(var關(guān)鍵字可以省略<但不建議>)
var age = 10;
var name = “強(qiáng)哥”；
document.write(“姓名:”+name+“年齡:”+age);

let和var一樣都是用來聲明變量的

let屬于塊級變量，使用let定義的變量只能在某一個代碼塊使用

var定義全局變量，在代碼塊定義的變量，在代碼塊外部依然可以使用

如果聲明變量時(shí)省略了let或var則默認(rèn)以var的方式聲明
c.JS中的流程控制語句
(1)if語言(單分支) if-else語句(雙分支) 多重if-else語句(多分支)
(2)switch(多分支等值判斷)
(3)while do-while for
乘法口訣表

等腰三角形

d.JS中函數(shù)的使用
JS的函數(shù)和Java中的方法是一樣的;函數(shù)定義好后是不執(zhí)行的，當(dāng)我們?nèi)ブ鲃诱{(diào)用函數(shù)時(shí)函數(shù)才會執(zhí)行;

function show(參數(shù)){
	//函數(shù)體
}

聲明函數(shù)時(shí)不指定返回類型(由于JS是弱類型的語言),但函數(shù)可以有返回值
調(diào)用函數(shù)
JS是事件驅(qū)動的語言，調(diào)用函數(shù)需要在相關(guān)的事件中調(diào)用（通過事件來調(diào)用函數(shù)）

等腰三角形函數(shù)實(shí)例:


注：JS中雖然沒有聲明函數(shù)的返回類型，但JS中的任意函數(shù)都可以使用return關(guān)鍵字返回結(jié)果，而且JS中的函數(shù)可以相互調(diào)用

九、使用JavaScript制作頁面效果

DOM編程
DOM編程(Document Object Model)文檔對象模型

在DOM編程中，把整個頁面看成一個document對象，其中的html元素為具體對象，在DOM中的核心在于找到相對應(yīng)的HTML元素對象，然后對其進(jìn)行操作(屬性或樣式的修改)還可以生成新的HTML元素對象
在JS查找頁面中的元素:
1.通過表單的name的包含關(guān)系找到對象:document.calForm.num1
2.通過HTML元素的id屬性獲得某個HTML元素對象:
document.getElementById(id)
3.通過HTML元素的name屬性獲得多個name屬性值相同的HTML元素對象
返回一個數(shù)組，該數(shù)組中存放所有同name屬性的對象
document.getElementsByName(name)
4.通過HTML元素的標(biāo)簽名獲得多個同標(biāo)簽的HTML元素對象
document.getElementsByTagName(tagName)
5.通過選擇器獲得HTML元素對象
document.querySelector(“css選擇器”);//獲得一個元素,如果存在多個則獲得第一個
document.querySelectorAll(“css選擇器”);//獲得所有元素對象

1.計(jì)算器

2.動態(tài)時(shí)間
在頁面上顯示的時(shí)間是動態(tài)走動的,當(dāng)頁面啟動時(shí)顯示時(shí)間
時(shí)間分兩種:
1.服務(wù)端時(shí)間（通過Java獲取）
2.客戶端時(shí)間（通過JS獲?。?根據(jù)每個客戶端上的時(shí)間來顯示

3.全選全不選功能


4.使用DIV實(shí)現(xiàn)模式窗體

5.注1:
JS中常用事件
1.Onclick:鼠標(biāo)單擊事件
2.Onmouseover:鼠標(biāo)懸浮事件
3.Onmouseout:鼠標(biāo)離開事件
4.Onload:頁面加載事件
5.Onsubmit:表單提交事件
6.Onblur:失去焦點(diǎn)事件
7.Onfocus:獲得焦點(diǎn)事件
8.Onkeyup:鍵盤松開事件
9.Onkeydown:鍵盤按下事件
注2:
常用函數(shù)
1.setTimeout(函數(shù)，事件)：延時(shí)器，該函數(shù)會自動暫定指定的時(shí)間(毫秒),時(shí)間到達(dá)后自動執(zhí)行指定的函數(shù)
2.setInterval(函數(shù)，時(shí)間)：定時(shí)器，該函數(shù)每個指定的時(shí)間(毫秒)之間一次指定的函數(shù)
3.trim()：截取字符串兩端空白符
注意:
JS中使用樣式表的方式

今天就到這吧，期待下次一起學(xué)習(xí)哦！

到了這里，關(guān)于用js做一個簡單的網(wǎng)頁,用javascript做一個網(wǎng)頁的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！