ホームページ > 記事 > ウェブフロントエンド > 簡単な JavaScript でできる素晴らしいこと

簡単な JavaScript でできる素晴らしいこと

王林オリジナル: 2024-08-06 22:59:42373ブラウズ

Amazing Things You Can Do With Simple JavaScript

JavaScript は、単純なサーバー側システムから複雑なオンラインアプリまで、あらゆるものを作成するために使用できる、非常に柔軟な言語です。経験の浅い開発者も熟練した開発者も、その多用途性と使いやすさの点で気に入っています。この投稿では、基本的な JavaScript を使用して実行できる 10 の驚くべきことについて、詳細を学ぶためのコードスニペットとリソースとともに説明します。

インタラクティブな Web ページを作成する

JavaScript は、Web ページにインタラクティブ性を追加するために不可欠です。ページをリロードせずに、動的コンテンツの作成、ユーザーイベントの処理、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 Web ドキュメント: Canvas API

JavaScript.info: キーボードイベント

API からデータを取得して表示します

JavaScript を使用すると、API からデータを取得して Web ページに動的に表示することが簡単になります。これは、インタラクティブなダッシュボードやリアルタイムアプリケーションを作成する場合に特に便利です。

例: 気象データの表示

<!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 を使用すると、Web ページ上にスムーズなアニメーションを作成できます。これを使用すると、ユーザーエクスペリエンスを向上させ、サイトをより魅力的なものにすることができます。

例: フェードイン効果

<!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 Web ドキュメント: CSS トランジション

JavaScript.info: アニメーション

シングルページアプリケーション (SPA) を構築する

React、Angular、Vue などの JavaScript フレームワークを使用すると、シームレスなユーザーエクスペリエンスを提供するシングルページアプリケーションを構築できます。

例: バニラ 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 アプリケーションのアクセシビリティを向上させ、障害のある人を含むすべての人が 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 Web ドキュメント: アクセシビリティ

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 とともにサーバー側で使用して、ファイル操作、Web スクレイピング、データ処理などの反復的なタスクを自動化することもできます。

例: ファイルの読み取りと書き込み

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 Web ドキュメント: ファイルシステム

機械学習を実装する

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 Web ドキュメント: ファイル API

結論

JavaScript には多くの用途があり、多用途で強力な言語となっています。 Node.js を使用したシングルページアプリケーションの開発やプロセスの自動化から、単純なゲームやインタラクティブな Web ページの作成まで、可能性は無限です。提供されている例とリソースを使用して、基本的な JavaScript で達成できるこれらの驚くべきことを探索し始めることができます。コーディングを楽しんでください!

追加の参考資料:

JavaScript.info

雄弁な JavaScript

MDN Web ドキュメント: JavaScript

以上が簡単な JavaScript でできる素晴らしいことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ユーティリティファースト CSS の背後にある哲学次の記事：ユーティリティファースト CSS の背後にある哲学

続きを見る