Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to JavaScript and JQuery
Search
Dan Pickett
April 07, 2012
Programming
2
170
Introduction to JavaScript and JQuery
A quick, 30 minute crash course exploring JavaScript and JQuery
Dan Pickett
April 07, 2012
Tweet
Share
More Decks by Dan Pickett
See All by Dan Pickett
5 Favorite Gems
dpickett
2
54
The Rails Engine That Could
dpickett
2
530
Other Decks in Programming
See All in Programming
敵対的ポイフル
futabato
0
120
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
160
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
430
雑に思考を整理する技術と効能
konifar
61
30k
Milestoner
bkuhlmann
1
410
Snowflakeで眠ったデータを起こそう!
estie
0
130
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
960
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
210
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
Try creating your own orderedmap
kazamori
1
150
禅の心を手に入れよ
eltociear
1
270
Let's learn code review
riofujimon
2
560
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
325
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Statistics for Hackers
jakevdp
790
220k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
222
21k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
13
8.3k
BBQ
matthewcrist
80
8.8k
Transcript
Intro to JavaScript and JQuery
Hi! dpickett on Twitter LaunchWare.com on the InterTubes
Enough about me... to learn JavaScript!
Our Chat Today • Where is JavaScript? • Great uses
of JavaScript • The Basics of JavaScript • An Intro to JQuery
Where’s JavaScript? • Most popularly used for client side behaviors
on web pages • Made popular on the server side with NodeJS • Start with the client side
A Note on Accessibility • Great web developers develop with
accessibility in mind • Make your web pages work great without JavaScript using progressive enhancement (more on this later)
Google Maps
Twitter
Your First Program alert(“hello BarCamp”);
alert(“hello BarCamp”); function string
Putting JS on your webpage <script type="text/javascript"> //your code here
/* a multiline comment */ </script>
Putting JS on your webpage <script type="text/javascript" src="your_filename.js"> </script>
Firebug
Chrome Inspector
Node REPL
How to Install NodeJS
Let’s Refactor... function sayHello(msg){ alert(msg); } var myMessage = “Hello
BarCamp!”; sayHello(myMessage);
Let’s Refactor... function sayHello(msg){ alert(msg); } var myMessage = “Hello
BarCamp!”; sayHello(myMessage); variable assignment
Let’s Refactor... function sayHello(msg){ alert(msg); } var myMessage = “Hello
BarCamp!”; sayHello(myMessage); function invocation
Let’s Refactor... function sayHello(msg){ alert(msg); } var myMessage = “Hello
BarCamp!”; sayHello(myMessage); function declaration
Let’s Refactor... function sayHello(msg){ alert(msg); } var myMessage = “Hello
BarCamp!”; sayHello(myMessage); argument
Let’s Refactor... function sayHello(msg){ alert(msg); } var myMessage = “Hello
BarCamp!”; sayHello(myMessage); function body
For Optimal Page Performance Put your scripts at the end
of your body
Control Logic if(message === 'Hello'){ alert(msg); } else { alert("Something
else was set"); }
Control Logic if(typeof window != ‘undefined’){ alert(msg); } else {
console.log(msg); }
So Much More... • Regular Expressions • Loops and Iteration
• Arrays • Objects
JQuery • A JavaScript Framework with roots in Boston (John
Resig) • Removes the friction of cross-browser behaviors for animation, event handling, AJAX, and DOM manipulation
The JQuery Function $(<selector>); $(function(){}); // alias for $(document).ready $(<html
markup>);
Selectors <a href="hello.html" class="greeting" style="color: blue;" id="greeter">Say Hello</a> <script type="text/javascript">
$("a"); $("a:first"); $("a.greeting"); $("#greeter"); //most efficient selector </script>
What Can I Do With a Selector? $("a").css("color"); //the color
of a: blue $("a").offset().top; //position of the element $("a").hide(); //hide the element $("a").remove(); //remove the element $("a").addClass("context"); //add a class $("a").after("<p>Hello</p>")); //append
What Can I Do With a Selector? $("a").css("color"); $("a").offset().top; $("a").hide();
$("a").remove(); $("a").addClass("context"); $("a").insertAfter($("<p>Hello</p>")); DOM Manipulation
Events <a href=‘hello.html’ id="greeter">Say Hello</a> <script type=”text/javascript"> $(document).ready(function(){ $("#greeter").click(function(event){ event.preventDefault();
alert("Hello BarCamp!"); });
Events <a href=‘hello.html’ id="greeter">Say Hello</a> <script type=”text/javascript"> $(document).ready(function(){ console.log('The Page
Has Completely Loaded'); }); </script>
DOM Ready Shortcut <script type=”text/javascript"> $(function(){ console.log('The Page Has Completely
Loaded'); }); </script>
Events <a href=‘hello.html’ id="greeter">Say Hello</a> <script type=”text/javascript"> $(document).ready(function(){ $("#greeter").click(function(event){ event.preventDefault();
alert("Hello BarCamp!"); });
Event Driven DOM Manipulation <a href=‘hello.html’ id="greeter">Say Hello</a> <script type=”text/javascript">
$(document).ready(function(){ $("#greeter").click(function(event){ event.preventDefault(); var paragraph = $("<p>").html("Hello Barcamp!"); $(this).after(paragraph); }); });
Reacting to Input <form> <input id="name" name="name" type="text"> </form> <script
type="text/javascript"> $("#name").change(function(event){ console.log("Hello " + $("#name").val() + "!"); }); </script>
Progressive Enhancement <a href="hello.html" id="say-hello">Say Hello</a> $(function(){ $("#say-hello").click(function(e){ e.preventDefault(); //enhance
the experience }); });
Progressive Enhancement <a href="hello.html" id="say-hello">Say Hello</a> $(function(){ $("#say-hello").click(function(e){ e.preventDefault(); //enhance
the experience }); });
So Much More.. • AJAX • JQuery UI • Testing
• BackboneJS
More Lengthy Intro to JS Free, 4 hour session coming
this summer!
Thanks! • Follow me on twitter @dpickett and give me
a shout! • Email me at
[email protected]
• Chat with me after the talk