X

Javascript débarque dans notre Navigateur

French Tutorials and Courses

 
  • Filter
  • Time
  • Show
Clear All
new posts
  • medmoh
    Thread Author
    Free Membership
    • Sep 2018 
    • 2599 
    • 1,914 
    • 1,921 

    Javascript débarque dans notre Navigateur

    Size: 1.76 GB | Duration: 7 hours

    [HTML]https://www.udemy.com/course/javascript-dom-html-css/[/HTML]




    What you'll learn
    Maîtriser les interactions entre Javascript et le Navigateur
    Maîtriser les événements en Javascript
    Comprendre les requêtes HTTP
    Créer un projet de A à Z : World Bucket List
    Utiliser Google Maps API

    Requirements
    Vous devez connaître les bases de Javascript
    N'importe quel ordinateur - Windows, Mac, etc...
    Aucun logiciel particulier n'est requis
    Description
    Ca y est , comme son nom l’indique, dans ce cours Javascript debarque dans notre navigateur.

    Depuis le départ, je vous ai dit que nos page web sont composées de 3 langages: HTML pour la structure, CSS pour le style et la mise en page, et Javascript pour l’interactivité de nos pages Web

    Et bien justement c’est maintenant que vous allez tout comprendre sur cette interactivité ! On va commencer par parler de l’objet global: window, puis de location et surtout on va décortiquer bien comme il faut ce qu’on appelle le DOM.

    DOM

    C’est quoi le DOM ?

    C’est la représentation de notre code HTML et c’est lui que Javascript pourra manipuler pour modifier le HTML et le CSS de nos pages Web.

    Tous nos éléments HTML sont bien organisés dans le DOM et on pourra modifier leurs attributs, leur style CSS, leur ajouter ou leur enlever des classes CSS.

    Je vous montrerai les différentes facons de sélectionner les éléments éxistants du DOM et aussi comment on va pouvoir en créer de nouveaux très facilement.

    Événements

    Et biensur la base de l’interactivité: ce sont les événements: vous pouvez exécuter du code en réaction à un événement.

    Par exemple: Quand l’utilisateur clique sur un bouton, appuie sur une touche du clavier ou encore quand il soumet un formulaire.

    Alors je vais vous montrer les différentes façons de réagir aux événements: les event handler et les event listener.

    Mais pour bien comprendre tout ça, on va examiner l’objet Event qui posséde des propriétés particulières en fonction de la nature de l’événement .

    On va voir comment les événements se propagent: on parlera de phase de bouillonement et de phase de capture. Et aussi comment stopper ou modifier leur propagation avec les méthodes stopPropagation et preventDefault.

    Requêtes HTTP

    Une autre chose dont on va parler: ce sont les requêtes HTTP, c’est ce qu’on appelle Ajax.

    Ca va par exemple nous permettre d’échanger avec un serveur, on pourra recevoir, envoyer, modifier et supprimer des données de ce serveur.

    Un des gros avantages c’est qu’on pourra traiter les données qu’on récupére directement en Javascript et mettre à jour uniquement certains éléments de notre page Web sans avoir à recharger toute la page.

    Une des façons pour un serveur d’être capable d’intéragir avec ces requêtes c’est d’utiliser ce qu’on appele une API REST.

    D’ailleurs on va en utiliser une et je vous montrerai comment récupérer des infos avec les requêtes GET et comment en envoyer avec les requêtes POST.

    Objet et Fonctions utiles

    Alors ce cours c’est aussi pour moi l’occasion de parler tout ce dont on n’a pas parlé jusqu’à présent et qui fait partie intégrante de Javascript.

    Je vais vous parler de l’objet Math, de l’objet Date, des expressions regulières.

    On va revenir sur les méthodes setTimeout et setInterval. Je vais vous présenter aussi l’opérateur ternaire et on passera en revue les fonctions qu’on peut appliquer sur les strings mais surtout sur les arrays: comme map, filter, etc…

    Bien evidemment pour chacune de ces parties, vous pourrez tester vos connaissances avec des quiz.

    World Bucket List

    Et alors une fois qu’on aura fini tout ça: ce sera l’heure du dessert, de la cerise sur le gâteau de ce cours. On va réaliser ensemble un projet génial de A à Z. Vous allez mettre en pratique tout ce que vous avez appris directement dans ce projet.

    C’est parti pour le rêve ! Créons ensemble l’appli World Bucket List. Pour ceux qui ne le savent Bucket List c’est une liste de choses qu’on souhaite faire.

    Et bien vous allez créer la votre et vous allez situer vos rêves sur la carte du Monde ! On va utiliser l’API de Google Map pour pouvoir faire des choses fantastiques. Vous allez localiser vos rêves: Maison sur Pilotis aux Maldives, Safari au Kenya, Monter sur la Tour Eiffel.

    Grâce aux événements, vous pourrez automatiquement zoomer sur un de vos rêves en cliquant sur les marqueurs de la carte.

    Vous pourrez aussi intéragir avec vos rêves en indiquant ceux que vous avez déja réalisé et ceux que vous souhaitez encore réaliser: Qui a dit qu’on pouvait réaliser ses rêves qu’une seule fois ?

    Et pour une meilleure immersion, vous allez aussi coder la visite interactive de vos rêves grâce à Google Street View. C’est-à-dire qu’on pourra se balader à l’intérieur de vos rêves quasiment comme s’y on était.

    Bref, je peux vous en parler encore longtemps: ce projet est tout simplement magique ! Et vous allez voir que même si ça parait impressionnant, vous allez y arriver très facilement, étape par étape je vais tout vous expliquer…

    Bon vous êtes prêts, allez c’est parti !

    Who this course is for:
    Toute personne qui souhaite comprendre comment Javascript intéragit avec notre Navigateur

    *
    ,*
  • medmoh
    Thread Author
    Free Membership
    • Sep 2018 
    • 2599 
    • 1,914 
    • 1,921 

    #2
    Originally posted by raedms
    شكرا لك أخي الكريم
    شكرا لك يأ خي و جزاك لله خيرا
    Comment
    • elfouchali
      Free Membership
      • Nov 2018 
      • 17 
      • 223 

      #3
      في هذا الكورس لا تستطيع فتح Projet Application World Bucket List ،، هل لديك password ؟ و شكراً
      Comment
      • medmoh
        Thread Author
        Free Membership
        • Sep 2018 
        • 2599 
        • 1,914 
        • 1,921 

        #4
        Originally posted by elfouchali View Post
        في هذا الكورس لا تستطيع فتح Projet Application World Bucket List ،، هل لديك password ؟ و شكراً
        Password if need: sanet.st
        Comment
        • espritmarin
          Free Membership
          • Oct 2020 
          • 345 
          • 282 
          • 180 

          #5
          Originally posted by medmoh View Post

          Password if need: sanet.st
          السلام عليكم لم يعمل معي الباس
          Comment
          • elfouchali
            Free Membership
            • Nov 2018 
            • 17 
            • 223 

            #6
            Originally posted by medmoh View Post

            Password if need: sanet.st
            password لا تعمل ؟
            Comment
            • espritmarin
              Free Membership
              • Oct 2020 
              • 345 
              • 282 
              • 180 

              #7
              Originally posted by elfouchali View Post
              في هذا الكورس لا تستطيع فتح Projet Application World Bucket List ،، هل لديك password ؟ و شكراً
              js10
              Comment
              • espritmarin
                Free Membership
                • Oct 2020 
                • 345 
                • 282 
                • 180 

                #8
                Originally posted by elfouchali View Post

                password لا تعمل ؟
                js10
                Comment
                • elfouchali
                  Free Membership
                  • Nov 2018 
                  • 17 
                  • 223 

                  #9
                  Originally posted by espritmarin2019 View Post

                  js10
                  عمل ممتاز شكراً
                  Comment
                  • medmoh
                    Thread Author
                    Free Membership
                    • Sep 2018 
                    • 2599 
                    • 1,914 
                    • 1,921 

                    #10
                    Originally posted by elfouchali View Post

                    عمل ممتاز شكراً
                    شكرا لك يأ خي و جزاك لله خيرا
                    Comment
                    • Dmhacking
                      Free membership
                      • Mar 2020 

                      #11
                      For me there are a lot of videos that don't work well please help me
                      Comment
                      • matrix.neo
                        Free membership
                        • Nov 2020 

                        #12
                        lien mort
                        Comment
                        • jamaicadesign
                          Free membership
                          • Oct 2018 
                          • 15 
                          • 239 
                          • 21 

                          #13
                          الرابط لا يعمل من فضلك أعد الرفع على سيرفرات أخرى وشكرا لك مسبقا
                          Comment
                          Working...