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
540
Other Decks in Programming
See All in Programming
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
580
Exploring Type-Informed Lint Rules in Rust based TypeScript Linters
unvalley
3
570
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
500
RustでAWS Lambda functionをいい感じに書く
taiki45
2
130
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.8k
2 週間で Twitter Bot を作ってみた
contour_gara
0
830
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
170
RailsConf 2024: Riffing on Rails: sketch your way to better designed code
kaspth
0
190
AmperとFleetを使ったAndroidアプリ
yoppie
0
290
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1.1k
ソースコードを美しくたもつために ~コードレビューの認知限界を突破し、年間400リリースを達成する~
kotauchisunsun
1
140
ts-morphを使ってコードリプレイスとASTへのハードルを下げる!
nyawach
4
300
Featured
See All Featured
Building an army of robots
kneath
300
41k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Ruby is Unlike a Banana
tanoku
96
10k
The Invisible Customer
myddelton
114
12k
Scaling GitHub
holman
457
140k
In The Pink: A Labor of Love
frogandcode
138
21k
Unsuck your backbone
ammeep
664
57k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
Why Our Code Smells
bkeepers
PRO
331
56k
A Philosophy of Restraint
colly
197
16k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
KATA
mclloyd
16
12k
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