Maison >interface Web >js tutoriel >JavaScript et ses concepts de base : guide du développement Web pour débutants

JavaScript et ses concepts de base : guide du développement Web pour débutants

Susan Sarandonoriginal: 2024-12-23 01:56:35185parcourir

JavaScript and Its Core Concepts: A Beginner’s Guide to Web Development

Qu'est-ce que JavaScript ?

JavaScript est un langage de programmation qui permet de rendre les sites Web interactifs et dynamiques. Alors que HTML est utilisé pour structurer le contenu d'une page Web et que CSS est utilisé pour le styliser, JavaScript ajoute des fonctionnalités et permet à la page Web de répondre aux actions de l'utilisateur.

Par exemple :
• Vous cliquez sur un bouton et quelque chose se produit (comme l'ouverture d'un menu).
• Vous faites défiler et le contenu apparaît dynamiquement.
• Un formulaire vérifie votre saisie (comme la validation par e-mail) avant la soumission.

Principales fonctionnalités de JavaScript (simplifié)

S'exécute dans le navigateur : JavaScript s'exécute directement dans les navigateurs comme Chrome, Firefox ou Safari, il fonctionne donc sans rien installer de plus.
Dynamique : vous pouvez modifier une page Web (son contenu ou son apparence) sans la recharger.
Interactif : il répond à des événements tels que des clics, des mouvements de souris ou des pressions sur des touches.
Rapide : cela fonctionne rapidement car il s'exécute directement dans le navigateur.
Fonctionne partout : JavaScript est utilisé à la fois sur le navigateur (frontend) et sur les serveurs (backend, en utilisant Node.js).

Comment fonctionne JavaScript (simplifié)

Lorsque vous visitez une page Web :

Charges JavaScript : le navigateur charge le fichier JavaScript avec HTML et CSS.
Exécute le code : le moteur JavaScript du navigateur (comme le V8 dans Chrome) exécute le JavaScript ligne par ligne.
Interagit avec la page : JavaScript peut accéder et modifier des parties de la page, comme :

Ajout ou suppression d'éléments.
Styliser dynamiquement certaines parties de la page.
Afficher ou masquer le contenu en fonction des actions de l'utilisateur.

Exemples pour que ce soit clair

Changer le texte sur une page
Disons que vous avez un titre et que vous souhaitez que JavaScript modifie son texte.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>JavaScript Example</title>
</head>
<body>
  <h1>



<p>Explanation:</p>

The getElementById("heading") selects the 'h1' element.
.innerText = "Hello, JavaScript!"; changes its text.

Button Click Example
You can make a button do something when clicked.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Click Example</title>
</head>
<body>
  <button>



<p>What Happens:</p>

The button listens for a “click.”
When clicked, JavaScript updates the
tag with a message.

Simple Calculator
Let’s create a calculator for adding two numbers.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Simple Calculator</title>
</head>
<body>
  <input type="number">



<p>How It Works:</p>

The user enters numbers in two input fields.
When the “Add” button is clicked, JavaScript calculates the sum and displays it.

Key Concepts in JavaScript

Variables:
Variables store data that can be used later.

Why Use Variables?

Variables help you:

Store Information: Keep data in memory for later use.
Reuse Values: Avoid rewriting the same value multiple times.
Make Code Dynamic: Change variable values to alter program behavior.

let name = "John"; // Storing the value "John" in a variable called name
console.log(name); // Outputs: John

Fonctions :
En JavaScript, les fonctions sont des blocs de code réutilisables conçus pour
effectuer une tâche spécifique. Ils permettent d'écrire un morceau de logique
une fois et utilisez-le plusieurs fois, rendant votre code plus efficace et
organisé.

function greet(name) {
  return "Hello, " + name;
}

console.log(greet("Alice")); // Output: Hello, Alice
console.log(greet("Bob"));   // Output: Hello, Bob

*Événements : *
Les événements en JavaScript sont des actions ou des occurrences qui se produisent dans le navigateur, souvent déclenchées par l'utilisateur (par exemple, cliquer sur un bouton, saisir un champ de saisie ou redimensionner la fenêtre). JavaScript peut « écouter » ces événements et effectuer des actions spécifiques en réponse. C'est un concept clé pour créer des pages Web interactives et dynamiques.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>JavaScript Example</title>
</head>
<body>
  <h1>



<p>Explanation:</p>

The getElementById("heading") selects the 'h1' element.
.innerText = "Hello, JavaScript!"; changes its text.

Button Click Example
You can make a button do something when clicked.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Click Example</title>
</head>
<body>
  <button>



<p>What Happens:</p>

The button listens for a “click.”
When clicked, JavaScript updates the
tag with a message.

Simple Calculator
Let’s create a calculator for adding two numbers.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Simple Calculator</title>
</head>
<body>
  <input type="number">



<p>How It Works:</p>


The user enters numbers in two input fields.
When the “Add” button is clicked, JavaScript calculates the sum and displays it.



  
  
  Key Concepts in JavaScript


Variables:

 Variables store data that can be used later.

Why Use Variables?

Variables help you:


Store Information: Keep data in memory for later use.
Reuse Values: Avoid rewriting the same value multiple times.
Make Code Dynamic: Change variable values to alter program behavior.


let name = "John"; // Storing the value "John" in a variable called name
console.log(name); // Outputs: John



Boucles :

 En JavaScript, les boucles sont utilisées pour répéter un bloc de code plusieurs fois. Ils sont utiles lorsque vous souhaitez effectuer une action ou une série d'actions plusieurs fois, comme parcourir des éléments d'un tableau ou effectuer une tâche jusqu'à ce qu'une condition soit remplie.

Il existe plusieurs types de boucles en JavaScript, chacune utile pour différentes situations. Passons en revue les plus courants


pour Boucle :


La boucle for est la boucle la plus basique. Il répète un bloc de code un nombre de fois spécifié.



function greet(name) {
  return "Hello, " + name;
}

console.log(greet("Alice")); // Output: Hello, Alice
console.log(greet("Bob"));   // Output: Hello, Bob





boucle while :


La boucle while s'exécute tant qu'une condition spécifiée est vraie. Il vérifie la condition avant chaque itération.



<button>



<p><strong>Conditions:</strong><br>
 In JavaScript, conditions are used to perform different actions <br>
 based on whether a specified condition evaluates to true or false. <br>
 This helps control the flow of your program, allowing it to make <br>
 decisions.</p>

<p>Why Use Conditions?</p>

<ul>
<li>Decision Making: Execute code based on specific situations.</li>
<li>Dynamic Behavior: React to user input or external data.</li>
<li>Error Handling: Handle unexpected cases gracefully.
</li>
</ul>
<pre class="brush:php;toolbar:false">let age = 20;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are not an adult.");
}





faire... while Boucle :


La boucle do...while est similaire à la boucle while, mais elle garantit que le code s'exécutera au moins une fois, même si la condition est fausse initialement. Il vérifie la condition après chaque itération.



// Print numbers 1 to 5
for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// Output: 1, 2, 3, 4, 5





pour...en boucle :


La boucle for...in est utilisée pour parcourir les propriétés d'un objet (clés).



// Print numbers 1 to 5 using a while loop
let i = 1;
while (i <= 5) {
  console.log(i);
  i++;  // Don't forget to increment i!
}
// Output: 1, 2, 3, 4, 5





pour...de Boucle :


La boucle for...of est utilisée pour parcourir les valeurs d'un objet itérable (comme un tableau, une chaîne ou d'autres objets itérables).



// Print numbers 1 to 5 using do...while loop
let i = 1;
do {
  console.log(i);
  i++;
} while (i <= 5);
// Output: 1, 2, 3, 4, 5





  
  
  Où JavaScript est utilisé



Développement front-end :
Les frameworks JavaScript comme React, Angular et Vue.js sont utilisés pour 
créer des sites Web interactifs.
Développement back-end :
Node.js permet à JavaScript de s'exécuter sur des serveurs, alimentant ainsi la logique backend.
API :
JavaScript récupère les données des serveurs distants.



  
  
  Pourquoi apprendre JavaScript ?



Largement utilisé : presque tous les sites Web utilisent JavaScript.
Opportunités de carrière : essentielles pour les développeurs Web.
Facile à démarrer : vous n'avez besoin que d'un navigateur pour écrire et tester JavaScript.



  
  
  Conclusion


JavaScript est un langage de programmation convivial mais puissant. 

 En pratiquant des exemples simples et en comprenant les concepts clés, vous 

 peut débloquer la possibilité de créer un site Web interactif et engageant 

 candidatures !


          

            
        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 firefox css chrome safari html angular String Array Object if for while using JS number this input Access Other

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：Frontend Dev : maîtriser l'art du développement frontendArticle suivant：Frontend Dev : maîtriser l'art du développement frontend

Articles Liés

Voir plus