Embed Size (px)
DESCRIPTION
Citation preview
javascript & jquery22-3375 Web Design I // Columbia College Chicago
Student Presentations
Present portfolio mockups
Walk us through the !ow (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).
Javascript Syntax
Every script is made up of a series of statements.
<script>!rst statement;second statement;</script>
A JavaScript function is a "recipe" of instructions (i.e., statements or commands) whose purpose is to accomplish a well-de"ned 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 !le, or both.
Where does javascript go?
Javascript is usually typed in the <head> element, in a linked .js !le, or both.
Try It
<script> function displayDate( { document.getElementById("date").innerHTML=Date(); }</script>
Getting Started with jquery
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 !le from jquery.com, or link to the Google version. It should go below your CSS, but above any scripts or plugins.
Where does jquery go?
Where does jquery go?
Try It
<script> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false }); }); </script>
