當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

前端之JavaScript第一天学习(1)-JavaScript 简介

發(fā)布時間：2025/3/21 javascript 20 豆豆

生活随笔收集整理的這篇文章主要介紹了前端之JavaScript第一天学习(1)-JavaScript 简介小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

javaScript 是世界上最流行的編程語言。

這門語言可用于 HTML 和 web，更可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機(jī)等設(shè)備。

JavaScript 是腳本語言

JavaScript 是一種輕量級的編程語言。

JavaScript 是可插入 HTML 頁面的編程代碼。

JavaScript 插入 HTML 頁面后，可由所有的現(xiàn)代瀏覽器執(zhí)行。

JavaScript 很容易學(xué)習(xí)。

JavaScript：寫入 HTML 輸出

<!DOCTYPE html> <html> <body><p> JavaScript 能夠直接寫入 HTML 輸出流中： </p><script> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); </script><p> 您只能在 HTML 輸出流中使用 <strong>document.write</strong>。如果您在文檔已加載后使用它（比如在函數(shù)中），會覆蓋整個文檔。 </p></body> </html>

JavaScript 能夠直接寫入 HTML 輸出流中：

效果:

This is a heading

This is a paragraph.

您只能在 HTML 輸出流中使用?document.write。如果您在文檔已加載后使用它（比如在函數(shù)中），會覆蓋整個文檔。

提示：您只能在 HTML 輸出中使用 document.write。如果您在文檔加載后使用該方法，會覆蓋整個文檔。

JavaScript：對事件作出反應(yīng)

<!DOCTYPE html> <html> <body><h1>我的第一段 JavaScript</h1><p> JavaScript 能夠?qū)κ录鞒龇磻?yīng)。比如對按鈕的點(diǎn)擊： </p><button type="button" onclick="alert('Welcome!')">點(diǎn)擊這里</button></body> </html>

效果:

我的第一段 JavaScript

JavaScript 能夠?qū)κ录鞒龇磻?yīng)。比如對按鈕的點(diǎn)擊：

點(diǎn)擊這里

alert() 函數(shù)在 JavaScript 中并不常用，但它對于代碼測試非常方便。

onclick 事件只是您即將在本教程中學(xué)到的眾多事件之一。

JavaScript：改變 HTML 內(nèi)容

<!DOCTYPE html> <html> <body><h1>我的第一段 JavaScript</h1><p id="demo"> JavaScript 能改變 HTML 元素的內(nèi)容。 </p><script> function myFunction() { x=document.getElementById("demo"); // 找到元素 x.innerHTML="Hello JavaScript!"; // 改變內(nèi)容 } </script><button type="button" onclick="myFunction()">點(diǎn)擊這里</button></body> </html>

效果:

我的第一段 JavaScript

JavaScript 能改變 HTML 元素的內(nèi)容。

點(diǎn)擊這里

您會經(jīng)常看到 document.getElementByID("some id")。這個方法是 HTML DOM 中定義的。

DOM（文檔對象模型）是用以訪問 HTML 元素的正式 W3C 標(biāo)準(zhǔn)。

您將在本教程的多個章節(jié)中學(xué)到有關(guān) HTML DOM 的知識。

JavaScript：改變 HTML 圖像

本例會動態(tài)地改變 HTML <image> 的來源 (src)：

The Light bulb

點(diǎn)擊燈泡就可以打開或關(guān)閉這盞燈

<!DOCTYPE html> <html> <body> <script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")){element.src="/i/eg_bulboff.gif";} else{element.src="/i/eg_bulbon.gif";} } </script><img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif"><p>點(diǎn)擊燈泡來點(diǎn)亮或熄滅這盞燈</p></body> </html>

JavaScript 能夠改變?nèi)我?HTML 元素的大多數(shù)屬性，而不僅僅是圖片。

效果:

點(diǎn)擊燈泡來點(diǎn)亮或熄滅這盞燈

JavaScript：改變 HTML 樣式

改變 HTML 元素的樣式，屬于改變 HTML 屬性的變種。

<!DOCTYPE html> <html> <body><h1>我的第一段 JavaScript</h1><p id="demo"> JavaScript 能改變 HTML 元素的樣式。 </p><script> function myFunction() { x=document.getElementById("demo") // 找到元素 x.style.color="#ff0000"; // 改變樣式 } </script><button type="button" onclick="myFunction()">點(diǎn)擊這里</button></body> </html>

效果:

我的第一段 JavaScript

JavaScript 能改變 HTML 元素的樣式。

點(diǎn)擊這里

JavaScript：驗(yàn)證輸入

JavaScript 常用于驗(yàn)證用戶的輸入。

<!DOCTYPE html> <html> <body><h1>我的第一段 JavaScript</h1><p>請輸入數(shù)字。如果輸入值不是數(shù)字，瀏覽器會彈出提示框。</p><input id="demo" type="text"><script> function myFunction() { var x=document.getElementById("demo").value; if(x==""||isNaN(x)){alert("Not Numeric");} } </script><button type="button" onclick="myFunction()">點(diǎn)擊這里</button></body> </html>

效果:

我的第一段 JavaScript

請輸入數(shù)字。如果輸入值不是數(shù)字，瀏覽器會彈出提示框。

?點(diǎn)擊這里

提示：JavaScript 與 Java 是兩種完全不同的語言，無論在概念還是設(shè)計上。

Java（由 Sun 發(fā)明）是更復(fù)雜的編程語言。

ECMA-262 是 JavaScript 標(biāo)準(zhǔn)的官方名稱。

JavaScript 由 Brendan Eich 發(fā)明。它于 1995 年出現(xiàn)在 Netscape 中（該瀏覽器已停止更新），并于 1997 年被 ECMA（一個標(biāo)準(zhǔn)協(xié)會）采納。

轉(zhuǎn)載于:https://www.cnblogs.com/facai/p/5228920.html

總結(jié)

以上是生活随笔為你收集整理的前端之JavaScript第一天学习(1)-JavaScript 简介的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。