SlideShare uma empresa Scribd logo
1 de 19
Baixar para ler offline
Javascript & jQuery
1. Un programme javascript
1.1 Outils
Moteurs JavaScript pour le développement
Navigateur JSFiddleConsole
Les outils du développeur Javascript (1)
FireFox Chrome Chrome Canary
Les outils du développeur Javascript (2)
Sublime Text BracketsAtom.io
1.2 code javascript ?
Un fichier javascript
alert("Bazinga");
alert("Im not crazy.");
alert("My mother had me tested");
Quelques commandes
alert("Suit up!");
console.log("Haaaaaave you met Ted?");
Commentaires
// Single Line Comments
/*
Multi-line
Comments
*/
1.3 Où mettre du javascript ?
JavaScript dans une page HTML (1)
<!doctype html>
<html>
<head></head>
<body>
    <script>
       alert('Hello world!');
     </script>
</body>
</html>
JavaScript dans une page HTML (2)
<!doctype html>
<html>
<head></head>
<body>
    <script src="hello.js"></script>
</body>
</html>
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
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>
Document ready
$(document).ready(function() {
alert('Hello');
}
Example : Smooth scroll
$('a[href^="#"]').click(function(){
var the_id = $(this).attr("href");
$('html, body').animate({
scrollTop:$(the_id).offset().top
}, 'slow');
return false;
});
Merci pour votre attention.

Mais conteúdo relacionado

Mais procurados

12 Rocking Apache .htaccess Tutorial ...
12 Rocking Apache .htaccess Tutorial ...12 Rocking Apache .htaccess Tutorial ...
12 Rocking Apache .htaccess Tutorial ...
wensheng wei
 

Mais procurados (20)

jQuery 1.3 and jQuery UI
jQuery 1.3 and jQuery UIjQuery 1.3 and jQuery UI
jQuery 1.3 and jQuery UI
 
Cara instal
Cara instalCara instal
Cara instal
 
Lightning Talk: Making JS better with Browserify
Lightning Talk: Making JS better with BrowserifyLightning Talk: Making JS better with Browserify
Lightning Talk: Making JS better with Browserify
 
12 Rocking Apache .htaccess Tutorial ...
12 Rocking Apache .htaccess Tutorial ...12 Rocking Apache .htaccess Tutorial ...
12 Rocking Apache .htaccess Tutorial ...
 
RSpec. Part 3
RSpec. Part 3RSpec. Part 3
RSpec. Part 3
 
10 things you are doing wrong in Joomla
10 things you are doing wrong in Joomla10 things you are doing wrong in Joomla
10 things you are doing wrong in Joomla
 
Mac OS X Lion で作る WordPress local 環境
Mac OS X Lion で作る WordPress local 環境Mac OS X Lion で作る WordPress local 環境
Mac OS X Lion で作る WordPress local 環境
 
Python para web - Utilizando micro-framework Flask - PUG-MA
Python para web - Utilizando micro-framework Flask - PUG-MAPython para web - Utilizando micro-framework Flask - PUG-MA
Python para web - Utilizando micro-framework Flask - PUG-MA
 
Wso2 esb-rest-integration
Wso2 esb-rest-integrationWso2 esb-rest-integration
Wso2 esb-rest-integration
 
Css secrets
Css secretsCss secrets
Css secrets
 
Human Talks Riot.js
Human Talks Riot.jsHuman Talks Riot.js
Human Talks Riot.js
 
Beginning Jquery In Drupal Theming
Beginning Jquery In Drupal ThemingBeginning Jquery In Drupal Theming
Beginning Jquery In Drupal Theming
 
Asynchronous JavaScript loading
Asynchronous JavaScript loadingAsynchronous JavaScript loading
Asynchronous JavaScript loading
 
ExtJS勉強会@名古屋
ExtJS勉強会@名古屋ExtJS勉強会@名古屋
ExtJS勉強会@名古屋
 
Canjs
CanjsCanjs
Canjs
 
Redmine on amazon ec2
Redmine on amazon ec2Redmine on amazon ec2
Redmine on amazon ec2
 
Canjs
CanjsCanjs
Canjs
 
Building Javascript Apps with the WordPress JSON API – LoopConf 2015
Building Javascript Apps with the WordPress JSON API – LoopConf 2015Building Javascript Apps with the WordPress JSON API – LoopConf 2015
Building Javascript Apps with the WordPress JSON API – LoopConf 2015
 
WP migrations
WP migrationsWP migrations
WP migrations
 
DevOps: Falando um pouco sobre desenvolvimento orientado a testes com Puppet
DevOps: Falando um pouco sobre desenvolvimento orientado a testes com PuppetDevOps: Falando um pouco sobre desenvolvimento orientado a testes com Puppet
DevOps: Falando um pouco sobre desenvolvimento orientado a testes com Puppet
 

Destaque

Architecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented designArchitecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented design
Jean Michel
 

Destaque (20)

Projet timezone
Projet timezoneProjet timezone
Projet timezone
 
Javascript #5.1 : tp1 zombies!
Javascript #5.1 : tp1 zombies!Javascript #5.1 : tp1 zombies!
Javascript #5.1 : tp1 zombies!
 
Wordpress #1 : introduction
Wordpress #1 : introductionWordpress #1 : introduction
Wordpress #1 : introduction
 
Javascript #2 : valeurs, types & opérateurs
Javascript #2 : valeurs, types & opérateursJavascript #2 : valeurs, types & opérateurs
Javascript #2 : valeurs, types & opérateurs
 
Wordpress #2 : customisation
Wordpress #2 : customisationWordpress #2 : customisation
Wordpress #2 : customisation
 
Wordpress #3 : content strategie
Wordpress #3 : content strategieWordpress #3 : content strategie
Wordpress #3 : content strategie
 
Startup & entrepreneuriat #2.1: disrupt me
Startup & entrepreneuriat #2.1: disrupt meStartup & entrepreneuriat #2.1: disrupt me
Startup & entrepreneuriat #2.1: disrupt me
 
Javascript #4.2 : fonctions for pgm
Javascript #4.2 : fonctions for pgmJavascript #4.2 : fonctions for pgm
Javascript #4.2 : fonctions for pgm
 
#3 html in the real world
#3 html in the real world#3 html in the real world
#3 html in the real world
 
Html & Css #5 : positionement
Html & Css #5 : positionementHtml & Css #5 : positionement
Html & Css #5 : positionement
 
Les modèles économiques du web
Les modèles économiques du webLes modèles économiques du web
Les modèles économiques du web
 
#1 entreprendre au xxiè siècle
#1 entreprendre au xxiè siècle#1 entreprendre au xxiè siècle
#1 entreprendre au xxiè siècle
 
Dev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummiesDev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummies
 
PHP #7 : guess who?
PHP #7 : guess who?PHP #7 : guess who?
PHP #7 : guess who?
 
Architecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented designArchitecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented design
 
Architecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezoneArchitecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezone
 
Javascript #7 : manipuler le dom
Javascript #7 : manipuler le domJavascript #7 : manipuler le dom
Javascript #7 : manipuler le dom
 
#4 css 101
#4 css 101#4 css 101
#4 css 101
 
Architecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto frameworkArchitecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto framework
 
Javascript #11: Space invader
Javascript #11: Space invaderJavascript #11: Space invader
Javascript #11: Space invader
 

Semelhante a Javascript #2.2 : jQuery

Java script writing javascript
Java script writing javascriptJava script writing javascript
Java script writing javascript
Jesus Obenita Jr.
 
Intro to jQuery - LUGOR - Part 1
Intro to jQuery - LUGOR - Part 1Intro to jQuery - LUGOR - Part 1
Intro to jQuery - LUGOR - Part 1
Ralph Whitbeck
 

Semelhante a Javascript #2.2 : jQuery (20)

Firefox OS, introduction, concepts, architecture and hello world example
Firefox OS, introduction, concepts, architecture and hello world exampleFirefox OS, introduction, concepts, architecture and hello world example
Firefox OS, introduction, concepts, architecture and hello world example
 
Wt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technologyWt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technology
 
Wt unit 2 ppts client side technology
Wt unit 2 ppts client side technologyWt unit 2 ppts client side technology
Wt unit 2 ppts client side technology
 
1. java script language fundamentals
1. java script language fundamentals1. java script language fundamentals
1. java script language fundamentals
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4
 
Introduction to Javascript programming
Introduction to Javascript programmingIntroduction to Javascript programming
Introduction to Javascript programming
 
jQuery Features to Avoid
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoid
 
Learning jQuery made exciting in an interactive session by one of our team me...
Learning jQuery made exciting in an interactive session by one of our team me...Learning jQuery made exciting in an interactive session by one of our team me...
Learning jQuery made exciting in an interactive session by one of our team me...
 
Presentation
PresentationPresentation
Presentation
 
Java script writing javascript
Java script writing javascriptJava script writing javascript
Java script writing javascript
 
Intro to jQuery
Intro to jQueryIntro to jQuery
Intro to jQuery
 
jQuery
jQueryjQuery
jQuery
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do More
 
J Query Presentation
J Query PresentationJ Query Presentation
J Query Presentation
 
jQuery and_drupal
jQuery and_drupaljQuery and_drupal
jQuery and_drupal
 
Intro to jQuery - LUGOR - Part 1
Intro to jQuery - LUGOR - Part 1Intro to jQuery - LUGOR - Part 1
Intro to jQuery - LUGOR - Part 1
 
JavaScript - Part-1
JavaScript - Part-1JavaScript - Part-1
JavaScript - Part-1
 
Brian hogg word camp preparing a plugin for translation
Brian hogg   word camp preparing a plugin for translationBrian hogg   word camp preparing a plugin for translation
Brian hogg word camp preparing a plugin for translation
 

Mais de Jean Michel

Mais de Jean Michel (19)

Startup #7 : how to get customers
Startup #7 : how to get customersStartup #7 : how to get customers
Startup #7 : how to get customers
 
HTML & CSS #10 : Bootstrap
HTML & CSS #10 : BootstrapHTML & CSS #10 : Bootstrap
HTML & CSS #10 : Bootstrap
 
Javascript #10 : canvas
Javascript #10 : canvasJavascript #10 : canvas
Javascript #10 : canvas
 
Architecture logicielle #4 : mvc
Architecture logicielle #4 : mvcArchitecture logicielle #4 : mvc
Architecture logicielle #4 : mvc
 
Architecture logicielle #1 : introduction
Architecture logicielle #1 : introductionArchitecture logicielle #1 : introduction
Architecture logicielle #1 : introduction
 
PHP #6 : mysql
PHP #6 : mysqlPHP #6 : mysql
PHP #6 : mysql
 
PHP & MYSQL #5 : fonctions
PHP & MYSQL #5 :  fonctionsPHP & MYSQL #5 :  fonctions
PHP & MYSQL #5 : fonctions
 
PHP #4 : sessions & cookies
PHP #4 : sessions & cookiesPHP #4 : sessions & cookies
PHP #4 : sessions & cookies
 
PHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulairesPHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulaires
 
PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles
 
PHP #1 : introduction
PHP #1 : introductionPHP #1 : introduction
PHP #1 : introduction
 
Startup #5 : pitch
Startup #5 : pitchStartup #5 : pitch
Startup #5 : pitch
 
WebApp #4 : Consuming REST APIs
WebApp #4 : Consuming REST APIs WebApp #4 : Consuming REST APIs
WebApp #4 : Consuming REST APIs
 
Javascript #8 : événements
Javascript #8 : événementsJavascript #8 : événements
Javascript #8 : événements
 
WebApp #3 : API
WebApp #3 : APIWebApp #3 : API
WebApp #3 : API
 
WebApp #2 : responsive design
WebApp #2 : responsive designWebApp #2 : responsive design
WebApp #2 : responsive design
 
Gestion de projet #4 : spécification
Gestion de projet #4 : spécificationGestion de projet #4 : spécification
Gestion de projet #4 : spécification
 
Projet timezone
Projet timezoneProjet timezone
Projet timezone
 
WebApp #1 : introduction
WebApp #1 : introductionWebApp #1 : introduction
WebApp #1 : introduction
 

Último

+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
Health
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providerTECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
mohitmore19
 

Último (20)

Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdfAzure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
 
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
 
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
 
Optimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTVOptimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTV
 
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
 
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) SolutionIntroducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
 
8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students
 
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected WorkerHow To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
 
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providerTECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
 
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf
 
10 Trends Likely to Shape Enterprise Technology in 2024
10 Trends Likely to Shape Enterprise Technology in 202410 Trends Likely to Shape Enterprise Technology in 2024
10 Trends Likely to Shape Enterprise Technology in 2024
 
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsRight Money Management App For Your Financial Goals
Right Money Management App For Your Financial Goals
 
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplateAI & Machine Learning Presentation Template
AI & Machine Learning Presentation Template
 
How to Choose the Right Laravel Development Partner in New York City_compress...
How to Choose the Right Laravel Development Partner in New York City_compress...How to Choose the Right Laravel Development Partner in New York City_compress...
How to Choose the Right Laravel Development Partner in New York City_compress...
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsUnveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
 
Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionDiamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with Precision
 
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
 

Javascript #2.2 : jQuery