首页 1 2 3 4 5 6 7

[Javascript入门]Javascript之初体验1

//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>

//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>

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

//JavaScript：验证输入
<input id="demo" type="text">

//外部的 JavaScript

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

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

//操作 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>

</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>

//一条语句多个变量可以在一条语句中声明很多变量。该语句以 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");

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"];

//声明变量类型
//当您声明新变量时，可以使用关键词 "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>

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>

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>

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>

</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>

//Throw 语句

<!DOCTYPE html>
<html>
<body>

<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>