前端
一、JavaScript
JavaScript 是属于 HTML 和 Web 的编程语言。
对网页行为进行编程
(1)JS简介
JavaScript 能够改变 HTML 内容
getElementById()
是多个 JavaScript HTML 方法之一。
本例使用该方法来“查找” id=“demo” 的 HTML 元素,并把元素内容(innerHTML
)更改为 “Hello JavaScript”:
示例
document.getElementById("demo").innerHTML = "Hello JavaScript";
注:JavaScript 同时接受双引号和单引号:
document.getElementById("demo").innerHTML = 'Hello JavaScript';
JavaScript 能够改变 HTML 属性
本例通过改变 <img>
标签的 src
属性(source)来改变一张 HTML 图像:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能做什么?</h2>
<p>JavaScript 能够改变 HTML 属性值。</p>
<p>在本例中,JavaScript 改变了图像的 src 属性值。</p>
<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>
<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>
</body>
</html>
JavaScript 能够改变 HTML 样式
改变 HTML 元素的样式,是改变 HTML 属性的一种变种:
document.getElementById("demo").style.fontSize = "25px";
JavaScript 能够隐藏 /显示HTML 元素
可通过改变 display
样式来隐藏/显示 HTML 元素
document.getElementById("demo").style.display="none"; //隐藏
document.getElementById("demo").style.display="block"; //显示
(2)JS的使用
<script>
标签
在 HTML 中,JavaScript 代码必须位于<script>
与 </script>
标签之间。
注:type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。
<head>
中的 JavaScript
在本例中,JavaScript 函数被放置于 HTML 页面的 部分。
该函数会在按钮被点击时调用:
示例
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>
<body>
<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>
</body>
</html>
<body>
中的 JavaScript
在本例中,JavaScript 函数被放置于 HTML 页面的 部分。
该函数会在按钮被点击时调用:
<!DOCTYPE html>
<html>
<body>
<h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</body>
</html>
注:把脚本置于<body>
元素的底部,可改善显示速度,因为脚本编译会拖慢显示。
外部 JavaScript 的优势
在外部文件中放置脚本有如下优势:
• 分离了 HTML 和代码
• 使 HTML 和 JavaScript 更易于阅读和维护
• 已缓存的 JavaScript 文件可加速页面加载
如需向一张页面添加多个脚本文件 - 请使用多个 script 标签:
示例
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
JavaScript 显示方案
JavaScript 能够以不同方式“显示”数据:
使用 window.alert()
写入警告框
• 使用 document.write()
写入 HTML 输出
• 使用 innerHTML
写入 HTML 元素
• 使用 console.log()
写入浏览器控制台
使用 innerHTML
如需访问 HTML 元素,JavaScript 可使用 document.getElementById(id)
方法。
id
属性定义 HTML 元素。innerHTML 属性定义 HTML 内容:
示例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
注:更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。
使用 document.write()
出于测试目的,使用 document.write() 比较方便:
示例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
注:在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML :
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<button onclick="document.write(5 + 6)">试一试</button>
</body>
</html>
使用 window.alert()
您能够使用警告框来显示数据:
示例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
使用 console.log()
在浏览器中,您可使用 console.log()
方法来显示数据。
请通过 F12 来激活浏览器控制台,并在菜单中选择“控制台”。
示例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
二、JS基本语法
(1)变量
JavaScript 变量
JavaScript 变量是存储数据值的容器。
示例
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>在本例中,x、y 以及 z 都是变量。</p>
<p id="demo"></p>
<script>
var x = 7;
var y = 8;
var z = x + y;
document.getElementById("demo").innerHTML =
"z 的值是:" + z;
</script>
</body>
类似代数
在编程中,类似代数,使用变量(比如 price1)来存放值。
在编程中,类似代数,在表达式中使用变量(total = price1 + price2)。
注:JavaScript 变量是存储数据值的容器。
JavaScript 标识符
所有 JavaScript 变量必须以唯一的名称的标识。
这些唯一的名称称为标识符。
标识符可以是短名称(比如 x 和 y),或者更具描述性的名称(age、sum、totalVolume)。
构造变量名称(唯一标识符)的通用规则是:
•名称可包含字母、数字、下划线和美元符号
•名称必须以字母开头
•名称也可以 $
和 _
开头(但是在本教程中我们不会这么做)
•名称对大小写敏感(y 和 Y 是不同的变量)
•保留字(比如 JavaScript 的关键词)无法用作变量名称
注:JavaScript 标识符对大小写敏感。
赋值运算符
在 JavaScript 中,等号(=
)是赋值运算符,而不是“等于”运算符。
在 JavaScript 中,把 x + 5 的值赋给 x。
(计算 x + 5 的值并把结果放入 x 中。x 的值递增 5。)
注:JavaScript 中的“等于”运算符是 ==
。
(2)数据类型
字符串值,数值,布尔值,数组,对象
JavaScript 变量能够保存多种数据类型:数值、字符串值、数组、对象等等:
var length = 7; // 数字
var lastName = "Gates"; // 字符串
var cars = ["Porsche", "Volvo", "BMW"]; // 数组
var x = {firstName:"Bill", lastName:"Gates"}; // 对象
JavaScript 拥有动态类型。这意味着相同变量可用作不同类型:
var x; // 现在 x 是 undefined
var x = 7; // 现在 x 是数值
var x = "Bill"; // 现在 x 是字符串值
字符串
JavaScript 字符串用于存储和操作文本。
JavaScript 字符串是引号中的零个或多个字符,能够使用单引号或双引号,不匹配围绕字符串的引号
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串</h2>
<p>可以在字符串中使用引号,只要不匹配围绕字符串的引号即可:</p>
<p id="demo"></p>
<script>
var answer1 = "It's good to see you again!";
var answer2 = "He is called 'Bill'";
var answer3 = 'He is called "Bill"';
document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3;
</script>
</body>
</html>
字符串长度
内建属性 length
可返回字符串的长度:
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
特殊字符
反斜杠转义字符把特殊字符转换为字符串字符:
转义字符(\
)也可用于在字符串中插入其他特殊字符。
其他六个 JavaScript 中有效的转义序列:
数值
JavaScript 只有一种数值类型。
写数值时用不用小数点均可:
var x1 = 34.00; // 带小数点
var x2 = 34; // 不带小数点
超大或超小的数值可以用科学计数法来写:
var y = 123e5; // 12300000
var z = 123e-5; // 0.00123
布尔值
布尔值只有两个值:true
或 false
。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>布尔值只有两个值:true 或 false。</p>
<p id="demo"></p>
<script>
var x = 7;
var y = 7;
var z = 8;
document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>
</body>
</html>
数组
JavaScript 数组用于在单一变量中存储多个值。
数组是一种特殊的变量,它能够一次存放一个以上的值。
数组可以用一个单一的名称存放很多值,并且还可以通过引用索引号来访问这些值。
创建数组
var array-name = [item1, item2, …];
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p id="demo"></p>
<script>
var cars = ["Audi", "BMW", "porsche"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
对象
对象属性
JavaScript 对象中的名称:值对被称为属性。
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
对象方法
对象也可以有方法。
方法是在对象上执行的动作。
方法以函数定义被存储在属性中。
方法是作为属性来存储的函数。
this 关键词
JavaScript this
关键词指的是它所属的对象。
它拥有不同的值,具体取决于它的使用位置:
在方法中,this
指的是所有者对象。
单独的情况下,this
指的是全局对象。
在函数中,this
指的是全局对象。
在函数中,严格模式下,this
是 undefined。
在事件中,this
指的是接收事件的元素。
像 call()
和 apply()
这样的方法可以将 this
引用到任何对象。
对象定义
定义(创建)一个 JavaScript 对象:
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
访问对象方法
您能够通过如下语法访问对象方法
objectName.methodName()
函数
JavaScript 函数语法
JavaScript 函数通过 function
关键词进行定义,其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。
圆括号可包括由逗号分隔的参数:
(参数 1, 参数 2, …)
由函数执行的代码被放置在花括号中:{}
function name(参数 1, 参数 2, 参数 3) {
要执行的代码
}
函数参数(Function parameters)是在函数定义中所列的名称。
函数参数(Function arguments)是当调用函数时由函数接收的真实的值。
在函数中,参数是局部变量。
在其他编程语言中,函数近似程序(Procedure)或子程序(Subroutine)。
函数调用
函数中的代码将在其他代码调用该函数时执行:
•当事件发生时(当用户点击按钮时)
•当 JavaScript 代码调用时
•自动的(自调用)
函数返回
当 JavaScript 到达 return
语句,函数将停止执行。
如果函数被某条语句调用,JavaScript 将在调用语句之后“返回”执行代码。
函数通常会计算出返回值。这个返回值会返回给调用者:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p>本例调用了一个执行计算的函数,然后返回结果:</p>
<p id="demo"></p>
<script>
var x = myFunction(7, 8);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
局部变量
在 JavaScript 函数中声明的变量,会成为函数的局部变量。
局部变量只能在函数内访问
// 此处的代码不能使用 carName
function myFunction() {
var carName = "Volvo";
// code here CAN use carName
}
// 此处的代码可以使用 carName
由于局部变量只能被其函数识别,因此可以在不同函数中使用相同名称的变量。
局部变量在函数开始时创建,在函数完成时被删除。