SlideShare a Scribd company logo

Intro to jQuery

•
•
Shawn Calvert
Shawn Calvert

This document provides an introduction to JavaScript and jQuery. It defines JavaScript as a scripting language used to create dynamic and interactive web pages and applications. It resides in the browser rather than on the server. JavaScript uses functions to organize code into well-defined, reusable tasks. Functions are executed when events occur or when called from other scripts. The document also defines jQuery as a JavaScript library that simplifies client-side scripting with HTML through its selector engine and methods. jQuery code is linked in the page head or an external file below CSS but above other scripts.

Related slideshows

Span and Div tags in HTML
Span and Div tags in HTMLSpan and Div tags in HTML
Span and Div tags in HTML
 
Week 2-intro-html
Week 2-intro-htmlWeek 2-intro-html
Week 2-intro-html
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
1 of 17
Download to read offline
jquery 22-3376 Web Design 2 // Columbia College Chicago
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
<script> first statement; second statement; </script> Every script is made up of a series of statements.
function square (number) { return number * number; } A JavaScript function is a "recipe" of instructions (i.e., statements or commands) whose purpose is to accomplish a well-defined task.
function name parameter function square (number) { return number * number; } 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 function displayDate( ){ document.getElementById("date").innerHTML=Date(); } FUNCTION CALL IN HTML <button type="button" onclick="displayDate()">Display Date</button> <p id="date">This will be replaced by today's date.</p> 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.
greeting = "Hello"; greeting = greeting + ", my friend."; 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.
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!
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?
Where does jquery go?
Try It <script> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false }); }); </script>

More Related Content

Intro to jQuery

  • 1. jquery 22-3376 Web Design 2 // Columbia College Chicago
  • 2. 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).
  • 4. <script> first statement; second statement; </script> Every script is made up of a series of statements.
  • 5. function square (number) { return number * number; } A JavaScript function is a "recipe" of instructions (i.e., statements or commands) whose purpose is to accomplish a well-defined task.
  • 6. function name parameter function square (number) { return number * number; } 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.
  • 7. FUNCTION function displayDate( ){ document.getElementById("date").innerHTML=Date(); } FUNCTION CALL IN HTML <button type="button" onclick="displayDate()">Display Date</button> <p id="date">This will be replaced by today's date.</p> 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.
  • 8. greeting = "Hello"; greeting = greeting + ", my friend."; 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.
  • 9. Where does javascript go? Javascript is usually typed in the <head> element, in a linked .js file, or both. ! !
  • 10. Where does javascript go? Javascript is usually typed in the <head> element, in a linked .js file, or both. !
  • 11. 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
  • 13. 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!
  • 14. 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. ! !
  • 17. Try It <script> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false }); }); </script>