JavaScript基础学习

JavaScript基础学习

1. JavaScript可以直接写入HTML输出流

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 5     </head>
 6     <body>
 7         <p>JavaScript能够直接写如HTML输出流中：</p>
 8         <script>
 9             document.write("<h1>This is a heading.</h1>");
10             document.write("<p>This is a paragraph.</p>");
11         </script>
12     </body>
13 </html>
View Code

2. JavaScript能够对事件做出响应

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 5     </head>
 6     <body>
 7         <h1>我的第一段 JavaScript</h1>
 8         <p>JavaScript能够对事件做出反应。比如按钮的点击：</p>
 9         <button type="button" onclick="alert('welcome!')">点击这里</button>
10     </body>
11 </html>
View Code

 3.JavaScript能改变HTML内容

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 5     </head>
 6     <body>
 7         <h1>我的第一段JavaScript</h1>
 8         <p id = "demo">
 9             JavaScript能改变HTML元素内容
10         </p>
11         <script>
12             function myFunction() {
13                 x = document.getElementById("demo");//查找元素
14                 x.innerHTML = "Hello,JavaScript!";
15             }
16         </script>
17         <button type="button" onclick="myFunction()">点击这里</button>
18     </body>
19 </html>
View Code

 4.JavaScript能改变HTML图片

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 5     </head>
 6     <body>
 7         <script>
 8             function changeImage() {
 9                 pic = document.getElementById('myImage');
10                 if (pic.src.match("flower")) {
11                     pic.src = "../res/tree.jpg";
12                 } else {
13                     pic.src = "../res/flower.jpg";
14                 }
15             }
16         </script>
17         <img id = "myImage" onclick="changeImage()" src = "../res/flower.jpg"/>
18         <p>点击图片可以实现替换图片</p>
19     </body>
20 </html>
View Code

 5.JavaScript能改变HTML元素的样式

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 5     </head>
 6     <body>
 7         <h1>我的第一段JavaScript</h1>
 8         <p id = "demo">JavaScript能改变HTML元素的样式</p>
 9         <script>
10             function myFunction() {
11                 x = document.getElementById("demo");
12                 x.style.color = "#ff0000";
13             }
14         </script>
15         <button type="button" onclick="myFunction()">点击这里</button>
16     </body>
17 </html>
View Code

 6.JavaScript能检查数据

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 5     </head>
 6     <body>
 7         <h1>Hello,JavaScript!</h1>
 8         <p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
 9         <input id = "demo" type = "text"/>
10         <script>
11             function myFunction() {
12                 var x = document.getElementById("demo").value;
13                 <!-- JavaScript中isNaN() 函数用于检查其参数是否是非数字值-->
14                 if (x == "" || isNaN(x)) {
15                     alert("Not Numeric");
16                 }
17             }
18         </script>
19         <button type="button" onclick="myFunction()">点击这里</button>
20     </body>
21 </html>
View Code

 7.JavaScript能添加HTML元素

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 5     </head>
 6     <body>
 7         <div id = "div1">
 8             <p id = "p1">这是一个段落。</p>
 9             <p id = "p2">这是另一个段落。</p>
10         </div>
11         <script>
12             var para = document.createElement("p");
13             var node = document.createTextNode("这是新段落。");
14             para.appendChild(node);
15             
16             document.getElementById("div1").appendChild(para);
17         </script>
18     </body>
19 </html>
View Code

 8.JavaScript能删除已有HTML元素

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 5     </head>
 6     <body>
 7         <div id = "div1">
 8             <p id = "p1">这是一个段落。</p>
 9             <p id = "p2">这是另一个段落。</p>
10         </div>
11         <script>
12             var parent = document.getElementById("div1");
13             var child = document.getElementById("p1");
14             parent.removeChild(child);
15         </script>
16     </body>
View Code

 

posted @ 2013-12-05 11:24  slowalker  阅读(240)  评论(0)  编辑  收藏  举报