JavaScript et JQuery
Partie 1
- Réaliser un fichier bonjour.js qui affiche bonjour. Inclure ce fichier dans index.php.
- Afficher Hello en console également.
console.log("Hello");
- Réaliser un fichier function.js et l’inclure dans index.php. Permettre grâce à une fonction nomCouleur de saisir le nom et la couleur de la carte et d’afficher une phrase en console contenant ces deux éléments .
<script src="function.js"></script> <script>nomCouleur();</script>
Partie 2
- Permettre grâce à une fonction score de saisir de la vie et l’attaque d’une carte et afficher la somme en console.
- Dans une fonction meilleurScore, indiquer parmi deux cartes celle qui a la somme la plus haute en utilisant la fonction précédente.
- Réaliser une fonction sommeScore qui permette d’indiquer la somme de 4 cartes.
- Permettre à l’utilisateur de choisir le nombre de cartes à additionner dans cette fonction sommeScore.
- Réaliser une fonction attaque qui soustrait un montant passé en argument de la vie d’une carte.
- Permettre à l’utilisateur de saisir cet argument.
- Permettre d’enregistrer chaque score dans un tableau grâce à la fonction mesCartes.
Partie 3
- Vérifier avec JavaScript les input de formCarte.html grâce veriForm. La fonction renverra un booléen.
- l’attaque est comprise entre 0 et 20
- la santé est comprise entre 1 et 40
- le cout est compris entre 0 et 12
- le nom ne commence pas par un chiffre
- le nom de l’artiste comprend au moins 4 caractères
$( "#monformulaire" ).submit(function( event ) { //bloque l'envoie event.preventDefault(); });
- Changer la couleur du bouton de validation du formulaire formCarte.html au passage de la souris grâce à changeCouleur.
- Réaliser un menu menu qui permette de choisir parmi vos fonctions.
<!DOCTYPE html> <html> <head> <script> function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == "") { alert("Name must be filled out"); return false; } } </script> </head> <body> <form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form> </body> </html>
Partie 4
- Dans function.js, réaliser une fonction changeCouleurJQ avec jQuery qui modifie la couleur du bouton de validation du formulaire formCarte.html.
$("#monBouton").css("background-color","pink");
- Enlever le bouton de validation de formCarte.html s’il ne respecte pas veriForm grâce à veriFormJQ.
- Mettre l’entourage des inputs qui ne respectent pas les conditions de veriForm toujours dans veriFormJQ. On pourra utiliser les classes de Bootstrap.
- Entrer par défaut votre nom dans l’input Artiste grâce à moiJQ. (val)
- Masque l’image de la carte de index.php pendant 2 secondes grâce à ninjaJQ. (delay – fadein fadeout)
- Afficher le dos de la carte lorsque l’on tape la lettre d grâce à backJQ.
- Déplacer l’image de la carte avec le clavier grâce à moveJQ. La faire disparaitre au bout de 10 déplacement.
- Déplacer l’image de la carte avec la souris grâce à moveSJQ https://jqueryui.com/draggable/.
Partie 5
- Enregistrer les fichiers sur Gitlab dans un répertoire hearthstone4 et partager avec cherryclass.
- Déployer votre application en ligne (hors localhost).