JavaScript的理解及经典案例分析

JavaScript是一种轻量级的脚本语言，用于Web页面的动态交互和用户行为的操作。与其他语言相比，JavaScript具有易学易用、灵活性强、适用性广和运行速度较快等优点，因而被广泛应用于Web开发领域。

JavaScript的基本语法和特性

变量和数据类型

在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经典案例分析

简单的计算器

以下是一个简单的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>