JavaScript基础
一、JavaScript 用法
HTML 中的脚本必须位于 < script > 与 < /script > 标签之间。
脚本可被放置在 HTML 页面的 < body > 和 < head > 部分中。
浏览器会解释并执行位于 之间的 JavaScript 代码
1.< body > 中的 JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
document.write("<h1>JavaScript 能够直接写入 HTML 输出流中</h1>");
document.write("<p>只能在 HTML 输出流中使用 document.write</p>");
</script>
</body>
</html>
运行结果
2.< head > 中的 JavaScript 函数
把一个 JavaScript 函数放置到 HTML 页面的 < head > 部分
点击后会调用函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>把一个 JavaScript 函数放置到 HTML 页面的 < head > 部分</h1>
<p id="demo">点击下方按钮调用head中的函数</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
运行结果
点击后结果
3.< body > 中的 JavaScript 函数
把一个 JavaScript 函数放置到 HTML 页面的 < body > 部分
点击后会调用函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>把一个 JavaScript 函数放置到 HTML 页面的 < body > 部分</h1>
<p id="demo">点击下方按钮调用body中的函数</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>
运行结果
点击后结果
4.外部的 JavaScript
把脚本保存到外部文件中,文件扩展名是 .js
外部文件通常包含被多个网页使用的代码。
使用外部文件要在 < script > 标签的 “src” 属性中设置该 .js 文件
注:可以将脚本放置于 < head > 或者 < body >中
放在 < script > 标签中的脚本与外部引用的脚本运行效果完全一致。
my Script.js 文件代码如下:
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
JS文件代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>新建一个外部脚本文件.js</h1>
<p id="demo">将脚本放置于body或head中,点击运行函数</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释:</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="my Script.js"></script>
</body>
</html>
运行结果
点击后结果
二、JavaScript 语法
JavaScript 是一个程序语言。
JavaScript 是一个脚本语言。
1、JavaScript 字面量
字面量 | 分类、示例 |
---|---|
数字字面量 | 整数(1009)或者是小数(3.14)科学计数(e)(123e5) |
字符串字面量 | 单引号(‘John Doe’)或双引号(“John Doe”) |
表达式字面量 | 用于计算(3+4,5*6等 ) |
数组字面量 | 定义一个数组 |
对象字面量 | 定义一个对象 |
函数字面量 | 定义一个函数 |
上述实例
(a)document.getElementById(“demo”).innerHTML = 123e5; 结果为12300000
(b)document.getElementById(“demo”).innerHTML = ‘John Doe’; 结果为John Doe
(c)document.getElementById(“demo”).innerHTML = 5 * 10; 结果为50
2、JavaScript 变量
JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="demo"></p>
<script>
var d;
d =36;
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
结果
注:
变量可以通过变量名访问。
在指令式语言中,变量通常是可变的。
字面量是一个恒定的值。
变量是一个名称。字面量是一个值。
3、JavaScript 操作符
JavaScript使用 算术运算符 来计算值(加减乘除表达式)
JavaScript使用***赋值运算符***给变量赋值
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="demo"></p>
<script>
var x, y, z;
x = 35;
y = 26;
z = (x + y) * 10/2;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
结果
JS中运算符分类
类型 | 实例 |
---|---|
赋值,算术和位运算符 | = + - * / |
条件,比较及逻辑运算符 | == != < > |
4、JavaScript 语句、关键字、注释、数据类型、函数
(1)语句是用分号分隔,如 x = 5 + 6;y = x * 10;
(2)JavaScript 关键字用于标识要执行的操作.如 var 关键字告诉浏览器创建一个新的变量
(3)JavaScript 注释,双斜杠 // 后的内容将会被浏览器忽略
(4)JavaScript 有多种数据类型:数字,字符串,数组,对象等
(5)
JavaScript 语句可以写在函数内,函数可以重复引用
引用一个函数 = 调用函数(执行函数内的语句)。
三、JavaScript 语句
1.语句实例
下面的 JavaScript 语句向 id=“demo” 的 HTML 元素输出文本 “你好 Dolly” :
document.getElementById(“demo”).innerHTML = “你好 Dolly”;
2、JavaScript 语句标识符
JavaScript 语句通常以一个 语句标识符 为开始,并执行该语句。
语句标识符是保留关键字不能作为变量名使用。
语句 | 描述 |
---|---|
break | 用于跳出循环 |
catch | 语句块,在 try 语句块执行出错时执行 catch 语句块 |
continue | 跳过循环中的一个迭代 |
do … while | 执行一个语句块,在条件语句为 true 时继续执行该语句块 |
for | 在条件语句为 true 时,可以将代码块执行指定的次数 |
for … in | 用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作) |
function | 定义一个函数 |
if … else | 用于基于不同的条件来执行不同的动作 |
return | 退出函数 |
switch | 用于基于不同的条件来执行不同的动作 |
throw | 抛出(生成)错误 |
try | 实现错误处理,与 catch 一同使用 |
var | 声明一个变量 |
while | 当条件语句为 true 时,执行语句块 |
四、JavaScript 对象
1、对象定义
可以使用字符来定义和创建 JavaScript 对象,空格和换行不影响
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h>创建 JavaScript 对象。</h>
<p id="a"></p>
<p id="b"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("a").innerHTML =
person.firstName + " 现在 " + person.age + " 岁。";
document.getElementById("b").innerHTML =
person.firstName +person.lastName+" 是 " + person.eyeColor + "眼睛";
</script>
</body>
</html>
结果
2、对象方法
对象的方法定义了一个函数,并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName()+"的学号是"+person.id;
</script>
</body>
</html>
结果
上述实例中用person.fullName()
访问函数
fullName : function()
{
return this.firstName + " " + this.lastName;
}
注意一定要加()不添加 (), 它会返回函数的定义
五、JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
1、JavaScript 函数语法
函数就是包裹在花括号中的代码块,前面使用了关键词 function:
function functionname()
{
// 执行代码
}
当调用该函数时,会执行函数内的代码。
注:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。
2、调用带参数的函数
在调用函数时,可以向其传递参数。这些参数可以在函数中使用。
可以发送任意多的参数,由逗号 (,) 分隔
如:myFunction(argument1,argument2)
声明函数时,把参数作为变量来声明:
如:
function myFunction(var1,var2)
{
代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>请点击其中的一个按钮,来调用带参数的函数。</p>
<button onclick="myFunction('Bob','Builder')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
</body>
</html>
点击后结果
3、带有返回值的函数
使用 return 语句就可以实现函数将值返回调用它的地方。
在使用 return 语句时,函数会停止执行,并返回指定的值。
语法
function myFunction()
{
var x=5;
return x;
}
可以不把它保存为变量使用返回值:
document.getElementById(“demo”).innerHTML=myFunction();
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>本例调用的函数会执行一个计算,然后返回结果:</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(5,7);
</script>
</body>
</html>
结果
六、JavaScript 事件
1、HTML 事件
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素。
在以下实例中,按钮元素中添加了 onclick 属性 (并加上代码)
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
</body>
</html>
结果
点击后
2、常见的HTML事件
事件 | 描述 |
---|---|
onchange | HTML 元素改变 |
onclick | 用户点击 HTML 元素 |
onmouseover | 用户在一个HTML元素上移动鼠标 |
onmouseout | 用户从一个HTML元素上移开鼠标 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已完成页面的加载 |