JavaScript 学习笔记

基础
 1 <html>
 2     <head>
 3         <meta charset="utf-8">
 4         <title>Demo111</title>
 5         <!--获取日期-->
 6         <script>
 7             function displayDate(){
 8                 document.getElementById("lala").innerHTML = Date();
 9             }
10         </script>
11     </head>
12 
13     <body>
14         <h1>My First JavaScript Program</h1>
15         <p id = "lala">This is a para.</p>
16         <button type = "button" onclick = "displayDate()">Display Date</button>
17         <p>------------------------------</p>
18         <!--直接写入输入流-->
19         <script type="text/javascript">
20             document.write("<h1>This is a head.</h1>");
21             document.write("<p>This is a para.</p>");
22         </script>
23         <p>JavaScript can write in the HTML inputstream directly.</p>
24         <p>You just can write <strong>document.write</strong>.</p>
25         <p>------------------------------</p>
26         <!--弹出对话框-->
27         <button type = "button" onclick = "alert('Welcome!')">Click~</button>
28         <p>------------------------------</p>
29         <!--改变文字内容-->
30         <p id = "demo">JavaScript can change the comments of a HTML element.</p>
31         <script>
32             function myFunction(){
33                 x = document.getElementById("demo");
34                 x.innerHTML = "Hello JavaScript!";
35             }
36         </script>
37         <button type = "button" onclick = "myFunction()">Click!</button>
38         <p>-------------------------------</p>
39         <!--改变图片内容-->
40         <script>
41             function changeImg(){
42                 element = document.getElementById("myImg");
43                 if(element.src.match("ASCII"))
44                     element.src = "eclipse快捷键.png";
45                 else
46                     element.src = "ASCII.jpg";
47             }
48         </script>
49         <img id = "myImg" onclick = "changeImg()" src = "ASCII.jpg" width = "100" height = "180">
50         <p>Click the pic ~</p>
51         <p>--------------------------------</p>
52         <!--改变文字样式-->
53         <p id = "color">Change the color</p>
54         <script type="text/javascript">
55             function changeColor(){
56                 x = document.getElementById("color")
57                 x.style.color = "#ff0886";
58             }
59         </script>
60         <button type = "button" onclick = "changeColor()">Change the color!</button>
61         <p>---------------------------------</p>
62         <!--验证输入-->
63         <p>Please enter the number. If input value is not a number, the browser will pop up the prompt. </p>
64         <input id = "in" type = "text">
65         <script>
66             function isNumber(){
67                 var x = document.getElementById("in").value;
68                 if(x == "" || isNaN(x))
69                     alert("Not a number.");
70                 else
71                     alert("Yes!")
72             }
73         </script>
74         <button type = "button" onclick = "isNumber()">Is a Number?</button>
75         <p>----------------------------------</p>
76     </body>    
77 </html>
道阻且长，行则将至。