基础JavaScript 实例学习

1）写入 HTML 输出

实例：                                                                                                                                                              

document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");

用document.write("") 轻松写入HTML。

2）对事件作出反应

<button type="button" οnclick="alert('Welcome!')">点击这里</button>

这里实际涉及到两个技术，一个是onclick，表示用户点击时触发的动作。alert（），是默认的弹出框。

3)改变 HTML 内容

x=document.getElementById("demo")  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

4)改变 HTML 图像

<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" οnclick="changeImage()" src="/i/eg_bulboff.gif">


<p>点击灯泡来点亮或熄灭这盏灯</p>

5)改变 HTML 样式

x=document.getElementById("demo")  //找到元素
x.style.color="#ff0000";           //改变样式

6) 验证输入

if isNaN(x) {alert("Not Numeric")};

<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" οnclick="myFunction()">点击这里</button>

参考链接：http://www.w3school.com.cn/js/js_intro.asp