Projet NSI : JavaScript
daasosus
-
yg_be Messages postés 23541 Date d'inscription Statut Contributeur Dernière intervention -
yg_be Messages postés 23541 Date d'inscription Statut Contributeur Dernière intervention -
Bonour, je suis en premiere, et dans le cadre d'un projet, j'ai un code JS a rediger.
Voici le sujet :
Notre mini projet permet d’illustrer les modifications que peuvent provoquer les actions de l’utilisateur.
On va se restreindre à une seule action à l’intérieur d’un contexte graphique pour simplifier les choses.
À l’intérieur d’un rectangle défini par le fichier HTML, il doit s’afficher un disque de couleur à la position du pointeur de la souris à chaque clic de l’utilisateur à l’intérieur de ce rectangle.
Amélioration n°1
Pour ne pas surcharger le rectangle, on n’autorise que 5 disques à la fois en effaçant le plus anciens.
Amélioration n°2
On laisse le choix à l’utilisateur du nombre de disques.
Amélioration n°3
On laisse le choix à l’utilisateur de la couleur des disques.
Amélioration n°4
On laisse le choix à l’utilisateur de la couleur du fond du rectangle
Et voici le code auquel je suis parvenu pour le moment :
`<!DOCTYPE html>
<html>
<head>
<title>projet nsi</title>
<meta charset='utf-8'>
<link rel='stylesheet' type="text/css" href='css/projet.css'/>
<script type="text/javascript" src="projet.js"></script>
</head>
<body>
<h1>Rectangle magique</h1>
<div id="rectangle" >
<button id="bouton">Click!</button>
<span id="canvas1">0</span>
</div>
</body>
</html>
Et pour le JS :
let compteur = 0
function circle()
{
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
context.beginPath();
context.lineWidth="2";
context.arc(100, 100, 90, 0, 2 * Math.PI);
context.stroke();
}
function suivant() {
compteur = compteur + 1;
let v = document.getElementById("canvas1");
v.innerHTML = compteur
}
let b = document.getElementById("bouton")
b.addEventListener("click",suivant)
Je n'ai pas encore adapté les fonctions au programme, je me suis contenté pour le moment de rassembler les idées.
Si vous avez une idée quant a la demarche a suivre, n'hesitez pas a m'en faire part.
Merci.
Voici le sujet :
Notre mini projet permet d’illustrer les modifications que peuvent provoquer les actions de l’utilisateur.
On va se restreindre à une seule action à l’intérieur d’un contexte graphique pour simplifier les choses.
À l’intérieur d’un rectangle défini par le fichier HTML, il doit s’afficher un disque de couleur à la position du pointeur de la souris à chaque clic de l’utilisateur à l’intérieur de ce rectangle.
Amélioration n°1
Pour ne pas surcharger le rectangle, on n’autorise que 5 disques à la fois en effaçant le plus anciens.
Amélioration n°2
On laisse le choix à l’utilisateur du nombre de disques.
Amélioration n°3
On laisse le choix à l’utilisateur de la couleur des disques.
Amélioration n°4
On laisse le choix à l’utilisateur de la couleur du fond du rectangle
Et voici le code auquel je suis parvenu pour le moment :
`<!DOCTYPE html>
<html>
<head>
<title>projet nsi</title>
<meta charset='utf-8'>
<link rel='stylesheet' type="text/css" href='css/projet.css'/>
<script type="text/javascript" src="projet.js"></script>
</head>
<body>
<h1>Rectangle magique</h1>
<div id="rectangle" >
<button id="bouton">Click!</button>
<span id="canvas1">0</span>
</div>
</body>
</html>
Et pour le JS :
let compteur = 0
function circle()
{
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
context.beginPath();
context.lineWidth="2";
context.arc(100, 100, 90, 0, 2 * Math.PI);
context.stroke();
}
function suivant() {
compteur = compteur + 1;
let v = document.getElementById("canvas1");
v.innerHTML = compteur
}
let b = document.getElementById("bouton")
b.addEventListener("click",suivant)
Je n'ai pas encore adapté les fonctions au programme, je me suis contenté pour le moment de rassembler les idées.
Si vous avez une idée quant a la demarche a suivre, n'hesitez pas a m'en faire part.
Merci.
A voir également:
- Mini projet javascript corrigé
- Opera mini pc - Télécharger - Navigateurs
- Filigrane projet - Guide
- Transmath 4eme pdf gratuit 2021 corrigé - Forum Programmation
- Gant projet - Télécharger - Gestion de projets
- Rohos mini drive - Télécharger - Chiffrement
1 réponse
yg_be
Messages postés
23541
Date d'inscription
Statut
Contributeur
Dernière intervention
Ambassadeur
1 584
