Vous êtes sur la page 1sur 10

Université Technique de Moldova

Faculté Ordinateurs, Informatique et Microélectronique

Chaire Technologies Informatiques

Travail pratique nr 3 à TW

Sujet:
JavaScript - création d'éléments dynamiques dans la page à l'aide de
JS

Effectué par: étudiante du groupe FI-171 Buftea Maria

Vérifié par: univ. Conférencier Rusu Viorel

Chişinău 2019
Objectif du travail:

a) des menus déroulants

b) faire défiler les images, affichage de la date et de l'heure à l'aide de SetTimeOut /


ClearTimeOut

c) Vérification des formulaires

 des menus déroulants:

Sur ma page Web, j'ai utilisé JS pour lancer un menu déroulant :

Code Source :

<div class="dropdown">

<button onclick="myFunction()" class="dropbtn">Menu</button>

<div id="myDropdown" class="dropdown-content">

<ul class="nav navbar-nav navbar-right">


<li><a class="link" href="livraison.html">Livraison</a></li>

<li><a class="link" href="Camions.html">Camions</a></li>

<li><a href="">Services</a></li>

<li><a href="">Commander</a></li>

<li><a class="link" href="Contactez-nous.html">Contactez-nous</a></li>

</ul>

</div>

</div>

</div>

</div>

</nav>

<script>

/* When the user clicks on the button,

toggle between hiding and showing the dropdown content */

function myFunction() {

document.getElementById("myDropdown").classList.toggle("show");

// Close the dropdown if the user clicks outside of it

window.onclick = function(event) {

if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");

var i;

for (i = 0; i < dropdowns.length; i++) {

var openDropdown = dropdowns[i];


if (openDropdown.classList.contains('show')) {

openDropdown.classList.remove('show');

</script>

 faire défiler les images

Aussi avec l'aide du JS j'ai créé Slideshow / Carousel :

Code Source du JS:


<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>

Aussi,j'ai utilisé Java Script pour créer le formulaire, qui ressemble à ceci:
Code source:

<link rel="stylesheet" type="text/css" href="style2.css">

<body>

<h1>Pour plus d'informations contactez nous</h1>

<form id="form-user" action="#" method="post">

<div class="form-box error" data-errormsg="">

<label for="input-first">First</label>

<input type="text" id="input-first" autofocus placeholder="First Name"


tabindex="1"/>

</div>

<div class="form-box" data-errormsg="">

<label for="input-password">Password</label>

<input type="password" id="input-password" required placeholder="Password"


tabindex="2" />

</div>

<div class="form-box" data-errormsg="">

<label for="input-email">E-mail</label>

<input type="email" id="input-email" required placeholder="E-mail Address"


tabindex="3" />

</div>

<div class="form-box" data-errormsg="">

<label for="input-age">Age</label>

<select id="input-age" tabindex="4">

<option value="0">Under 20</option>

<option value="1">20-30</option>
<option value="2">30-40</option>

<option value="3">40-50</option>

<option value="4">Over 50</option>

</select>

</div>

<div class="form-box" data-errormsg="">

<label for="input-alive">Alive?</label>

<input type="checkbox" id="input-alive" value="yes" tabindex="5" checked />

</div>

<div class="form-box">

<button id="button-cancel">Cancel</button>

<button id="button-send">Send</button>

</div>

</form>

<script src="./forms.js"></script>

</body>

Et JS:
// forms.js//

const init = function(){

document.getElementById('button-cancel').addEventListener('click', reset);

document.getElementById('button-send').addEventListener('click', send);

const reset = function(ev){


ev.preventDefault();

document.getElementById('form-user').reset();

const send = function(ev){

ev.preventDefault();

ev.stopPropagation();

let fails = validate();

if(fails.length === 0){

document.getElementById('form-user').submit();

}else{

fails.forEach(function(obj){

let field = document.getElementById(obj.input);

field.parentElement.classList.add('error');

field.parentElement.setAttribute('data-errormsg', obj.msg);

})

const validate = function(ev){

let failures = [];

let chk = document.getElementById('input-alive');


if(!chk.checked){

failures.push({input: 'input-alive', msg: 'Must be alive to submit.'})

let select = document.getElementById('input-age');

if( select.selectedIndex === 0 ){

failures.push({input:'input-age', msg:'Too young'})

}.

let first = document.getElementById('input-first');

let password = document.getElementById('input-password');

let email = document.getElementById('input-email');

if( first.value === ""){

failures.push({input:'input-first', msg:'Required Field'})

if( password.value === "" || password.value.length < 8){

failures.push({input:'input-password', msg:'Must be at least 8 chars'})

if( email.value === ""){

failures.push({input:'input-email', msg:'Required Field'})

return failures;

document.addEventListener('DOMContentLoaded', init);

 Une dernière fonction JS était l'affichage de la date:


Code source:
<script type='text/javascript'>
//Créer un objet contenant la date du jour
var date = new Date();
//Renvoyer l'année en cours
document.write(date.getFullYear()+'');
</script

Conclusion:
Suite à ce travail de laboratoire je me suis familiarisé avec Java Script.
J'ai réussi à créer des éléments dynamiques pour mon site.
Javascript nous pemite créer des éléments dynamiques tels que des menus
déroulants, images défilantes,affichage de la date, validation des zones de texte,
e-mail, téléphone également créer de nombreux autres éléments dynamiques
pour notre futur site.