标签：
网页内容为学习资料，原文链接
JavaScript 是世界上最流行的编程语言。
这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
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>
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <h1>我的第一段 JavaScript</h1> 6 7 <p> 8 JavaScript 能够对事件作出反应。比如对按钮的点击： 9 </p> 10 11 <button type="button" onclick="alert(‘Welcome!‘)">点击这里</button> 12 13 </body> 14 </html>
alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。
onclick 事件只是您即将在本教程中学到的众多事件之一。
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <h1>我的第一段 JavaScript</h1> 6 7 <p id="demo"> 8 JavaScript 能改变 HTML 元素的内容。 9 </p> 10 11 <script> 12 function myFunction() 13 { 14 x=document.getElementById("demo"); // 找到元素 15 x.innerHTML="Hello JavaScript!"; // 改变内容 16 } 17 </script> 18 19 <button type="button" onclick="myFunction()">点击这里</button> 20 21 </body> 22 </html>
您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。
DOM（文档对象模型）是用以访问 HTML 元素的正式 W3C 标准。
您将在本教程的多个章节中学到有关 HTML DOM 的知识。
本例会动态地改变 HTML <image> 的来源 (src)：
The Light bulb
点击灯泡就可以打开或关闭这盏灯
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <script> 5 function changeImage() 6 { 7 element=document.getElementById(‘myimage‘) 8 if (element.src.match("bulbon")) 9 { 10 element.src="/i/eg_bulboff.gif"; 11 } 12 else 13 { 14 element.src="/i/eg_bulbon.gif"; 15 } 16 } 17 </script> 18 19 <img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif"> 20 21 <p>点击灯泡来点亮或熄灭这盏灯</p> 22 23 </body> 24 </html>
JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。
改变 HTML 元素的样式，属于改变 HTML 属性的变种。
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <h1>我的第一段 JavaScript</h1> 6 7 <p id="demo"> 8 JavaScript 能改变 HTML 元素的样式。 9 </p> 10 11 <script> 12 function myFunction() 13 { 14 x=document.getElementById("demo") // 找到元素 15 x.style.color="#ff0000"; // 改变样式 16 } 17 </script> 18 19 <button type="button" onclick="myFunction()">点击这里</button> 20 21 </body> 22 </html>
JavaScript 常用于验证用户的输入。
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <h1>我的第一段 JavaScript</h1> 6 7 <p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p> 8 9 <input id="demo" type="text"> 10 11 <script> 12 function myFunction() 13 { 14 var x=document.getElementById("demo").value; 15 if(x==""||isNaN(x)) 16 { 17 alert("Not Numeric"); 18 } 19 } 20 </script> 21 22 <button type="button" onclick="myFunction()">点击这里</button> 23 24 </body> 25 </html>
标签：
原文地址：http://www.cnblogs.com/zhlziliaoku/p/5176435.html
