4.25. Introduction au HTML : structure de base, balises et attributs : opérateurs JavaScript
Le langage de balisage HTML (HyperText Markup Language) est l'épine dorsale de tout site Web ou application Web. Il fournit la structure de base, qui est ensuite améliorée et modifiée par CSS et JavaScript. Comprendre HTML est crucial pour tout développeur front-end. Dans ce chapitre, nous explorerons la structure de base du HTML, ses balises et ses attributs, et nous plongerons également dans les opérateurs JavaScript.
Structure de base du HTML
Un document HTML est structuré comme une arborescence, avec un élément 'html' en haut. Cet élément contient deux éléments enfants : "head" et "body". L'élément « head » contient des métadonnées sur le document, y compris le titre qui apparaît dans l'onglet du navigateur et des liens vers des fichiers CSS. L'élément « corps » contient le contenu principal du site Web, y compris le texte, les images, les vidéos et les liens.
<html>
<head>
<title>Titre du site</title>
≪/head>
<body>
Le contenu du site va ici.
</body>
</html>
Balises et attributs HTML
Les balises HTML sont utilisées pour définir les éléments et le contenu d'un site Web. Chaque balise commence par un crochet angulaire (<) et se termine par un crochet angulaire (>). Les balises viennent généralement par paires, avec une balise d’ouverture et une balise de fermeture. La balise de fermeture est identique à la balise d'ouverture, mais comporte une barre oblique (/) avant le nom de la balise.
Les attributs HTML sont utilisés pour fournir des informations supplémentaires sur un élément. Ils sont toujours spécifiés dans la balise d'ouverture et se présentent généralement sous forme de paires nom-valeur. Par exemple, la balise « img » utilise l'attribut « src » pour spécifier l'URL de l'image et l'attribut « alt » pour fournir un texte alternatif pour l'image.
<img src="url_da_imagem.jpg" alt="Description de l'image">
Opérateurs JavaScript
JavaScript est un langage de programmation qui vous permet d'ajouter de l'interactivité et des fonctionnalités complexes à un site Web. Les opérateurs sont des symboles qui spécifient quelle opération effectuer. Il existe plusieurs types d'opérateurs en JavaScript, notamment les opérateurs arithmétiques, d'affectation, de comparaison, logiques et de type.
Les opérateurs arithmétiques sont utilisés pour effectuer des opérations mathématiques. Par exemple, « + » est utilisé pour l'addition, « - » pour la soustraction, « * » pour la multiplication, « / » pour la division et « % » pour obtenir le reste d'une division.
soit x = 10 ;
soit y = 5 ;
console.log(x + y); // 15
console.log(x - y); // 5
console.log(x * y); // 50
console.log(x / y); // deux
console.log(x % y); // 0
Les opérateurs d'affectation sont utilisés pour attribuer des valeurs aux variables. L'opérateur '=' est le plus courant, mais il en existe de nombreux autres, notamment '+=' et '-=', qui ajoutent ou soustraient une valeur à une variable, puis attribuent le résultat à la variable.
soit x = 10 ;
x += 5 ; // x vaut maintenant 15
x-= 3 ; // x vaut maintenant 12
Les opérateurs de comparaison sont utilisés pour comparer deux valeurs. Ils renvoient une valeur booléenne : vrai si la comparaison est vraie, faux si elle est fausse. Quelques exemples incluent '==' (égal à), '!=' (différent de), '<' (inférieur à), '>' (supérieur à), '<=' (inférieur ou égal à) et '>=' (supérieur ou égal à).
soit x = 10 ;
soit y = 5 ;
console.log(x == y); // FAUX
console.log(x != y); // vrai
console.log(x <y); // FAUX
console.log(x > y); // vrai
console.log(x <= y); // FAUX
console.log(x >= y); // vrai
Les opérateurs logiques sont utilisés pour tester diverses conditions. Ils incluent '&&' (et), '||' (ou et '!' (non).
soit x = 10 ;
soit y = 5 ;
soit z = 20 ;
console.log(x > y && x < z); // vrai
console.log(x > y || x > z); // vrai
console.log(!(x > y)); // FAUX
Les opérateurs de type sont utilisés pour déterminer le type d'une valeur ou convertir une valeur d'un type à un autre. L'opérateur 'typeof' renvoie le type d'une valeur et l'opérateur 'instanceof' vérifie si un objet est une instance d'un type spécifique.
let x = "Bonjour tout le monde !";
let y = new String("Bonjour tout le monde !");
console.log(typede x); // "chaîne"
console.log(typede y); // "objet"
console.log (et instance de String); // vrai
En résumé, HTML, CSS et JavaScript sont les trois technologies fondamentales pour le développement Web. La maîtrise de ces compétences est essentielle pour devenir un développeur front-end efficace. Nous espérons que ce chapitre a fourni une solide introduction aux opérateurs HTML et JavaScript.
