Maison > Article > interface Web > Des choses étonnantes que vous pouvez faire avec du JavaScript simple

Des choses étonnantes que vous pouvez faire avec du JavaScript simple

王林original: 2024-08-06 22:59:42368parcourir

Amazing Things You Can Do With Simple JavaScript

JavaScript est un langage assez flexible qui peut être utilisé pour tout créer, des systèmes simples côté serveur aux applications en ligne complexes. Les développeurs inexpérimentés et chevronnés l’apprécient pour sa polyvalence et sa simplicité d’utilisation. Cet article présentera 10 choses incroyables que vous pouvez faire avec JavaScript de base, ainsi que des extraits de code et des ressources pour vous aider à en savoir plus.

Créer des pages Web interactives

JavaScript est essentiel pour ajouter de l'interactivité aux pages Web. Vous pouvez créer du contenu dynamique, gérer les événements utilisateur et mettre à jour le DOM sans recharger la page.

Exemple : activer le mode sombre

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

Références :

MDN Web Docs : Modèle d'objet de document (DOM)

JavaScript.info : Introduction aux événements

Construire des jeux simples

JavaScript peut être utilisé pour créer des jeux attrayants directement dans le navigateur. Avec l'élément canevas HTML5, vous pouvez dessiner des graphiques et animer des objets.

Exemple : Jeu de base du serpent

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

Références :

Documents Web MDN : API Canvas

JavaScript.info : Événements de clavier

Récupérer et afficher des données à partir des API

JavaScript facilite la récupération des données des API et leur affichage dynamique sur vos pages Web. Ceci est particulièrement utile pour créer des tableaux de bord interactifs et des applications en temps réel.

Exemple : Afficher les données météorologiques

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

Références :

Documents Web MDN : Récupérer l'API

API OpenWeather

Validation du formulaire

La validation des formulaires côté client peut être facilement gérée avec JavaScript, fournissant un retour immédiat aux utilisateurs et réduisant le besoin de validation côté serveur.

Exemple : Validation de formulaire simple

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

Références :

MDN Web Docs : validation de formulaire côté client

JavaScript.info : Formulaires, Contrôles

Créer des animations

JavaScript, avec CSS, vous permet de créer des animations fluides sur vos pages Web. Cela peut être utilisé pour améliorer l'expérience utilisateur et rendre votre site plus attrayant.

Exemple : effet de fondu entrant

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

Références :

Documents Web MDN : transitions CSS

JavaScript.info : Animation

Créer des applications à page unique (SPA)

Les frameworks JavaScript comme React, Angular et Vue vous permettent de créer des applications d'une seule page qui offrent une expérience utilisateur transparente.

Exemple : SPA simple avec 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>

Références :

MDN Web Docs : applications à page unique

JavaScript.info : Localisation et historique

Améliorer l'accessibilité

JavaScript peut être utilisé pour améliorer l'accessibilité de vos applications Web, en garantissant qu'elles soient utilisables par tous, y compris les personnes handicapées.

Exemple : passer au lien de contenu

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

Références :

MDN Web Docs : Accessibilité

Initiative pour l'accessibilité du Web du W3C (WAI)

Créer des extensions de navigateur

JavaScript peut être utilisé pour développer des extensions de navigateur qui améliorent les fonctionnalités de votre navigateur, automatisent les tâches et s'intègrent à d'autres services.

Exemple : Extension Chrome simple

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>

Références :

Développeurs Chrome : premiers pas avec les extensions Chrome

MDN Web Docs : extensions de navigateur

Automatisez les tâches avec Node.js

JavaScript peut également être utilisé côté serveur avec Node.js pour automatiser les tâches répétitives, telles que la manipulation de fichiers, le web scraping et le traitement des données.

Exemple : lire et écrire des fichiers

Créez un fichier nommé 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);
    });
});

Exécutez le script avec Node.js :

noeud app.js

Références :

Site officiel de Node.js

MDN Web Docs : Système de fichiers

Mettre en œuvre l'apprentissage automatique

Avec des bibliothèques comme TensorFlow.js, vous pouvez implémenter des modèles d'apprentissage automatique directement dans le navigateur à l'aide de JavaScript.

Exemple : Classification simple des images

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

Références :

TensorFlow.js

Documents Web MDN : API de fichiers

Conclusion

Il existe de nombreuses utilisations de JavaScript, ce qui en fait un langage polyvalent et puissant. Les possibilités sont illimitées, allant du développement d'applications monopage et de l'automatisation des processus avec Node.js à la création de jeux simples et de pages Web interactives. Vous pouvez commencer à explorer ces choses incroyables que vous pouvez accomplir avec du JavaScript de base en utilisant les exemples et les ressources fournis. Amusez-vous avec le codage !

Références supplémentaires :

JavaScript.info

JavaScript éloquent

Documents Web MDN : JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：La philosophie derrière le CSS Utility-FirstArticle suivant：La philosophie derrière le CSS Utility-First

Articles Liés

Voir plus