intro to jquery
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
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>"));
DOMManipulation
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);
});
});
</script>
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