淘先锋技术网

首页 1 2 3 4 5 6 7

//JavaScript:写入 HTML 输出
<script>
document.write("<h1>This is a heading!!!</h1>");
document.write("<p>This is a paragraph.</p>");
</script>

//JavaScript:对事件作出反应
<button type="button" οnclick="alert('Welcome!')">点击这里</button>

//JavaScript:改变 HTML 内容
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>

<script>
function myFunction()
{
x=document.getElementById("demo");  // 找到元素
x.innerHTML="Hello JavaScript!";    // 改变内容
//比较
}
</script>

<button type="button" οnclick="myFunction()">点击这里</button>

//JavaScript:改变 HTML 图像
<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" οnclick="changeImage()" src="/i/eg_bulboff.gif">

//JavaScript:改变 HTML 样式
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>

<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000";          // 改变样式
}
</script>

<button type="button" οnclick="myFunction()">点击这里</button>

//JavaScript:验证输入
<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" οnclick="myFunction()">点击这里</button>


//外部的 JavaScript

<p id="demo">A Paragraph.</p>

<button type="button" οnclick="myFunction()">点击这里</button>

<p><b>注释:</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>

<script type="text/javascript" src="/js/myScript.js"></script>

//操作 HTML 元素
//一般使用 "id" 属性来标识 HTML 元素,如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。


//警告 请使用 document.write() 仅仅向文档输出写内容。
//如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:
//实例
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button οnclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
document.write("糟糕!文档消失了。");
}
</script>

</body>
</html>

//Javascript对大小写敏感,自动忽略多余空格,
//对代码行进行折行 可以在文本字符串中使用反斜杠对代码行进行换行
//正确:
document.write("Hello \
World!");
//错误:
document.write \
("Hello World!");


//Javascript变量 

<script>
var x=2;
var y=3;
var z=2+3
var g=x+y;

document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
document.write(g + "<br>");
</script>

//变量 先声明再赋值
<button οnclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script>
function myFunction()
{
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
}
</script>

//一条语句 多个变量 可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可:
//如:
var name="Gates", age=56, job="CEO";声明也可横跨多行:
//也可以:
var name="Gates",
age=56,
job="CEO";

//JavaScript 字符串
//可以使用单引号或双引号,只要不匹配包围字符串的引号即可
<script>
var carname1="Bill Gates";
var carname2='Bill Gates';
var answer1="Nice to meet you!";
var answer2="He is called 'Bill'";
var answer3='He is called "Bill"';

document.write(carname1 + "<br>")
document.write(carname2 + "<br>")
document.write(answer1 + "<br>")
document.write(answer2 + "<br>")
document.write(answer3 + "<br>")
</script>

//JavaScript 数字
<script>

var x1=36.00;
var x2=36;
var y=123e5;
var z=123e-6;

document.write(x1 + "<br />")
document.write(x2 + "<br />")
document.write(y + "<br />")
document.write(z + "<br />")
</script>

//Javascript 布尔
var x=true
var y=false

//JavaScript 数组
//下面的代码创建名为 cars 的数组:
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
//OR
var cars=new Array("Audi","BMW","Volvo");

<script>
var i;
var cars = new Array();
cars[0] = "Audi";
cars[1] = "BMW";
cars[2] = "Volvo";

for (i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
</script>


//JavaScript 对象
//对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
//例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。
var person={firstname:"Bill", lastname:"Gates", id:5566};

//空格和折行无关紧要。声明可横跨多行:
var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};
//对象属性有两种寻址方式:
name=person.lastname;

name=person["lastname"];

<script>
var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};
document.write(person.lastname + "<br />");
document.write(person["lastname"] + "<br />");
</script>

//声明变量类型
//当您声明新变量时,可以使用关键词 "new" 来声明其类型:

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;
//JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。


//创建 JavaScript 对象
//JavaScript 中的几乎所有事务都是对象:字符串、数字、数组、日期、函数,等等。
<script>
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
</script>

//String 对象的 toUpperCase() 方法来把文本转换为大写:
var message="Hello world!";
var x=message.toUpperCase();

//带有返回值的函数return
<p id="demo"></p>

<script>
function myFunction(a,b)
{
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

//仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:
//如果 a 大于 b,则上面的代码将退出函数,并不会计算 a 和 b 的总和。
function myFunction(a,b)
{
if (a>b)
  {
  return;
  }
x=a+b
}

//字符串拼接 使用 + 运算符。
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
txt4=txt1+" "+txt2;
//变量 txt3 包含的值是 "What a verynice day"。变量 txt4 包含的值是"What a very nice day"

//数字与字符串相加,结果将成为字符串
<script type="text/javascript">
x=5+5;
document.write(x);
document.write("<br />");
x="5"+"5";
document.write(x);
document.write("<br />");
x=5+"5";
document.write(x);
document.write("<br />");
x="5"+5;
document.write(x);
document.write("<br />");
</script>
10
55
55
55

//条件运算符
//语法
variablename=(condition)?value1:value2
//例子
greeting=(visitor=="PRES")?"Dear President ":"Dear ";

//if else
<p>如果时间早于 20:00,会获得问候 "Good day"。</p>
<button οnclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x="";
var time=new Date().getHours();   //var day=new Date().getDay();

if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

 

//JavaScript 支持不同类型的循环:

<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0,len=cars.length;
for (; i<len; )
{
document.write(cars[i] + "<br>");
i++;
}
</script>

//For/In 循环
//JavaScript for/in 语句循环遍历对象的属性:
<button οnclick="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>

//比较 for 和 while while 循环与 for 循环很像。

//for 语句实例
//本例中的循环使用 for 循环来显示 cars 数组中的所有值:

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];)
{
document.write(cars[i] + "<br>");
i++;
}
//while 语句实例
//本例中的循环使用使用 while 循环来显示 cars 数组中的所有值:

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
document.write(cars[i] + "<br>");
i++;
}

//break 语句用于跳出循环。
//continue 用于跳过循环中的一个迭代
//JavaScript 标签:用以对 JavaScript 语句进行标记。
//标记 JavaScript 语句,请在语句之前加上冒号:
label:
语句

语法
break labelname;

continue labelname;


<!DOCTYPE html>
<html>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
</script>

</body>
</html>
输出:
BMW
Volvo
Saab

//Javascript错误

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="View message" οnclick="message()">
</body>
</html>


//Throw 语句

<!DOCTYPE html>
<html>
<body>

<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" οnclick="myFunction()">测试输入值</button>
<p id="mess"></p>

</body>
</html>

//JavaScript 表单验证


//E-mail 验证
//下面的函数检查输入的数据是否符合电子邮件地址的基本语法:,输入的数据必须包含 @ 符号和点号(.)。
//同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:

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}
}
}
//连同 HTML 表单的完整代码:
<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"οnsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>

</html>

//必填(或必选)项目
<html>
<head>
<script type="text/javascript">

function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
</script>
</head>

<body>
<form action="submitpage.htm" οnsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>

</html>