JavaScript简介

JavaScript：写入 HTML 输出

<p>JavaScript 能够直接写入 HTML 输出流中：</p>
<script>document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>

1
2
3

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

JavaScript：对事件作出反应

1	<button type="button" onclick="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" onclick="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" onclick="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" onclick="myFunction()">点击这里</button>

JavaScript：验证输入

<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x)) //isNaN(x):x为数字为假，x不为数字为真
 {
alert("Not Numeric");
 }
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

JavaScript 使用

HTML 中的脚本必须位于标签之间。

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

脚本可被放置在 HTML 页面的和部分中。

JavaScript 函数和事件

或中的 JavaScript

您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的或部分中，或者同时存在于两个部分中。
通常的做法是把函数放入部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

中的 JavaScript 函数

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

中的 JavaScript 函数

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

外部的 JavaScript

1
2
3

<body>
<script src="myScript.js"></script>
</body>

JavaScript 输出

操作 HTML 元素

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

写到文档输出

<body>
<h1>我的第一张网页</h1>
<script>
document.write("<p>我的第一段 JavaScript</p>");
</script>
</body>

JavaScript 语句

JavaScript 代码

JavaScript 代码块

JavaScript 语句通过代码块的形式进行组合。
块由左花括号开始，由右花括号结束。

块的作用是使语句序列一起执行。

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

JavaScript 对大小写敏感。JavaScript 会忽略多余的空格。

JavaScript 注释

单行注释以 // 开头。

JavaScript 多行注释

多行注释以 \/ 开始，以 \/ 结尾。

使用注释来阻止执行(测试代码)

在行末使用注释

JavaScript 变量

与代数一样，JavaScript 变量可用于存放值（比如 x=2）和表达式（比如 z=x+y）。

JavaScript 数据类型

JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。
当您向变量分配文本值时，应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

声明（创建） JavaScript 变量

<p>点击这里来创建变量，并显示结果。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
}
</script>

一条语句，多个变量

您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可.
声明也可横跨多行.

Value = undefined

重新声明 JavaScript 变量

JavaScript 算数

JavaScript 数据类型(字符串、数字、布尔、数组、对象、Null、Undefined)

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

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

JavaScript 字符串

字符串是存储字符（比如 “Bill Gates”）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：

您可以在字符串中使用引号，只要不匹配包围字符串的引号即可：

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

JavaScript 只有一种数字类型。
数字可以带小数点，也可以不带。

极大或极小的数字可以通过科学（指数）计数法来书写：

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

JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false。

JavaScript 数组

三种创建数组方式：

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


<script>
var cars=new Array("Audi","BMW","Volvo");
</script>


<script>
var cars=["Audi","BMW","Volvo"];
</script>

JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔。声明可以跨行。
1
2
3
<script>
var person={firstname:"Bill", lastname:"Gates", id:5566};
</script>

对象属性有两种寻址方式。

<script>
name=person.lastname;
name=person["lastname"];
</script>

Undefined 和 Null

Undefined 这个值表示变量不含有值。 //不含有值，没有定义过。
可以通过将变量的值设置为 null 来清空变量。 //值为null

声明变量类型

当您声明新变量时，可以使用关键词 “new” 来声明其类型。声明类型后的变量不能赋其他类型变量的值。
1
2
3
4
5
6
7
<script>
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
</script>

JavaScript 对象

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有属性和方法的数据。

属性和方法

JavaScript 中的对象

在 JavaScript 中，对象是数据（变量），拥有属性和方法。
当您像这样声明一个 JavaScript 变量时：
1
<script>var txt = "Hello";</script>
您实际上已经创建了一个 JavaScript 字符串对象。字符串对象拥有内建的属性 length。对于上面的字符串来说，length 的值是 5。字符串对象同时拥有若干个内建的方法。
- 属性：
  1
  2
  3
  <script>
  txt.length=5
  </script>
- 方法：
  1
  2
  3
  4
  5
  <script>
  txt.indexOf()
  txt.replace()
  txt.search()
  </script>

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

访问对象的属性

语法：objectName.propertyName

<script>
var message="Hello World!";
var x=message.length;
</script>

访问对象的方法

语法：objectName.methodName()

<script>
var message="Hello world!";
var x=message.toUpperCase();
</script>

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">点击这里</button>
</body>

JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：
1
2
3
4
function functionname()
{
这里是要执行的代码
}
当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。您可以发送任意多的参数，由逗号 (,) 分隔。

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Bill Gates','CEO')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

带有返回值的函数

<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

在您仅仅希望退出函数时，也可使用 return 语句。返回值是可选的：
1
2
3
4
5
6
7
8
9
10
<script>
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}
</script>

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期

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

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

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：
1
<script>carname="Volvo";</script>
将声明一个全局变量 carname，即使它在函数内执行。

JavaScript 运算符

JavaScript 比较和逻辑运算符

JavaScript If…Else 语句

JavaScript Switch 语句

JavaScript For 循环

JavaScript While 循环

JavaScript Break 和 Continue 语句

break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。

JavaScript 错误 - Throw、Try 和 Catch

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。

JavaScript 测试和捕捉

try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。

语法：

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

实例：

<head>
<script>
var txt="";
function message()
{
try
 {
 adddlert("Welcome guest!");	//错误在于alert打错
 }
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>

Throw 语句

throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
语法：
1
throw exception

异常可以是 JavaScript 字符串、数字、逻辑值或对象。

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

JavaScript 表单验证

关于我

国立华侨大学
软件工程大二在读
独立视频制作者
啥都感兴趣
联系方式：
- qq: 1093846898
- wechat: czh-0526
- e-mail: 1093846898@qq.com

JavaScript简介

JavaScript：写入 HTML 输出

JavaScript：对事件作出反应

JavaScript：改变 HTML 内容

JavaScript：改变 HTML 图像

JavaScript：改变 HTML 样式

JavaScript：验证输入

JavaScript 使用

HTML 中的脚本必须位于 与 标签之间。

脚本可被放置在 HTML 页面的 和 部分中。

JavaScript 函数和事件

或 中的 JavaScript

中的 JavaScript 函数

中的 JavaScript 函数

外部的 JavaScript

JavaScript 输出

操作 HTML 元素

写到文档输出

JavaScript 语句

JavaScript 代码

JavaScript 代码块

JavaScript 对大小写敏感。JavaScript 会忽略多余的空格。

JavaScript 注释

JavaScript 注释

JavaScript 多行注释

使用注释来阻止执行(测试代码)

在行末使用注释

JavaScript 变量

JavaScript 变量

JavaScript 数据类型

声明（创建） JavaScript 变量

一条语句，多个变量

Value = undefined

重新声明 JavaScript 变量

JavaScript 算数

JavaScript 数据类型(字符串、数字、布尔、数组、对象、Null、Undefined)

JavaScript 拥有动态类型

JavaScript 字符串

JavaScript 数字

JavaScript 布尔

JavaScript 数组

JavaScript 对象

Undefined 和 Null

声明变量类型

JavaScript 对象

属性和方法

JavaScript 中的对象

创建 JavaScript 对象

访问对象的属性

访问对象的方法

JavaScript 函数

JavaScript 函数语法

调用带参数的函数

带有返回值的函数

局部 JavaScript 变量

全局 JavaScript 变量

JavaScript 变量的生存期

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

JavaScript 运算符

JavaScript 比较和逻辑运算符

JavaScript If…Else 语句

JavaScript Switch 语句

JavaScript For 循环

JavaScript While 循环

JavaScript Break 和 Continue 语句

JavaScript 错误 - Throw、Try 和 Catch

JavaScript 测试和捕捉

Throw 语句

JavaScript 表单验证

关于我

觉得本文不错？请支持我

HTML 中的脚本必须位于标签之间。

脚本可被放置在 HTML 页面的和部分中。

或中的 JavaScript