欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

01javascript基础

程序员文章站 2022-08-10 10:27:32
1.JavaScript:直接写入 HTML 输出流 实例:(只能在 HTML 输出中使用 document.write。如果在文档加载后使用该方法,会覆盖整个文档) 2.JavaScript:对事件的反应 实例: 3.JavaScript:改变 HTML 内容 实例: 4.JavaScript:改 ......

1.javascript:直接写入 html 输出流

实例:(只能在 html 输出中使用 document.write。如果在文档加载后使用该方法,会覆盖整个文档)

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>yubaba丶博客园</title>
 6 </head>
 7 <body>
 8     
 9 <p>
10 javascript 能够直接写入 html 输出流中:
11 </p>
12 <script>
13 document.write("<h1>这是一个标题</h1>");
14 document.write("<p>这是一个段落。</p>");
15 </script>
16 <p>
17 您只能在 html 输出流中使用 <strong>document.write</strong>。
18 如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
19 </p>
20     
21 </body>
22 </html>

01javascript基础

 

2.javascript:对事件的反应

实例:

 1 <!doctype html>
 2 <html>
 3 <head> 
 4 <meta charset="utf-8"> 
 5 <title>yubaba丶</title> 
 6 </head>
 7 <body>
 8     
 9 <h1>我的第一个 javascript</h1>
10 <p>
11 javascript 能够对事件作出反应。比如对按钮的点击:
12 </p>
13 <button type="button" onclick="alert('欢迎!')">点我!</button>
14     
15 </body>
16 </html>

01javascript基础

3.javascript:改变 html 内容

实例:

 1 <!doctype html>
 2 <html>
 3 <head> 
 4 <meta charset="utf-8"> 
 5 <title>yubaba丶</title> 
 6 </head>
 7 <body>
 8     
 9 <h1>我的第一段 javascript</h1>
10 <p id="demo">
11 javascript 能改变 html 元素的内容。
12 </p>
13 <script>
14 function myfunction()
15 {
16     x=document.getelementbyid("demo");  // 找到元素
17     x.innerhtml="hello javascript!这里是被更改后的内容";    // 改变内容
18 }
19 </script>
20 <button type="button" onclick="myfunction()">点击这里触发js</button>
21     
22 </body>
23 </html>

01javascript基础

4.javascript:改变 html 图像

实例:(这个实例中,element.src.match("bulbon") 的作用意思是:检索 <img id="myimage" onclick="changeimage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串,如果存在字符串 bulbon,图片 src 更新为 bulboff.gif,若匹配不到 bulbon 字符串,src 则更新为 bulbon.gif

 1 <!doctype html>
 2 <html>
 3 <head> 
 4 <meta charset="utf-8"> 
 5 <title>yubaba丶</title> 
 6 </head>
 7 <body>
 8     
 9 <script>
10 function changeimage()
11 {
12     element=document.getelementbyid('myimage')
13     if (element.src.match("bulbon"))
14     {
15         element.src="/images/pic_bulboff.gif";//图片及路径记得更改
16     }
17     else
18     {
19         element.src="/images/pic_bulbon.gif";
20     }
21 }
22 </script>
23 <img id="myimage" onclick="changeimage()" src="/images/pic_bulboff.gif" width="100" height="180">
24 <p>点击灯泡就可以打开或关闭这盏灯</p>
25     
26 </body>
27 </html>

01javascript基础01javascript基础

5.javascript:改变 html 样式

实例:

 1 <!doctype html>
 2 <html>
 3 <head> 
 4 <meta charset="utf-8"> 
 5 <title>yubaba丶</title> 
 6 </head>
 7 <body>
 8     
 9 <h1>我的第一段 javascript</h1>
10 <p id="demo">
11 javascript 能改变 html 元素的样式。
12 </p>
13 <script>
14 function myfunction()
15 {
16     x=document.getelementbyid("demo") // 找到元素
17     x.style.color="#fff000";          // 改变样式
18 }
19 </script>
20 <button type="button" onclick="myfunction()">点击这里</button>
21     
22 </body>
23 </html>

01javascript基础01javascript基础

 6.javascript:验证输入

 实例:(以上实例只是普通的验证,如果要在生产环境中使用,需要严格判断,如果输入的空格,或者连续空格 isnan 是判别不出来的。可以添加正则来判断)。

 1 <!doctype html>
 2 <html>
 3 <head> 
 4 <meta charset="utf-8"> 
 5 <title>yubaba丶</title> 
 6 </head>
 7 <body>
 8     
 9 <h1>我的第一段 javascript</h1>
10 <p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
11 <input id="demo" type="text">
12 <script>
13 function myfunction()
14 {
15     var x=document.getelementbyid("demo").value;
16     if(x==""||isnan(x))
17     {
18         alert("必须输入的都是数字");
19     }else{
20         alert("输入成功!");
21     }
22 }
23 </script>
24 <button type="button" onclick="myfunction()">点击这里</button>
25     
26 </body>
27 </html>

01javascript基础01javascript基础