JavaScript /.JS / jQuery

Image

JavaScript est un langage de programmation (♦ voir DEF.plus particulièrement de scripts destinés aux pages web interactives et  App. Web, créé en 1995.

JavaScript est un langage orienté objet, dît à prototype.

Exemples de codes

Nous commencons par des codes très simples. Plus vous progresserez, page après page, plus les scripts seront sophistiqués.

C 0001 - Bonjour tout le monde !

Dîtes bonjour...

<!DOCTYPE html>
<html>
<body>
<h2>Exemple</h2>
<p id="example1">JavaScript peut changer du contenu</p>
<button type="button" onclick='document.getElementById("example1").innerHTML = "Bonjour tout le monde !";'>Cliquer sur le bouton !</button>
</body>
</html>

ou directement sur la console

console.log("Bonjour tout le monde !");

Reproduisez ce code, en choisissant l'un des compilateurs (♦ voir DEF.) ci-dessous (ne copiez-collez pas ! Ce serait trop facile). Tous ont la même fonction, choisissez-en un en tenant simplement compte de vos préférences.

Lorsque vous copiez votre code, remplacez le code existant (par défaut) figurant déjà dans le compilateur, par le vôtre.

Attention ! Pour certains de ces compilateurs, vous devez vous-même choisir le langage de programmation, dans le menu qui vous est alors proposé. Bien évidemment, n'oubliez pas de cliquer sur RUN !

C 0002 - Liste

Créez une liste...

<!DOCTYPE html>
<html>
<body>
<h2>Méthodes de tableau en JavaScript</h2>
<h2>join()</h2>
<p>La méthode join() joint les éléments du tableau dans une chaîne.</p>
<p>Dans cet exemple, " / " agit comme séparateur entre les éléments présentés :</p>
<p id="demo"></p>
<script>const peintres = ["Vermeer", "Picasso", "Leonardo da Vinci", "Vincent van Gogh"];document.getElementById("demo").innerHTML = peintres.join(" / ");</script>
</body>
</html>

Reproduisez ce code, en choisissant l'un des compilateurs (♦ voir DEF.) ci-dessous (ne copiez-collez pas ! Ce serait trop facile). Tous ont la même fonction, choisissez-en un en tenant simplement compte de vos préférences.

Lorsque vous copiez votre code, remplacez le code existant (par défaut) figurant déjà dans le compilateur, par le vôtre.

Attention ! Pour certains de ces compilateurs, vous devez vous-même choisir le langage de programmation, dans le menu qui vous est alors proposé. Bien évidemment, n'oubliez pas de cliquer sur RUN !

C 0003 - POPUP

Afficher le résultat d'un calcul dans une POPUP...

<!DOCTYPE html>
<html>
<body>
<h2>POPUP</h2>
<p>Exemple</p>
<script>window.alert(189 + 3454);
</script>
</body>
</html>

Reproduisez ce code, en choisissant l'un des compilateurs (♦ voir DEF.) ci-dessous (ne copiez-collez pas ! Ce serait trop facile). Tous ont la même fonction, choisissez-en un en tenant simplement compte de vos préférences.

Lorsque vous copiez votre code, remplacez le code existant (par défaut) figurant déjà dans le compilateur, par le vôtre.

Attention ! Pour certains de ces compilateurs, vous devez vous-même choisir le langage de programmation, dans le menu qui vous est alors proposé. Bien évidemment, n'oubliez pas de cliquer sur RUN !

C 0004 - Comparer deux données

Entrer une donnée et la comparez avec une valeur conditionnelle...

<!DOCTYPE html>
<html>
<body>
<h2>Comparer deux données pour votre départ à la retraite</h2>
<p>Tapez votre âge :</p>
<input id="age" value="67" />
<button onclick="myFunction()">Comparez</button>
<p id="demo"></p>
<script>function myFunction() {  let age = document.getElementById("age").value;  let see = (age < 67) ? "Trop jeune ":"Assez âgé ";  document.getElementById("demo").innerHTML = see + "pour partir à la retraite.";}</script></body>
</html>

Reproduisez ce code, en choisissant l'un des compilateurs (♦ voir DEF.) ci-dessous (ne copiez-collez pas ! Ce serait trop facile). Tous ont la même fonction, choisissez-en un en tenant simplement compte de vos préférences.

Lorsque vous copiez votre code, remplacez le code existant (par défaut) figurant déjà dans le compilateur, par le vôtre.

Attention ! Pour certains de ces compilateurs, vous devez vous-même choisir le langage de programmation, dans le menu qui vous est alors proposé. Bien évidemment, n'oubliez pas de cliquer sur RUN !

Info+

Origine
» Date de création : 1995
* Créé par Brendan Eich
* Développé et suivi par ECMAScript, Netscape Communications Corporation, Mozilla Foundation

* Influencé par Java, C++, PERL et Python
* Multiplateforme

Cas pratiques

Afin de vous entraîner, nous ajoutons chaque semaine dans cette section des petits programmes pour vous maintenir à niveau.

CAS 1

NIVEAU BASE

Afficher une liste de peintres connus

Ce petit programme vous permettra d'afficher selon un ordre préétabli, une liste de peintres dans une POPUP.

ESSAYEZ

CAS 2

NIVEAU INTERMÉDIAIRE

Déterminer un processus de sélection

Ce petit kit vous permettra de créer un formulaire d'autorisation, établi en fonction de 4 critères précis.

ESSAYEZ

CAS 3

NIVEAU EXPERT

Développer un module pédagogique pour un contrôle des connaissances

Concevoir et développer un module permettant de tester des connaissances en Art ou en Sciences humaines.

ESSAYEZ
2021 (C) Fond of Code tm (marque déposée) - Reflex001 / Diego Piccini (da Todi).
Tous droits réservés. Contenu éditorial protégé (www.lewebethique.com).

À propos...

À propos...
Reflex001

Programmation
Développement Web

Rappels

Rappels

Légal/Support

Légal/Support
Image