Intro to jquery

Intro to
JavaScript
and JQuery

Hi!
LaunchWare.com
on the InterTubes

dpickett
on Twitter

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)

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>

Let’s Refactor...
function sayHello(msg){
alert(msg);
}

var myMessage = “Hello BarCamp!”;
sayHello(myMessage);

Let’s Refactor...
alert(msg);
}
variable assignment


Let’s Refactor...
alert(msg);
}

function invocation

Let’s Refactor...
function declaration
alert(msg);
}


Let’s Refactor...
argument
alert(msg);
}


Let’s Refactor...
function body
alert(msg);
}


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>


$("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");

DOM
$("a").offset().top;
$("a").hide();
Manipulation
$("a").remove();
$("a").addClass("context");
$("a").insertAfter($("<p>Hello</p>"));

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

console.log('The Page Has Completely Loaded');
});
</script>

DOM Ready Shortcut

$(function(){
console.log('The Page Has Completely Loaded');
});
</script>

Event Driven DOM
Manipulation
$("#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>

$("#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 dan.pickett@launchware.com
• Chat with me after the talk

Intro to jquery

More Related Content

What's hot

Similar to Intro to jquery

More from Dan Pickett

Intro to jquery