IT@Solve=>web技术常见问题编程学习笔记前端

web学习之JavaScript基础（一）

2018-05-23  本文已影响690人  AR7_

前言

一、JavaScript基础

JavaScript简介

JavaScript 是脚本语言

JavaScript：写入 HTML 输出

<!DOCTYPE html>
<html>
<body>

<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>

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

<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>

</body>
</html>

JavaScript：对事件作出反应

<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>

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

</body>
</html>

JavaScript：改变 HTML 内容

<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

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

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

<button type="button" onclick="myFunction()">点击这里改变文本内容</button>

</body>
</html>

JavaScript：改变 HTML 图像

<!DOCTYPE html>
<html>
<body>
<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>

</body>
</html>

JavaScript：改变 HTML 样式

<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

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

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

<button type="button" onclick="myFunction()">点击这里改变样式</button>

</body>
</html>

JavaScript：验证输入

<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

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

</body>
</html>

你知道吗？

二、JavaScript使用

<script> 标签

<script>
alert("My First JavaScript");
</script>

<body> 中的 JavaScript

<!DOCTYPE html>
<html>
<body>

<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>

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

<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>

</body>
</html>

JavaScript 函数和事件

<head> 或 <body> 中的 JavaScript

<head> 中的 JavaScript 函数

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>

<body>

<h1>My Web Page</h1>

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

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

</body>
</html>

<body> 中的 JavaScript 函数

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

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

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

<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>

</body>
</html>

外部的 JavaScript

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

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

</body>
</html>

三、JavaScript输出

操作 HTML 元素

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p id="demo">My First Paragraph.</p>

<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>

</body>
</html>

写到文档输出

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

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

</body>
</html>

警告

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

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

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

</body>
</html>

Windows 8 中的 JavaScript

四、JavaScript 语句

JavaScript 语句

document.getElementById("demo").innerHTML="Hello World";

分号 ;

JavaScript 代码

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

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

<div id="myDIV">A DIV.</div>

<script>
document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";
</script>

</body>
</html>

JavaScript 代码块

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

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

</body>
</html>

JavaScript 对大小写敏感

空格

var name="Hello";
var name = "Hello";

对代码行进行折行

-你可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：

document.write("Hello \
World!");

不过，你不能向这样拆行：

document.write \
("Hello World!");

您知道吗？

五、JavaScript 注释

JavaScript 注释

<!DOCTYPE html>
<html>
<body>

<h1 id="myH1"></h1>

<p id="myP"></p>

<script>
// 输出标题：
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// 输出段落：
document.getElementById("myP").innerHTML="This is my first paragraph.";
</script>

<p><b>注释：</b>注释不会被执行。</p>

</body>
</html>

JavaScript 多行注释

<!DOCTYPE html>
<html>
<body>

<h1 id="myH1"></h1>

<p id="myP"></p>

<script>
/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
</script>

<p><b>注释：</b>注释块不会被执行。</p>

</body>
</html>

使用注释来阻止执行

<!DOCTYPE html>
<html>
<body>

<h1 id="myH1"></h1>

<p id="myP"></p>

<script>
//document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
</script>

<p><b>注释：</b>注释不会被执行。</p>

</body>
</html>


<!DOCTYPE html>
<html>
<body>

<h1 id="myH1"></h1>

<p id="myP"></p>

<script>
/*
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
*/
</script>

<p><b>注释：</b>注释块不会被执行。</p>

</body>
</html>

在行末使用注释

<!DOCTYPE html>
<html>
<body>

<p id="myP"></p>

<script>
var x=5;   // 声明 x 并把 5 赋值给它
var y=x+2; // 声明 y 并把 x+2 赋值给它
document.getElementById("myP").innerHTML=y // 把 y 的值写到 myP
</script>

<p><b>注释：</b>注释不会被执行。</p>

</body>
</html>

六、JavaScript 变量

实例

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

就像代数那样

x=2
y=3
z=x+y

JavaScript 变量

JavaScript 数据类型

<!DOCTYPE html>
<html>
<body>

<script>
var pi=3.14;
var name="Bill Gates";
var answer='Yes I am!';

document.write(pi + "<br>");
document.write(name + "<br>");
document.write(answer + "<br>");
</script>

</body>
</html>

声明（创建） JavaScript 变量

var carname;

carname="Volvo";

var carname="Volvo";

<!DOCTYPE html>
<html>
<body>

<p>点击这里来创建变量，并显示结果。</p>

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

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

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

</body>
</html>

一条语句，多个变量

var name="Gates", age=56, job="CEO";

var name="Gates",
age=56,
job="CEO";

Value = undefined

var carname;

重新声明 JavaScript 变量

var carname="Volvo";
var carname;

JavaScript 算数

<!DOCTYPE html>
<html>
<body>

<p>假设 y=5，计算 x=y+2，并显示结果。</p>
<button onclick="myFunction()">点击这里</button>

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

<script>
function myFunction()
{
var y=5;
var x=y+2;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>

</body>
</html>
傲游截图20180521095249.png

七、JavaScript 数据类型

JavaScript 拥有动态类型

var x                // x 为 undefined
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

JavaScript 字符串

var carname="Bill Gates";
var carname='Bill Gates';

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

JavaScript 数字

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

<!DOCTYPE html>
<html>
<body>

<script>

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

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

</script>

</body>
</html>

JavaScript 布尔

var x=true
var y=false

JavaScript 数组

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

var cars=new Array("Audi","BMW","Volvo");

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

JavaScript 对象

var person={firstname:"Bill", lastname:"Gates", id:5566};

var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Undefined 和 Null

<!DOCTYPE html>
<html>
<body>

<script>
var person;
var car="Volvo";
document.write(person + "<br />");
document.write(car + "<br />");
var car=null
document.write(car + "<br />");
</script>

</body>
</html>

声明变量类型

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

八、JavaScript 对象

属性和方法

car.name=Fiat

car.model=500

car.weight=850kg

car.color=white 

car.start()

car.drive()

car.brake()

JavaScript 中的对象

var txt = "Hello";

txt.length=5

txt.indexOf()

txt.replace()

txt.search()

创建 JavaScript 对象

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

访问对象的属性

objectName.propertyName

var message="Hello World!";
var x=message.length;

12

访问对象的方法

objectName.methodName()

var message="Hello world!";
var x=message.toUpperCase();

HELLO WORLD!

你知道吗？

九、JavaScript 函数

实例

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>

<body>
<button onclick="myFunction()">点击这里</button>
</body>
</html>

JavaScript 函数语法

function functionname()
{
这里是要执行的代码
}

调用带参数的函数

myFunction(argument1,argument2)

function myFunction(var1,var2)
{
这里是要执行的代码
}

<!DOCTYPE html>
<html>
<body>

<p>点击这个按钮，来调用带参数的函数。</p>

<button onclick="myFunction('jweihao','CEO')">点击这里</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>


<!DOCTYPE html>
<html>
<body>

<p>请点击其中的一个按钮，来调用带参数的函数。</p>

<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

带有返回值的函数

function myFunction()
{
var x=5;
return x;
}

var myVar=myFunction();

document.getElementById("demo").innerHTML=myFunction();

<!DOCTYPE html>
<html>
<body>

<p>本例调用的函数会执行一个计算，然后返回结果：</p>

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

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

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

</body>
</html>


function myFunction(a,b)
{
if (a>b)
  {
  return;
  }
x=a+b
}

局部 JavaScript 变量

全局 JavaScript 变量

JavaScript 变量的生存期

向未声明的 JavaScript 变量来分配值

carname="Volvo";

十、JavaScript 运算符

y=5;
z=2;
x=y+z;

JavaScript 算术运算符

JavaScript 赋值运算符

用于字符串的 + 运算符

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

对字符串和数字进行加法运算

<html>
<body>

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

<h3>规则是：</h3>

<p><strong>如果把数字与字符串相加，结果将成为字符串。</strong></p>

</body>
</html>

十一、JavaScript 比较和逻辑运算符

比较运算符

如何使用

if (age<18) document.write("Too young");

逻辑运算符

条件运算符

variablename=(condition)?value1:value2 


greeting=(visitor=="PRES")?"Dear President ":"Dear ";

十二、JavaScript If...Else 语句

条件语句

If 语句

if (条件)
  {
  只有当条件为 true 时执行的代码
  }

<!DOCTYPE html>
<html>
<body>

<p>如果时间早于 20:00，会获得问候 "Good day"。</p>

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

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

<script>
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<20)
  {
  x="Good day";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

If...else 语句

if (条件)
  {
  当条件为 true 时执行的代码
  }
else
  {
  当条件不为 true 时执行的代码
  }

<!DOCTYPE html>
<html>
<body>

<p>点击这个按钮，获得基于时间的问候。</p>

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

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

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

</body>
</html>

If...else if...else 语句

if (条件 1)
  {
  当条件 1 为 true 时执行的代码
  }
else if (条件 2)
  {
  当条件 2 为 true 时执行的代码
  }
else
  {
  当条件 1 和 条件 2 都不为 true 时执行的代码
  }

<!DOCTYPE html>
<html>
<body>

<p>点击这个按钮，获得基于时间的问候。</p>

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

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

<script>
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<10)
  {
  x="Good morning";
  }
else if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

十三、JavaScript Switch 语句

JavaScript Switch 语句

switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
  n 与 case 1 和 case 2 不同时执行的代码
}

<!DOCTYPE html>
<html>
<body>

<p>点击下面的按钮来显示今天是周几：</p>

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

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

<script>
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
  {
  case 0:
    x="Today it's Sunday";
    break;
  case 1:
    x="Today it's Monday";
    break;
  case 2:
    x="Today it's Tuesday";
    break;
  case 3:
    x="Today it's Wednesday";
    break;
  case 4:
    x="Today it's Thursday";
    break;
  case 5:
    x="Today it's Friday";
    break;
  case 6:
    x="Today it's Saturday";
    break;
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

default 关键词

<html>
<body>

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

</body>
</html>

十四、JavaScript For 循环

JavaScript 循环

document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");

<html>
<body>

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

</body>
</html>

不同类型的循环

For 循环

for (语句 1; 语句 2; 语句 3)
  {
  被执行的代码块
  }

<!DOCTYPE html>
<html>
<body>

<p>点击下面的按钮，将代码块循环五次：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="";
for (var i=0;i<5;i++)
  {
  x=x + "The number is " + i + "<br>";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

语句 1

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>


<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

语句 2

语句 3

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

For/In 循环

<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>

十五、JavaScript While 循环

while 循环

while (条件)
  {
  需要执行的代码
  }

<!DOCTYPE html>
<html>
<body>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
while (i<5)
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

do/while 循环

do
  {
  需要执行的代码
  }
while (条件);

<!DOCTYPE html>
<html>
<body>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
do
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
while (i<5)  
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

比较 for 和 while

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>


<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

十六、JavaScript Break 和 Continue 语句

Break 语句

<!DOCTYPE html>
<html>
<body>

<p>点击按钮，测试带有 break 语句的循环。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
for (i=0;i<10;i++)
  {
  if (i==3)
    {
    break;
    }
  x=x + "The number is " + i + "<br>";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

Continue 语句

<!DOCTYPE html>
<html>
<body>

<p>点击下面的按钮来执行循环，该循环会跳过 i=3 的步进。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
for (i=0;i<10;i++)
  {
  if (i==3)
    {
    continue;
    }
  x=x + "The number is " + i + "<br>";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

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>

十七、JavaScript 错误 - Throw、Try 和 Catch

错误一定会发生

JavaScript 抛出错误

JavaScript 测试和捕捉

try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="本页有一个错误。\n\n";
  txt+="错误描述：" + err.message + "\n\n";
  txt+="点击确定继续。\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="查看消息" onclick="message()" />
</body>

</html>

Throw 语句

throw exception

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

</body>
</html>

十八、JavaScript 表单验证

JavaScript 表单验证

必填（或必选）项目

function validateForm()        
{        
var x=document.forms["myForm"]["fname"].value;        
if (x==null || x=="")        
  {        
  alert("First name must be filled out");        
  return false;        
  }        
}


<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
  alert("姓必须填写");
  return false;
  }
}
</script>
</head>
<body>
    
<form name="myForm" action="/statics/demosource/demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
    
</body>
</html>

E-mail验证

function validateForm()        
{        
var x=document.forms["myForm"]["email"].value;        
var atpos=x.indexOf("@");        
var dotpos=x.lastIndexOf(".");        
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)        
  {        
  alert("Not a valid e-mail address");        
  return false;        
  }       
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<head>
<script>
function validateForm(){
    var x=document.forms["myForm"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
        alert("不是一个有效的 e-mail 地址");
        return false;
    }
}
</script>
</head>
<body>
    
<form name="myForm" action="demo-form" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
    
</body>
</html>

上一篇下一篇

猜你喜欢

热点阅读