N.S.I. WorkSpace P-Th-D,Première Exercices d’entraînement : vérifier ses acquis

Exercices d’entraînement : vérifier ses acquis

Categories:

Dans le manuel de NSI…

(Cliquez pour ouvrir)
Exercices 4 à 9 page 207

Exercices 3, 4, 7 et 8 page 210

Exercice 14 page 212

QCM 1 – (Questionnaire à choix multiple)

Pour chaque item figurent quatre propositions de réponse. Une seule est correcte : laquelle ?

Question D.1

Dans une page web, on souhaite créer un bouton permettant l’appel de la fonction javascript traitement().

Quelle ligne d’instructions permettra de le faire ?

Réponses

<button onclick = "traitement()">Cliquez ici</button>
<a href = traitement()>Cliquez ici</a>
<button>Cliquez ici</button = traitement()>
<button>Cliquez ici = traitement()</button>

Question D.2

Dans une page HTML se trouve le formulaire suivant :

<form method="........." action="traitement.html">
	<p>Nom : <input type="text" name="nom"></p>
	<p>Mot de passe : <input type="password" name="mdp"></p>
	<p><input type="submit" name="envoi" value="Envoyer"></p>
</form>

Par quoi faut-il remplacer les pointillés pour que les données du formulaire n’apparaissent pas dans l’URL au moment où l’utilisateur soumet le formulaire au serveur ?

Réponses

GET
POST
SECRET
HIDDEN

Question D.3

Une page Web contient un formulaire dont le code HTML est le suivant :

<form action="/action_page.php" method="post">
 	First name : <input type="text" name = "fname"><br>
 	Last name : <input type="text" name = "lname"><br>
 	<input type="submit" value="Submit">
</form>

Que peut-on dire des informations transmises dans ce formulaire ?

Réponses

elles seront enregistrées dans l'historique du navigateur
elles seront enregistrées dans le cache du navigateur
elles ne devront pas dépasser une limite en nombre de caractères transmis
elles ne seront pas visibles dans la barre du navigateur

Question D.4

Dans un formulaire sur un page web, pour transmettre des données sécurisées comme un mot de passe ou un numéro de carte bancaire, il vaut mieux utiliser la méthode :

Réponses

HEAD
GET
HTTPS
POST

Question D.5

On considère le formulaire ci-dessous :

Quelle balise parmi les quatre suivantes a été utilisée pour les cases à cocher ?

Réponses

<input type="radio">
<input type="circle">
<input type="checkbox">
<input type="square">

Question D.6

On souhaite qu’un menu apparaisse à chaque fois que l’utilisateur passe sa souris sur l’image de bannière du site.

L’attribut de la balise img dans lequel on doit mettre un code Javascript à cet effet est :

Réponses

onclick
src
alt
onmouseover

Question D.7

Dans la barre d’URL d’un navigateur on saisit ce qui suit, puis on valide.

Indiquer le contenu de la première ligne de la requête envoyée par le ‘client’ au ‘serveur’.

Réponses

HTTP/2 200 OK default.asp
POST https://www.w3schools.com/js/default.asp HTTP/2
GET /js/default.asp HTTP/2
HTTP/2 /js/default.asp GET

Question D.8

Une page web contient le formulaire qui suit et pour lequel des valeurs ont été saisies.

Le code html correspondant à ce formulaire est le suivant :

<form method="POST" action="commande.php">

	<h3>Bon de commande</h3>

	<label for="art_ref">Référence de l'article :</label>
	<input type="text" id="art_ref" name="ref_art" value=""><br>

	<label for="art_des">Désignation  : </label>
	<input type="text" id="art_des" name="des_art" value=""><br>

	<label for="art_qte">Quantité  : </label>
	<input type="number" id="art_qte" name="qte_art" value=""><br>

	<button type="submit">Envoyer</button>

</form>

Indiquer le contenu du corps de la requête envoyée par le ‘client’ au ‘serveur’.

Réponses

ref_art=HKB-235&des_art=Tournevis&qte_art=5
art_ref=HKB-235&art_des=Tournevis&art_qte=5
art_ref=HKB-235;art_des=Tournevis;art_qte=5
art_ref:HKB-235&art_des:Tournevis&art_qte:5

Question D.9

En bas de cette page se trouve un formulaire qui permet d’effectuer une recherche d’articles à partir d’un ou plusieurs mots clés. Voici un aperçu de ce formulaire.

Quand on soumet ce formulaire, on peut lire ce qui suit dans la barre d’URL :

Quelle est la méthode mise en œuvre lors de la soumission de ce formulaire ?

Réponses

SEARCH
POST
FIND
GET

Question D.10

Lors de la soumission d’un formulaire, la première ligne de la réponse envoyée par le serveur au client est la suivante :

HTTP/1.1 404 Not Found

Que signifie cette réponse ?

Réponses

Le serveur à qui est destinée la requête n'a pas été trouvé
Le client n'a pas trouvé le code d'un fichier html dans le corps de la réponse envoyée par le serveur
Le serveur n'a pas trouvé d'interpréteur pour exécuter le programme écrit en php permettant de construire un message en réponse à la requête.
La ressource demandée par le client et indiquée dans la première ligne de la requête n'a pas été trouvée par le serveur.

Corrigé (Réponses attendues)

Question D.1 – Réponse : 1

Question D.2 – Réponse : 2

Question D.3 – Réponse : 4

Question D.4 – Réponse : 4

Question D.5 – Réponse : 3

Question D.6 – Réponse : 4

Question D.7 – Réponse : 3

Question D.8 – Réponse : 1

Question D.9 – Réponse : 4

Question D.10 – Réponse : 4

QCM 2 – (Questionnaire à choix multiple)

Pour chaque item figurent quatre propositions de réponse. Une seule est correcte : laquelle ?

Question D.1

Dans une page HTML, lequel de ces codes permet la présence d’un bouton qui appelle la fonction javascript afficher_reponse() lorsque l’utilisateur clique dessus ?

Réponses

<a href="afficher_reponse()">Cliquez ici</a>
<button if_clicked="afficher_reponse()">Cliquez ici</button>
<button value="Cliquez ici"><a> afficher_reponse()</a></button>
<button onclick="afficher_reponse()">Cliquez ici</button>

Question D.2

Parmi les langages suivants, lequel est exécuté sur le serveur lors de la consultation d’une page Web ?

Réponses

JavaScript
HTML
CSS
PHP

Question D.3

En HTML, un formulaire commence par quelle balise ?

Réponses

<form>
</form>
<input type="form">
<!--form-->

Question D.4

Dans le code HTML les délimiteurs tels que <body> et </body> s’appellent ?

Réponses

des bornes
des balises
des paragraphes
des liens

Question D.5

Quelle méthode d’envoi des paramètres est-il préférable d’utiliser, pour un formulaire d’une page web, destiné à demander à l’utilisateur un mot de passe pour se connecter (le protocole utilisé est HTTPS) ?

Réponses

la méthode PASSWORD
la méthode CRYPT
la méthode GET
la méthode POST

Question D.6

On considère le formulaire HTML suivant :

<form action="action.php" method="get" name="prenom">
	Prénom :
	<input type="text" id="champ1" name="p"/>
	<br/>
	<input type="hidden" name="util" value="1549"/>
 	<input value="Envoi du prénom" type="submit"/>
</form>

Le prénom entré par l’utilisateur est contenu dans :

Réponses

lʼélément dont lʼattribut id est champ1
lʼélément nommé prénom
lʼélément dont lʼattribut value est Envoi du prénom
lʼélément dont lʼattribut type est hidden

Question D.7

Dans un formulaire codé en HTML on peut lire :

	<label for="pwd">Mot de passe : (8 caractères au moins)</label>
	<input type="password" id="pwd" name="mdp"/>

Avant la soumission du formulaire on veut s’assurer que la longueur du mot de passe saisi est correcte (au moins 8 caractères). Pour cela on appelle une fonction écrite en javascript dont le nom est verif_pwd.

Quelle instruction de cette fonction permet de récupérer la valeur saisie dans l’élément input ?

Réponses

pwd = document.getElementById("Mot de passe").value;
pwd = document.getElementById("pwd").value;
pwd = document.getElementById("mdp").value;
pwd = document.getElementById("password").value;

Question D.8

Dans un formulaire codé en HTML on peut lire :

	<label for="pwd">Mot de passe : (8 caractères au moins)</label>
	<input type="password" id="pwd" name="mdp"/>

On voudrait rendre obligatoire la saisie d’un mot de passe avant la soumission du formulaire.

Pour cela, quel attribut booléen doit-on ajouter à l’élément input ?

Réponses

readonly
checked
required
important

Question D.9

Les données saisies dans un formulaire codé en HTML ont été transmises avec la méthode POST. Du côté du serveur elles doivent traitées par un programme écrit en php.

Quelle instruction écrite en php permet d’affecter à une variable quantite la valeur saisie dans un élément input du formulaire dont l’attribut name vaut qte ?

Réponses

$quantite = $_FORM["qte"];
$quantite = $_GET["qte"];
$quantite = $_POST["qte"];
$quantite = $_NAME["qte"];

Question D.10

Dans un programme de traitement des données d’un formulaire, écrit en php, on dispose d’une variable $distance.

On veut insérer la valeur de cette variable dans un élément d’une page web qui doit afficher le texte suivant : « La distance est de … km« .

Que faut-il écrire à la place des trois points ?

Réponses

<?php print $distance; ?>
<?php write $distance; ?>
<?php echo $distance; ?>
<?php concat $distance; ?>

Corrigé (Réponses attendues)

Question D.1 – Réponse : 4

Question D.2 – Réponse : 4

Question D.3 – Réponse : 1

Question D.4 – Réponse : 2

Question D.5 – Réponse : 4

Question D.6 – Réponse : 1

Question D.7 – Réponse : 2

Question D.8 – Réponse : 3

Question D.9 – Réponse : 3

Question D.10 – Réponse : 3

Exercice 1 – HTML et Javascript

Un étudiant a écrit le programme qui suit en langage Python :

# Entrée de données
p1 = input("Coordonnées x et y d'un premier point du plan\n\
saisir 2 entiers séparés par une virgule sans espace\n\
par exemple '12,5' :\n")
print()
p2 = input("Coordonnées x et y d'un second point du plan\n\
saisir 2 entiers séparés par une virgule sans espace\n\
par exemple '19,10' :\n")
print()

# Traitement de données
p1 = p1.split(",")
p2 = p2.split(",")
x1 = int(p1[0])
y1 = int(p1[1])
x2 = int(p2[0])
y2 = int(p2[1])
labs = abs(x2 - x1)
lord = abs(y2 - y1)
aire = labs * lord

# Sortie de données
print("Si l'on considère que ces deux points sont deux sommets opposés d'un rectangle,")
print("alors la longueur du côté de ce rectangle en abscisse vaut " + str(labs))
print("et la longueur du côté de ce rectangle en ordonnée vaut " + str(lord))
print()
print("L'aire de ce rectangle vaut " + str(aire))
f = "* " * labs
for k in range(lord):
    print(f)

L’exécution de ce programme donne le résultat suivant dans la console :

Running script: "rectangle.py"
Coordonnées x et y d'un premier point du plan
saisir 2 entiers séparés par une virgule sans espace
par exemple '12,5' :
12,5

Coordonnées x et y d'un second point du plan
saisir 2 entiers séparés par une virgule sans espace
par exemple '19,10' :
19,10

Si l'on considère que ces deux points sont deux sommets opposés d'un rectangle,
alors la longueur du côté de ce rectangle en abscisse vaut 7
et la longueur du côté de ce rectangle en ordonnée vaut 5

L'aire de ce rectangle vaut 35
* * * * * * * 
* * * * * * * 
* * * * * * * 
* * * * * * * 
* * * * * * * 

>>> 
Capture d’écran de l’éditeur Pyzo

Il veut transposer ce programme dans une page web dynamique en utilisant le langage Javascript.

Copier et compléter le code source de la page web qui permet de réaliser ce programme : il faut remplacer les « @@@ » par ce qui convient.
Sauvegarder le code sous la forme d’un fichier ‘html’ et tester son fonctionnement dans un navigateur.

<!DOCTYPE html>
<html lang="fr">

	<head>
		<meta charset="utf-8" />
		<title>Lycée - Première - NSI</title>
		<style>
			body{width: 90vw; margin-left: 5vw;
				font-family: verdana;font-size: 12pt; color: #0000FF;}
			header, main{margin-top: 1.5rem;}
			h1, h2{text-align: center;}
			.data_in{margin-top: 0.8rem; margin-left: 2vw;}
			.data_out{margin-top: 1.2rem; margin-left: 4vw;}
			input, button{font-size: 1.2rem; padding: 0.2rem;}
			button{color: #FF0000;}
		</style>
	</head>

	<body>
		<header>
			<h1>Interaction entre l'Homme et la machine sur le web</h1>
			<h2>Page web dynamique avec javascript</h2>
		</header>
		<main>
			<div class="data_in">
				<label for="p1">
					<b>Coordonnées x et y d'un premier point du plan</b><br>
					<i>saisir 2 entiers séparés par une virgule sans espace
					par exemple '12,5' :</i>
				</label>
				<input id="p1" value="0,0">
			</div>
			<div class="data_in">
				<label for="p2">
					<b>Coordonnées x et y d'un second point du plan</b><br>
					<i>saisir 2 entiers séparés par une virgule sans espace
					par exemple '19,10' :</i>
				</label>
				<input id="p2" value="10,10">
			</div>
			<div class="data_in">
				<button onclick="execute();">Continuer</button>
			</div>

			<div id="data_out" class="data_out"></div>
		</main>

	</body>
	<script>
		function execute(){
			// Lecture des valeurs saisies dans les deux éléments 'input'
			// Les valeurs lues sont de type 'str'
			pt1 = document.getElementById("p1").value;
			pt2 = @@@

			// Découpage de la chaîne de caractères 'pt1' en deux chaînes.
			// Chaque nouvelle chaîne est rangée dans un tableau 'p1'.
			p1 = pt1.split(",");
			// Même chose pour 'pt2'.
			p2 = @@@

			// Conversion des chaines de caractères en nombres entiers
			x1 = parseInt(p1[0]);
			y1 = @@@
			x2 = @@@
			y2 = @@@

			// Calculs
			// labs : longueur en abscisse. Valeur absolue de x2 - x1.
			labs = Math.abs(x2 - x1);
			// lord : longueur en ordonnée. Valeur absolue de y2 - y1.
			lord = @@@

			// aire : produit de 'labs' par 'lord'
			aire = @@@

			// Résultat
			// Construction d'une chaîne de caractères
			texte = "Si l'on considère que ces deux points sont deux sommets opposés d'un rectangle,<br>";
			texte += "alors la longueur du côté de ce rectangle en abscisse vaut " + @@@ + "<br>";
			texte += "et la longueur du côté de ce rectangle en ordonnée vaut " + @@@ + ".<br><br>";
			texte += "L'aire de ce rectangle vaut " + @@@ + ".<br><br>";

			// Construction d'une 'figure' :
			// Nombre de ligne égal à 'lord' et nombre de colonnes égal à 'labs'
			fig =  "";
			for(y = 0; y < lord; y++){
				for(x = 0; @@@; x++){
					fig += "*";
				}
				fig += "<br>";
			}
			texte += fig;

			// Affichage de la chaîne de caractères dans la page web
			document.getElementById("data_out").innerHTML = @@@;
		}
	</script>

</html>

Aperçu du rendu du code de la page web

Exercice 2 – HTML et PHP

On veut transposer le programme écrit en langage Python de l’exercice précédent dans une page web dynamique en utilisant le langage PHP.

On commence par construire un formulaire.

Copier et compléter le code qui suit : remplacer les @@@ par ce qui convient.

<!DOCTYPE html>
<html lang="fr">

	<head>
		<meta charset="utf-8" />
		<title>Lycée - Première - NSI</title>
		<style>
			body{width: 90vw; margin-left: 5vw;
				font-family: verdana;font-size: 12pt; color: #0000FF;}
			header, main{margin-top: 1.5rem;}
			h1, h2{text-align: center;}
			.data_in{margin-top: 0.8rem; margin-left: 2vw;}
			.data_out{margin-top: 1.2rem; margin-left: 4vw;}
			input, button{font-size: 1.2rem; padding: 0.2rem;}
			button{color: #FF0000;}
		</style>
	</head>

	<body>
		<header>
			<h1>Interaction entre l'Homme et la machine sur le web</h1>
			<h2>Page web dynamique avec PHP</h2>
		</header>
		<main>
			<form @@@ ="exec.php" @@@ ="POST">
			<div class="data_in">
				<label for="p1">
					<b>Coordonnées x et y d'un premier point du plan</b><br>
					<i>saisir 2 entiers séparés par une virgule sans espace
					par exemple '12,5' :</i>
				</label>
				<input id="p1" @@@="p1" value="0,0">
			</div>
			<div class="data_in">
				<label for="p2">
					<b>Coordonnées x et y d'un second point du plan</b><br>
					<i>saisir 2 entiers séparés par une virgule sans espace
					par exemple '19,10' :</i>
				</label>
				<input id="p2" @@@="p2" value="10,10">
			</div>
			<div class="data_in">
				<button type="@@@">Continuer</button>
			</div>
			</form>
		</main>

	</body>

</html>

Après soumission du formulaire, les données transmises sont traitées par le programme qui suit écrit en php.

Copier et compléter le code qui suit : remplacer les @@@ par ce qui convient.

<?php

/* Lecture des valeurs saisies dans les deux éléments 'input'
   Les valeurs lues sont de type 'str' */
$pt1 = $_POST["p1"];
$pt2 = @@@;

/* Découpage de la chaîne de caractères 'pt1' en deux chaînes.
   Chaque nouvelle chaîne est rangée dans un tableau 'p1'. */
$p1 = explode(",", $pt1);
// Même chose pour 'pt2'.
$p2 = @@@

// Conversion des chaines de caractères en nombres entiers
$x1 = intval($p1[0]);
$y1 = @@@
$x2 = @@@
$y2 = @@@

// Calculs
	// labs : longueur en abscisse. Valeur absolue de x2 - x1.
	$labs = abs($x2 - $x1);
	// lord : longueur en ordonnée. Valeur absolue de y2 - y1.
	$lord = @@@

	// aire : produit de 'labs' par 'lord'
	$aire = @@@

// Résultat
	// Construction d'une chaîne de caractères
	$texte = "Si l'on considère que ces deux points sont deux sommets opposés d'un rectangle,<br>";
	$texte .= "alors la longueur du côté de ce rectangle en abscisse vaut " . @@@ . "<br>";
	$texte .= "et la longueur du côté de ce rectangle en ordonnée vaut " . @@@ . ".<br><br>";
	$texte .= "L'aire de ce rectangle vaut " . @@@ . ".<br><br>";

	// Construction d'une 'figure' :
	// Nombre de ligne égal à 'lord' et nombre de colonnes égal à 'labs'
	$fig =  "";
	for($y = 0; $y < $lord; $y++){
		for($x = 0; @@@; $x++){
			$fig .= "*";
		}
		$fig .= "<br>";
	}
	$texte .= @@@
?>


<!DOCTYPE html>
<head>
		<meta charset="utf-8" />
		<title>Lycée - Première - NSI</title>
		<style>
			body{width: 90vw; margin-left: 5vw;
				font-family: verdana;font-size: 12pt; color: #0000FF;}
			header, main{margin-top: 1.5rem;}
			h1, h2{text-align: center;}
			.data_out{margin-top: 1.2rem; margin-left: 4vw;}
			button{font-size: 1.2rem; padding: 0.2rem; margin-left: 8vw;}
			a{color: #FF0000; text-decoration: none;}
		</style>
	</head>

	<body>
		<header>
			<h1>Interaction entre l'Homme et la machine sur le web</h1>
			<h2>Page web dynamique avec PHP</h2>
		</header>
		<main>
			<p class="data_out">
				<?php echo @@@ ?>
			</p>
			<button><a href="index.html" target="_self">Retour</a></button>
		</main>

	</body>

</html>

Sauvegarder les deux fichiers précédents : nommer le premier ‘index.html’ et le second ‘exec.php’.
Placer ces deux fichiers dans le dossier ‘www’ de ‘Laragon‘. Démarrer les serveurs.
Dans la barre d’URL d’un navigateur, saisir ‘localhost’ et valider.
Le formulaire doit s’afficher (voir capture d’écran 1 ci-après).
Entrer des valeurs dans les deux champs de saisie, puis soumettre le formulaire.
La réponse doit s’afficher (voir capture d’écran 2 ci-après).

Capture d’écran 1 : Formulaire
Capture d’écran 2 – Réponse

Article sous licence << Cliquez pour plus d’informations <<