JavaScript基础知识大全攻略

介绍

JavaScript作为一种强大的脚本语言，已经成为web开发过程中必不可少的一部分。JavaScript语言的优势是允许网页载入其他的脚本来改变客户端的样式、行为和响应，达到动态网页的效果。本文档主要目的是为了大家提供一份JavaScript的基础知识手册，便于大家学习，也便于作者自己查看。

语法

JavaScript有自己特殊的语法，以下是一些基础的语法：

注释

JavaScript使用两种注释来进行说明，一种是单行注释//，一种是多行注释/* ... */。

// 这是单行注释

/* 
这是多行注释
可以换行
*/

变量

在JavaScript中，我们可以使用var、let和const关键字来声明变量。其中var和let都可以声明可变变量，const关键字用来声明不可变量。

var a = "hello";
let b = "world";
const c = 123;

a = "hi"; // a现在的值是"hi"
b = "there"; // b现在的值是"there"
c = 456; // 报错，c是一个常量，不能修改它的值

数据类型

JavaScript中有许多数据类型，包括字符串（string）、数字（number）、布尔值（boolean）、数组（array）等。

let str = "Hello, world!"; // 字符串类型
let num = 123; // 数字类型
let bool = true; // 布尔值类型
let arr = ["apple", "banana", "orange"]; // 数组类型

console.log(str); // 输出 "Hello, world!"
console.log(num); // 输出 123
console.log(bool); // 输出 true
console.log(arr); // 输出 ["apple", "banana", "orange"]

运算符

JavaScript中有许多运算符，包括加号（+）、减号（-）、乘号（*）、除号（/）等。

let a = 1 + 2; // a的值为3
let b = 3 - 1; // b的值为2
let c = 2 * 3; // c的值为6
let d = 6 / 2; // d的值为3

示例

示例1：使用JavaScript实现一个简单的计算器

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript计算器</title>
</head>
<body>

    <h1>JavaScript计算器</h1>

    <input type="text" id="num1" placeholder="请输入第一个数">
    <select id="operator">
        <option value="+">加号</option>
        <option value="-">减号</option>
        <option value="*">乘号</option>
        <option value="/">除号</option>
    </select>
    <input type="text" id="num2" placeholder="请输入第二个数">
    <button onclick="calculate()">计算</button>

    <p>计算结果：<span id="result"></span></p>

    <script>
        function calculate() {
            let num1 = parseFloat(document.getElementById("num1").value);
            let num2 = parseFloat(document.getElementById("num2").value);
            let operator = document.getElementById("operator").value;
            let result;

            if (operator === "+") {
                result = num1 + num2;
            } else if (operator === "-") {
                result = num1 - num2;
            } else if (operator === "*") {
                result = num1 * num2;
            } else if (operator === "/") {
                result = num1 / num2;
            }

            document.getElementById("result").innerText = result;
        }
    </script>

</body>
</html>

上面的代码实现了一个简单的带有加减乘除功能的计算器，用户输入两个数和一个运算符，点击计算按钮即可得到相应的结果。

示例2：使用JavaScript实现动态网页效果

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript动态效果</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>

    <h1>JavaScript动态效果</h1>

    <div id="box"></div>

    <script>
        let box = document.getElementById("box");
        let left = 0;
        let top = 0;

        setInterval(function() {
            box.style.left = left + "px";
            box.style.top = top + "px";

            left += 5;
            top += 3;
        }, 50);
    </script>

</body>
</html>

上面的代码实现了一个小球移动的动态效果，通过设置定时器，并不断改变小球元素的位置，达到动画效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript基础知识大全便于大家学习，也便于我自己查看 - Python技术站