JavaScript是一种轻量级的脚本语言，用于Web页面的动态交互和用户行为的操作。与其他语言相比，JavaScript具有易学易用、灵活性强、适用性广和运行速度较快等优点，因而被广泛应用于Web开发领域。
在JavaScript中，变量使用var关键字进行声明。JavaScript的数据类型包括数值、字符串、布尔值、对象等。
var a = 1; // 数值类型
var b = 'hello'; // 字符串类型
var c = true; // 布尔值类型
var d = { name: '张三', age: 18 }; // 对象类型
JavaScript的条件语句包括if...else语句和switch...case语句，循环语句包括for语句和while语句。
if (a > 0) {
console.log('a大于0');
} else {
console.log('a小于等于0');
}
switch (a) {
case 0:
console.log('a等于0');
break;
case 1:
console.log('a等于1');
break;
default:
console.log('a既不等于0也不等于1');
}
for (var i = 1; i <= 10; i++) {
console.log(i);
}
var j = 10;
while (j > 0) {
console.log(j);
j--;
}
JavaScript的函数使用function关键字进行定义和调用，可以有返回值也可以没有返回值。JavaScript的数组可以通过[]或Array对象进行定义和操作，支持许多有用的方法和属性。
function add(a, b) {
return a + b;
}
var arr = [1, 2, 3, 4, 5];
console.log(arr.length); // 输出5
console.log(arr[3]); // 输出4
arr.push(6); // 添加一个元素6到数组尾部
console.log(arr.length); // 输出6
console.log(arr); // 输出[1, 2, 3, 4, 5, 6]
以下是一个简单的JavaScript计算器的实现，包括加、减、乘、除四种运算。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
</head>
<body>
<input type="text" id="num1">
<input type="text" id="num2">
<input type="button" value="+" onclick="add()">
<input type="button" value="-" onclick="sub()">
<input type="button" value="*" onclick="mul()">
<input type="button" value="/" onclick="div()">
<br>
<input type="text" id="result">
<script>
function add() {
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").value = result;
}
function sub() {
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
var result = num1 - num2;
document.getElementById("result").value = result;
}
function mul() {
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
var result = num1 * num2;
document.getElementById("result").value = result;
}
function div() {
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
if (num2 == 0) {
alert("除数不能为0");
} else {
var result = num1 / num2;
document.getElementById("result").value = result;
}
}
</script>
</body>
</html>
以下是一个JavaScript实现的动态加载图片的示例。当鼠标悬停在图片上时，会动态加载一张新的图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态加载图片</title>
</head>
<body>
<img id="myImg" src="image1.jpg" onmouseover="changePic()" onmouseout="restorePic()">
<script>
function changePic() {
document.getElementById("myImg").src = "image2.jpg";
}
function restorePic() {
document.getElementById("myImg").src = "image1.jpg";
}
</script>
</body>
</html>
JavaScript是一个十分重要的Web技术，在前端开发中占据着不可替代的地位。熟练掌握JavaScript的基本语法和特性，能够独立完成一些较为复杂的Web页面开发，加强JavaScript编程技能对于职业发展也是非常有益的。
本文链接：http://task.lmcjl.com/news/11739.html