Heim > Artikel > Web-Frontend > Erstaunliche Dinge, die Sie mit einfachem JavaScript tun können

Erstaunliche Dinge, die Sie mit einfachem JavaScript tun können

王林Original: 2024-08-06 22:59:42296Durchsuche

Amazing Things You Can Do With Simple JavaScript

JavaScript ist eine ziemlich flexible Sprache, mit der sich alles erstellen lässt, von einfachen serverseitigen Systemen bis hin zu komplexen Online-Apps. Sowohl unerfahrene als auch erfahrene Entwickler lieben es wegen seiner Vielseitigkeit und Benutzerfreundlichkeit. In diesem Beitrag geht es um 10 unglaubliche Dinge, die Sie mit einfachem JavaScript machen können, zusammen mit Codeausschnitten und Ressourcen, die Ihnen helfen, mehr zu erfahren.

Interaktive Webseiten erstellen

JavaScript ist für das Hinzufügen von Interaktivität zu Webseiten unerlässlich. Sie können dynamische Inhalte erstellen, Benutzerereignisse verarbeiten und das DOM aktualisieren, ohne die Seite neu laden zu müssen.

Beispiel: Dunkelmodus umschalten

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

Referenzen:

MDN Web Docs: Document Object Model (DOM)

JavaScript.info: Einführung in Ereignisse

Einfache Spiele erstellen

JavaScript kann verwendet werden, um ansprechende Spiele direkt im Browser zu erstellen. Mit dem HTML5-Canvas-Element können Sie Grafiken zeichnen und Objekte animieren.

Beispiel: Einfaches Schlangenspiel

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

Referenzen:

MDN-Webdokumente: Canvas-API

JavaScript.info: Tastaturereignisse

Daten von APIs abrufen und anzeigen

JavaScript macht es einfach, Daten von APIs abzurufen und sie dynamisch auf Ihren Webseiten anzuzeigen. Dies ist besonders nützlich für die Erstellung interaktiver Dashboards und Echtzeitanwendungen.

Beispiel: Wetterdaten anzeigen

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

Referenzen:

MDN-Webdokumente: API abrufen

OpenWeather-API

Formularvalidierung

Die clientseitige Formularvalidierung kann problemlos mit JavaScript durchgeführt werden, wodurch den Benutzern sofortiges Feedback gegeben wird und die Notwendigkeit einer serverseitigen Validierung reduziert wird.

Beispiel: Einfache Formularvalidierung

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

Referenzen:

MDN Web Docs: Clientseitige Formularvalidierung

JavaScript.info: Formulare, Steuerelemente

Animationen erstellen

JavaScript ermöglicht Ihnen zusammen mit CSS die Erstellung reibungsloser Animationen auf Ihren Webseiten. Dies kann verwendet werden, um das Benutzererlebnis zu verbessern und Ihre Website ansprechender zu gestalten.

Beispiel: Einblendeffekt

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

Referenzen:

MDN-Webdokumente: CSS-Übergänge

JavaScript.info: Animation

Erstellen Sie Single Page Applications (SPAs)

JavaScript-Frameworks wie React, Angular und Vue ermöglichen Ihnen die Erstellung von Single-Page-Anwendungen, die ein nahtloses Benutzererlebnis bieten.

Beispiel: Einfaches SPA mit Vanilla JavaScript

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

Referenzen:

MDN-Webdokumente: Einzelseitenanwendungen

JavaScript.info: Standort und Verlauf

Verbesserung der Barrierefreiheit

JavaScript kann verwendet werden, um die Zugänglichkeit Ihrer Webanwendungen zu verbessern und sicherzustellen, dass sie für alle, auch für Menschen mit Behinderungen, nutzbar sind.

Beispiel: Zum Inhaltslink springen

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

Referenzen:

MDN-Webdokumente: Barrierefreiheit

W3C Web Accessibility Initiative (WAI)

Browsererweiterungen erstellen

JavaScript kann verwendet werden, um Browsererweiterungen zu entwickeln, die die Funktionalität Ihres Browsers verbessern, Aufgaben automatisieren und in andere Dienste integrieren.

Beispiel: Einfache Chrome-Erweiterung

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>

Referenzen:

Chrome-Entwickler: Erste Schritte mit Chrome-Erweiterungen

MDN-Webdokumente: Browsererweiterungen

Aufgaben mit Node.js automatisieren

JavaScript kann auch serverseitig mit Node.js verwendet werden, um sich wiederholende Aufgaben wie Dateimanipulation, Web Scraping und Datenverarbeitung zu automatisieren.

Beispiel: Dateien lesen und schreiben

Erstellen Sie eine Datei mit dem Namen 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);
    });
});

Führen Sie das Skript mit Node.js aus:

Knoten app.js

Referenzen:

Offizielle Website von Node.js

MDN-Webdokumente: Dateisystem

Maschinelles Lernen implementieren

Mit Bibliotheken wie TensorFlow.js können Sie Machine-Learning-Modelle mithilfe von JavaScript direkt im Browser implementieren.

Beispiel: Einfache Bildklassifizierung

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

Referenzen:

TensorFlow.js

MDN-Webdokumente: Datei-API

Fazit

Es gibt viele Verwendungsmöglichkeiten für JavaScript, was es zu einer vielseitigen und leistungsstarken Sprache macht. Die Möglichkeiten sind unbegrenzt und reichen von der Entwicklung von Single-Page-Anwendungen und der Automatisierung von Prozessen mit Node.js bis hin zur Erstellung einfacher Spiele und interaktiver Webseiten. Mithilfe der bereitgestellten Beispiele und Ressourcen können Sie beginnen, diese unglaublichen Dinge zu erkunden, die Sie mit einfachem JavaScript erreichen können. Viel Spaß beim Codieren!

Zusätzliche Referenzen:

JavaScript.info

Eloquentes JavaScript

MDN-Webdokumente: JavaScript

Das obige ist der detaillierte Inhalt vonErstaunliche Dinge, die Sie mit einfachem JavaScript tun können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html5 css chrome angular Object for using JS dom this location history display animation canvas tensorflow everything

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Die Philosophie hinter Utility-First CSSNächster Artikel：Die Philosophie hinter Utility-First CSS

In Verbindung stehende Artikel

Mehr sehen