La balise <body> est écrite dans la balise <HTML> Elle a pour but permettant d’indiquer au navigateur les deux bornes du corps de notre page HTML c’est à dire d’où il commence et où il se termine.
<body> ici se trouve le corps de notre page web </body>
Les balises simples ou orphelines sont les balises qui n’encadrent pas de contenu.
Elles sont nommées aussi des balises auto fermantes c’est à dire qui s’ouvrent et se ferment au même moment.
ci-dessous un exemple d’une balise simple :
<br/>
Les balises doubles
Les balises doubles sont des balises qui s’ouvrent et se ferment et elles encadrent un contenu (texte, d’autres balises,…).
ci-dessous un exemple d’une balise double:
<titre>Inscrire un titre ici</titre>
Les attributs d’une balise
Ce sont les caractéristiques (ou options) des balises. Les attributs se placent après le nom de la balise ouvrante et avant le chevron fermant de celle-ci et sont associés à une valeur :
<baliseattribut="valeur">contenu de la balise</balise>
Par exemple, dans la balise qui vous permettra d’ajouter une image à votre page. Pour insérer une image, nous pouvons utiliser la balise <img> dans la quelle on doit mentionner l’emplacement de l’image dans l’attribut src :
<imgsrc="C:/Documents/image.jpg"/>
Les attributs de balise peuvent servir comme vu ci-dessus à indiquer un élément important au bon fonctionnement de la balise mais peu aussi servir à simplement ajouter une information complémentaire à la balise.
comment ajouter un commentaire ?
Vous pouvez écrire des commentaires dans votre code qui serviront de notes pour vous ou d’autres personnes qui travailleront sur le code de la page.
Les commentaires sont à rédiger entre 2 balises particulières qui sont <!-- pour la balise ouvrante et --> pour la balise fermante.
ci-dessous un exemple d’un commentaire dans une page HTML :
Bienvenue à ce nouveau tuto 🙂 .Dans cette partie, nous allons comprendre l’élément de métadonnées (en-tête en français et Head en anglais ) du document HTML.
L’élément HTML <head> fournit des informations générales (métadonnées) sur le document comme le titre et des liens vers des scripts (JavaScript) ou feuilles de style (CSS).
La balise <head> dans HTML est un élément qui se trouve encapsulé dans la balise <HTML>. La balise <head> représente l’en tête du site.
Dans cette balise on peut trouver de nombreuses informations :
Les balises <meta> qui permettent au moteur de recherche d’avoir un résumé du contenu de la page
le titre de la page (qui peut être mentionné dans la balise <title>)
l’appel des feuilles de style CSS utilisées par la page.( à l’aide de la balise <link>)
l’appel des fichiers javascript utilisés par la page.( à l’aide de la balise <script>)
La balise <meta>
Les balises méta ne sont pas visibles par les internautes mais par contre elles sont visibles par les robots d’indexation sur le contenu d’une page web en fournissant une brève description de la page.
Nous allons voir un exemple d’attribut qui peut se trouver dans la balise <meta> qui est l’attribut charset.
charset est le responsable de préciser l’encodage des caractères dans une page.
Le choix de l’UTF-8 est recommandé par le W3C pour tous les protocoles échangeant du texte sur internet (dont HTML).cet encodage permet d’afficher les caractères spéciaux et accentués.
ci-dessous un exemple de déclaration d’une balise <meta> :
<metacharset="utf-8">
La balise <title>
La balise <title> permet de donner un titre à une page web. Cette balise décrit le contenu d’une page. Cette description va envoyer un signal aux moteurs de recherche sur le sujet principale de la page. Du coup, le robot du moteur de recherche pourra correctement indexer cette page web.
ci-dessous un exemple de déclaration d’une balise <title> :
<titre>Inscrire un titre ici</titre>
La balise <link>
L’élément <link> définit la relation entre le document courant et un autre externe.
La plupart du temps, les développeurs utilisent la balise <link> pour faire référence aux feuilles de style CSS externes avec une relation du type stylesheet.
ci-dessous un exemple de déclaration d’une balise <link> :
<linkrel="stylesheet"href="style.css">
La balise <script>
Cet élément permet de faire référence aux fichiers JavaScript qui seront exécuter côté client.
Avant la version HTML5 , le développeur a été obligé de saisir l’attribut : type = « text/javascript » mais à partir de la version 5 du HTML il n’est plus obligatoire de spécifier l’attribut type.
ci-dessous un exemple de déclaration d’une balise <script> :
<scriptsrc="script.js"></script>
Dans ce tuto, nous avons défini la partie Head en HTML et les différentes balises qui peuvent se trouver dedans.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons comprendre la partie body.
Bienvenue à ce nouveau tuto 🙂 . Dans ce cours , nous allons découvrir ensemble la balise DOCTYPE en HTML.
Comme nous l’avons vu ensemble dans le tuto créer notre premier fichier HTML , le document HTML, il y avait une déclaration <!DOCTYPE html> avant la balise <html>. Cette balise est utilisée pour informer le navigateur de la version de HTML utilisée dans le document. Elle est aussi appelée Déclaration de Type de Document (DTD).
Plusieurs versions d’HTML ont apparu c’est pourquoi Il est important d’indiquer à votre navigateur avec quelle version du standard HTML il doit interpréter votre page web.
C’est pour cela que l’on fixe un DOCTYPE en tête de nos page HTML. C’est une balise qui s’écrit dans la première ligne de notre page qui indique la version du HTML utilisée.
Si cette balise manque dans le document, cela peut entraîner des erreurs dans la présentation de votre site Web.
A quoi sert DOCTYPE html ?
Le rôle de DOCTYPE est d’expliquer aux programmeurs et aux navigateurs de quelle document type définition (DTD) il s’agit et comment un site Web doit être rendu.
La DTD indique donc quel langage de code est utilisé sur la page ou dans le document HTML.
Quels sont les différents types de DOCTYPE html ?
Historiquement parlant , Il était un peu compliqué à retenir les DOCTYPE.
Exemple 1 : dans XHTML 1.1 la déclaration de DOCTYPE était comme suite :
Bienvenue à ce nouveau cour 🙂 .Nous avons vu ensemble dans le tuto précédant quelques notions théorique de HTML. Dans ce tuto , nous allons voir comment préparer notre environnement de travail HTML pour qu’on puisse commencer à coder.
html logo
Pour coder en HTML, nous avoir besoin seulement d’un éditeur de texte. Il existe de plusieurs éditeurs de texte sur le web et la majorité d’entre eux sont gratuits.
Un éditeur de texte est un programme qui va nous simplifier l’écriture des lignes de code d’un langage comme HTML,CSS ,JavaScript…
Quelques exemples d’éditeur de texte
Il en a un grand nombre d’éditeur de texte et ci-dessous quelques exemples reconnus d’éditeur :
NotePad++ : Certainement l’éditeur de texte le plus connu de tous les temps, NotePad++ est également l’un des plus anciens. Il contient pas mal de fonctionnalités intéressante à savoir : le surlignage des erreurs de syntaxe dans le code , l’auto-complétion des balises, etc.
Brackets: Brackets est un éditeur destiné aux les langages de développement front-end (HTML, CSS et JavaScript).. et il est caractérisé par son interface utilisateur ergonomique.
Visual Studio Code est un éditeur de code extensible développé par Microsoft pour Windows, Linux et macOS. Cet éditeur incluent plusieurs fonctionnalités comme le débogage, la complétion intelligente du code (IntelliSense), les snippets, la refactorisation du code et Git intégré.
Pour cette série de tuto, je vais utiliser Visual Studio code et vous avez le choix d’installer n’importe quel éditeur de texte que vous voulez l’essentiel qu’on a un éditeur bien installé dans nos poste afin de commencer à écrire nos premiers ligne de code HTML.
Installer Visual Studio Code
Pour installer visual code dans notre poste il suffit juste de suivre les étapes suivantes :
Étape 1 : aller sur google et saisir le texte suivant : installer visual code
Étape 2 : cliquer sur le premier lien :
Étape 3 : Choisir la version compatible avec votre système d’exploitation ( dans mon cas c’est Windows)
Étape 4 : une fois téléchargé, Ouvrez le fichier d’installation .exe dans votre dossier Téléchargements :
Étape 5 : Lisez et acceptez le contrat de licence et cliquez sur Next.
Étape 6 : Vous avez le choix que ce soit modifier l’emplacement du dossier d’installation ou bien conserver les paramètres par défaut. Cliquez sur Next pour continuer.
Étape 7 : Choisissez de renommer le dossier des raccourcis dans le menu Démarrer ou de ne pas installer de raccourcis du tout. Cliquez sur Next.
Étape 8 : Sélectionnez les tâches supplémentaires à votre choix , par exemple ‘Create a desktop icon’ (créer une icône sur le bureau) . Cliquez sur Next.
Étape 9 : Cliquez sur Install pour démarrer l’installation du visual code.
Étape 10 : Le logiciel est installé et prêt à être utilisé. Cliquez sur Finish
Félicitation 🙂 , vous avez maintenant Visual studio code installé sur votre poste . Nous pouvons maintenant commencer à créer nos premier pages HTML.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons voir comment créer notre premier fichier HTML.
HTML est le squelette de notre page Web, il doit être très organisé et bien structuré pour permettre au navigateur de l’afficher facilement.
HTML est représenté comme un arbre de balises. L’élément racine de cet arbre est toujours la balise <html>.
Structure d’un document HTML
La page web HTML est toujours constituée d’une balise ouvrante <html> située au début de la page et d’une balise fermante </html> située en fin de page.
Dans la balise <html>on ajoute la balise <head> qui est la zone d’en-tête, dans laquelle on peut inscrire les métadonnées et on peut donner un titre à notre page via la balise <title>
Après la balise <head> (en-tête de la page), vient la balise <body> qui est le corps de notre page. Cette balise va contenir tous les éléments de contenus d’une page web, comme des paragraphes, des titres, des listes,des images,des vidéo …
ci-dessous un exemple de structure de page web :
<!DOCTYPEHTML><html><head><title>Ma première page Web</title><metahttp-equiv="content-type"content="text/html; charset=UTF-8"></head><body> Salut !</body></html>
Le résultat de ces lignes de code va nous donner le résultat suivant :
Résultat
Comment créer un fichier HTML ?
Vous n’avez pas besoin d’avoir de grandes connaissances en informatique pour créer un fichier HTML. Les étapes à effectuer sont très simples.
ouvrir un éditeur de texte ( si vous n’e connaissez pas’avez pas un éditeur de texte vous pouvez suivre ce tuto )
créer un fichier HTML : ouvrir un éditeur de texte
Créez un nouveau fichier :
cliquer sur fichier nouveau
copier le code suivant et le coller dans le corps de votre fichier :
<!DOCTYPEhtml><head><title>Titre de votre page</title></head><body> Bienvenue !!!</body></html>
Enregistrez le fichier dans un dossier au format .html.
cliquer sur enregistrer sous
saisir un nom
Pour visualiser le résultat , il suffit juste de double cliquer sur le fichier 🙂
Dans ce tuto , nous avons découvert la structure d’un fichier HTML et comment le créer.
Espérons bien que ce tuto vous a plu. Rattachez vos ceinture pour commencer à coder avec ce langage à partir des tutos suivants 🙂 🙂
HTML signifie « HyperText Markup Language » qu’on peut traduire par « langage de balises pour l’hypertexte ».
L’« hypertexte » désigne les liens qui relient les pages web entre elles, que ce soit au sein d’un même site web ou entre différents sites web.
C’est le langage dans lequel la plupart des sites Web sont écrits. Il est utilisé pour créer des pages et les rendre fonctionnelles.
Il a été inventé par Tim Berners-Lee dans les années 1990 et n’a jamais cessé d’évoluer.
A quoi sert HTML ?
HTML sert à décrire au navigateur ce qu’il doit afficher aux internautes. Par exemple, si nous utilisons la balise <h1> cela veux dire qu’on a dit au navigateur que cet élément est un titre.
De plus , ce langage sert aussi à indiquer au navigateur comment afficher un élément.
Vous pouvez aussi insérer des éléments interactifs comme des liens, des images ou des vidéos, et des scripts de différents langages tel que (JavaScript,PHP…).
Qu’est ce qu’une balise HTML ?
Pour écrire en langage HTML, nous utilisons un système de balisage (les balises).
Les balises sont les éléments de base pour écrire un code en HTML. Elles fonctionnent en paire : c’est à dire une balise une pour ouvrir l’élément et une autre pour le fermer.
Le système de balises permet de titrer, sous-titrer, mettre en gras, etc., un texte. De plus, il permet d’introduire des éléments interactifs comme des liens, des images, des vidéos etc…
Les balises à utiliser sont prédéfinies et il existe différentes règles à respecter. Les balises se construisent toujours comme suit:
Le caractère < pour ouvrir une balise.
Le nom de l’élément contenu dans la balise.
Un attribut, si nécessaire, pour qualifier cet élément.
Le caractère > pour fermer la balise.
La majorité des balises s’ouvrent et se ferment. Par exemple, si nous avons ouvert une balise <title> il faut la fermer comma ça : </title>.
Prenons un simple exemple :
Si nous voulons afficher donner un titre à notre page web , nous pouvons utiliser la balise <title>
<title>Le titre de ma page</title>
Dans ce tuto , nous avons défini HTML , à quoi sert ce langage et finalement nous avons vu à quoi semble une balise.
Espérons bien que ce tuto vous a plu. Rattachez vos ceinture pour commencer à coder avec ce langage à partir des tutos suivants 🙂 🙂
Quiz de ce tuto
Vous pouvez tester que vous avez bien assimiler tous ce que nous avons appris ensemble via ce quiz 🙂 🙂 amusez vous bien.
Comme pour la majorité des langages de programmation, nous allons pouvoir commenter en JavaScript.
Les commentaires sont des lignes de texte placées au milieu d’un script et qui sert à documenter le code, autrement dit, à expliquer ce que fait le code et comment le manipuler.
Ces commentaires ne seront pas lus par le navigateur et ne seront pas invisibles pour les internautes.
A quoi sert un commentaire ?
Avoir un code bien commenté est hyper recommandé aux développeurs.
Le fait de commenter un code va évidement servir aux développeurs de trouver les repères plus facilement dans un script, à le lire et à le comprendre plus vite.
Cela peut être utile à la fois pour vous même si vous travaillez sur des projets complexes ou pour d’autres développeurs si vous travailler dans une équipe.
En JavaScript, il existe deux types de commentaires qui vont s’écrire différemment :
Bienvenue à ce nouveau cour 🙂 .Nous avons vu ensemble dans le tuto précédant quelques notions théorique de JavaScript. Dans ce tuto , nous allons voir comment préparer notre environnement de travail JavaScript pour qu’on puisse commencer à coder.
logo de JavaScript
Pour coder en JavaScript, nous avoir besoin seulement d’un éditeur de texte. Il existe de plusieurs éditeurs de texte sur le web et la majorité d’entre eux sont gratuits.
Normalement, si vous suivez ce cours, donc vous avez les bases de développements en HTML CSS et vous avez déjà votre éditeur de texte qui est prêt pour commencer le travail 🙂 🙂
Si jamais ce n’est pas le cas, je vous conseille vivement de suivre nos cours HTML et CSS avant de commencer ce cours.
Un éditeur de texte est un programme qui va nous simplifier l’écriture des lignes de code d’un langage comme HTML,CSS ,JavaScript.
Quelques exemples d’éditeur de texte
Il en a un grand nombre d’éditeur de texte et ci-dessous quelques exemples reconnus d’éditeur :
NotePad++ : Certainement l’éditeur de texte le plus connu de tous les temps, NotePad++ est également l’un des plus anciens. Il contient pas mal de fonctionnalités intéressante à savoir : le surlignage des erreurs de syntaxe dans le code , l’auto-complétion des balises, etc.
Brackets : Brackets est un éditeur destiné aux les langages de développement front-end (HTML, CSS et JavaScript).. et il est caractérisé par son interface utilisateur ergonomique.
Visual Studio Code est un éditeur de code extensible développé par Microsoft pour Windows, Linux et macOS. Cet éditeur incluent plusieurs fonctionnalités comme le débogage, la complétion intelligente du code (IntelliSense), les snippets, la refactorisation du code et Git intégré.
Pour cette série de tuto, je vais utiliser Visual Studio Code et vous avez le choix d’installer n’importe quel éditeur de texte que vous voulez l’essentiel qu’on a un éditeur bien installé dans nos poste afin de commencer à écrire nos premiers ligne de code JavaScript.
Installer Visual Studio Code
Pour installer visual code dans notre poste il suffit juste de suivre les étapes suivantes :
Étape 1 : aller sur google et saisir le texte suivant : installer visual code
Étape 2 : cliquer sur le premier lien :
Étape 3 : Choisir la version compatible avec votre système d’exploitation ( dans mon cas c’est Windows)
Étape 4 : une fois téléchargé, Ouvrez le fichier d’installation .exe dans votre dossier Téléchargements :
Étape 5 : Lisez et acceptez le contrat de licence et cliquez sur Next.
Étape 6 : Vous avez le choix que ce soit modifier l’emplacement du dossier d’installation ou bien conserver les paramètres par défaut. Cliquez sur Next pour continuer.
Étape 7 : Choisissez de renommer le dossier des raccourcis dans le menu Démarrer ou de ne pas installer de raccourcis du tout. Cliquez sur Next.
Étape 8 : Sélectionnez les tâches supplémentaires à votre choix , par exemple ‘Create a desktop icon’ (créer une icône sur le bureau) . Cliquez sur Next.
Étape 9 : Cliquez sur Install pour démarrer l’installation du visual code.
Étape 10 : Le logiciel est installé et prêt à être utilisé. Cliquez sur Finish
Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons voir où exactement on peux mettre notre code JavaScript pour qu’il devienne compréhensible par HTML.
Bienvenue à ce nouveau tuto dans le quel nous allons savoir où exactement écrire le code JavaScript.
logo de JavaScript
Il faut mentionné tout d’abord que l’insertion d’un code JavaScript peut s’écrire dans un de ces trois emplacement :
Directement dans la balise ouvrante d’un élément HTML
Dans une balise « script » dans le fichier HTML
Dans un fichier externe qui a l’extension « .js »
Nous allons, dans cette tuto , voir comment écrire un code JavaScript dans chacun de ces endroits et dégager les différents avantages et inconvénients de chaque façon de faire.
Un script est une portion de code qui vient s’insérer dans une page HTML. Le code du script n’est pas visible dans la fenêtre du navigateur et ce dernier peut le comprendre grâce aux balises spécifiques qui lui signalent qu’il s’agit d’un script écrit en langage JavaScript. Les balises annonçant un code Javascript sont les suivantes :
<SCRIPTlanguage="Javascript">Placez ici le code de votre script</SCRIPT>
en HTML5 , l’attribut type="text/javascript" n’est pas obligatoire.
Comment placer JavaScript dans la balise ouvrante d’un élément HTML ?
Nous pouvons mettre le code JavaScript directement dans la balise ouvrante HTML.
Ce type d’insertion de code a été très fréquent au début surtout lorsqu’on veut faire des événements sur un composant HTML par exemple lors d’un clic sur un bouton on déclenche un message.
Exemple
Nous allons écrire un programme Bienvenue() qui permettra d’afficher une fenêtre contenant le texte: « Bienvenue ! » lorsque l’utilisateur clique sur le bouton.
Pour se faire nous allons poursuivre les étapes suivantes :
Créer un nouveau fichier HTML ( extension .html ) qui va contenir un code HTML avec du code JavaScript dedans.
Ici , nous avons un exemple très simple mais imaginons qu’on va avoir une page qui contient beaucoup d’élément HTML et pour chacun on va ajouter dedans du JavaScript ==> ça sera difficile même de le lire.
C’est pourquoi, il est déconseillé d’écrire du code JavaScript dans des balises ouvrantes d’éléments HTML car la séparation des différents langages permet de conserver le code plus propre, plus compréhensible et surtout plus maintenable.
Comment utiliser la balise <script> pour insérer du JavaScript ?
Nous pouvons mettre notre code JavaScript dans un élément <script> qui est l’élément utilisé en HTML pour indiquer que le code situé dedans est en JavaScript.
Le script va être inséré dans un fichier HTML dans n’importe quel emplacement de la page. Généralement, les fonctions JavaScript utiles sont insérées dans l’élément “head” et le code JS principal juste avant la balise de fermeture </body> de la page HTML.
Exemple
Nous allons écrire un programme Bienvenue() qui permettra d’afficher une fenêtre contenant le texte: « Bienvenue à tous !!! »
Pour se faire nous allons poursuivre les étapes suivantes :
Créer un nouveau fichier HTML ( extension .html ) qui va contenir un code HTML avec du code JavaScript dedans.
mettre dans ce fichier le code suivant :
<head><TITLE>Bienvenue à tous via JavaScript</TITLE><metacharset="UTF-8"><script>// Dans cette balise , on définit la fonction JavaScript qui permet d'afficher "Bienvenue à tous !!!"function bienvenue() { alert("Bienvenue à tous !!!") ;}</script></head><body>< !--code HTML de la page --><script>//Le code principal dans le quel on fait appel à la fonction bienvenue() bienvenue() ;</script></body>
Résultat
Utiliser la balise “script” JavaScript
Vous pouvez télécharger le code source de cet exemple en cliquant sur le bouton ci-dessous :
Créez une fonction nommée « somme » qui prend deux nombres comme arguments et retourne leur somme ( on va utiliser la balise “script” dans la même page HTML)
<head><TITLE>fonction somme avec JavaScript</TITLE><metacharset="UTF-8"><script>// Dans cette balise , on définit la fonction somme JavaScript qui permet de calculer et d'affiche la somme x+yfunction somme(x,y) { alert("la somme : " + x + " + " + y + " = "+ (x+y)) ;}</script></head><body><script>//Le code principal dans le quel on fait appel à la fonction somme() somme(3,5) ;</script></body>
Comme vous l’avez remarqué , cette méthode est meilleure que la précédente cependant ce n’est pas pas idéalement celle que nous allons utiliser pour plusieurs raisons :
Tout d’abord, car la séparation des codes n’est pas respecté ici puisqu’on mélange du HTML avec du JavaScript ce qui rendre l’ensemble complexe et difficile à comprendre et à maintenir dans le cadre d’un gros projet.
De plus, imaginons qu’on souhaite utiliser un même code sur plusieurs pages, donc il faudra faire plusieurs copier-coller à chaque fois ce qui entraine une complexité lors de la maintenance de l’ensemble du site.
Comment utiliser un fichier JavaScript externe?
Mettre du code JavaScript dans un fichier séparé contenant du code JavaScript est la méthode recommandée vu que le code sera plus lisible et plus facile à maintenir.
Pour se faire , nous allons passer par la création créer un nouveau fichier d’extension .js. Ensuite, nous allons faire appel à ce fichier JavaScript depuis le fichier HTML grâce à l’attribut src, placé dans la balise <script>.
Exemple
Cas où les deux fichiers sont dans le même emplacement
Dans cet exemple, nous allons créer deux fichiers :
Un fichier JavaScript externe qui contient le code JavaScript
Un fichier HTML dans le quel nous appellerons les fichiers .js
Pour cet exemple les deux fichiers sont dans le même emplacement ( le même dossier ) comme le montre cette figure :
exemple utiliser Script externe JavaScript
Nous allons prendre le même exemple que le tuto précédant mais cette fois-ci avec un appel externe du JS.
écrire un programme Bienvenue() qui permettra d’afficher une fenêtre contenant le texte: « Bienvenue à tous !!! »
Nous allons créer tout d’abord un nouveau fichier nommé : bienvenue.js dans lequel nous mettons le code suivant :
functionbienvenue(){alert("Bienvenue à tous !!!") ;}
Par la suite , on crée un nouveau fichier HTML nommé par exemple bienvenue.html dans lequel nous ferons appel au fichier bienvenue.js à l’aide de l’attribue src
<head><TITLE>Bienvenue à tous via JavaScript</TITLE><metacharset="UTF-8">// Ici on fait appel au fichier bienvenue.js<scripttype="text/javascript"src="bienvenue.js"></script></script></head><body>< !--code HTML de la page --><script>//appel de la fonction bienvenue() bienvenue() ;</script></body>
Résultat
Utiliser la balise “script” JavaScript
Vous pouvez télécharger le code source de cet exemple en cliquant sur le bouton ci-dessous :
Cas où les deux fichiers ne sont pas dans le même emplacement
Pour faciliter la tâche , on va prendre le même exemple et créer les deux fichiers :
Un fichier JavaScript externe qui contient le code JavaScript
Un fichier HTML dans le quel nous allons appeler les fichier .js
Pour cet exemple les deux fichiers qui ne sont pas dans le même emplacement ( mettre le fichier .js dans un dossier nommé javascript)
exemple 2 : utiliser Script externe JavaScript
bienvenue.js
functionbienvenue(){alert("Bienvenue à tous !!!") ;}
test.html
<head><TITLE>Bienvenue à tous via JavaScript</TITLE><metacharset="UTF-8">// Ici on fait appel au fichier bienvenue.js<scripttype="text/javascript"src="javascript/bienvenue.js"></script></script></head><body>< !--code HTML de la page --><script>//appel de la fonction bienvenue() bienvenue() ;</script></body>
Le même résultat
Utiliser la balise “script” JavaScript
La seule modification à effectuer est de modifier l’attribut en mettant les nom du dossier javascript avant le nom du fichier .js src= »javascript/bienvenue.js »
Vous pouvez télécharger le code source de cet exemple en cliquant sur le bouton ci-dessous :
Créez une fonction nommée « minuteVersSeconde » qui prend une durée en minute comme arguments et retourne sa conversion vers en secondes ( utiliser un script externe JavaScript)
Tout d’abord, la création d’un nouveau fichier nommé : externe.js par exemple dans lequel on met le code suivant :
functionminuteVersSeconde(x){alert("La conversion de "+x+" minutes vers les secondes est "+ (x*60)) ;}
Par la suite , la création un nouveau fichier HTML( nommé :conversion.html) dans lequel nous ferons appel au fichier externe.js à l’aide de l’attribue src
<head><TITLE>minute vers secondes via JavaScript</TITLE><metacharset="UTF-8">// Ici on fait appel au fichier externe.js<scripttype="text/javascript"src="externe.js"></script></script></head><body>< !--code HTML de la page --><script>//appel de la fonction minuteVersSeconde() minuteVersSeconde(3) ;</script></body>
utiliser Script externe JavaScript
Vous pouvez télécharger le code source de cet exercice en cliquant sur le bouton ci-dessous :
Créez une fonction nommée « ResteDivision » qui prend deux entiers X et Y comme arguments et retourne le reste de la division de X par Y ( utiliser un script externe JavaScript et qui ne sont pas dans le même emplacement )
Tout d’abord, la création d’un nouveau fichier nommé : externe.js dans un dossier nommé js par exemple dans lequel on met le code suivant :
functionResteDivision(x,y){alert("Le reste de la division de "+x+" par "+y+" égal à "+ (x%y)) ;}
Par la suite , la création d’un nouveau fichier HTML (nommé resteDivision.html ) dans lequel nous ferons appel au fichier division.js à l’aide de l’attribue src
<head><TITLE>Bienvenue à tous via JavaScript</TITLE><metacharset="UTF-8"><scripttype="text/javascript"src="js/division.js"></script></script></head><body>< !--code HTML de la page --><script>//Le code principal dans le quel on fait appel à la fonction bienvenue() ResteDivision(3,2) ;</script></body>
exercice utiliser Script externe JavaScript
Vous pouvez télécharger le code source de cet exercice en cliquant sur le bouton ci-dessous :
Dans ce tuto , nous avons vu comment écrire un petit code JavaScript et où nous pouvons le placer.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons voir comment déclarer faire les commentaires dans JavaScript ainsi que quelques mots clé réservé par ce langage.
Quiz de ce tuto
Vous pouvez tester que vous avez bien assimiler tous ce que nous avons appris ensemble via ce quiz 🙂 🙂 amusez vous bien.
Bienvenue 🙂 :). Dans le tuto précédant nous avons appris comment déclarer une variable JavaScript et dans ce tutoriel nous allons découvrir quels sont les différents types de données dans JavaScript.
