[[{"text":"

$\"Download-World-Wide-Web-PNG-Image\"$

Le \"World Wide Web\", plus communément appelé \"Web\" a été développé au CERN (Conseil Européen pour la Recherche Nucléaire) par le Britannique Sir Timothy John Berners-Lee et le Belge Robert Cailliau au début des années 90. À cette époque les principaux centres de recherche mondiaux étaient déjà connectés les uns aux autres, mais pour faciliter les échanges d'information Tim Berners-Lee met au point le système hypertexte. Le système hypertexte permet, à partir d'un document, de consulter d'autres documents en cliquant sur des mots clés. Ces mots \"cliquables\" sont appelés hyperliens et sont souvent soulignés et en bleu. Ces hyperliens sont plutôt connus aujourd'hui sous le simple terme de \"liens\".

$\"première$

première page web, les hyperliens sont soulignés et en bleu

Cette première page web est toujours consultable à l'adresse suivante : http://info.cern.ch/hypertext/WWW/TheProject.html

"}],[{"text":"

Tim Berners-Lee développe le premier navigateur web (logiciel permettant de lire des pages contenant des hypertextes), il l'appelle simplement \"WorldWideWeb\". Il faudra attendre 1993 et l'arrivée du navigateur web \"NCSA Mosaic\" pour que le web commence à devenir populaire en dehors du petit monde de la recherche.

Techniquement le web se base sur trois choses : le protocole HTTP (HyperText Transfert Protocol), les URL (Uniform Resource Locator) et le langage de description HTML (HyperText Markup Language). Nous aurons, très prochainement l'occasion de revenir sur ces trois éléments.

Une chose très importante à bien avoir à l'esprit : beaucoup de personnes confondent \"web\" et \"internet\". Même si le \"web\" \"s'appuie\" sur internet, les deux choses n'ont rien à voir puisqu'\"internet\" est un \"réseau de réseau\" s'appuyant sur le protocole IP alors que, comme nous venons de le voir, le web est la combinaison de trois technologies : HTTP, URL et HTML. D'ailleurs on trouve autre chose que le \"web\" sur internet, par exemple, les emails avec le protocole SMTP (Simple Mail Transfert Protocol) et les transferts de fichiers avec le protocole FTP (File Transfert Protocol).

"}],[{"text":"

Dans la barre d'adresse de votre navigateur web vous trouverez, quand vous visitez un site, des choses du genre : \"http://www.ac-grenoble.fr/disciplines/informatiquelycee/index.html\". Nous aurons l'occasion de reparler du \"http\" et du \"www.ac-grenoble.fr\" plus tard. La partie \"/disciplines/informatiquelycee/index.html\" s'appelle une URL.

Une URL (Uniform Resource Locator) permet d'identifier une ressource (par exemple un fichier) sur un réseau.

L'URL indique « l'endroit » où se trouve une ressource sur un ordinateur. Un fichier peut se trouver dans un dossier qui peut lui-même se trouver dans un autre dossier... On parle d'une structure en arborescence, car elle ressemble à un arbre à l'envers :

$\"arbo\"$

structure en arborescence

Comme vous pouvez le constater, la base de l'arbre s'appelle la racine de l'arborescence et se représente par un /

","title":"L'url"}],[{"text":"

Pour indiquer la position d'un fichier (ou d'un dossier) dans l'arborescence, il existe 2 méthodes : indiquer un chemin absolu ou indiquer un chemin relatif. Le chemin absolu doit indiquer « le chemin » depuis la racine. Par exemple l'URL du fichier fichier3.jpg sera : /dossier2/dossier3/fichier3.jpg

Remarquez que nous démarrons bien de la racine / (attention les symboles de séparation sont aussi des /)

Imaginons maintenant que le fichier fichier1.css fasse appel au fichier fichier3.jpg (comme un fichier HTML peut faire appel à un fichier CSS). Il est possible d'indiquer le chemin non pas depuis la racine, mais depuis le dossier (dossier2) qui accueille le fichier1.css, nous parlerons alors de chemin relatif :

dossier3/fichier3.jpg

Remarquez l’absence du / au début du chemin (c'est cela qui nous permettra de distinguer un chemin relatif et un chemin absolu).

Imaginons maintenant que nous désirions indiquer le chemin relatif du fichier fichier1.css depuis l'intérieur du dossier dossier4.

Comment faire ?

Il faut « remonter » d'un « niveau » dans l'arborescence pour se retrouver dans le dossier dossier2 et ainsi pouvoir repartir vers la bonne « branche ». Pour ce faire il faut utiliser 2 points : ..

../dossier2/fichier1.css

Il est tout à fait possible de remonter de plusieurs « crans » : ../../ depuis le dossier dossier4 permet de « retourner » à la racine.

","title":"Chemin absolu ou chemin relatif ?"}],[{"text":"

Exercice :

Soit la structure en arborescence suivante:

$\"arbo\"$

Le contenu du fichier \"fichier7.odp\" utilise le fichier \"fichier5.svg\". Donnez le chemin relatif qui devra ẽtre renseigner dans le fichier \"fichier7.odp\" afin d'atteindre le fichier \"fichier5.svg\".

Donnez le chemin absolu permettant d'atteindre le fichier \"fichier6.html\".

"},{"edit":"

Vos réponses ici.

"}],[{"text":"Remarque : la façon d'écrire les chemins (avec des slash (/) comme séparateurs) est propre aux systèmes dits « UNIX », par exemple GNU/Linux ou encore Mac OS. Sous Windows, ce n'est pas le slash qui est utilisé, mais l'antislash (\\). Pour ce qui nous concerne ici, les chemins réseau (et donc le web), pas de problème, c'est le slash qui est utilisé."}],[{"text":"

$\"Vector$

Deux ordinateurs en réseau peuvent s'échanger des données. Dans la plupart des cas ces échanges ne sont pas \"symétriques\" : en effet un ordinateur A va souvent se contenter de demander des ressources (fichiers contenant du texte, photos, vidéos, sons...) à un ordinateur B. L'ordinateur B va lui se contenter de fournir des ressources à tous les ordinateurs qui lui en feront la demande. On dira alors que l'ordinateur A (celui qui demande des ressources) est un client alors que l'ordinateur B (celui qui fournit les ressources) sera qualifié de serveur.

En tapant «http://www.google.fr», votre machine va chercher à entrer en communication avec le serveur portant le nom «www.google.fr» (en faite c'est plus compliqué, pour les puristes nous dirons donc que la communication va être établie avec le serveur www du domaine google.fr, mais bon, pour la suite nous pourrons nous contenter de l'explication « simplifiée »).

Une fois la liaison établie, le client et le serveur vont échanger des informations en dialoguant :

client : bonjour www.google.fr (ou bonjour www se trouvant dans le domaine google.fr), pourrais-tu m'envoyer le fichier index.html

serveur : OK client, voici le fichier index.html

client : je constate que des images, du code css sont utilisés, peux-tu me les envoyer

serveur : OK, les voici

Évidemment ce dialogue est très imagé, mais il porte tout de même une part de « vérité ».

Sur internet, ce modèle client/serveur domine assez largement, même s'il existe des cas où un ordinateur pourra jouer tour à tour le rôle de client et le rôle de serveur, très souvent, des ordinateurs (les clients) passeront leur temps à demander des ressources à d'autres ordinateurs (les serveurs) . Par exemple, comme expliqué dans l'exemple ci-dessus on retrouve cet échange client/serveur à chaque fois que l'on visite une page web. Il y a de fortes chances pour que votre ordinateur personnel joue quasi exclusivement le rôle de client (sauf si vous êtes un adepte du \"peer to peer\").

N'importe quel type d'ordinateur peut jouer le rôle de serveur, mais dans le monde professionnel les serveurs sont des machines spécialisées conçues pour fonctionner 24h sur 24h. Ils peuvent aussi avoir une grosse capacité de stockage afin de stocker un grand nombre de ressources (vidéos, sons,...).

","title":"Client / Serveur"}],[{"text":"

Afin assurer une continuité de service, dans les sociétés, plusieurs serveurs assurent exactement le même rôle (on parle de redondance). Vous vous doutez bien que Google ne possède pas qu'un seul serveur, en effet, en moyenne, chaque seconde, c'est environ 65000 clients qui se connectent aux serveurs du moteur de recherche de Google. Aucun serveur, même extrêmement performant, ne serait capable de répondre à toutes ces requêtes. Google, Amazon ou encore Facebook possèdent un très grand nombre de serveurs afin de pouvoir satisfaire les demandes des utilisateurs en permanence. Ces entreprises possèdent d'immenses salles contenant chacune des centaines ou des milliers de serveurs (ces serveurs sont rangés dans des armoires appelées \"baie serveur\").

$\"CERN$

salle serveur

Souvent les serveurs sont spécialisés dans certaines tâches, par exemple, les serveurs qui envoient aux clients des pages au format HTML sont appelés \"serveur web\".

Il y a quelques années, le web était dit « statique » : le concepteur de site web écrivait son code HTML et ce code était simplement envoyé par le serveur web au client. Les personnes qui consultaient le site avaient toutes le droit à la même page, le web était purement « consultatif » ou statique.

"}],[{"text":"

Les choses ont ensuite évolué : les serveurs sont aujourd'hui capables de générer eux-mêmes du code HTML. Les résultats qui s'afficheront à l'écran dépendront donc des demandes effectuées par l'utilisateur du site : le web est devenu dynamique.

$\"frontend.png$ Différents langages de programmation peuvent être utilisés « côté serveur » afin de permettre au serveur de générer lui-même le code HTML à envoyer. Le plus utilisé encore aujourd'hui se nomme PHP. D'autres langages sont utilisables côté serveur (pour permettre la génération dynamique de code HTML) : Java, Python, nodejs...

","title":"Pages web dynamiques"}],[{"text":"

Le lien ci-dessous renvoie la température d'une salle :

http://sciencesappliquees.com/templates/php/temp.php

Réaliser une page html qui affiche la température dans un div toutes les secondes.

Aide :

Utiliser innerHTML pour mettre la valeur de la température dans le div;
Utiliser la fonction XMLHttpRequest() avec la script ci-dessous pour récupérer la température 1 fois sur le serveur:

<script type=\"text/javascript\">
  //declaration de l'objet pour la requete
  var maRequete = new XMLHttpRequest();
  //l'adresse email du serveur 
  var url = \"http://sciencesappliquees.com/templates/php/temp.php\";
 
  //gestion de la reponse du serveur
  maRequete.onload = function() {
     //reponse du serveur
     alert(this.responseText); //Affiche la reponse du seveur dans une fenêtre \"alert\"

  };//fin de la fonction reponse (get ou post, adresse , asynchrone) 

   //Choisir le type de requete
   maRequete.open(\"GET\", url, true);
   //envoyer la requete au serveur
   maRequete.send();
 </script>

Essayez ce code. Expliquez, en détail, ce qu'il fait.","title":"Les requête entre le serveur et le client"},{"edit":"

Commentez ici.

"},{"htm":"","css":"","js":""}],[{"text":"

Utiliser la fonction XMLHttpRequest() avec la script ci-dessous pour récupérer la température toutes les 2 secondes sur le serveur:

<script>

function lancerRequete(){
   var maRequete = null; //initialiser l'objet
   
   //déclare l'objet requete
   if(window.XMLHttpRequest){
      maRequete = new XMLHttpRequest();
   }
   
   //url du serveur
   var url = \"http://sciencesappliquees.com/templates/php/temp.php\";
 
   //Choisir le type de requete
   maRequete.open(\"GET\", url, true);

//gestion de la reponse du serveur
   maRequete.onreadystatechange = function(){
     if(maRequete.readyState == 4){
        //affiche la réponse du serveur
        alert(maRequete.responseText);

     }
   }

   //envoyer la requete au serveur
   maRequete.send();
 
   //relance la fonction au bout de 2 secondes
   setTimeout('lancerRequete()', 2000);
 }
 //lance la fonction 
 lancerRequete();
</script>

Faire valider votre travail par le professeur.

"},{"edit":"

Commentez ici.

"},{"htm":"","css":"","js":""}],[{"text":"

A l'aide de la bibliothèque RGraph, afficher la température dans une jauge toutes les secondes.

Aide :

Il faut ajouter dans le body de la page html une balise canvas avec l'id \"monCanvas\" pour afficher la jauge à l'intérieur :

<canvas id=\"monCanvas\" width=\"100\" height=\"400\">
 [No canvas support]
</canvas>

Pour utiliser RGraph, il faut importer les librairies suivantes :

Pour créer l'objet jauge, vous devez utilisez le script ci-dessous :

<script type=\"text/javascript\">
 var thermometre = new RGraph.Thermometer({
   id: 'monCanvas',
   min: 0,
   max: 30,
   value: 20.3,
   options: {
   }
   }).draw();

</script>

Pour mettre à jour la valeur de la jauge, vous devez utiliser les instructions suivantes :

thermometre.value = laNouvelleValeur;
RGraph.Redraw();

Faire valider votre travail par le professeur.

","title":"La requête dans une Jauge"},{"edit":"

Commentez ici.

"},{"htm":"","css":"","js":""}],[{"text":"

Nous avons 2 \"input text\" sur une page html :

<label>Température</label><input type=\"text\" name=\"temp\" id=\"temp\" value=\"19\"><label>°C</label><br/>

<label>humidité</label><input type=\"text\" name=\"humi\" id=\"humi\" value=\"45\"><label>%</label>

Nous souhaitons envoyer leur contenu, au serveur ci-dessous, par la méthode Get.

http://sciencesappliquees.com/templates/php/metGet.php

Réaliser le programme.

Aide :

Pour la méthode Get, l'url doit être sous la forme : adresseServeur?parametre1=valeur1&parametre2=valeur2
Pour récupérer la valeur d'un \"input text\", il faut utiliser l'instruction document.getElementById(\"idDuDiv\").value

Faire valider votre travail par le professeur.

","title":"La requête Get"},{"edit":"

Commentez ici.

"},{"htm":"","css":"","js":""}],[{"text":"

Nous avons 2 \"input text\" sur une page html :

<label>Température</label><input type=\"text\" name=\"temp\" id=\"temp\" value=\"19\"><label>°C</label><br/>

<label>humidité</label><input type=\"text\" name=\"humi\" id=\"humi\" value=\"45\"><label>%</label>

Nous souhaitons envoyer leur contenu, au serveur ci-dessous, par la méthode Post.

http://sciencesappliquees.com/templates/php/metPost.php

Réaliser le programme.

Aide :

Utiliser la fonction XMLHttpRequest() avec la script ci-dessous pour récupérer la température 1 fois sur le serveur:

<script>

   //déclaration de l'objet contenant les données à envoyer.
   var data = \"parametre1=valeur1&parametre2=valeur2\";

   //declaration de l'objet pour la requete   
   var maRequete = new XMLHttpRequest();

   //url du serveur
   var url = \"adresse de la page\";

//gestion de la reponse du serveur
   maRequete.onreadystatechange = function(){
       if(maRequete.readyState == 4){
          //affiche la réponse du serveur
          alert(maRequete.responseText);
       }
   }

    //Choisir le type de requete
    maRequete.open(\"POST\", url, true);

    //Entête de la requete pour la méthode POST
    maRequete.setRequestHeader(\"Content-Type\", \"application/x-www-form-urlencoded\");

   //envoyer la requete au serveur
   maRequete.send(data);

</script>

Faire valider votre travail par le professeur.

","title":"La requête Post"},{"edit":"

Commentez ici.

"},{"htm":"","css":"","js":""}],[{"text":"

Donner une définition du JSON.

Le serveur ci-dessous envoie les datas au format JSON.

http://sciencesappliquees.com/templates/php/json.php

Elles sont sous la forme suivante :

{
\"temp\":19.07,
\"humi\":27,
\"led1\":\"OFF\"
}

Réaliser une page html qui affiche les 3 grandeurs dans 3 div toutes les secondes.

Aide :

Pour convertir la \"responseText\" en JSON, il faut utiliser l'instruction suivante :

var data = JSON.parse(maRequete.responseText);

Pour récupérer la valeur d'une grandeur d'un JSON, par exemple \"temp\", il faut utiliser : data.temp

Faire valider votre travail par le professeur.

","title":"Les datas au format JSON"},{"edit":"

Commentez ici.

"},{"htm":"","css":"","js":""}],[{"text":"

Revenons sur l'adresse qui s'affiche dans la barre d'adresse d'un navigateur web et plus précisément sur le début de cette adresse c'est-à-dire le \"http\"

Selon les cas cette adresse commencera par http ou https (nous verrons ce deuxième cas à la fin de cette activité).

Le protocole (un protocole est ensemble de règles qui permettent à 2 ordinateurs de communiquer ensemble) HTTP (HyperText Transfert Protocol) va permettre au client d'effectuer des requêtes à destination d'un serveur web. En retour, le serveur web va envoyer une réponse.

Voici une version simplifiée de la composition d'une requête HTTP (client vers serveur) :

la méthode employée pour effectuer la requête
l'URL de la ressource
la version du protocole utilisé par le client (souvent HTTP 1.1)
le navigateur employé (Firefox, Chrome) et sa version
le type du document demandé (par exemple HTML)
...

Certaines de ces lignes sont optionnelles.

","title":"Http"}],[{"text":"

Voici un exemple de requête HTTP :

\nGET /mondossier/monFichier.html HTTP/1.1\nUser-Agent : Mozilla/5.0\nAccept : text/html\n\t\t\t

Nous avons ici plusieurs informations :

\"GET\" est la méthode employée (voir ci-dessous)
\"/mondossier/monFichier.html\" correspond l'URL de la ressource demandée
\"HTTP/1.1\" : la version du protocole est la 1.1
\"Mozilla/5.0\" : le navigateur web employé est Firefox de la société Mozilla
\"text/html\" : le client s'attend à recevoir du HTML

Revenons sur la méthode employée :

Une requête HTTP utilise une méthode (c'est une commande qui demande au serveur d'effectuer une certaine action). Voici la liste des méthodes disponibles :

GET, HEAD, POST, OPTIONS, CONNECT, TRACE, PUT, PATCH, DELETE

Détaillons 4 de ces méthodes :

GET : C'est la méthode la plus courante pour demander une ressource. Elle est sans effet sur la ressource.
POST : Cette méthode est utilisée pour soumettre des données en vue d'un traitement (côté serveur). Typiquement c'est la méthode employée lorsque l'on envoie au serveur les données issues d'un formulaire.
DELETE : Cette méthode permet de supprimer une ressource sur le serveur.
PUT : Cette méthode permet de modifier une ressource sur le serveur

"}],[{"text":"

Une fois la requête reçue, le serveur va renvoyer une réponse, voici un exemple de réponse du serveur :

\nHTTP/1.1 200 OK\nDate: Thu, 15 feb 2019 12:02:32 GMT\nServer: Apache/2.0.54 (Debian GNU/Linux) DAV/2 SVN/1.1.4\nConnection: close\nTransfer-Encoding: chunked\nContent-Type: text/html; charset=ISO-8859-1\n<!doctype html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"utf-8\">\n<title>Voici mon site</title>\n</head>\n<body>\n <h1>Hello World! Ceci est un titre</h1>\n<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>\n</body>\n</html>\n\t\t\t

Nous n'allons pas détailler cette réponse, voici quelques explications sur les éléments qui nous seront indispensables par la suite :

Commençons par la fin : le serveur renvoie du code HTML, une fois ce code reçu par le client, il est interprété par le navigateur qui affiche le résultat à l'écran. Cette partie correspond au corps de la réponse.

La 1re ligne se nomme la ligne de statut :

HTTP/1.1 : version de HTTP utilisé par le serveur
200 : code indiquant que le document recherché par le client a bien été trouvé par le serveur. Il existe d'autres codes dont un que vous connaissez peut-être déjà : le code 404 (qui signifie «Le document recherché n'a pu être trouvé»).

Les 5 lignes suivantes constituent l'en-tête de la réponse, une ligne nous intéresse plus particulièrement :

\nServer: Apache/2.0.54 (Debian GNU/Linux) DAV/2 SVN/1.1.4\n\t\t\t

Le serveur web qui a fourni la réponse http ci-dessus a comme système d'exploitation une distribution GNU/Linux nommée \"Debian\" (pour en savoir plus sur GNU/Linux, n'hésitez pas à faire vos propres recherches). \"Apache\" est le coeur du serveur web puisque c'est ce logiciel qui va gérer les requêtes http (recevoir les requêtes http en provenance des clients et renvoyer les réponses http). Il existe d'autres logiciels capables de gérer les requêtes http (nginx, lighttpd...) mais, aux dernières nouvelles, Apache est toujours le plus populaire puisqu'il est installé sur environ la moitié des serveurs web mondiaux !

","title":"Réponse du serveur à une requête HTTP"}],[{"text":"

Le \"HTTPS\" est la version \"sécurisée\" du protocole HTTP. Par \"sécurisé\" en entend que les données sont chiffrées avant d'être transmises sur le réseau.

Voici les différentes étapes d'une communication client - serveur utilisant le protocole HTTPS :

le client demande au serveur une connexion sécurisée (en utilisant \"https\" à la place de \"http\" dans la barre d'adresse du navigateur web)
le serveur répond au client qu'il est OK pour l'établissement d'une connexion sécurisée. Afin de prouver au client qu'il est bien celui qu'il prétend être, le serveur fournit au client un certificat prouvant son \"identité\". En effet, il existe des attaques dites \"man in the middle\", où un serveur \"pirate\" essaye de se faire passer, par exemple, pour le serveur d'une banque : le client, pensant être en communication avec le serveur de sa banque, va saisir son identifiant et son mot de passe, identifiant et mot de passe qui seront récupérés par le serveur pirate. Afin d'éviter ce genre d'attaque, des organismes délivrent donc des certificats prouvant l'identité des sites qui proposent des connexions \"https\".
à partir de ce moment-là, les échanges entre le client et le serveur seront chiffrés grâce à un système de \"clé publique - clé privée\" (nous n'aborderons pas ici le principe du chiffrement par \"clé publique - clé privée\"). Même si un pirate arrivait à intercepter les données circulant entre le client et le serveur, ces dernières ne lui seraient d'aucune utilité, car totalement incompréhensible à cause du chiffrement (seuls le client et le serveur sont aptes à déchiffrer ces données)

D'un point vu strictement pratique il est nécessaire de bien vérifier que le protocole est bien utilisé (l'adresse commence par \"https\") avant de transmettre des données sensibles (coordonnées bancaires...). Si ce n'est pas le cas, passez votre chemin, car toute personne qui interceptera les paquets de données sera en mesure de lire vos données sensibles.

","title":"HTTPS"}],[{"text":"Sources :

https://pixees.fr/informatiquelycee/n_site/nsi_prem.html

https://www.w3schools.com/

"}]]

Détails: Écrit par : Richard GAUTHIER; Création : 16 Octobre 2019; Mis à jour : 16 Octobre 2019; Clics : 1964

[[{"text":"

Si la vidéo ne fonctionne pas, allez sur ce lien :

https://youtu.be/QFCoCo99N88?list=PLM4ux8lqJm4BBvdE6IJRFhJo4ss9OauoD

"}],[{"quiz":780}],[{"text":"aa"},{"code":""}]]

Détails: Écrit par : Richard GAUTHIER; Création : 16 Octobre 2019; Mis à jour : 16 Octobre 2019; Clics : 1503

[[{"text":"

JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives. C'est un langage de type « orienté objet ».

Et quand on dit que le JavaScript est un langage de scripts, cela signifie qu'il s'agit d'un langage interprété (et non compilé)! Il est donc nécessaire de posséder un interpréteur pour faire fonctionner du code JavaScript. Cet interpréteur est inclus dans votre navigateur Web.

Le JavaScript est un langage dit client-side (« côté client » en français), c'est-à-dire que les scripts sont exécutés par le navigateur chez l'internaute (le client). Cela diffère des langages de scripts dits server-side (« côté serveur ») qui sont exécutés par le serveur Web. C'est le cas de langages comme le PHP.

Dans cette séquence, vous n'allez pas réellement apprendre à programmer en Javascript mais apprendre à comprendre la structure de petits programmes afin de pouvoir mettre en œuvre des programmes ou fonctions javascript créés par d'autres.

Pour toute recherche d'infos sur javascript (règles, fonctions, syntaxe, …) :https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference

et sur https://www.w3schools.com/js/default.asp

"},{"htm":"

\n \n

","css":"#divbt {\n text-align : center;\n}\n\n#bouton {\n margin : auto;\n background : blue;\n color : white;\n}\n\n\n#demo {\n text-align : center;\n\n} ","js":"function afficher() { \n document.querySelector(\"#demo\").innerHTML = Date();\n}"},{"edit":"Exécuter le code. En déduire le role du Html, du css et du javascript :

Ecrire ici

"}],[{"text":"

2.1. La balise « script »

Pour dire au code HTML5 qu'il va y avoir du javascript dans du html, on utilise la balise <script>

Voici un premier code qui va utiliser la fonction alert():

<!DOCTYPE html>
<html>
<head>
    <meta charset=\"utf-8\" />
    <title>premier programme!</title>
</head>

<body>

    <script>
          // Ceci est ma première instruction 
          alert('utilisation d une première fonction javascript!');
    </script>

</body>
</html>

a) Essayez ce premier code (copiez-le dans Netbeans, enregistrez-le sous le nom 'essai_js_1.html' et ouvrez-le avec le navigateur Google Chrome). Expliquez ce que fait ce code.

","title":"Découverte des structures , variables et de quelques fonctions"},{"htm":"","js":"alert(\"World\");"},{"edit":"b) Par quel élément de ponctuation la fonction Javascript du code est-elle terminée ?

Ecrire ici

"},{"edit":"

c) Comment écrit-on les commentaires dans notre script?

Ecrire ici

"}],[{"text":"Python et javascript sont les langages les plus populaire dans le monde de la programmation.

Source : https://www.silicon.fr/developpeurs-10-langages-programmation-populaires-257097.html

La syntaxe de python et javascript sont différentes.

Je vous ai mis vi-dessous le même programme de calcul des solutions d'un polynome du second degré.

Exécuter les 2 programmes et les comparer.

","title":"Comparer python et javascript "},{"code":"def discriminant(a,b,c) :

print(a,\"x^2 + \",b,\"x+\",c,\" = 0\")

delta = b**2 - 4 * a * c

print(\"delta=\", delta)

if delta < 0 :

print( \"Pas de solution\")

elif delta == 0 :

x = - b / (2*a)

print( \"1 solution ;\")

print( \"x = \" , x)

else :

x1 = (- b + math.sqrt(delta)) / (2*a)

x2 = (- b - math.sqrt(delta)) / (2*a)

print( \"2 solutions ;\")

print( \"x1 = \" , x1)

print( \"x2 = \" , x2)

#Calcul des solutions de l'équation 2x^2 + 4x + 1

discriminant(2,4,1)

"},{"htm":"

","js":"function discriminant(a,b,c) {\n   document.querySelector(\"#discri\").innerHTML = a + \"x^2 + \" + b +\"x+\"+c+\" = 0
\";\n   var delta = b*b - 4 * a * c;\n\n   document.querySelector(\"#discri\").innerHTML += \"delta=\" + delta +\"
\";\n if (delta < 0)\n   document.querySelector(\"#discri\").innerHTML += \"Pas de solution
\";\n else if (delta == 0) { \n        var x = - b / (2*a) ;\n        document.querySelector(\"#discri\").innerHTML += \"1 solution ;
\";\n document.querySelector(\"#discri\").innerHTML += \"x = \" + x + \"
\";\n }//fin else if\n else {\n        var x1 = (- b + Math.sqrt(delta)) / (2*a);\n        var x2 = (- b - Math.sqrt(delta)) / (2*a);\n        document.querySelector(\"#discri\").innerHTML += \"2 solutions :
\";\n        document.querySelector(\"#discri\").innerHTML += \"x1 = \" + x1 +\"
\";\n        document.querySelector(\"#discri\").innerHTML += \"x2 = \" + x2 ;\n }//fin else \n}//fin fct discri\n\n\n//Calcul des solutions de l'équation 2x^2 + 4x + 1\n\ndiscriminant(2,4,1);\n\n"},{"edit":"

Comparer ici les 2 langages.

"}],[{"text":"aa"},{"htm":"","css":"","js":""}],[{"text":"Tester le code ci-dessous.

Que se passe-t-il ? Où est l'erreur ?

","title":"Déboguer Javascript"},{"edit":"

Ecrire ici.

"},{"htm":"","js":"alert('utilisation d'une première fonction javascript!');"},{"text":"

Tous les navigateurs internet possèdent un outil permettant de chercher les erreurs (bugs) des codes javascript.

Les bugs syntaxiques sont les plus simples à résoudre, car l'interpréteur JavaScript vous signalera généralement l'endroit où l'erreur est apparue mais la description de l'erreur n'est pas toujours juste !

Dans Chrome : allez dans le menu « personnaliser et contrôler google chrome » puis « Plus d'outils » puis « outils de développement ». Une fenêtre s'ouvre en bas de votre navigateur (et si vous relancez la page un code erreur doit apparaître dans l'onglet « console ») :

Si vous cliquez à droite, une fenêtre s'ouvre avec la ligne où se situe l'erreur de syntaxe.

"}],[{"text":"

Déclarer une variable

Déclarer une variable consiste à lui réserver un espace de stockage en mémoire. Une fois la variable déclarée, vous pouvez commencer à y stocker des données.

Pour déclarer une variable, il vous faut d'abord lui trouver un nom. Il est important de préciser que le nom d'une variable ne peut contenir que des caractères alphanumériques, autrement dit les lettres de A à Z et les chiffres de 0 à 9 ; l'underscore (_) et le dollar ($) sont aussi acceptés. Le nom de la variable ne peut pas commencer par un chiffre et ne peut pas être constitué uniquement de mots-clés utilisés par le JavaScript. Par exemple, vous ne pouvez pas créer une variable nommée var car vous allez constater que ce mot-clé est déjà utilisé, en revanche vous pouvez créer une variable nommée var_.

Pour déclarer une variable, il vous suffit d'écrire la ligne suivante :
var ma_variable;

Le JavaScript étant un langage sensible à la casse, faites bien attention à ne pas vous tromper sur les majuscules et minuscules utilisées (ma_variable ≠ ma_Variable) .

Pour affecter une valeur à la variable (par exemple le chiffre 2) c'est simple :
ma_variable=2 ;

On peur aussi le simplifier en une seule ligne de code (déclaration et affectation) :
var ma_variable=2 ;

De même, vous pouvez déclarer et assigner plusieurs variables sur une seule et même ligne :
var ma_variable1, ma_variable2 = 4, toto;

Vous remarquerez qu'il n'y a qu'un seul « var » et que les variables sont alors séparées par des virgules

Le JavaScript est un langage typé dynamiquement. Cela veut dire, généralement, que toute déclaration de variable se fait avec le mot-clé « var » sans distinction du contenu (entier, texte, ...). Ainsi on peut y mettre du texte en premier lieu puis l'effacer et y mettre un nombre quel qu'il soit, et ce, sans contraintes.

Quelques exemples de déclaration de variables sous forme de chaînes de caractères :
var text1 = \"Mon premier texte\"; // Avec des guillemets
var text2 = 'Mon deuxième texte'; // Avec des apostrophes

","title":"Les variables"},{"htm":"","js":""}],[{"text":"

Un premier exemple de programme :


<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=\"utf-8\" /> 
    <title>premier programme!</title> 
</head> 

<body> 
 
    <script> 
          var age=18, age2=21, age_total; 
      age_total = age + age2; 
      var message = 'l\\'age total est: ' + age_total; 
              alert(message); 
    </script> 

</body> 
</html>

"},{"htm":""},{"edit":"

Essayez ce code. Expliquez, en détail, ce qu'il fait et comment il le fait.

Ecrire ici.

"}],[{"text":"

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=\"utf-8\" /> 
    <title>premier programme!</title> 
</head> 

<body> 

    <script> 
          var age='18', age2='21', age_total; 
      age_total = age + age2; 
      var message = 'l\\'age total est: ' + age_total; 
          alert(message); 
    </script> 

</body> 
</html>

Essayez ce nouveau code. Expliquez, en détail, ce qu'il fait et comment il le fait (différence avec le précédent) Quel est le problème de ce deuxième code ?

","title":"Un deuxième exemple de programme "},{"edit":"

Ecrire ici.

"},{"htm":"","js":""},{"edit":"

Essayez de résoudre le problème (on ne change pas le type de variables) en utilisant la fonction « parseInt() » (les infos pour utiliser la fonction \"parseInt()\" sont ici : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/ )

"}],[{"text":"

les structures conditionnelles : la structure if

Soit le code suivant :

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=\"utf-8\" /> 
    <title>premier programme!</title> 
</head> 

<body> 

    <script> 
          if (2 < 8 && 8 >= 4) { 
             alert('La condition est bien vérifiée.'); 
          } 

          if (2 > 8 || 8 <= 4) { 
              alert(\"La condition n'est pas vérifiée mais vous ne le saurez pas vu que ce code ne s'exécute pas.\"); 
          } 
    </script> 

</body> 
</html>

Complément : les opérateurs logiques sont: ET(&&) , OU (||) et PAS(!)

Essayez ce code. Expliquez, en détail, ce qu'il fait.

","title":"Les structures de tests"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

Dans l'exemple de code suivant, nous allons utiliser la fonction « confirm » qui demande de répondre à une question dont le résultat est oui ou non (en « booléen javascript » cela signifie que la fonction renvoie un entier signifiant « true » ou « false »).

Pour bien comprendre « true » et « false », essayez le programme suivant :

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=\"utf-8\" /> 
    <title>premier programme!</title> 
</head> 

<body> 

    <script> 
        if (true) { 
        alert('condition vérifiée'); 
        } 

        if (false) { 
        alert('condition non vérifiée'); 
        } 

    </script> 

</body> 
</html>

b) Essayez ce code. Expliquez, en détail, ce qu'il fait.

","title":"Les structures conditionnelles : la structure if … else"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"remplacez maintenant dans le code précédent « if (false) » par « if ( !false) »

Essayez et expliquez ce qui se passe maintenant.

","title":"les structures conditionnelles : la structure if … else"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

Soit le code suivant :

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=\"utf-8\" /> 
    <title>premier programme!</title> 
</head> 

<body> 

    <script> 
        if (confirm('Pour accéder à ce site vous devez avoir 18 ans ou plus, cliquez sur \"OK\" si c\\'est le cas.')) { 
        alert('Vous allez être redirigé vers le site.'); 
        } 

        else { 
        alert(\"Désolé, vous n'avez pas accès à ce site.\"); 
        } 
    </script> 

</body> 
</html>

Essayez ce code. Expliquez, en détail, ce qu'il fait.

","title":"Les structures conditionnelles : la structure if … else"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

les structures conditionnelles : la structure if … else if pour dire « sinon si »

Complément : la fonction prompt() pose une question et renvoie la réponse.

Soit le code suivant :

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=\"utf-8\" /> 
    <title>premier programme!</title> 
</head> 

<body> 

    <script> 
       var etage = parseInt(prompt(\"Entrez l'étage où l'ascenseur doit se rendre (de -2 à 30) :\")); 

       if (etage == 0) { 

            alert('Vous vous trouvez déjà au rez-de-chaussée.'); 

       } else if (-2 <= etage && etage <= 30) { 

                alert(\"Direction l'étage n°\" + etage + ' !'); 
           } else { 
                alert(\"L'étage spécifié n'existe pas.\"); 
               } 

    </script> 

</body> 
</html>

e) Essayez ce code. Expliquez, en détail, ce qu'il fait.

","title":"les structures conditionnelles : la structure if … else if pour dire « sinon si »"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"Essayez de rentrer une lettre au lieu d'un chiffre. Le programme plante-t-il ?

Remarque : il existe aussi la structure Switch.

","title":"Exercice :"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

La boucle While (répéter Tant que)

Soit le code suivant :

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=\"utf-8\" /> 
    <title>premier programme!</title> 
</head> 

<body> 

    <script> 
    var number = 1; 

    while (number < 10) { 
        number++; 
    } 

    alert(number); 
    </script> 

</body> 
</html>

a) Essayez ce code. Expliquez, en détail, ce qu'il fait.

","title":"Les structures de boucles"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

Soit le code suivant :

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=\"utf-8\" /> 
    <title>premier programme!</title> 
</head> 

<body> 

    <script> 
    var prenoms = '', prenom_en_cours, 
     boucle_OK = true; 

    while (boucle_OK) { 
            prenom_en_cours = prompt('Entrez un prénom :'); 
  
            if (prenom_en_cours) {  // test si un prénom a été rentré 
            prenoms += prenom_en_cours + ' '; // Ajoute le nouveau prénom ainsi qu'une espace juste après 
            } else { 
                boucle_OK = false; // Aucun prénom n'a été entré, donc on fait en sorte d'invalider la condition 
                } 
    } 

    alert('prénoms rentrés: ' + prenoms); // Affiche les prénoms à la suite 
    </script> 

</body> 
</html>

Essayez ce code. Expliquez, en détail, ce qu'il fait notamment comment le programme sort de la boucle While.

","title":" "},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

Soit le code suivant :

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=\"utf-8\" /> 
    <title>premier programme!</title> 
</head> 

<body> 

    <script> 
    for (var iter = 0; iter < 5; iter++) { 
       alert('Itération n°' + iter); 
    } 
    </script> 

</body> 
</html>

Essayez ce code. Expliquez, en détail, ce qu'il fait.

","title":"La boucle For"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

Dans les chapitres précédents vous avez découvert quelques fonctions de javascript: alert(), prompt(), confirm() et parseInt(). En les utilisant, vous avez pu constater que chacune de ces fonctions avait pour but de mener à bien une action précise, reconnaissable par un nom explicite.
Mais on peut aussi créer nos propres fonctions :

Structure :
   function nom_de_la_fonction(arguments) {
        // Le code que la fonction va devoir exécuter
   }

Soit le code suivant :

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=\"utf-8\" /> 
    <title>premier programme!</title> 
</head> 

<body> 

    <script> 
    var res;     
    var nb = parseInt (prompt('Entrez un nombre:')); 

    function div_par_2(valeur) { 
            var resultat; 
        resultat=valeur/2; 
        return resultat; 
    } 


    if (nb){ 
        res = div_par_2(nb); 
        alert('le résultat est: ' + res); 
    } 
    else { 
        alert('il faut rentrer un nombre!'); 
    } 

    </script> 

</body> 
</html>

Essayez ce code. Expliquez, en détail, ce qu'il fait.

","title":"Les fonctions"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

Quelle est la fonction créée dans ce code précédent?

Quels arguments reçoit-elle ?

Que retourne-t-elle ?

","title":" "},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"Une variable déclarée dans une fonction est une variable locale (elle n'existe que dans la fonction). A l'inverse, une variable déclarée hors fonction est une variable globale. Il faut toujours bien faire attention à l'emplacement de la déclaration des variables (on les crée là où on en a besoin).

e) Dans le code précédent, quels sont les variables globales et les variables locales ?","title":"Variable locales/ variables globales"},{"edit":"

Commentez ici.

"}],[{"text":"

Il est possible, et même conseillé, d'écrire le code JavaScript dans un fichier externe, portant l'extension \".js\". Ce fichier est ensuite appelé depuis la page Web au moyen de l'élément <script> et de son attribut src qui contient l'URL du fichier .js.

Le code précédent devient :

le fichier « essai_js_1.html » :

<head> 
    <meta charset=\"utf-8\" /> 
    <title>premier programme!</title> 
</head> 

<body> 

    <script src=\"/mon_java.js\"> 
   </script> 

</body> 
</html>

et le fichier « mon_java.js » : (dans le même répertoire ici)

    var res;     
    var nb = parseInt (prompt('Entrez un nombre:')); 

    function div_par_2(valeur) { 
            var resultat; 
        resultat=valeur/2; 
        return resultat; 
    } 


    if (nb){ 
        res = div_par_2(nb); 
        alert('le résultat est: ' + res); 
    } 
    else { 
        alert('il faut rentrer un nombre!'); 
    }

Remarque : Positionner l'élément <script> :

La plupart des cours de JavaScript, et des exemples donnés un peu partout, montrent qu'il faut placer l'élément <script> au sein de l'élément <head> quand on l'utilise pour charger un fichier JavaScript. C'est correct, oui, mais il y a mieux !

","title":"Le javascript externe"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

Une page Web est lue par le navigateur de façon linéaire, c'est-à-dire qu'il lit d'abord le <head>, puis les éléments de <body> les uns à la suite des autres. Si vous appelez un fichier JavaScript dès le début du chargement de la page, le navigateur va donc charger ce fichier, et si ce dernier est volumineux, le chargement de la page s'en trouvera ralenti. C'est normal puisque le navigateur va charger le fichier avant de commencer à afficher le contenu de la page.

Pour pallier ce problème, il est conseillé de placer les éléments <script> juste avant la fermeture de l’élément <body>, comme ceci :

<!DOCTYPE html>
<html>
<head>
    <title>mon site!</title>
</head>

<body>
    <p>
    <!--
        Contenu de la page Web
    -->
    </p>

    <script>
        // Un peu de code JavaScript si besoin ...
    </script>

    <script src=\"/hello.js\"></script>

</body>
</html>

Il est à noter que certains navigateurs modernes chargent automatiquement les fichiers JavaScript en dernier, mais ce n'est pas toujours le cas. C'est pour cela qu'il vaut mieux s'en tenir à cette méthode.

","title":""},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

On va maintenant rentrer dans le vif du sujet, notamment la partie \"objet\" de javascript. Ce cours n'a pas la vocation de vous apprendre à programmer en javascript mais plutôt à intégrer des éléments javascript (en général créés par d'autre). Pour le faire il va quand même falloir comprendre comment ça fonctionne …. et ce n'est pas forcément facile !

1. Structure d'une page web du côté javascript

L'objet window

Avant de véritablement parler du document représentant notre page web, nous allons parler de l'objet window. L'objet window est ce qu'on appelle un objet global qui représente la fenêtre du navigateur. C'est à partir de cet objet que le JavaScript est exécuté.

Contrairement à ce qui a été dit jusqu'à maintenant, alert() n'est pas vraiment une fonction. Il s'agit en réalité d'une méthode (c'est comme ça que ça s'appelle dans un langage de programmation orienté \"objet\") appartenant à l'objet window. Mais l'objet window est dit implicite, c'est-à-dire qu'il n'y a généralement pas besoin de le spécifier. Ainsi, ces deux instructions produisent le même effet, à savoir ouvrir une boîte de dialogue :

alert('Hello world!'); // on a utilisé cette forme
window.alert('Hello world!'); // écriture complète

La structure DOM (Document Object Model)

L'objet document est un sous-objet de window, l'un des plus utilisés. Et pour cause, il représente la page Web et plus précisément la balise <html>. C'est grâce à cet élément-là que nous allons pouvoir accéder aux éléments HTML et les modifier. Voyons donc, dans la sous-partie suivante, comment naviguer dans le document.Comme il a été dit précédemment, le DOM pose comme concept que la page Web est vue comme un arbre, comme une hiérarchie d'éléments.

Soit la page web suivante :

<!doctype html>
<html>
    <head>
        <meta charset=\"utf-8\" />
        <title>Le titre de la page</title>
    </head>

    <body>
        <div id= \"monDiv1\">
            <p>Un peu de texte <a>et un lien</a></p>
        </div>
    </body>
</html>

On peut donc schématiser cette page Web simple comme ceci :

Remarque : on va utiliser des balises <div> pour les différents éléments composant le corps (body) de la page. Les éléments <div> vont avoir un nom donné par la structure suivante : <div id=\"nom du div\">. Ainsi, avec javascript, on va pouvoir modifier ces éléments <div> grâce à leur nom.

","title":"Des exemples d’utilisation dans une page web"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

L'accès aux éléments HTML via le DOM est assez simple. L'objet document possède trois méthodes principales : getElementById(), getElementsByTagName() et getElementsByName().

getElementById()

Cette méthode (cela s'appelle comme ça) permet d'accéder à un élément en connaissant son \"Id\" qui est simplement l'attribut id de l'élément. Cela fonctionne de cette manière :

<div id=\"monDiv1\">
    <p>Un peu de texte <a>et un lien</a></p>
</div>

<script>
    var objet_div = document.getElementById('monDiv1');
    alert(div);
</script>

Ainsi la variable objet_div contient l'objet <div> qui s'appelle \"monDiv1\"

Accéder aux éléments grâce aux technologies récentes

Ces dernières années, le JavaScript a beaucoup évolué pour faciliter le développement Web. Les deux méthodes que nous allons étudier sont récentes et ne sont pas supportées par les très vieilles versions des navigateurs, leur support commence à partir de la version 8 d'Internet Explorer, pour les autres navigateurs vous n'avez normalement pas de soucis à vous faire.

Ces deux méthodes sont querySelector() et querySelectorAll() et ont pour particularité de grandement simplifier la sélection d'éléments dans l'arbre DOM grâce à leur mode de fonctionnement. Ces deux méthodes prennent pour paramètre un seul argument : une chaîne de caractères !

Soit la page web suivante :

<!doctype html>
<html>
    <head>
        <meta charset=\"utf-8\" />
        <title>Le titre de la page</title>
    </head>

    <body>     

<div id=\"menu\">

    <div class=\"article\">
        <span>Élément 1</span>
        <span>Élément 2 : suite</span>
    </div>

    <div class=\"publicite\">
        <span>Élément 3</span>
        <span>Élément 4 : dernier élément</span>
    </div>

</div>

<div id=\"contenu\">
    <span>Introduction au contenu de la page...</span>
</div>

<script>
    var recherche1 = document.querySelector('#menu .article span');
    var recherche_tous = document.querySelectorAll('#menu .article span');
    alert(recherche1.innerHTML); // Affiche : \"Élément 1\"
    alert(recherche_tous.length); // Affiche : \"2\"
  alert(recherche_tous[0].innerHTML + ' - ' + recherche_tous[1].innerHTML); // Affiche : \"Élément 1 - Élément 2 : suite\"
</script>

  </body>
</html>

Que va-t-il se passer :

La variable \" recherche1\" contient l'objet <span>Élément 1</span> c'est à dire \" Élément 1\" (c'est le premier élément correspondant à la recherche rencontré dans la page
La variable \"recherche_tous\" contient tous les éléments correspondant à \"article\". Pour connaître le nombre d'éléments on utilise \"recherche_tous.length\" (ici 2) et pour les récupérer : recherche_tous[i].innerHTML avec i = 0 ou 1 (0= 1er élément, 1= 2ème élément etc …. s'il y a plus de 2

Essayez cette page et vérifiez si tout fonctionne. Vous pouvez faire des essais en modifiant le code pour comprendre comme il fonctionne

","title":"Accéder aux éléments :"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

soit le code suivant :

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset=\"utf-8\" /> 
    <title>Essais javascript</title> 
  </head> 
   
<body> 
    <br/><br/> 
    <a id=\"monlien\" href=\"http://www.ecolelamache.org/\">Le lien sur lequel cliquer</a> 
 
    <script> 
    if (confirm('si êtes vous êtes élèves en STI-2d option EE ou SIN, cliquez sur \"OK\" ')) {  
                      alert('Vous allez pourvoir cliquer sur le lien pour aller vers le site qui vous correspond.');  
            var le_lien = document.getElementById('monlien'); 
                    var href = le_lien.getAttribute('href'); // On récupère l'attribut « href » 
                       le_lien.setAttribute('href', 'http://sti2d.ecolelamache.org/'); // On édite l'attribut « href » 
      }  
     else {  
        alert(\"Vous allez pourvoir cliquer sur le lien pour aller vers le site du lycée\");  
          }  
    </script> 
</body> 
 </html>

Ce code va modifier dynamiquement l'adresse d'un lien (à l'aide de la méthode xxx.getAtribute et xxx.setAttribute).

Essayez ce code (en répondant différemment à la question et en rechargeant la page) et expliquez son rôle.

","title":"Exemple 1 : modification dynamique d'un lien (méthode : getAttribut et setAttribute)"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

Expliquez, de manière détaillée, comment le code fonctionne.

Avertissement sur la limite du \"CTRL + U\" : on a pris l'habitude, notamment quand on travaille en PHP, de récupérer le code de la page avec \"CTRL + U\". Cela permettait notamment de voir les erreurs. Avec Javascript cela ne fonctionne pas car la page récupérée est celle chargée par le navigateur et les modifications n'apparaissent passe-t-il

Vérification :

c) Toujours sur la page précédente, pour chaque réponse possible, faites \"CTRL + U\" et comparer les résultats obtenus. Cela correspond-il à l'avertissement précédent ?

","title":""},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

Remarque : au lieu de créer un fichier CSS on va utiliser la balise <style> qui permet de gérer les attribut CSS dans le code lui-même. Pour notre exemple c'est plus pratique et plus \"parlant\". Par contre ce n'est pas recommandé (il doit toujours y avoir un fichier CSS séparé).

soit le code suivant :

<!doctype html> 
<html> 
    <head> 
        <meta charset=\"utf-8\" /> 
        <title>Le titre de la page</title> 
        <style> 
            .fond_bleu { 
                background: blue; 
                color: white; 
            } 
            .fond_rouge { 
                background: red; 
                color: white; 
            } 
        </style> 
    </head> 
 
    <body> 
        <div id=\"mon_texte\"> 
            <p>Un peu de texte <a>et un lien</a></p> 
        </div> 
 
        <script> 
        var texte = document.getElementById('mon_texte'); 
            if (confirm('voulez-vous un  changement de couleur?')) {  
        texte.className = 'fond_bleu'; 
           }  
        else {  
        texte.className = 'fond_rouge'; 
          }  
        </script> 
    </body> 
</html>

Essayez ce code (en répondant différemment à la question et en rechargeant la page) et expliquez son rôle.

Expliquez, de manière détaillée, comment le code fonctionne.

","title":"Exemple 2 : modification d'un attribut CSS (méthode : class.name)"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

Soit le code suivant :

<!doctype html> 
<html> 
    <head> 
        <meta charset=\"utf-8\" /> 
        <title>Le titre de la page</title> 
    </head> 
 
    <body> 
        <div id=\"mon_texte\"> 
            <a>Un peu de texte </a> 
        </div> 
 
        <script> 
        var texte = document.getElementById('mon_texte'); 
        texte.innerHTML += ' <strong>et une portion en plus</strong>.'; 
        </script> 

    </body> 
</html>

S'il n'y avait pas la partie en Javascript, qu'afficherai notre page ?

Essayez maintenant ce code et décrivez ce qu'il fait.

","title":"Exemple 3 : rajout dans un élément HTML (méthode : innerHTML)"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

Soit le code modifié :

<!doctype html> 
<html> 
    <head> 
        <meta charset=\"utf-8\" /> 
        <title>Le titre de la page</title> 
    </head> 
 
    <body> 
        <div id=\"mon_texte\"> 
            <a>Un peu de texte </a> 
        </div> 
 
        <script> 
       document.getElementById('mon_texte').innerHTML += ' <strong>et une portion en plus</strong>.'; 
        </script> 

    </body> 
</html>

Essayez maintenant ce code et expliquez la différence avec le précédent

","title":""},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

Là ça va être un peu plus compliqué!

on a le code suivant : (partie \"body\") :

    <body>
    <div>
        <p id=\"mon_texte1\">Un peu de texte <a>et un lien </a> </p>
    </div>
    </body>

La structure DOM de notre code est la suivante :

On voudrait avoir le code suivant :

    <body>
    <div>
        <p id=\"mon_texte1\">Un peu de texte <a>et un lien </a>
   <a id=\"sti_lien\" href=\"http://sti2d.ecolelamache.org/\">Le Site de la section STI</a></p>

    </div>
    </body>

La structure DOM devient :

Si l'on veut faire ça en Javascript, il va falloir créer la balise <a>, lui associer le lien (avec href) et un texte et placer tout ça dans la branche voulue .

Voici le code proposé :

<!doctype html> 
<html> 
    <head> 
        <meta charset=\"utf-8\" /> 
        <title>Le titre de la page</title> 
       
    </head> 
 
    <body> 
    <div> 
        <p id=\"mon_texte1\">Un peu de texte <a>et un lien </a></p> 
    </div> 
 
    <script> 
        var mon_ajout = document.createElement('a'); 
 
        mon_ajout.id    = 'sti_lien'; 
        mon_ajout.href  = 'http://sti2d.ecolelamache.org/'; 
 
        document.getElementById('mon_texte1').appendChild(mon_ajout); 
        var newLinkText = document.createTextNode(\"Le Site de la section STI\"); 
        mon_ajout.appendChild(newLinkText); 
    </script> 
</body> 
</html>

Essayez ce code. Fait-il exactement ce que l'on voulait ?

Expliquez, de manière détaillée, comment le code précédent fonctionne.

","title":"Exemple 4 : rajout d'éléments HTML"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

Les événements Javascript (clic de la souris, déplacement de la souris, frappe au clavier, ….)

Exemple 1 : methode addEventListener

Soit le code suivant :

<!doctype html> 
<html> 
    <head> 
        <meta charset=\"utf-8\" /> 
        <title>Le titre de la page</title> 
       
    </head> 
 
    <body> 
    <div id=\"position\"></div> 
 
    <script> 
        var position = document.getElementById('position'); 
       
        document.addEventListener('mousemove', function(e) { 
        position.innerHTML = 'Position X : ' + e.clientX + 'px<br />Position Y : ' + e.clientY + 'px'; 
        }, false); 
    </script> 
</body> 
</html>

Essayez ce code et décrivez ce qu'il fait.

","title":"D'autres fonctions à travers des exemples"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

Soit le code suivant :

<!DOCTYPE html> 
<html> 
<head> 
        <meta charset=\"utf-8\" /> 
        <title>essai onclick</title> 
       
    </head> 
<body> 
 
<p>Click sur le bouton</p> 
 
<button onclick=\"displayDate()\">On est le ?</button> 
 
<script> 
function displayDate() { 
    document.getElementById(\"demo\").innerHTML = Date(); 
} 
</script> 
 
<p id=\"demo\"></p> 
 
</body> 
</html>

Essayez ce code et décrivez ce qu'il fait.

","title":"Exemple 2 : JavaScript Events"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"

Soit le code suivant :

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset=\"utf-8\" /> 
    <title>des carrés à déplacer</title> 
  </head> 
 
  <body> 
 
    <style type=\"text/css\"> 
        .draggableBox { 
            position: absolute; 
            width: 80px; height: 60px; 
            padding-top: 10px; 
            text-align: center; 
            font-size: 40px; 
            background-color: #222; 
            color: #CCC; 
            cursor: move; 
        } 
    </style> 
 
    <div class=\"draggableBox\">1</div> 
    <div class=\"draggableBox\">2</div> 
    <div class=\"draggableBox\">3</div> 
 
    <script> 
        (function() { // On utilise une IIFE pour ne pas polluer l'espace global 
            var storage = {}; // Contient l'objet de la div en cours de déplacement 
 
            function init() { // La fonction d'initialisation 
                var elements = document.getElementsByTagName('div'), 
                    elementsLength = elements.length; 
 
                for (var i = 0 ; i < elementsLength ; i++) { 
                    if (elements[i].className === 'draggableBox') { 
 
                        elements[i].addEventListener('mousedown', function(e) { // Initialise le drag & drop 
                            var s = storage; 
                            s.target = e.target; 
                            s.offsetX = e.clientX - s.target.offsetLeft; 
                            s.offsetY = e.clientY - s.target.offsetTop; 
                        }, false); 
 
                        elements[i].addEventListener('mouseup', function() { // Termine le drag & drop 
                            storage = {}; 
                        }, false); 
                    } 
                } 
 
                document.addEventListener('mousemove', function(e) { // Permet le suivi du drag & drop 
                    var target = storage.target; 
 
                    if (target) { 
                        target.style.top = e.clientY - storage.offsetY + 'px'; 
                        target.style.left = e.clientX - storage.offsetX + 'px'; 
                    } 
                }, false); 
            } 
 
            init(); // On initialise le code avec notre fonction toute prête. 
        })(); 
    </script> 
 
  </body> 
</html>

Essayez ce code et décrivez ce qu'il fait.

","title":"Exemple 3 :"},{"edit":"

Commentez ici.

"},{"htm":"","js":""}],[{"text":"Récupérez l'archive \"serpent html.zip\" et essayez le jeu réalisé en Javascript.","title":"Exemple 4 : un jeu en javascript et HTML"},{"edit":"

Commentez ici.

"}],[{"text":"

Bien évidemment nous n'avons fait que survoler Javascript.

Pour compléter ce TP :

sur le site \"openclass Room\" il y a une formation complète sur javascript (https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript )

","title":"Pour aller plus loin"}],[{"text":"Source :

- https://sti2d.ecolelamache.org/ap31_dcouverte_du_langage_javascript.html

- https://www.w3schools.com/

"}]]

Détails: Écrit par : Richard GAUTHIER; Création : 14 Octobre 2019; Mis à jour : 14 Octobre 2019; Clics : 1820

[[{"login":"aa"}],[{"quiz":786}]]

Détails: Écrit par : Richard GAUTHIER; Création : 13 Octobre 2019; Mis à jour : 13 Octobre 2019; Clics : 1908

[[{"text":"Afin de vérifier vos acquis, répondez aux questions suivantes.","title":"Devoir n°3 sur les données structurées"}],[{"text":"

Quel est le premier rôle de l'informatique?

"},{"radio":[{"label":"Traiter automatiquement l'information","sol":true},{"label":"Jouer ","sol":false},{"label":"Regarder des vidéos","sol":false},{"label":"","sol":false}]}],[{"text":"

Quel est la première étape pour définir un objet?

"},{"radio":[{"label":"Définir les catégories de données","sol":true},{"label":"L'objet"},{"label":"Une donnée","sol":false}]}],[{"text":"L'ordinateur peut comparer des données qui sont comment l'une par rapport à l'autre."},{"radio":[{"label":"de même type","sol":true},{"label":"de types différents"},{"label":"peu importe","sol":false}]}],[{"text":"Que faut-il faire pour retrouver facilement une donnée?"},{"radio":[{"label":"Stucturer (ranger) les données","sol":true},{"label":"Ne rien faire","sol":false},{"label":"Les ranger au hasard","sol":false}]}],[{"text":"Comment structure t-on les données?"},{"radio":[{"label":"On les ranges dans une table","sol":true},{"label":"On les met dans un fichier texte"},{"label":"On les met dans un fichier numérique","sol":false},{"label":"On les laisse comme elles sont.","sol":false}]}],[{"text":"Comment décrit-on les fichiers de données?"},{"radio":[{"label":"A l'aide de méta donnée","sol":true},{"label":"A l'aide d'un sommaire"},{"label":"A l'aide d'un index","sol":false},{"label":"A l'aide d'une conclusion.","sol":false}]}],[{"text":"Que faut-il faire pour traiter et gérer plus facilement des données?"},{"radio":[{"label":"Mettre les données dans plusieurs tables.","sol":true},{"label":"Mettre les données dans une table.","sol":false},{"label":"Mettre les données dans un fichier texte.","sol":false},{"label":"Mettre les données dans un fichier numérique.","sol":false}]}],[{"text":"Quel est la composition d'une base de donnée?"},{"radio":[{"label":"D'une table","sol":false},{"label":"De plusieur tables","sol":true},{"label":"De fichiers textes","sol":false},{"label":"De chaises","sol":false}]}],[{"text":"

Comment appelle-t-on les bases de donnes que l'on peut croiser?

"},{"radio":[{"label":"Les bases de données relationnelles.","sol":true},{"label":"Les bases de données \"croisable\"."},{"label":"Les bases de données ensemble.","sol":false},{"label":"Les bases de données en cercle.","sol":false}]}],[{"text":"En quelle année ont été créé les premières données structurées?

"},{"radio":[{"label":"1725","sol":true},{"label":"1925","sol":false},{"label":"1995","sol":false},{"label":"2005","sol":false}]}],[{"text":"Sous quelle forme était les premières données structurées?"},{"radio":[{"label":"Bande perforée","sol":true},{"label":"Disque dur"},{"label":"Clé Usb","sol":false}]}],[{"text":"

En quelle année a été créé le premier disque dur?

"},{"radio":[{"label":"1956","sol":true},{"label":"2006"},{"label":"1856","sol":false},{"label":"1996","sol":false}]}],[{"text":"Combien de chansons en mp3 pouvait contenir le premier disque dur?"},{"radio":[{"label":"1","sol":true},{"label":"2,5millions","sol":false},{"label":"100","sol":false},{"label":"100","sol":false}]}],[{"text":"En quelle année à été créé le premier tableur?"},{"radio":[{"label":"1979","sol":true},{"label":"2009__0","sol":false},{"label":"1999","sol":false},{"label":"1929","sol":false}]}],[{"text":"En quelle année a été créé la mémoire flash?"},{"radio":[{"label":"1984","sol":true},{"label":"2004"},{"label":"1884","sol":false},{"label":"1944","sol":false}]}],[{"text":"Quels sont les appareils qui contiennent de la mémoire flash?

"},{"chekbox":[{"label":"Les clés Usb","sol":true},{"label":"Les téléphones portables","sol":true},{"label":"Le premier disque dur","sol":false},{"label":"Les disques durs portable ou ssd","sol":true},{"label":"Les disquettes","sol":false}]}],[{"text":"En quelle année a été créé le therme open data pour rendre accéssible les données?"},{"radio":[{"label":"1989","sol":false},{"label":"2009","sol":true},{"label":"1889","sol":false},{"label":"1949","sol":false}]}],[{"text":"C'est quoi le big data?"},{"radio":[{"label":"Une grosse donnée","sol":false},{"label":"L'ensemble des données numériques produites par l'utilisation des nouvelles technologies.","sol":true},{"label":"Une donnée numérique.","sol":false},{"label":"Une grosse donnée numérique.","sol":false}]}],[{"text":"

De quel type sont ces données :

\nnom,prenom,date_naissance\nDurand,Jean-Pierre,23/05/1985\nDupont,Christophe,15/12/1967\nTerta,Henry,12/06/1978\n\t\t

"},{"radio":[{"label":"CSV","sol":true},{"label":"Json","sol":false},{"label":"vcf (vcard)","sol":false},{"label":"xml","sol":false}]}],[{"text":"

De quel type sont ces données :

\n[{\n\"nom\" : \"Durand\",\n\"prenom\" : \"Jean-Pierre\",\n\"date_naissance\" : \"23/05/1985\"\n},\n{\n\"nom\" : \"Dupont\",\n\"prenom\" : \"Christophe\",\n\"date_naissance\" : \"15/12/1967\"\n},\n{\n\"nom\" : \"Terta\",\n\"prenom\" : \"Henry\",\n\"date_naissance\" : \"12/06/1978\"\n}]\n\t\t

"},{"radio":[{"label":"CSV","sol":false},{"label":"Json","sol":true},{"label":"vcf (vcard)","sol":false},{"label":"xml","sol":false}]}],[{"text":"

De quel type sont ces données :

BEGIN:VCARD
VERSION:2.1
N:Turing;Alan
FN:Alan TURING
BDAY:19120623
ADR:20;rue;Informatique;01625 ;Wilmslow ;Royaume-Uni TEL;CELL:060-000-0000

TEL;HOME:024-000-0000 EMAIL:Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. END:VCARD

"},{"radio":[{"label":"CSV","sol":false},{"label":"Json","sol":false},{"label":"vcf (vcard)","sol":true},{"label":"xml","sol":false}]}]]

Détails: Écrit par : Richard GAUTHIER; Création : 13 Octobre 2019; Mis à jour : 13 Octobre 2019; Clics : 1625

Page 70 sur 79

1ère Générale NSI

Term. Générale NSI

Terminale STI2D SIN

Bts Ccst

Technico-commercial 3.0

Vidéos YouTube

Séquence n°13 json client server

Exercice :

Activité 8 snt json photographie

nsi sequence 12 ihm json javascript

Les événements Javascript (clic de la souris, déplacement de la souris, frappe au clavier, ….)

Bien évidemment nous n'avons fait que survoler Javascript.

devoir 3 snt login

Devoir n°3 snt json