首页 > 代码库 > JavaScript（1）

JavaScript（1）

2024-08-25 12:46:40   212人阅读

JavaScript（1）

　　第一次见到JavaScript的时候，看到了熟悉的“Java”，原来都是骗人的，李鬼不是李逵呀=。= 然而发现这个东西还是特别实用的，和Java比起来它简单多了，只是一种轻量级的脚本语言，主要用于HTML和Web。当初那些想尽办法，写了一堆代码完成的功能，只要用了JavaScript都变的非常的简单。

　　因为好久都没有用过这个东西，所以打算跟着W3SCHOOL再学习一边，以便为今后学习jQuery和Ajax打基础。

1.在HTML页面输出

　　JS能够直接写入HTML的输出流中，并在页面上输出，但是要注意的是，只能在HTML输出流中使用document.write,如果在文档加载后使用它，它将会覆盖整个文档。

1 <body>
2 <script type="text/javascript">
3     document.write("JavaScript是一种脚本语言");
4     document.write("<br/>");
5     document.write("它和Java没关系=。=");
6 </script>
7 </body>

2.对事件作出反应

　　JavaScript能够对事件作出反应，比如点击按钮。

 

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert(‘让你点你就点啊？!‘)">点击这里</button>
</body>
</html>

 

3.改变HTML内容

　　这个功能比较常用，document.getElementByID("some id")，这个方法是在HTML DOM中定义的，DOM是用以访问HTML元素的正式的W3C标准。

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改变HTML中的元素</title>
</head>
<body>
<p id="demo">我在学JavaScript</p>
<script type="text/javascript">
    function test(){
        x = document.getElementById("demo");    //根据id属性找到元素
        x.innerHTML = "根本学不会呀！";                //改变元素
    }
</script>
<button type="button" onclick="test()">快点我呀</button>
</body>
</html>

 

4.改变HTML的样式

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改变HTML中的元素</title>
</head>
<body>
<p id="demo">我在学JavaScript</p>
<script type="text/javascript">
    function test(){
        x = document.getElementById("demo");    //根据id属性找到元素
        x.style.color = "#ff0000"                //改变元素
    }
</script>
<button type="button" onclick="test()">快点我呀</button>
</body>
</html>

 

5.验证输入

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证输入</title>
</head>
<body>
<p>请输入数字。如果输入值不是数字，会弹出提示框提示“输入错误”。</p>
<input id="demo" type="text"><br/>
<script type="text/javascript">
    function test(){
        var x = document.getElementById("demo").value;
        if(x==""||isNaN(x)){
            alert("输入错误！");
        }
    }
</script>
<button type="button" onclick="test()">快点我呀</button>
</body>
</html>

 

 

 

 

JavaScript（1）


联系
我们