javascript基本语法（一）

来源：互联网发布：用二分法求根C语言编辑：程序博客网时间：2024/04/30 11:13

JavaScript基本语法

（根据W3School在线测试工具学习）

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

This is a heading

This is a paragraph.

<button type="button" onclick="alert('Welcome!')">点击这里</button>

<p id="demo">JavaScript 能改变 HTML 元素的内容。</p><script>function myFunction(){x=document.getElementById("demo");  // 找到元素x.innerHTML="Hello JavaScript!";    // 改变内容}</script><button type="button" onclick="myFunction()">点击这里</button>

<script>function changeImage(){element=document.getElementById('myimage')if (element.src.match("bulbon"))  {  element.src="/i/eg_bulboff.gif";  }else  {  element.src="/i/eg_bulbon.gif";  }}</script><img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif"><p>点击灯泡来点亮或熄灭这盏灯</p>

<p id="demo">JavaScript 能改变 HTML 元素的样式。</p><script>function myFunction(){x=document.getElementById("demo") // 找到元素x.style.color="#ff0000";          // 改变样式}</script><button type="button" onclick="myFunction()">点击这里</button>

<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p><input id="demo" type="text"><script>function myFunction(){var x=document.getElementById("demo").value;if(x==""||isNaN(x))    {    alert("Not Numeric");    }}</script><button type="button" onclick="myFunction()">点击这里</button>

补充说明：isNaN()函数：如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false
7.

<p id="demo">A Paragraph.</p><button type="button" onclick="myFunction()">点击这里</button><p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p><script type="text/javascript" src="/js/myScript.js"></script>

<script>document.write("<p>My First JavaScript</p>");</script>

请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖
如下：

<p>My First Paragraph.</p><button onclick="myFunction()">点击这里</button><script>function myFunction(){document.write("糟糕！文档消失了。");}</script>

<p id="myPar">I am a paragraph.</p><div id="myDiv">I am a div.</div><p><button type="button" onclick="myFunction()">点击这里</button></p><script>function myFunction(){document.getElementById("myPar").innerHTML="Hello World";document.getElementById("myDiv").innerHTML="How are you?";}</script><p>当您点击上面的按钮时，两个元素会改变。</p>

补充：可以在文本字符串中使用反斜杠对代码行进行换行
9.

<p>点击下面的按钮，会显示出基于今日日期的消息：</p><button onclick="myFunction()">点击这里</button><p id="demo"></p><script>function myFunction(){var x;var d=new Date().getDay();switch (d)  {  case 6:    x="Today it's Saturday";    break;  case 0:    x="Today it's Sunday";    break;  default:    x="Looking forward to the Weekend";  }document.getElementById("demo").innerHTML=x;}</script>

10.
for/in语句

<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p><button onclick="myFunction()">点击这里</button><p id="demo"></p><script>function myFunction(){var x;var txt="";var person={fname:"Bill",lname:"Gates",age:56}; for (x in person){txt=txt + person[x];}document.getElementById("demo").innerHTML=txt;}</script>

11.

<script>function myFunction(){try{ var x=document.getElementById("demo").value;if(x=="")    throw "值为空";if(isNaN(x)) throw "不是数字";if(x>10)     throw "太大";if(x<5)      throw "太小";}catch(err){var y=document.getElementById("mess");y.innerHTML="错误：" + err + "。";}}</script><h1>我的第一个 JavaScript 程序</h1><p>请输入 5 到 10 之间的数字：</p><input id="demo" type="text"><button type="button" onclick="myFunction()">测试输入值</button><p id="mess"></p>

12.

<html><head><script type="text/javascript">function validate_email(field,alerttxt){with (field){apos=value.indexOf("@")dotpos=value.lastIndexOf(".")if (apos<1||dotpos-apos<2)   {alert(alerttxt);return false}else {return true}}}function validate_form(thisform){with (thisform){if (validate_email(email,"Not a valid e-mail address!")==false)  {email.focus();return false}}}</script></head><body><form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">Email: <input type="text" name="email" size="30"><input type="submit" value="Submit"> </form></body></html>

0 0