Perkara Hebat yang Boleh Anda Lakukan Dengan JavaScript Mudah-tutorial css-php.cn

Amazing Things You Can Do With Simple JavaScript

JavaScript ialah bahasa yang agak fleksibel yang boleh digunakan untuk mencipta segala-galanya daripada sistem sebelah pelayan yang mudah kepada apl dalam talian yang rumit. Kedua-dua pembangun yang tidak berpengalaman dan berpengalaman menyukainya kerana fleksibiliti dan kesederhanaan penggunaannya. Siaran ini akan membincangkan lebih daripada 10 perkara luar biasa yang boleh anda lakukan dengan JavaScript asas, bersama dengan coretan kod dan sumber untuk membantu anda mengetahui lebih lanjut.

Buat Halaman Web Interaktif

JavaScript adalah penting untuk menambahkan interaktiviti pada halaman web. Anda boleh membuat kandungan dinamik, mengendalikan acara pengguna dan mengemas kini DOM tanpa memuatkan semula halaman.

Contoh: Togol Mod Gelap

<!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>

Salin selepas log masuk

Rujukan:

Dokumen Web MDN: Model Objek Dokumen (DOM)

JavaScript.info: Pengenalan kepada Acara

Bina Permainan Mudah

JavaScript boleh digunakan untuk mencipta permainan yang menarik secara terus dalam penyemak imbas. Dengan elemen kanvas HTML5, anda boleh melukis grafik dan objek animasi.

Contoh: Permainan Asas Ular

<!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>

Salin selepas log masuk

Rujukan:

Dokumen Web MDN: API Kanvas

JavaScript.info: Acara Papan Kekunci

Ambil dan Paparkan Data daripada API

JavaScript memudahkan untuk mengambil data daripada API dan memaparkannya secara dinamik pada halaman web anda. Ini amat berguna untuk mencipta papan pemuka interaktif dan aplikasi masa nyata.

Contoh: Paparkan Data Cuaca

<!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>

Salin selepas log masuk

Rujukan:

Dokumen Web MDN: Ambil API

OpenWeather API

Pengesahan Borang

Pengesahan borang pihak pelanggan boleh dikendalikan dengan mudah dengan JavaScript, memberikan maklum balas segera kepada pengguna dan mengurangkan keperluan untuk pengesahan bahagian pelayan.

Contoh: Pengesahan Borang Mudah

<!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>

Salin selepas log masuk

Rujukan:

Dokumen Web MDN: Pengesahan Borang Pihak Pelanggan

JavaScript.info: Borang, Kawalan

Buat Animasi

JavaScript, bersama-sama dengan CSS, membolehkan anda mencipta animasi yang lancar pada halaman web anda. Ini boleh digunakan untuk meningkatkan pengalaman pengguna dan menjadikan tapak anda lebih menarik.

Contoh: Kesan Pudar

<!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>

Salin selepas log masuk

Rujukan:

Dokumen Web MDN: Peralihan CSS

JavaScript.info: Animasi

Bina Aplikasi Satu Halaman (SPA)

Rangka kerja JavaScript seperti React, Angular dan Vue membolehkan anda membina aplikasi satu halaman yang memberikan pengalaman pengguna yang lancar.

Contoh: SPA Mudah dengan JavaScript Vanila

<!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>

Salin selepas log masuk

Rujukan:

Dokumen Web MDN: Aplikasi Satu Halaman

JavaScript.info: Lokasi dan Sejarah

Tingkatkan Kebolehcapaian

JavaScript boleh digunakan untuk meningkatkan kebolehaksesan aplikasi web anda, memastikan ia boleh digunakan oleh semua orang, termasuk orang kurang upaya.

Contoh: Langkau ke Pautan Kandungan

<!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>

Salin selepas log masuk

Rujukan:

Dokumen Web MDN: Kebolehcapaian

Inisiatif Kebolehcapaian Web W3C (WAI)

Buat Sambungan Penyemak Imbas

JavaScript boleh digunakan untuk membangunkan sambungan penyemak imbas yang meningkatkan kefungsian penyemak imbas anda, mengautomasikan tugas dan menyepadukan dengan perkhidmatan lain.

Contoh: Sambungan Chrome Mudah

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>

Salin selepas log masuk

Rujukan:

Pembangun Chrome: Bermula dengan Sambungan Chrome

Dokumen Web MDN: Sambungan Penyemak Imbas

Automasikan Tugasan dengan Node.js

JavaScript juga boleh digunakan pada bahagian pelayan dengan Node.js untuk mengautomasikan tugasan berulang, seperti manipulasi fail, pengikisan web dan pemprosesan data.

Contoh: Baca dan Tulis Fail

Buat fail bernama 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);
    });
});

Salin selepas log masuk

Jalankan skrip dengan Node.js:

apl nod.js

Rujukan:

Tapak Web Rasmi Node.js

Dokumen Web MDN: Sistem Fail

Melaksanakan Pembelajaran Mesin

Dengan perpustakaan seperti TensorFlow.js, anda boleh melaksanakan model pembelajaran mesin terus dalam penyemak imbas menggunakan JavaScript.

Contoh: Klasifikasi Imej Mudah

<!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>

Salin selepas log masuk

Rujukan:

TensorFlow.js

Dokumen Web MDN: API Fail

Kesimpulan

Terdapat banyak kegunaan untuk JavaScript, menjadikannya bahasa yang serba boleh dan mujarab. Kemungkinannya tidak terhad, bermula daripada membangunkan aplikasi satu halaman dan proses mengautomasikan dengan Node.js kepada membuat permainan mudah dan halaman web interaktif. Anda boleh mula meneroka perkara luar biasa ini yang boleh anda capai dengan JavaScript asas dengan menggunakan contoh dan sumber yang disediakan. Berseronoklah dengan pengekodan!

Rujukan Tambahan:

JavaScript.info

JavaScript yang fasih

Dokumen Web MDN: JavaScript

Atas ialah kandungan terperinci Perkara Hebat yang Boleh Anda Lakukan Dengan JavaScript Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!