使用簡單的 JavaScript 可以完成令人驚嘆的事情-css教學-PHP中文網

Amazing Things You Can Do With Simple JavaScript

JavaScript 是一種相當靈活的語言，可用於建立從簡單的伺服器端系統到複雜的線上應用程式的所有內容。無論是缺乏經驗的開發人員還是經驗豐富的開發人員都喜歡它的多功能性和易用性。這篇文章將介紹您可以使用基本 JavaScript 完成的 10 多項令人難以置信的事情，以及程式碼片段和資源以幫助您了解更多資訊。

建立互動網頁

JavaScript 對於在網頁上新增互動性至關重要。您可以建立動態內容、處理使用者事件以及更新 DOM，而無需重新載入頁面。

範例：切換深色模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Toggle</title>
    <style>
        body {
            transition: background-color 0.3s, color 0.3s;
        }
        .dark-mode {
            background-color: #121212;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <button id="toggle-dark-mode">Toggle Dark Mode</button>
    <script>
        const button = document.getElementById('toggle-dark-mode');
        button.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
        });
    </script>
</body>
</html>

登入後複製

參考資料：

MDN Web 文件：文件物件模型 (DOM)

JavaScript.info：事件簡介

建構簡單的遊戲

JavaScript 可用於直接在瀏覽器中建立引人入勝的遊戲。使用 HTML5 canvas 元素，您可以繪製圖形和動畫物件。

例：基本貪吃蛇遊戲

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game</title>
    <style>
        canvas {
            display: block;
            margin: auto;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const grid = 20;
        let snake = [{ x: 160, y: 160 }];
        let direction = 'right';
        let food = { x: 200, y: 200 };

        function update() {
            const head = { ...snake[0] };
            switch (direction) {
                case 'up': head.y -= grid; break;
                case 'down': head.y += grid; break;
                case 'left': head.x -= grid; break;
                case 'right': head.x += grid; break;
            }
            snake.unshift(head);
            if (head.x === food.x && head.y === food.y) {
                food.x = Math.floor(Math.random() * canvas.width / grid) * grid;
                food.y = Math.floor(Math.random() * canvas.height / grid) * grid;
            } else {
                snake.pop();
            }
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'green';
            snake.forEach(segment => ctx.fillRect(segment.x, segment.y, grid, grid));
            ctx.fillStyle = 'red';
            ctx.fillRect(food.x, food.y, grid, grid);
        }

        function loop() {
            update();
            draw();
            setTimeout(loop, 100);
        }

        document.addEventListener('keydown', (e) => {
            switch (e.key) {
                case 'ArrowUp': direction = 'up'; break;
                case 'ArrowDown': direction = 'down'; break;
                case 'ArrowLeft': direction = 'left'; break;
                case 'ArrowRight': direction = 'right'; break;
            }
        });

        loop();
    </script>
</body>
</html>

登入後複製

參考資料：

MDN 網路文件：Canvas API

JavaScript.info：鍵盤事件

從 API 取得並顯示資料

JavaScript 可以輕鬆地從 API 取得資料並將其動態顯示在網頁上。這對於建立互動式儀表板和即時應用程式特別有用。

範例：顯示天氣資料

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
</head>
<body>
    <h1>Weather App</h1>
    <input type="text" id="city" placeholder="Enter city">
    <button id="getWeather">Get Weather</button>
    <div id="weather"></div>
    <script>
        document.getElementById('getWeather').addEventListener('click', () => {
            const city = document.getElementById('city').value;
            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`)
                .then(response => response.json())
                .then(data => {
                    const weatherDiv = document.getElementById('weather');
                    weatherDiv.innerHTML = `
                        <h2>${data.name}</h2>
                        <p>${data.weather[0].description}</p>
                        <p>Temperature: ${(data.main.temp - 273.15).toFixed(2)} °C</p>
                    `;
                })
                .catch(error => console.error('Error fetching data:', error));
        });
    </script>
</body>
</html>

登入後複製

參考資料：

MDN Web 文件：取得 API

OpenWeather API

表單驗證

可以使用 JavaScript 輕鬆處理用戶端表單驗證，為使用者提供即時回饋並減少對伺服器端驗證的需求。

範例：簡單的表單驗證

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation</title>
</head>
<body>
    <form id="myForm">
        <label for="username">Username:</label>
        <input type="text" id="username" required>
        <span id="usernameError" style="color: red;"></span>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" required>
        <span id="emailError" style="color: red;"></span>
        <br>
        <button type="submit">Submit</button>
    </form>
    <script>
        document.getElementById('myForm').addEventListener('submit', function (e) {
            e.preventDefault();
            let valid = true;
            const username = document.getElementById('username').value;
            const email = document.getElementById('email').value;

            if (username.length < 5) {
                valid = false;
                document.getElementById('usernameError').textContent = 'Username must be at least 5 characters';
            } else {
                document.getElementById('usernameError').textContent = '';
            }

            const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
            if (!emailPattern.test(email)) {
                valid = false;
                document.getElementById('emailError').textContent = 'Invalid email address';
            } else {
                document.getElementById('emailError').textContent = '';
            }

            if (valid) {
                alert('Form submitted successfully!');
            }
        });
    </script>
</body>
</html>

登入後複製

參考資料：

MDN Web 文件：客戶端表單驗證

JavaScript.info：表單、控制項

建立動畫

JavaScript 與 CSS 一起讓您在網頁上建立流暢的動畫。這可用於增強用戶體驗並使您的網站更具吸引力。

範例：淡入效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fade In Effect</title>
    <style>
        #fadeInElement {
            opacity: 0;
            transition: opacity 2s;
        }
        .visible {
            opacity: 1;
        }
    </style>
</head>
<body>
    <h1>Fade In Effect</h1>
    <div id="fadeInElement">Hello, World!</div>
    <button id="fadeInButton">Fade In</button>
    <script>
        document.getElementById('fadeInButton').addEventListener('

click', () => {
            document.getElementById('fadeInElement').classList.add('visible');
        });
    </script>
</body>
</html>

登入後複製

參考資料：

MDN 網路文件：CSS 轉換

JavaScript.info：動畫

建立單頁應用程式 (SPA)

React、Angular 和 Vue 等 JavaScript 框架可讓您建立提供無縫使用者體驗的單頁應用程式。

範例：使用 Vanilla JavaScript 的簡單 SPA

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple SPA</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </nav>
    <div id="content"></div>
    <script>
        const routes = {
            home: '<h1>Home Page</h1><p>Welcome to the home page.</p>',
            about: '<h1>About Page</h1><p>This is the about page.</p>',
            contact: '<h1>Contact Page</h1><p>Get in touch through the contact page.</p>'
        };

        function navigate() {
            const hash = window.location.hash.substring(1);
            document.getElementById('content').innerHTML = routes[hash] || routes.home;
        }

        window.addEventListener('hashchange', navigate);
        navigate();
    </script>
</body>
</html>

登入後複製

參考資料：

MDN Web 文件：單頁應用程式

JavaScript.info：位置與歷史

增強可訪問性

JavaScript 可用於提高 Web 應用程式的可存取性，確保每個人都可以使用它們，包括殘疾人。

範例：跳至內容連結

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skip to Content</title>
    <style>
        #mainContent {
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <a href="#mainContent" id="skipToContent">Skip to Content</a>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <main id="mainContent">
        <h1>Main Content</h1>
        <p>This is the main content of the page.</p>
    </main>
    <script>
        document.getElementById('skipToContent').addEventListener('click', function (e) {
            e.preventDefault();
            document.getElementById('mainContent').focus();
        });
    </script>
</body>
</html>

登入後複製

參考資料：

MDN 網路文件：輔助功能

W3C 網路無障礙倡議 (WAI)

建立瀏覽器擴充

JavaScript 可用於開發瀏覽器擴展，以增強瀏覽器的功能、自動執行任務以及與其他服務整合。

範例：簡單的 Chrome 擴充功能

Create a manifest.json file:

{
    "manifest_version": 2,
    "name": "Hello World Extension",
    "version": "1.0",
    "description": "A simple hello world Chrome extension",
    "browser_action": {
        "default_popup": "popup.html"
    }
}

Create a popup.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <button id="clickMe">Click Me</button>
    <script>
        document.getElementById('clickMe').addEventListener('click', () => {
            alert('Hello from your Chrome Extension!');
        });
    </script>
</body>
</html>

登入後複製

參考資料：

Chrome 開發者：Chrome 擴充入門

MDN Web 文件：瀏覽器擴充功能

使用 Node.js 自動化任務

JavaScript 也可以在伺服器端與 Node.js 一起使用，以自動執行重複性任務，例如檔案操作、網頁抓取和資料處理。

範例：讀寫檔案

建立一個名為app.js的檔案：

const fs = require('fs');

const content = 'Hello, World!';
fs.writeFile('hello.txt', content, (err) => {
    if (err) throw err;
    console.log('File written successfully');

    fs.readFile('hello.txt', 'utf8', (err, data) => {
        if (err) throw err;
        console.log('File content:', data);
    });
});

登入後複製

使用 Node.js 執行腳本：

節點app.js

參考資料：

Node.js 官方網站

MDN 網路文件：檔案系統

實作機器學習

借助 TensorFlow.js 等函式庫，您可以使用 JavaScript 直接在瀏覽器中實作機器學習模型。

範例：簡單影像分類

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Classification</title>
</head>
<body>
    <h1>Image Classification</h1>
    <input type="file" id="imageUpload" accept="image/*">
    <div id="result"></div>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
    <script>
        const imageUpload = document.getElementById('imageUpload');
        const result = document.getElementById('result');

        imageUpload.addEventListener('change', async () => {
            const file = imageUpload.files[0];
            const img = new Image();
            img.src = URL.createObjectURL(file);

            img.onload = async () => {
                const model = await mobilenet.load();
                const predictions = await model.classify(img);
                result.innerHTML = predictions.map(p => `${p.className}: ${p.probability.toFixed(2)}`).join('<br>');
            };
        });
    </script>
</body>
</html>

登入後複製

參考資料：

TensorFlow.js

MDN 網路文件：文件 API

結論

JavaScript 有很多用途，使其成為多功能且強大的語言。可能性是無限的，從開發單頁應用程式和使用 Node.js 自動化流程到製作簡單的遊戲和互動式網頁。您可以透過使用提供的範例和資源，開始探索使用基本 JavaScript 可以完成的這些令人難以置信的事情。享受編碼的樂趣！

其他參考資料：

JavaScript.info

雄辯的 JavaScript

MDN 網路文件：JavaScript

以上是使用簡單的 JavaScript 可以完成令人驚嘆的事情的詳細內容。更多資訊請關注PHP中文網其他相關文章！