Introduction to JavaScript and JQuery

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);

BarCamp!”; sayHello(myMessage); variable assignment

BarCamp!”; sayHello(myMessage); function invocation

BarCamp!”; sayHello(myMessage); function declaration

BarCamp!”; sayHello(myMessage); argument

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:ﬁrst"); $("a.greeting"); $("#greeter"); //most efﬁcient 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 }); });

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

Introduction to JavaScript and JQuery

Introduction to JavaScript and JQuery

More Decks by Dan Pickett

Other Decks in Programming

Featured

Transcript