19
Javascript & jQuery

Javascript #2.2 : jQuery

Embed Size (px)

Citation preview

Page 1: Javascript #2.2 : jQuery

Javascript & jQuery

Page 2: Javascript #2.2 : jQuery

1. Un programme javascript

Page 3: Javascript #2.2 : jQuery

1.1 Outils

Page 4: Javascript #2.2 : jQuery

Moteurs JavaScript pour le développement

Navigateur JSFiddleConsole

Page 5: Javascript #2.2 : jQuery

Les outils du développeur Javascript (1)

FireFox Chrome Chrome Canary

Page 6: Javascript #2.2 : jQuery

Les outils du développeur Javascript (2)

Sublime Text BracketsAtom.io

Page 7: Javascript #2.2 : jQuery

1.2 code javascript ?

Page 8: Javascript #2.2 : jQuery

Un fichier javascript

alert("Bazinga"); alert("Im not crazy."); alert("My mother had me tested");

Page 9: Javascript #2.2 : jQuery

Quelques commandes

alert("Suit up!"); console.log("Haaaaaave you met Ted?");

Page 10: Javascript #2.2 : jQuery

Commentaires

// Single Line Comments

/* Multi-line Comments */

Page 11: Javascript #2.2 : jQuery

1.3 Où mettre du javascript ?

Page 12: Javascript #2.2 : jQuery

JavaScript dans une page HTML (1)

<!doctype html> <html> <head></head> <body>     <script>        alert('Hello world!');      </script> </body> </html>

Page 13: Javascript #2.2 : jQuery

JavaScript dans une page HTML (2)

<!doctype html> <html> <head></head> <body>     <script src="hello.js"></script> </body> </html>

Page 14: Javascript #2.2 : jQuery

2. jQuery

Page 15: Javascript #2.2 : jQuery

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

Page 16: Javascript #2.2 : jQuery

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>

Page 17: Javascript #2.2 : jQuery

Document ready

$(document).ready(function() { alert('Hello'); }

Page 18: Javascript #2.2 : jQuery

Example : Smooth scroll

$('a[href^="#"]').click(function(){ var the_id = $(this).attr("href");

$('html, body').animate({ scrollTop:$(the_id).offset().top }, 'slow'); return false; });

Page 19: Javascript #2.2 : jQuery

Merci pour votre attention.