JavaScript_1

Posted 2020-09-05 HepburnXiao

1. javascript属于客户端脚本语言

2. JavaScript用来改进网页设计、验证表单、检测浏览器、创建cookies，以及更多的应用

    a. 是为html设计者提供的一种编程工具

    b. 可以在HTML页面中放入动态的文本

    c. 能够对事件进行反应

    d. 可读取并修改HTML元素

    e. 可被用来验证数据

 

举例：

    <p>JavaScript能够直接写入HTML输出流中：</p>
    <script>
        document.write("<h1>This is a heading</h1>");
        document.write("<p>This is a paragraph.</p>");
    </script>

 

    <p>JavaScrip能够对事件作出反应。比如对按钮的点击：</p>
    <button type="button" onclick="MyClick()">点击这里</button>
    <!--<button type="button" onclick="alert(‘Welcome!‘)">点击这里</button> 可以类似于委托--> 
    <script>
        function MyClick() {
            alert("Welcome!");
        }
    </script>

 

    <p id="d1">JavaScript改变HTML元素的内容</p>
    <button type="button" onclick="myfunction()">改变元素</button>
    <script>
        function myfunction()
        {
            x = document.getElementById("d1"); //找到元素
            x.innerHTML = "Hello JavaScript!";//改变内容
        }
    </script>

 

    <p>JavaScript改变HTML图像</p>
    <img id="myimage" onclick="changeImage()" src="image/lightoff.jpg" />
    <script>
        function changeImage() {
            x = document.getElementById("myimage");
            if(x.src.match("lightoff"))
            {
                x.src = "image/lighton.jpg"
            }
            else {
                x.src = "image/lightoff.jpg"
            }
        }
    </script>

 

    <p id="d2">JavaScript改变HTML的样式</p>
    <button type="button" onclick="changestyle()">改变样式</button>
    <script >
        function changestyle()
        {
            x = document.getElementById("d2");
            x.style.color = "red";
        }
    </script>

 

    <p>JavaScript用于输入验证</p>
    <input id="d3" type="text" />
    <button type="button" onclick="checknumber()">数字验证</button>
    <script>
        function checknumber()
        {
            x = document.getElementById("d3").value;
            if(x=""||isNaN(x))
            {
                alert("Not Numeric");
            }
            else
            {
                alert("OK");
            }
        }
    </script>