Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript #2.2 : jQuery

507 views

Published on

Javascript #2 : jQuery

Published in: Software
  • Be the first to comment

  • Be the first to like this

Javascript #2.2 : jQuery

  1. 1. Javascript & jQuery
  2. 2. 1. Un programme javascript
  3. 3. 1.1 Outils
  4. 4. Moteurs JavaScript pour le développement Navigateur JSFiddleConsole
  5. 5. Les outils du développeur Javascript (1) FireFox Chrome Chrome Canary
  6. 6. Les outils du développeur Javascript (2) Sublime Text BracketsAtom.io
  7. 7. 1.2 code javascript ?
  8. 8. Un fichier javascript alert("Bazinga"); alert("Im not crazy."); alert("My mother had me tested");
  9. 9. Quelques commandes alert("Suit up!"); console.log("Haaaaaave you met Ted?");
  10. 10. Commentaires // Single Line Comments /* Multi-line Comments */
  11. 11. 1.3 Où mettre du javascript ?
  12. 12. JavaScript dans une page HTML (1) <!doctype html> <html> <head></head> <body>     <script>        alert('Hello world!');      </script> </body> </html>
  13. 13. JavaScript dans une page HTML (2) <!doctype html> <html> <head></head> <body>     <script src="hello.js"></script> </body> </html>
  14. 14. 2. jQuery
  15. 15. jQuery ? jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today. jQuery is free, open-source software licensed under the MIT License. https://en.wikipedia.org
  16. 16. Use jQuery <!DOCTYPE html> <html lang="fr"> <head></head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/main.js"></script> </body> </html>
  17. 17. Document ready $(document).ready(function() { alert('Hello'); }
  18. 18. Example : Smooth scroll $('a[href^="#"]').click(function(){ var the_id = $(this).attr("href"); $('html, body').animate({ scrollTop:$(the_id).offset().top }, 'slow'); return false; });
  19. 19. Merci pour votre attention.

×