Séance 4

Javascript et Json

1MB

coursjs.pptx

Open

Corrections

Exo 1

Détecter le clic sur un paragraphe

Détecter le survol d’un titre

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color:red;
        }
    </style>
</head>
<body>
    <h1>Bonjour</h1>


    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis volutpat nisi, a pretium sapien placerat quis. Nunc auctor, nisi vitae scelerisque tincidunt, velit velit rutrum lorem, nec imperdiet magna ipsum ut ante. Duis finibus viverra tempor. Ut sollicitudin mauris vitae lorem aliquet, a facilisis lacus tristique. Praesent posuere vel tellus eu suscipit. Cras sem ex, cursus ut tellus vel, varius mattis leo. Ut non venenatis elit. Praesent nec urna accumsan, consectetur ante facilisis, mattis nunc. Praesent est odio, vehicula sit amet interdum et, venenatis non turpis. Quisque porta ligula non magna ultricies malesuada vitae ac arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur non bibendum est, sit amet posuere lacus.
    </p>

    <p>
        Sed sed augue sit amet augue semper rutrum quis eu ipsum. Suspendisse vitae mattis enim. Suspendisse potenti. Cras faucibus mollis elementum. Quisque elit felis, aliquam ac interdum at, malesuada in diam. Curabitur ut velit eget ipsum viverra faucibus et ac orci. Vivamus pharetra quam at est scelerisque, non congue mauris placerat.
    </p>


    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").click(function(){
                console.log('click')
                $("p").removeClass('red')
                $(this).addClass('red')
            })

            $('h1').mouseover(function(){
                console.log('over')
            })
        })
    </script>
</body>
</html>

N'oubliez pas de télécharger jquery sur https://jquery.com ou clic droit sur le lien https://code.jquery.com/jquery-3.6.0.min.js puis "Enregistrer la cible du lien"

Exo 2

Afficher masquer un paragraphe avec un bouton.

Saisir une valeur et l'afficher en rouge si < 20

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color:red;
        }
    </style>
</head>
<body>
    <h1>Bonjour</h1>

    <button id="btn1">Cliquez ici</button><br>
    
    <input type="text" name="champ1" id="champ1">

    <p id="para1">
        Ceci est un paragraphe !
    </p>

    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
          $('#btn1').click(function(){
              console.log('btn1')
              $('#para1').toggle();
          })

          $('#champ1').keyup(function(){
                console.log('clavier')
                var valeur = $(this).val()
                $('#para1').text(valeur);
                if (valeur < 20) {
                    $('#para1').addClass('red')
                } else {
                    $('#para1').removeClass('red')
                }
                
          })
        })
    </script>
</body>
</html>

Exo 3

Afficher des éléments selon l'élément sélectionné dans une liste déroulante

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color:red;
        }
    </style>
</head>
<body>
    <h1>Bonjour</h1>

    <select id="villes">
        <option value="">Choisir</option>
        <option value="lille">Lille</option>
        <option value="troyes">Troyes</option>
        <option value="paris">Paris</option>
        <option value="dijon">Dijon</option>
    </select>

    <div id="lille" class="ville">
        <h2>Lille</h2>
        <p>
            Un texte de présentation de la ville de Lille
        </p>
    </div>

    <div id="troyes" class="ville">
        <h2>Troyes</h2>
        <p>
            Un texte de présentation de la ville de Troyes
        </p>
    </div>

    <div id="dijon" class="ville">
        <h2>Dijon</h2>
        <p>
            Un texte de présentation de la ville de Dijon
        </p>
    </div>

    <div id="paris"  class="ville">
        <h2>Paris</h2>
        <p>
            Un texte de présentation de la ville de Paris
        </p>
    </div>

    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.ville').hide()

            $('#villes').change(function(){
                console.log($(this).val())
                var ville = $(this).val()
                if (ville == 'paris') {
                    $('.ville').hide()
                    $('#paris').show()
                } else if (ville == 'lille') {
                    $('.ville').hide()
                    $('#lille').show()
                } else if (ville == 'troyes') {
                    $('.ville').hide()
                    $('#troyes').show()
                } else if (ville == 'dijon') {
                    $('.ville').hide()
                    $('#dijon').show()
                } else {
                    $('.ville').hide()
                }

               /* 
               // Code simplifié
               if (ville != ''){
                    $('.ville').hide()
                    $('#' + ville).show()
                } else {
                    $('.ville').hide()
                }*/


            })
        })
    </script>
</body>
</html>

Exo 4

Récupérer une donnée d'un API en fonction d'un champs.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color:red;
        }
    </style>
</head>
<body>
    <h1>Bonjour</h1>

    <input type="text" id="number">
    <button id="btn1">Afficher</button>
    <p id="para1"></p>
   
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#btn1').click(function(){
                var valeur = $('#number').val()
                $.ajax({
                    url:"http://numbersapi.com/"+valeur,
                    method: "get",
                    success: function(data)
                    {
                        $('#para1').html(data)
                    },
                    error: function(data){
                        console.log('erreur')
                        console.log(data)
                    }
                })
            })
        })
    </script>
</body>
</html>

PreviousSéance 3 NextSéance 5 - 8

Last updated 3 years ago