一、JavaScript简介
JavaScript(缩写:JS)是一门高级的、解释型的动态编程语言。用于 HTML或web应用,可被浏览器直接执行。
完整的JavaScript包括以下几个部分:
- ECMAScript,描述了该语言的语法和基本对象
- 文档对象模型(DOM),描述处理网页内容的方法和接口
- 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口
JavaScript的基本特点如下:
- JavaScript是一种轻量级解释性脚本语言(代码不进行预编译)。
- JavaScript主要用来向HTML页面添加交互行为。
- JavaScript可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。
JavaScript常用来完成以下任务:
- 嵌入动态文本于HTML页面
- 对浏览器事件作出响应
- 读写HTML元素
- 在数据被提交到服务器之前验证数据
- 检测访客的浏览器信息
- 控制cookies,包括创建和修改等
二、JavaScript用法
1、嵌入HTML
HTML 中的脚本必须位于 <script>
与 </script>
标签之间。
脚本可被放置在 HTML 页面的 <body>
和 <head>
部分中。
<!DOCTYPE html>
<html>
<head>
<script>
document.write("hello world");
</script>
</head>
<body>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
</body>
</html>
通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。如果 <script>
放在 body 中,建议放在底部。因为浏览器会按照代码在文件中的顺序解析 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML,那么它可能由于 HTML 尚未被加载而失效。所以,要将 JavaScript 代码放在 body 中,应置于 HTML 页面底部。
2、外部的JavaScript脚本
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件,请在 <script>
标签的 “src” 属性中设置该 .js 文件:
<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script src="myScript.js"></script>
</body>
</html>
你可以将脚本放置于 <head>
或者 <body>
中,放在 <script>
标签中的脚本与外部引用的脚本运行效果完全一致。
myScript.js 文件代码如下:
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
3、Console窗口调试JavaScript代码
打开开发者工具后,我们可以在 Console 窗口调试 JavaScript代码,如下图:
4、Chrome snippets小脚本
我们也可以在 Chrome 浏览器中创建一个脚本来执行,在开发者工具中点击 Sources 面板,选择 Snippets 选项卡,在导航器中右击鼠标,然后选择 Create new snippet 来新建一个脚本文件:
如果你没看到 Snippets ,可以点下面板上到 >> 就能看到了。
点击New snippet 后,会自动创建一个文件,你只需在右侧窗口输入以下代码,然后按 Command+S(Mac)或 Ctrl+S(Windows 和 Linux)保存更改即可。
保存后,右击文件名,选择 “Run” 执行代码:
5、事件触发
把 JavaScript 代码放入函数中,在事件发生时调用该函数。如点击事件:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>
三、JavaScript变量
与代数一样,JavaScript 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)。
变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
- 变量名称对大小写敏感(y 和 Y 是不同的变量)
注:JavaScript 语句和 JavaScript 变量都对大小写敏感。
1、声明变量
在 JavaScript 中创建变量通常称为"声明"变量。
我们使用 var 关键词来声明变量,使用等号来为变量赋值:
var a; //声明
var a = 3; //初始化
a = 5; //赋值
//注意: 在JavaScript中,所有代码指令都会以分号结尾 (;)
也可以使用let和const来定义,这三者的区别是:var与let涉及块级作用域,let 声明的变量只在 let 命令所在的代码块{}内有效;const 声明一个只读的常量,一旦声明,常量的值就不能改变,具体参考JavaScript let 和 const。一般用var即可,let更推荐。
2、数据类型
变量 | 解释 | 示例 |
---|---|---|
String | 字符串(一串文本)。字符串的值必须将用引号(单双均可,必须成对)扩起来 | var name = “John”; 字符访问:name[0] name[1] |
Number | 数字。JavaScript 只有一种数字类型。数字可以带小数点,也可以不带 | let x1=34.00; let x2=34; |
Boolean | 布尔值(真 / 假)。 true/false 是 JS 里的特殊关键字,无需引号 | let x=true; let y=false; |
Array | 数组,用于在单一引用中存储多个值的结构 | let cars=[“Saab”,“Volvo”,“BMW”]; 元素引用方法:cars[0],cars[1] |
Object | 对象,JavaScript 里一切皆对象,一切皆可储存在变量里。对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔 | let person={firstname:“John”, lastname:“Doe”, id:5566}; let newObject = document.querySelector(‘h1’); 对象属性访问:object.AttributesName object[’‘AttributesName’’] |
3、算术运算符
运算符 | 描述 | 例子 | x 运算结果 | y 运算结果 |
---|---|---|---|---|
+ | 加法 | x=y+2 | 7 | 5 |
- | 减法 | x=y-2 | 3 | 5 |
* | 乘法 | x=y*2 | 10 | 5 |
/ | 除法 | x=y/2 | 2.5 | 5 |
% | 取模(余数) | x=y%2 | 1 | 5 |
++ | 自增 | x=++y | 6 | 6 |
x=y++ | 5 | 6 | ||
– | 自减 | x=–y | 4 | 4 |
x=y– | 5 | 4 |
4、赋值运算符
赋值运算符用于给 JavaScript 变量赋值。
运算符 | 例子 | 等同于 | 运算结果 |
---|---|---|---|
= | x=y | x=5 | |
+= | x+=y | x=x+y | x=15 |
-= | x-=y | x=x-y | x=5 |
*= | x*=y | x=x*y | x=50 |
/= | x/=y | x=x/y | x=2 |
%= | x%=y | x=x%y | x=0 |
5、比较运算符
比较运算符在逻辑语句中使用,以测定变量或值是否相等。
运算符 | 描述 | 比较 | 返回值 |
---|---|---|---|
== | 等于 | x==8 | false |
x==5 | true | ||
=== | 绝对等于(值和类型均相等) | x===“5” | false |
x===5 | true | ||
!= | 不等于 | x!=8 | true |
!== | 不绝对等于(值和类型有一个不相等,或两个都不相等) | x!==“5” | true |
x!==5 | false | ||
> | 大于 | x>8 | false |
< | 小于 | x<8 | true |
>= | 大于或等于 | x>=8 | false |
<= | 小于或等于 | x<=8 | true |
6、逻辑运算符
逻辑运算符用于测定变量或值之间的逻辑。
运算符 | 描述 | 例子 |
---|---|---|
&& | and | (x < 10 && y > 1) 为 true |
|| | or (x==5 | |
! | not | !(x==y) 为 true |
四、基本语法
1、条件语句
通常在写代码时,您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在 JavaScript 中,我们可使用以下条件语句:
if 语句
:只有当指定条件为 true 时,使用该语句来执行代码if...else 语句
:当条件为 true 时执行代码,当条件为 false 时执行其他代码if...else if....else 语句
:使用该语句来选择多个代码块之一来执行switch 语句
:使用该语句来选择多个代码块之一来执行
1.1 if 语句
if (condition)
{
当条件为 true 时执行的代码
}
只有当指定条件为 true 时,该语句才会执行代码。
1.2 if…else 语句
if (condition)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
使用 if…else 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码。
1.3 if…else if…else 语句
if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
使用 if…else if…else 语句来选择多个代码块之一来执行。
1.4 switch 语句
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
1.5 三目运算
let str = (condition)?value1:value2
//condition成立则str=value1否则value2
2、循环语句
JavaScript 支持不同类型的循环:
for
:循环代码块一定的次数for/in
:循环遍历对象的属性while
:当指定的条件为 true 时循环指定的代码块do/while
:同样当指定的条件为 true 时循环指定的代码块
2.1 for 循环
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 :(代码块)开始前执行
语句 2 :定义运行循环(代码块)的条件
语句 3 :在循环(代码块)已被执行之后执行
2.2 for/in 循环
JavaScript for/in 语句循环遍历对象的属性:
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}
2.3 while 循环
while 循环会在指定条件为真时循环执行代码块。
while (条件)
{
需要执行的代码
}
2.4 do/while 循环
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环。
do
{
需要执行的代码
}
while (条件);
3、函数语法
函数就是包裹在花括号中的代码块,前面使用了关键词 function:
function functionname()
{
// 执行代码
}
当调用该函数时,会执行函数内的代码。
可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。
注:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。
3.1 调用带参数的函数
在调用函数时,您可以向其传递值,这些值被称为参数。这些参数可以在函数中使用。
您可以发送任意多的参数,由逗号 (,) 分隔:
function myFunction(var1,var2)
{
代码
}
3.2 带有返回值的函数
在使用 return 语句时,函数会停止执行,并返回指定的值。
function myFunction()
{
var x=5;
return x;
}
3.3 匿名函数
函数存储在变量中,不需要函数名称,通常通过变量名来调用。
var x = function (a, b) {return a * b};
var z = x(4, 3);
4、异常处理
当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误。
可能是语法错误,通常是程序员造成的编码错误或错别字。
可能是拼写错误或语言中缺少的功能(可能由于浏览器差异)。
可能是由于来自服务器或用户的错误输出而导致的错误。
当然,也可能是由于许多其他不可预知的因素。
常见的异常处理语句:
- try 语句测试代码块的错误。
- catch 语句处理错误。
- throw 语句创建自定义错误。
- finally 语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行。
4.1 try 和 catch
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
try {
... //异常的抛出
} catch(e) {
... //异常的捕获与处理
} finally {
... //结束处理
}
4.2 throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是:创建或抛出异常(exception)。
如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "值为空";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x < 5) throw "太小";
if(x > 10) throw "太大";
}
catch(err) {
message.innerHTML = "错误: " + err;
}
}
// 异常可以是 JavaScript 字符串、数字、逻辑值或对象