当前位置：首页 > news >正文

7、JavaScript 知识总结

news 来源：原创 2024/5/3 3:12:48

1、JavaScript的作用

①JavaScript 为 HTML 设计师提供了一种编程工具

②JavaScript 可以将动态的文本放入 HTML 页面

③JavaScript 可以对事件作出响应

④JavaScript 可以读写 HTML 元素

⑤JavaScript 可被用来验证数据

⑥JavaScript 可被用来检测访问者的浏览器

⑦JavaScript 可被用来创建 cookies

2、JavaScript的基本用法

<!DOCTYPE html>
<html>
<body>

<p>JavaScript能直接写入HTML输出流中：</p>


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

<p>您只能在HTML输出流中使用document.write. 如果您在文档加载后使用（比如在函数中），会覆盖整个文档</p>

<button type="button" onclick="alert('hello world')">press me </button>

<p id="demo">我是改变前的段落内容</p>

<script>
    function zzl()
    {
        x = document.getElementById("demo");

        if(x.innerHTML.match("after changed"))
        {
            x.innerHTML= "before changed";
            x.style.color="red";
        }
        else
        {
            x.innerHTML= "after changed";
            x.style.color="blue";
        }


    }
</script>

<button type="button" onclick="zzl()"> 点我改变内容 </button>

<script>
    function testLight()
    {
        x = document.getElementById("light");
        if(x.src.match("/i/eg_bulboff.gif"))
        {
            x.src="/i/eg_bulbon.gif";
        }
        else
        {
            x.src="/i/eg_bulboff.gif";
        }
    }
</script>

<image id="light" src="/i/eg_bulboff.gif" onclick="testLight()"/>

    <input id="demoInput"> </input>

    <script>
        function checkWhetherNumberic()
        {
            var x = document.getElementById("demoInput").value;
            if(x == "" || isNaN(x))
            {
                alert("no numberic");
            }
        }
    </script>

    <button type="button" onclick="checkWhetherNumberic()">检查是否是数字</button>


</body>
</html>

3、JS 基本运算

4、JS对象的操作

zzl = new Object();
zzl.age = 20;
zzl.number= 200700454217;

document.write("<br/> age is "+zzl.age+" number is "+zzl.number);

</script>

5、JS异常抛出和捕获

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <script>
 6 function myFunction()
 7 {
 8 try
 9 { 
10 var x=document.getElementById("demo").value;
11 if(x=="")    throw "值为空";
12 if(isNaN(x)) throw "不是数字";
13 if(x>10)     throw "太大";
14 if(x<5)      throw "太小";
15 }
16 catch(err)
17 {
18 var y=document.getElementById("mess");
19 y.innerHTML="错误：" + err + "。";
20 }
21 }
22 </script>
23 
24 <h1>我的第一个 JavaScript 程序</h1>
25 <p>请输入 5 到 10 之间的数字：</p>
26 <input id="demo" type="text">
27 <button type="button" onclick="myFunction()">测试输入值</button>
28 <p id="mess"></p>
29 
30 </body>
31 </html>