Intro to Javascript and jQuery

javascript & jquery
22-3375 Web Design I // Columbia College Chicago

Student Presentations
Present portfolio mockups
Walk us through the flow (homepage, detail, about)
What types of work will you be showing?
Any special interactions that you need to work out?
Will you be able to code this by the end of the course?

What is a javascript?
JavaScript (sometimes abbreviated JS) is a scripting
language commonly implemented as part of a web
browser in order to create enhanced user interfaces
and dynamic websites.
Javascript is a client-side programming language,
which means that it resides on the client’s machine
and not on the server (in your browser).

Every script is made up of a series of statements.
<script>
first statement;
second statement;
</script>

A JavaScript function is a "recipe" of instructions
(i.e., statements or commands) whose purpose is
to accomplish a well-defined task.
<script>
function square (number)
{
var result = number * number;
return result;
}
</script>

Variables in JavaScript are similar to the variables
you may have studied in high school algebra. You
can think of variables as "holding places" where
values are stored and retrieved.
<script>
greeting = "Hello";
greeting = greeting + ", my friend.";
</script>

Where does javascript go?
Javascript is usually typed in the <head>
element, in a linked .js file, or both.

Try It
<script>
function displayDate(
{
document.getElementById("date").innerHTML=Date();
}
</script>

What is a jquery?
jQuery is a multi-browser JavaScript library designed to
simplify the client-side scripting of HTML.
“Library” in this contexts means a group of javascript
functions (which you might see referred to as methods)
that you can access and run on your page with very little
coding.
jQuery is javascript, but it uses it’s own “selector engine”
that is very designer friendly. A “selector engine” is just
the way that you reference elements in your html in order
to make the do something. jQuery uses CSS selectors,
which you already know how to use!

Where does jquery go?
The jquery library is linked from the
<head> document. You can download the
jquery file from jquery.com, or link to the
Google version. It should go below your
CSS, but above any scripts or plugins.

Try It
<script>
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
return false
});
});
</script>

Intro to Javascript and jQuery

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to Intro to Javascript and jQuery (20)

More from Shawn Calvert (11)

Recently uploaded (20)

Intro to Javascript and jQuery