JS簡介

1.腳本語言

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

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

JavaScript 插入 HTML 頁面后,可由所有的現代瀏覽器執行。

這門語言可用于 HTML 和 web,更可廣泛用于服務器、PC、筆記本電腦、平板電腦和智能手機等設備

2.寫入HTML輸出

<html>

<body>

? <script type="text/javascript">

? ? document.wite("<h1>JS簡介</h1>");

? ? document.wite("<p>javascript是世界上最流行的編程語言</p>");

? </script>

</body>

</html>

運行效果

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

3.對事件作出反應

<button type="button" onclick="alert('OK')">請點擊</button>

運行效果

alert()(警告) 函數在 JavaScript 中并不常用,但它對于代碼測試非常方便。onclick(單擊) 事件只是即將在本教程中學到的眾多事件之一

4.改變HTML內容/圖像/樣式

內容

<p id="p">js可以改變html的內容</p>

<script type="text/javascript">

? function myf() {

? ? x=document.getElementById("p");

? ? x.innerHTML="Hello javascript";

? }

</script>

<button type="button" onclick="myf()">請點擊</button>

運行效果:

未點擊效果圖


點擊后效果圖

document.getElementByID("some id")方法是 HTML DOM 中定義的。DOM(文檔對象模型)是用以訪問 HTML 元素的正式 W3C 標準。

圖像

<img id="img" onclick="image()" src="../img/dpn.gif">

<script type="text/javascript">

? function image() {

? ? element=document.getElementById('img')

? ? if (element.src.match("dpn")) {

? ? ? element.src="../img/dpff.gif";

? ? }

? ? else {

? ? ? element.src="../img/dpn.gif";

? ? }

? }

</script>

運行效果

初始效果圖
單次點擊效果圖

多次點擊可以使燈來回點亮和熄滅。

JavaScript 能夠改變任意 HTML 元素的大多數屬性,而不僅僅是圖片。

樣式

<p id="p">js能改變html元素的樣式</p>

<script type="text/javascript">

? function myf() {

? ? x=document.getElementById("p");

? ? x.style.color="#F0F";

? }

</script>

<button type="button" onclick="myf()"></button>

運行效果

初始效果圖
點擊事件效果圖

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

5.驗證輸入

JavaScript 常用于驗證用戶的輸入。

<p>請輸入數字</p>

<input type="text" id="sz">

<script type="text/javascript">

? function myf() {

? ? var x=document.getElementById("sz").value;

? ? if(x==""||isNaN(x)) {

? ? ? alert("Not Numeric");

? ? }

? }

</script>

<button type="button" onclick="myf()">請點擊</button>

運行效果

輸入數字時運行效果圖


未輸入任何值效果圖


輸入非數字是效果圖
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 工廠模式類似于現實生活中的工廠可以產生大量相似的商品,去做同樣的事情,實現同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,842評論 2 17
  • JavaScript簡介 概念 JavaScript主要用于HTML的頁面,嵌入在HTML的源碼中。,它存在于全世...
    老95閱讀 358評論 0 0
  • 一、JS前言 (1)認識JS 也許你已經了解HTML標記(也稱為結構),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,798評論 0 8
  • 睡吧 死亡殿堂的屋脊 已被溫柔的星光撫平 甜美的夜色安眠于花冠 舒展著它那孤獨的身軀 游思奔跑在街燈的光暈里 你的...
    死亡詩約閱讀 301評論 0 4
  • 孩子樂意吃蔬菜,我用的是這招 聿囡吃飯真的很象樣,不僅自己吃,吃得快,而且每次是光盤,確實讓我們很省心。但吃蔬菜,...
    女人加油站閱讀 249評論 0 0