从C#学Javascript笔记（二）

来源：互联网发布：seo网站排名优化编辑：程序博客网时间：2024/04/27 16:35

声明：本系列博文为本人在w3school网站学习Javascript的笔记，所有权利归该网站所有。

1 Switch语句

基本与C#同。

2 for循环

基本与c#同，也支持break、continue，唯一不同的是，计数器变量的声明用var，不用int。如：for (vari=0;i<10;i+=)，此外有两类变种，如下：

for (var i=0,len=cars.length; i<len;i++)

{

document.write(cars[i] +"<br>");

}

var i=2,len=cars.length;

for (; i<len; i++)

{

document.write(cars[i] +"<br>");

}

对于变种，只需能读懂就行，写码时完全可不用变种。

3 for/in循环

思路类似c#中的foreach，但区别很大，没有提取器，提取器位置上的是计数器，如：

varperson=["Tom","Jack","Jhon","Ben"];

var txt=" ";

for (x in person)

{

txt=txt+x+" ";

}

得到的txt为”0 1 2 3”,而不是预期的“Tom JackJhon Ben”，可知x为计数器。

而将上述

txt=txt+x+" ";

改为

txt=txt+person[x] +" ";

得到的txt才为“Tom Jack Jhon Ben”。

注意，计数器不用声明类型，自动为Number类。

4 while循环与while/do循环

与c#相同，也支持break、continue。但有一个变种情况：

cars=["BMW","Volvo","Saab","Ford"];

var i=0;

while (cars[i])

{

document.write(cars[i] +"<br>");

i++;

}

Cars[4]为假，循环结束。

5 跳出循环break与标记

标记对冒号结束，对某一循环体进行标记，可实现从内层循环跨层跳出。

<scripttype="text/javascript">

outerloop:

for (var i = 0; i < 10; i++)

{

innerloop:

for (var j = 0; j < 10; j++)

{

if (i == 2)

{

breakinnerloop;

}

if (i == 4)

{

breakouterloop;

}

document.write("i=" + i +" j=" + j + "<br>");

}

</script>

6 try/catch(err)/throw

try

{

//在这里运行代码

}

catch(err)

{

//在这里处理错误

}

注意：catch后括号中的内容。以下是一个例子：

<!DOCTYPE html>

<html>

<body>

function myFunction()

{

try

{

vary=document.getElementById("mess");

y.innerHTML="";

varx=document.getElementById("demo").value;

if(x=="") throw "值为空";

if(isNaN(x)) throw"不是数字";

if(x>10) throw "太大";

if(x<5) throw "太小";

}

catch(err)

{

y.innerHTML="错误：" + err +"。";

}

</script>

<h1>我的第一个 JavaScript程序</h1>

<p>请输入 5到 10之间的数字：</p>

<inputid="demo" type="text">

<buttontype="button" onclick="myFunction()">测试输入值</button>

<pid="mess"></p>

</body>

</html>

7 表单验证

<html>

<head>

functionvalidate_email(field,alerttxt)

{

with (field)

{

apos=value.indexOf("@")

dotpos=value.lastIndexOf(".")

if(apos<1||dotpos-apos<2)

{alert(alerttxt);return false}

else {return true}

}

functionvalidate_form(thisform)

{

with (thisform)

{

if(validate_email(email,"Not a valid e-mail address!")==false)

{email.focus();return false}

}

</script>

</head>

<body>

<formaction="submitpage.htm"onsubmit="returnvalidate_form(this);" method="post">

Email: <inputtype="text" name="email" size="30">

<inputtype="submit" value="Submit">

</form>

</body>

</html>

注意，with的用法，在with(变量){}块内，以value表示变量。

8 HTML DOM（文档对象模型）

8.1 getElementById和getElementsByTagName

当网页被加载时，浏览器会创建页面的文档对象模型。

…

var x=document.getElementById(‘demodiv’);

var y=x.getElementsByTagName(‘p’);

var z=y.innerHTML

…

x是一个对象，y也是一个对象，y是Id为“demodv”的对象的子对象中的所有p标识对象，y将是一个数组对象，可用y[i]访问其中的元素。document.getElemById()方法可跨层获取元素，并非只能获取根层元素，这就要求Html文件中所有的Id必须是唯一的。innerHMTL是对象的属性。

注意，id、name可用单引号括住，也可用双引号。如vary=x.getElementsByTagName(“p”’)也是可以的。

8.2 Date对象

8.2.1 创建Date对象

var d=new Date();

8.2.2 方法

Date,getDate,getDay,getMonth,getFullYear,getHours,getMunites,getMilliseconds…

其中Date方法不需要对象就可以使用，其他的方式对需要通过对象来使用，如document.write(Date());

8.3 改变HTML的内容

改变对象的innerHTML，scr等属性即可。

document.getElementById(‘first’).innerHTML=”Therewas once a child…”;

document.getElemnetById(‘image1’).scr=”image002.jpg”;

8.4 改变HTML元素的样式

格式：document.getElementById(id).style.property=new style

例如：document.getElementById(‘first’).style.color="blue";

document.getElementById('first’).style.visibility='hidden'

document.getElementById('first').style.visibility='visible'

8.5 事件

格式：onevent=JavaScript，

共有：onload,onunload，onchange,onmouseover,onmouseout,onmousedown,onmouseup,onclick,onfocust等。

8.5.1 在HTML标签内声明事件

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

<h1onclick="changetext(this)">请点击该文本</h1>

注意this的用法。

8.5.2 在js中向HTML元素分配事件：

document.getElementById("myBtn").onclick=function(){displayDate()};

</script>

8.5.3 事件特点

onload一般为body标签的事件，onchange事件用于text类型的input标签时，在文本框中输入字符的过程中不会触发该事件，只有当离开该文本框（如用按“Tab”键或用鼠标点击该文本框以外的其他地方）时才会触发此事件。onfocus用于类型为text的input标签时，只有当用用按“Tab”键或用鼠标点击该文本框使该文本框处于编辑状态时才会触发此事件。

8.5.4 一些例子

<h1onmouseover="this.style.color='red'"onmouseout="style.color='blue'">

注意：this可用可不用。

….

function myFunction(x)

{

x.style.background="yellow";

}

….

……

function lighton()

{

document.getElementById('myimage').src="/i/eg_bulbon.gif";

}

function lightoff()

{

document.getElementById('myimage').src="/i/eg_bulboff.gif";

}

……

<div onmousedown="mDown(this)"onmouseup="mUp(this)" >请点击这里</div>

9 创建并附加新的元素

格式：

document.createElement(“p”)

document.createTextNode(“This is a newpara...”);

parentElement.appendChild(childElement);

如：

var x=document.getElementById(“div1”);

var y=document.createElement(“p”);

var z=document.createTextNode(“How do youdo?”)

y.appendChild(z);

x.appendChild(y);

10 删除元素

格式：parentElement.removeChild(child);

如：

varparent=document.getElementById("div1");

varchild=document.getElementById("p1");

parent.removeChild(child);

0 0