Cours :
• Codage des nombres
  
  • cours 1
    transparents : pdf, html
  • planche de TD/TP 1 (pdf)
• Texte, fichiers et images
  
  • cours 2
    transparents : pdf, html
  • planche de TD/TP 2 (pdf)
• Tests
  
  • cours 3
    transparents : pdf, html
  • planche de TD/TP 3 (pdf)
• HTML/CSS
  
  • cours 4
    transparents : pdf, html
  • planche de TD/TP 4 (pdf)
• Javascript 1.0
  
  • cours 5
    transparents : pdf, html
  • planche de TD/TP 5 (pdf)
• Javascript 2.0
  
  • planche de TD/TP 6 (pdf)
• Diviser pour régner
  
  • cours 7
    transparents : pdf, html
  • planche de TD/TP 7 (pdf)
• Didactique
  
  • cours 8
    transparents : pdf, html
  • planche de TD/TP 8 (pdf)

Bibliothèques CSS

Reprenez la page web crée dans le précédent TP et bulma-fiez le.

• organisez les différentes section et paragraphes en colonnes
• dans une section, placez chaque paragraphe dans une pagination différente (tabs)
• remplacer les titres des section par des icônes
• utilisez un menu et/ou une barre de navigation pour gérer les liens de votre site

Javascript

Utilisation de jquery

Chargez le fichier hello_jquery.html du cours

En utilisant l’aide de jquery (https://api.jquery.com/) :

• Changez la couleur (méthode css) du titre (réponse $("h1").css("color", "olive"))
• quelle est la largeur du h1 ? (réponse : $("h1").width())
• la changer en 50% de la hauteur totale. (réponse : $("h1").width("50%"))

Gestion des évènements en jquery

Chargez le fichier evenements_jquery.html. Le code fonctionne alors qu’il est au début du html ? Oui parce que le code est un paramètre (la fonction) passée en argument de jquery $(paramètre). Ce paramètre n’est exécuté que lorsque la page est chargée (le texte, les image et tout le reste). C’est toujours comme ça que l’on utilisera jquery.

Utilisation du nom $(this) qui, comme en java signifie : l’objet courant. Ici le paragraphe qui est à l’origine de l’exécution de la fonction.

A vous : faites en sorte que lorsque l’on clique sur le titre il s’ajoute “coucou !”.

Formulaires

le formulaire

A vous Reprenez le formulaire du cours en version get. Rendez le joli avec bulma !

google sheet

Créez un nouveau formulaire google sheet et suivez les instructions de : https://github.com/jamiewilson/form-to-google-sheets

Les champs que vous devez avoir pour que votre application fonctionne sont :

• timestamp (le script ajoute la date et l’heure)
• user_name
• user_mail
• user_message

Ajoutez les lignes suivantes à votre html contenant le formulaire, qui doit être envoyé avec la méthode post :

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>
        $(function() {
            const scriptURL = 'L'ADRESSE DE MON SCRIPT'

            $('form').submit(function(e) {
                e.preventDefault()
                console.log(new FormData($('form')[0]))
                fetch(scriptURL, { method: 'POST', body: new FormData($('form')[0])})
                  .then(response => console.log('Success!', response))
                  .catch(error => console.error('Error!', error.message))
            })
        })
        </script>

Vous devriez être capable de recevoir les envois du formulaire.