Maison >interface Web >tutoriel CSS >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:42401parcourir
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!