学习日记7.26

程序员文章站 2024-03-05 14:56:18

...

一、学习内容

1. Web开发请求原理：域名和http请求；
2. JavaScript概要介绍
DOM树：JavaScript通过改变DOM树里的元素、样式

二、代码编辑

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript">
        for(var i = 0; i < 100; i++) {
         document.write("<h1>我的第一个JavaScript程序</h1>");  
        }

        function myFunction() {
            x=document.getElementById("demo");
            x.innerHTML="Hello javascript!";
        }



        function changeImage() {
            element=document.getElementById("myimge")
            if (element.src.match("bulbon"))
             {
                element.src="eg_bulboff.gif";
            }
            else 
            {
                element.src="eg_bulbon.gif";
            }
        }

        function myFunction1() {
            x=document.getElementById("demo1");
            x.style.color="#ff0000";
        }

        function myFunction2() {
            var x=document.getElementById("demo2").value;
            if ( x==""|| isNaN(x) ) 
            {
                alert("Not Numeric");
            }
        }




        function myFunction3() {
            document.getElementById("demo3").innerHTML="My First JavaScript Function";
        }



    </script>
</head>
<body>
    <p id="demo">
        JavaScript能改变HTML元素内容。
    </p>
    <button type="button" onclick="myFunction()">点击这里</button><br><br><br>
    <button onclick="alert('我被点了！');">点我</button><br><br><br>

    <img id="myimge" onclick="changeImage()" src="eg_bulboff.gif">

    <p id="demo1">JavaScript能改变HTML元素的样式。</p>
    <button type="button" onclick="myFunction1()">点击这里</button>


    <p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
    <input type="text" id="demo2">
    <button type="button" onclick="myFunction2()">点击这里</button>

    <p id="demo3">A Paragraph.</p>
    <button type="button" onclick="myFunction3()">点击这里</button>
    <p id="demo5">My First Paragraph.</p>


    <script type="text/javascript">
        document.getElementById("demo5").innerHTML="My First JavaScript";
        document.write("<p>我的第一个JavaScript程序</p>");


        function myFunction4() {
            document.getElementById("demo4").innerHTML="My First JavaScript Function";
        }
    </script>
</body>
</html>