JavaScript学习笔记(一)

JavaScript

这是一种轻量级的编程语言,也是当前互联网中最流行的脚本语言,可用于HTML,CSS中.

直接写入HTML输出流

<script>
    document.write("<h1>这是一个demo</h1>")
</script>   

使用上面这段代码可以在HTML页面中输出一个<h1>的标题(这里的<h1>可以更换成<p>,或者其他的一些界面元素),其中document描述的是当前窗口或指定窗口对象的文档,每个载入浏览器的HTML文档都会成为Document对象,专业成为DOM.其中document中有很多种方法,后面会专门写一篇来记录这些方法的使用,这里我们用到了它的write()方法,这个方法可以动态的向页面中写入内容.

对事件的反应

<button type="button" onclick="alert('测试!')">点击</button>

alert()函数一般在JavaScript中并不是很常用,但是对于测试代码功能来说是非常方便的.

改变HTML的样式

<script>
    function myFunction()
    {
        x=document.getElementById("test") // 找到元素
        x.style.color="#ff0000";          // 改变样式
    }
</script>

<p id="test">元素样式将会改变。</p>
<button type="button" onclick="myFunction()">点击这里改变样式</button>

这里我们用到了getElementById()方法,这里的参数可以让我们直接定位到是HTML中那个元素,在上述的JavaScript代码中的x实际上指向的就是<p></p>,点击按钮后执行myFunction()方法,就会让元素样式发生改变.

验证用户的输入

<script>
    function myFunction()
    {
        var x=document.getElementById("demo").value;
        if(x=="" || isNaN(x))
        {
            alert("不是数字");
        }
    }
</script>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">点击这里</button>

这段函数的作用是检测<input>中输入的是否是数字如果不是数字则会显示提示信息,这里我们用了isNaN(numValue)函数,这个函数是用来检测numValue的值是否为NaN,如果是NaN会返回true,反之返回false.NaN全称Not a Number

今天的学习到此就结束了.

参考:
http://www.runoob.com/