ホームページ >ウェブフロントエンド >CSSチュートリアル >簡単な JavaScript でできる素晴らしいこと
JavaScript は、単純なサーバー側システムから複雑なオンライン アプリまで、あらゆるものを作成するために使用できる、非常に柔軟な言語です。経験の浅い開発者も熟練した開発者も、その多用途性と使いやすさの点で気に入っています。この投稿では、基本的な JavaScript を使用して実行できる 10 の驚くべきことについて、詳細を学ぶためのコード スニペットとリソースとともに説明します。
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: キーボード イベント
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: アニメーション
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 ドキュメント: ブラウザ拡張機能
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 サイトの他の関連記事を参照してください。