JavaScript簡易教程
阿新 • • 發佈：2018-10-09
tro 簡易 使用方法 func image 插入 執行 提示 value
JavaScript：網絡腳本語言。可用於html和web，可插入html由瀏覽器執行
使用方法/環境：
1、寫入HTML輸出
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <p> 6 JavaScript 能夠直接寫入 HTML 輸出流中： 7 </p> 8 9 <script> 10 document.write("<h1>This is a heading</h1>"); 11 document.write("<p>This is a paragraph.</p>");12 </script> 13 14 <p> 15 您只能在 HTML 輸出流中使用 <strong>document.write</strong>。 16 如果您在文檔已加載後使用它（比如在函數中），會覆蓋整個文檔。 17 </p> 18 19 </body> 20 </html>
2、事件反應
<!DOCTYPE html> <html> <body> <h1>我的第一段 JavaScript</h1> <p> JavaScript 能夠對事件作出反應。比如對按鈕的點擊：</p> <button type="button" onclick="alert(‘Welcome!‘)">點擊這裏</button> </body> </html>
3、修改html內容
<!DOCTYPE html> <html> <body> <h1>我的第一段 JavaScript</h1> <p id="demo"> JavaScript 能改變 HTML 元素的內容。 </p> <script> function myFunction() { x=document.getElementById("demo"); // 找到元素 x.innerHTML="Hello JavaScript!"; // 改變內容 } </script> <button type="button" onclick="myFunction()">點擊這裏</button> </body> </html>
4、改變 HTML 圖像
<!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>點擊燈泡來點亮或熄滅這盞燈</p> </body> </html>
5、改變 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()">點擊這裏</button> </body> </html>
6、常用於驗證用戶的輸入
<!DOCTYPE html> <html> <body> <h1>我的第一段 JavaScript</h1> <p>請輸入數字。如果輸入值不是數字，瀏覽器會彈出提示框。</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()">點擊這裏</button> </body> </html>
參考：http://www.w3school.com.cn/js/index.asp
JavaScript簡易教程