5 Bases incontournables pour débuter rapidement en Javascript

il y a 10 jours

Quelles sont Les 5 bases Incontournables que tu auras besoin de connaitre en javaScript ?

Pour créer et afficher un site web dans ton navigateur, tu as besoin du HTML, pour l'embellir avec des couleurs et des formes, tu as utilisé du CSS.

C'est sont des pages web très statiques. C'est-à-dire le contenu ne change pas.

Souviens-toi que le HTML est un langage de description et le CSS est langage de style en cascade. Ils ne peuvent pas être dynamique.

Comment peut-on rendre un site web dynamique ?

Heureusement que certains développeurs y ont pensé avant toi et moi en construisant certains langages de programmation capables de créer des pages web dynamiques.

Certains s'exécutent du côté serveur uniquement, par exemple JAVA, PHP, RUBY, PYTHON, ... et un seul s'éxecute aussi du coté client.

Le HTML, CSS et le JavaScript s'exécutent du côté client(dans le navigateur). Pas mal !

D'autres chercheurs avec beaucoup des barbes et de cheveux ont pris le JavaScript, un langage de programmation qui s'exécutait du côté client seulement. Ils ont développé NodeJs un outil puissant qui permet d'exécuter le javascript du côté serveur.

Les bases à connaitre pour évoluer plus vite avec le JavaScript tournent autour de :

  • ➡️ Comment utiliser console.log() Javascript ?
  • ➡️ Comment utiliser l'api dom Javascript ?
  • ➡️ Comment afficher un message d'alerte ?
  • ➡️ Comment demander une confirmation à un utilisateur ?
  • ➡️ Comment demander des informations à un internaute via windows prompt ?

1. Utilisation de la console.log()

Comment utiliser console.log() Javascript ?

Tout les navigateurs web, la plateforme Node.JS est tout environnement javaScript bien configuré supporte l'écriture de message dans la console en avec la fonction logging.

C'est simple, tu commences par :

  • Ouvrir ton navigateur .
  • CTRL + D ou Tu fais un clic droit en choisissant le menu Examiner les éléments de la page.
  • Tu choisis l'onglet console.
  • Ou Tu peux utiliser jsconsole.com pour tester la console plus vite.

console.log("Voici mon message") et appuie sur la touche ENTER. Oui, le gros bouton.

Afficher une variable

console.log () peut être utilisé pour afficher des variables de tout type ; pas seulement des chaines de caractères.

Passe simplement la variable que tu souhaites afficher dans la console, par exemple :

var foo = "bar";
console.log(foo);

Si tu souhaites enregistrer et afficher deux ou plusieurs valeurs, sépare-les simplement par des virgules.

Des espaces seront automatiquement ajoutés entre chaque argument lors de la concaténation :

var var1 = 'Valeur 1';
var var2 = 'Valeur 2';
console.log("var1 : ", var2, "and var2 :", var2);

Le résultat visible dans la console : var1 : Valeur 2 et var2 : Valeur 2

Placeholders

Tu peux aussi utiliser console.log () en combinaison avec des systèmes de formatages réservés :

var salutation = "Boujour ", qui = "Le Monde";
console.log("%s, %s!", salution, qui);

Le résultat visible dans la console : Bonjour, Le Monde !

Logging Objects

Ci-dessous, tu as le résultat de l'enregistrement d'un objet. Cela est souvent utile pour consigner les réponses JSON des appels d'API.

console.log({
'Email': '',
'Groups': {},
'Id': 1,
'IsHiddenInUI': false,
'IsSiteAdmin': false,
'LoginName': 'bcdibwe',
'Title': 'Administrateur'
});

Le résultat visible dans la console : *Object*{ Email:,Groups:*Object*,Id:1,IsHiddenInUI:false,IsSiteAdmin:false,… }

Pour affichage des éléments HTML :

console.log(document.body);

Le résultat visible dans la console : HTMLBodyElement { … }

2. Utilisation de l'API DOM

Comment utiliser de l'API DOM Javascript ?

DOM signifie Document Object Model. Il s'agit d'une représentation orientée objet de documents structurés tels que XML et HTML.

La définition de la propriété textContent d'un élément est un moyen de sortir du texte sur une page Web.

Par exemple, considérons la balise HTML suivante:

<p id="paragraph"></p>

Pour modifier sa propriété textContent, nous pouvons exécuter le JavaScript suivant :

document.getElementById("paragraph").textContent = "Bonjour, Le Monde";

Cela sélectionnera l'élément qui a l'id "paragraphe" et définira son contenu textuel sur "Bonjour, Le Monde":

<p id="paragraph">"Bonjour, Le Monde"</p>

Tu peux également utiliser JavaScript pour créer un nouvel élément HTML par programmation.

Par exemple, considérons un document HTML avec le corps suivant:

<body>
	<h1>Ajout d'un élément</h1>
</body>

Dans notre JavaScript, nous créons une nouvelle balise <p> avec une propriété textContent et l'ajoutons à la fin du body html:

var element = document.createElement('p');
element.textContent = "Bonjour, Le Monde";
document.body.appendChild(element); //Ajout d'un élément

Cela changera ton HTML en ceci :

<body>
    <h1>Adding an element</h1>
    <p>Hello, World</p>
</body>

__Il est très important de savoir __

La manipulation des éléments dans le DOM à l'aide du code JavaScript doit être exécuté une fois l'élément pertinent créé dans le document. Ceci peut être réalisé en plaçant les balises JavaScript <script> après tout ton autre contenu <body>.

Alternativement, Tu peux également utiliser un écouteur d'événements pour écouter par exemple.

Un événement onload de la fenêtre, l'ajout de ton code à cet écouteur d'événements retardera l'exécution de ton code jusqu'à ce que tout le contenu de ta page ait été chargé.

Une troisième façon de t'assurer que tout ton DOM a été chargé, est d'envelopper le code de manipulation DOM avec une fonction de temporisation de 0 ms.

De cette façon, ce code JavaScript est re-mis en file d'attente à la fin de la file d'attente d'exécution, ce qui donne au navigateur une chance de terminer de faire des choses non JavaScript qui attendaient de se terminer avant de participer à ce nouveau morceau de JavaScript.

3. Utilisation de Windows.alert()

Comment afficher un message d'alerte ?

La méthode d'alerte affiche une boîte, un popup visuelle à l'écran. Le paramètre de méthode d'alerte est affiché à l'utilisateur en texte brut:

var message = "Débuter en JavaScript"
window.alert(message);

Parce que la fenêtre est l'objet global, tu peux également appeler en utilisant le raccourci suivant:

alerte (message);

Alors que fait window.alert ()? Eh bien, prenons l'exemple suivant:

alert('Pause!');
console.log('Alert est fermé');

Cependant, la spécification permet en fait à d'autres codes déclenchés par des événements de continuer à s'exécuter même si une boîte de dialogue modale est toujours affichée.

Dans de telles implémentations, il est possible que d'autres codes s'exécutent pendant que la boîte de dialogue modale est affichée.

L'utilisation d'alertes est généralement déconseillée au profit d'autres méthodes qui n'empêchent pas les utilisateurs d'interagir avec la page afin de créer une meilleure expérience utilisateur.

Néanmoins, il peut être utile pour le débogage.

À partir de Chrome 46.0, window.alert () est bloqué dans un <iframe> sauf si son attribut sandbox a la valeur allow-modal.

4. Utilisation de window.prompt()

Comment demander des informations à un internaute via windows prompt ?

Un moyen simple d'obtenir une entrée d'un utilisateur est d'utiliser la méthode prompt().

Syntaxe

prompt(text, [default]);

  • text: The text displayed in the prompt box.
  • default: A default value for the input field (optional).

Example:

var age = prompt("How old are you?");
console.log(age); // affiche l'age entrer par l'utilisateur

Si l'utilisateur clique sur le bouton OK, la valeur d'entrée est renvoyée. Sinon, la méthode renvoie null. La valeur de retour de l'invite est toujours une chaîne, sauf si l'utilisateur clique sur Annuler, auquel cas il renvoie null.

Safari est une exception dans la mesure où lorsque l'utilisateur clique sur Annuler, la fonction renvoie une chaîne vide. De là, tu peux convertir la valeur de retour en un autre type, tel qu'un entier.

Pendant que la boîte de dialogue s'affiche, l'utilisateur n'est pas autorisé à accéder à d'autres parties de la page, car la boîte de dialogue les boîtes sont des fenêtres modales. Très bloquant!

À partir de Chrome 46.0, cette méthode est bloquée dans un <iframe>, sauf si son attribut sandbox a le valeur allow-modal.

5. Utilisation de window.confirm()

Comment demander une confirmation à un utilisateur ?

La méthode window.confirm () affiche une boîte de dialogue modale avec un message facultatif et deux boutons, OK et Annuler.

Prenons maintenant l'exemple suivant:

var message = "Veux-tu apprendre le javascript ?";
resultat = window.confirm(message);
console.log(resultat)

Result : true Ou false

Ici, message est la chaîne facultative à afficher dans la boîte de dialogue et le résultat est une valeur booléenne indiquant si OK ou Annuler a été sélectionné (true signifie OK et false Annuler).

window.confirm() est généralement utilisé pour demander la confirmation de l'utilisateur avant d'effectuer une opération dangereuse comme la suppression de quelque chose dans un panneau de configuration:

var deleteConfirm = window.confirm("Voulez-vous vraiment supprimer ceci ?")
if(deleteConfirm) {
	deleteItem(itemId);
}

Les boîtes de dialogue sont des fenêtres modales - elles empêchent l'utilisateur d'accéder au reste de l'interface du programme jusqu'à ce que la boîte de dialogue soit fermée.

Pour cette raison, tu ne dois pas abuser de toute fonction qui crée une boîte de dialogue (ou fenêtre modale).

Et malgré tout, il y a de très bonnes raisons d'éviter d'utiliser des boîtes de dialogue pour confirmation.

À partir de Chrome 46.0, cette méthode est bloquée dans un <iframe>, sauf si son attribut sandbox a le valeur allow-modal.

Il est généralement accepté d'appeler la méthode confirm avec la notation de fenêtre supprimée comme objet window est toujours implicite.

Cependant, il est recommandé de définir explicitement l'objet window comme comportement attendu peut changer en raison de l'implémentation à un niveau de portée inférieur avec des méthodes de nom similaire.

Conclusion

Je viens de te donner les 5 bases indispensables JavaScript qui te permettrons de bien débuter. Oui, tu vas évoluer plus vite !

La route est encore longue surtout que ce langage de programmation subit une évolution exponentielle. Tros même !

Chaque jours il y a des nouvelles structurations du code des frameworks et librairie. Mais, ils sont tous sans exception basé sur du pure JavaScript.

Patant de celà, j'ai expliqué ceci :

  • ➡️ Comment utiliser console.log() Javascript ?
  • ➡️ Comment utiliser l'api dom Javascript ?
  • ➡️ Comment afficher un message d'alerte ?
  • ➡️ Comment demander une confirmation à un utilisateur ?
  • ➡️ Comment demander des informations à un internaute via windows prompt ?

Tu as aimé cet article ? Partage-le avec tes collègues ou ami(e)s :

Ecris avec le par B.C. DIBWE

Ne rate rien !

Je te propose de t'infiltrer dans mes messages privés.

Ce plus de 100 développeurs qui récoivent des conseilles révolutionaires.

S'abonner

Tu vas récevoir toute suite "les 5 Façons de gagner sa vie avec le code"