[Javascript入门]Javascript之初体验1

最新推荐文章于 2018-07-13 13:49:47 发布

圣鸢

最新推荐文章于 2018-07-13 13:49:47 发布

阅读量1.2k

点赞数

分类专栏： Javascript 文章标签： HTML

本文链接：https://blog.csdn.net/katherinemiss/article/details/9833995

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

//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
/*也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：*/
<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变量
/*变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）变量名称对大小写敏感提示：JavaScript 语句和 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
}

/*JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
*/

//字符串拼接使用 + 运算符。
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 支持不同类型的循环：
/*
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
*/
<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;

/*break 和 continue 语句仅仅是能够跳出代码块的语句。
continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：
*/
<!DOCTYPE html>
<html>
<body>

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

//Javascript错误
/*try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。*/
<!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 语句
/*throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
*/

<!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 表单验证
/*JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：
用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？
*/

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

/*提示：JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。

Java（由 Sun 发明）是更复杂的编程语言。

ECMA-262 是 JavaScript 标准的官方名称。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。
JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
*/