JS学习2. 简单的实例代码

来源：互联网发布：算法第四版英文版编辑：程序博客网时间：2024/05/16 07:44

根据W3School上的js教程，做的一些例子。

html：

<!DOCTYPE html><html>        <body>                <script Language="JavaScript" src="first.js">        </script>                <!--添加一个button按钮，当点击时弹出alert()函数-->        <button type="button" onclick="alert('Welcome!')">Click here</button>                <!--通过定义方法改变html内容-->        <p id="demo">this is html DOM</p>        <button type="button" onclick="myFunction()">Will change</button>                <!--改变html图像-->        <img id="myimage" onclick="changeImage()" src="res/eg_bulboff.gif">                <!--改变html样式-->        <p id="demo2"><span style="#000000">js 能改变 html 元素样式</span></p>        <button type="button" onclick="changeStyle()">Change e's style</button>                <!--输入验证-->        <input id="input" type="text">        <button type="button" onclick="checkInput()">Check this</button>                    </body>    </html>

js：

function myFunction(){    <!--document.getElementById("id")。这个方法是HTML DOM中定义的-->            x = document.getElementById("demo");    x.innerHTML="Hi, had been changed^^ use myFunction() method";}/***   改变html图像的方法* 使用getElementById获取图像id* 然后使用element.src.match("res name") 来与当前图像匹配是否相同* 例子的意思是加入现在灯是亮的状态时，换成关灯的图像；当不是亮的状态* 时，换成亮灯的图片资源*/function changeImage(){        element = document.getElementById("myimage");        if(element.src.match("bulbon"))    {        element.src="/res/eg_bulboff.gif";    }    else    {        element.src="/res/eg_bulbon.gif";    }}/*** 改变html元素样式*/function changeStyle(){    x = document.getElementById("demo2");        x.style.color = "#ff0000";}/***   输入验证* isNaN(var x) 是检测非特殊数字的方法，* 加入x为纯粹数字的话，返回false，反之则是true*/function checkInput(){    var x = document.getElementById("input").value;    if(x=="" || isNaN(x))    {        alert(isNaN(x));    }}document.write("<h1>this is a heading</h1>");document.write("<p>this is a paragraph</p>");