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
iOS / Android ネイティブ 実装アプリの Flutter 化事例
mthiroshi
0
650
Flutterアプリを GitHub Actions & Xcode Cloud で社内配布する / Distribute Flutter apps internally
takasfz
0
130
Running Laravel Apps With FrankenPHP
dunglas
4
1.2k
DDD, necessary but insufficient: physical design principles for microservices
cer
PRO
0
120
Cloudflare Workersの環境を再現することについて
yusukebe
5
730
期限が近づいてきた!Privacy Manifests対応
ryunakayama
5
3.1k
「プログラマーのためのCPU入門」は入り口として丁度よい!
forrep
25
22k
シェルの履歴とイクンリメンタル検索を使う
naoya
7
2.3k
メール認証とRuby
uvb_76
0
110
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
1.4k
So You Think You Know Git - Part 2
schacon
PRO
0
1.3k
OpCode目線で眺める PHPコードのカバレッジ
o0h
PRO
2
470
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
The Brand Is Dead. Long Live the Brand.
mthomps
48
19k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
In The Pink: A Labor of Love
frogandcode
137
21k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
The Cult of Friendly URLs
andyhume
72
5.6k
What's in a price? How to price your products and services
michaelherold
236
11k
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