Web2 week-6-jquery

22-3376 Web Design 2 // Columbia College Chicago

jquery

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

http://en.wikipedia.org/wiki/Scripting_language

http://en.wikipedia.org/wiki/Web_browser

http://en.wikipedia.org/wiki/User_interface

http://en.wikipedia.org/wiki/Website

Javascript Syntax

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.

function square (number) { return number * number;}

function square (number) { return number * number; }

function name parameter

statement

A function definition is made up of the function keyword, the name of the function, parameters to the function, and one or more statements.

FUNCTION

A function is executed when “something” invokes or “calls’ it, such as: when an event occurs (user click), if it is called when another script runs, or if it runs automatically.

function displayDate( ){ document.getElementById("date").innerHTML=Date(); }

<button type="button" onclick="displayDate()">Display Date</button> <p id="date">This will be replaced by today's date.</p>

FUNCTION CALL IN HTML

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.

greeting = "Hello"; greeting = greeting + ", my friend.";

Where does javascript go?

Javascript is usually typed in the <head> element, in a linked .js file, or both.

!

!

Where does javascript go?

Javascript is usually typed in the <head> element, in a linked .js file, or both.

!

Try It

function displayDate() { document.getElementById("date").innerHTML=Date(); } !

!

function addNumbers(){ y=5; z=2; x=y+z; document.getElementById("add").innerHTML=x; }

date

add

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 context 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!

http://en.wikipedia.org/wiki/JavaScript_library

http://en.wikipedia.org/wiki/Client-side_scripting

http://en.wikipedia.org/wiki/HTML

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.

!

!

Where does jquery go?

Try It

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

Web2 week-6-jquery

Documents

Transcript of Web2 week-6-jquery