TP4 JavaScript P1
Transféré par
PROF PROFTP4 JavaScript P1
Transféré par
PROF PROFTP4_P1 JavaScript Systèmes, technologies et Internet 2020-2021
-Comment un navigateur affiche une page web.
Objectif
-Rôle du JavaScript.
-Emplacement du code JavaScript.
-Syntaxe du JavaScript.
Abonnez vous à la chaine javasript de zero puis utiliser le champ de
recherche et taper le mot clé "Introduction au DOM".
Comment une page web est-elle construite ?
Le chemin critique du rendu
Le cheminement d'un navigateur partant d'un document source HTML pour finalement
afficher une page stylée et interactive. Ce processus comporte deux grandes étapes La
première étape (c’est l’analyse du document) permet de construire l'arbre de rendu (render
tree), une représentation sous forme d'arbre des éléments HTML qui seront rendus (moteur
de rendu) sur la page ainsi que leurs styles associés. Pour cela, le navigateur a besoin de deux
choses :
1. -le CSSOM, une représentation des styles associés aux éléments
2. -le DOM, la représentation des éléments
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page1
TP4_P1 JavaScript Systèmes, technologies et Internet 2020-2021
A quoi sert un JavaScript ?
À chaque fois qu’une page web fait plus que simplement afficher du contenu statique — afficher du
contenu mis à jour à des temps déterminés, des cartes interactives, des animations 2D/3D, des menus
vidéo défilants, etc... — JavaScript a de bonnes chances d’être impliqué. C’est la troisième couche des
technologies standards du web, les deux premières (HTML et CSS)
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page2
TP4_P1 JavaScript Systèmes, technologies et Internet 2020-2021
Le JavaScript est exécuté par le moteur JavaScript du navigateur, après que le HTML et le CSS ont été
assemblés et combinés en une page web. Cet enchaînement est nécessaire pour être sûr que la structure et le style
de la page sont déjà en place quand le JavaScript commence son exécution.
C’est une bonne chose, étant donné qu’un usage fréquent de JavaScript est de modifier dynamiquement le
HTML et le CSS pour mettre à jour l’interface utilisateur, via l’API DOM. Charger le JavaScript et essayer de
l’exécuter avant que le HTML et le CSS ne soient en place mèneraient à des erreurs.
Coté Client = Coté Navigateur :
-Permet de manipuler (modifier) notre code HTML et CSS.
-Permet de réagir aux événements (chargement d’une page, clique sur un bouton, …… ).
-Contrôler les données dans un formulaire.
Coté Serveur :
-Avec nodejs, on peut exécuter JavaScript côté serveur.
Le langage Javascript est principalement utilisé pour créer des interfaces Web interactives,
tandis que PHP effectue toutes les tâches côté serveur, telles que l’authentification de
l’utilisateur, l’affichage des résultats, etc.
Activité 2 :
1) Taper les codes ci-dessous puis compléter le paragraphe ci-dessous :
Code HTML Code JavaScript
<script>
function action()
{
var age = prompt("Quel est votre
<!DOCTYPE HTML>
âge ?", "");
<html>
if (age==null) return false;
<head>
age = parseInt(age);
<meta charset="UTF-8"></meta>
if (!isNaN(age) && age >= 18)
<title>JS_Activité_1</title>
{
</head>
alert("allons-y !");
<body>
return true;
<p><a
}
href="http://www.JeuxVideo.com"
else
onclick="action()">action</a></p>
{
</body>
alert("abandon");
</html>
return false;
}
}
</script>
Il est possible de mettre le code JavaScript dans plusieurs emplacements :
--------------------------------------------------------------------------------------------------------------------------------
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page3
TP4_P1 JavaScript Systèmes, technologies et Internet 2020-2021
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
2) Compléter la figure ci-dessous par la description de chaque élément constituant le code
JavaScript :
-----------------------
--------------- <script> -----------------------
--------------- function action()
{
var age = prompt("Quel est votre âge ?", "");
--------------- if (age==null) return false;
--------------- age = parseInt(age);
if (!isNaN(age) && age >= 18) ----------------------
{ ----------------------
--------------- alert("allons-y !"); --
return true;
---------------
}
else
--------------- {
--------------- alert("abandon");
return false;
}
--------------- }
--------------- </script> -----------------------
-----------------------
3) Compléter le tableau par le nom de chaque structure :
Description La structure
if(condition )
-----------------------------------------------------
{ une ou plusieurs instructions ; }
if(condition)
{une ou plusieurs instructions ; }
-----------------------------------------------------
else
{une ou plusieurs instructions ; }
switch(expression)
{
case v1 :
une ou plusieurs instructions ;
break ;
case v2 :
-----------------------------------------------------
une ou plusieurs instructions ;
break ;
default :
une ou plusieurs instructions ;
break ;
}
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page4
TP4_P1 JavaScript Systèmes, technologies et Internet 2020-2021
for(initialisation ;condition ;progression)
{
-----------------------------------------------------
une ou plusieurs instructions ;
}
do
{
-----------------------------------------------------
une ou plusieurs instructions ;
}while(condition)
while(condition)
{
-----------------------------------------------------
une ou plusieurs instructions ;
}
function nom_fonction (argument)
{
déclaration des variables
-----------------------------------------------------
une ou plusieurs instructions ;
return
}
----------------------------------------------------- le signe égale =
----------------------------------------------------- prompt( ) ou aussi getElementById( )
alert( ) ou aussi write( ) ou aussi console.log() ou aussi
----------------------------------------------------- innerHTML().
----------------------------------------------------- parseInt( ), number( ), string( ), eval( )
4) Compléter les pointillés par le nom de chaque opérateur :
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page5
TP4_P1 JavaScript Systèmes, technologies et Internet 2020-2021
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page6
