SlideShare a Scribd company logo
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

PDF
Intro to Javascript and jQuery
PDF
Class Intro / HTML Basics
PDF
Html / CSS Presentation
PDF
HTML Foundations, pt 2
PDF
Frontend Crash Course: HTML and CSS
PDF
Div tag presentation
PDF
Introduction to HTML, CSS, and Javascript
PPTX
CSC103 Web Technologies: HTML, CSS, JS
Intro to Javascript and jQuery
Class Intro / HTML Basics
Html / CSS Presentation
HTML Foundations, pt 2
Frontend Crash Course: HTML and CSS
Div tag presentation
Introduction to HTML, CSS, and Javascript
CSC103 Web Technologies: HTML, CSS, JS

What's hot (20)

PPT
Span and Div tags in HTML
PDF
Week 2-intro-html
ODP
Introduction of Html/css/js
PPTX
Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology
PPTX
Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology
PPTX
Html css java script basics All about you need
PDF
Images on the Web
PDF
Web Typography
PDF
Html,javascript & css
PPT
A quick guide to Css and java script
PPTX
Hushang Gaikwad
DOCX
PHP HTML CSS Notes
PPT
HTML 5 Complete Reference
PPTX
HTML, CSS and Java Scripts Basics
PPT
Java script
PPTX
HTML, CSS And JAVASCRIPT!
PPTX
Presentation
PPTX
PPTX
Java Script
PDF
HTML Lecture Part 1 of 2
Span and Div tags in HTML
Week 2-intro-html
Introduction of Html/css/js
Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology
Html css java script basics All about you need
Images on the Web
Web Typography
Html,javascript & css
A quick guide to Css and java script
Hushang Gaikwad
PHP HTML CSS Notes
HTML 5 Complete Reference
HTML, CSS and Java Scripts Basics
Java script
HTML, CSS And JAVASCRIPT!
Presentation
Java Script
HTML Lecture Part 1 of 2
Ad

Viewers also liked (12)

PDF
Web Layout
PDF
HTML Foundations, pt 3: Forms
PDF
User Centered Design
PDF
Web Design Process
PDF
Introduction to Responsive Web Design
PDF
10 Usability & UX Guidelines
PDF
HTML Email
PDF
CSS Foundations, pt 2
PDF
Basics of Web Navigation
PDF
Creating Images for the Web
PDF
Usability and User Experience
PDF
CSS Foundations, pt 1
Web Layout
HTML Foundations, pt 3: Forms
User Centered Design
Web Design Process
Introduction to Responsive Web Design
10 Usability & UX Guidelines
HTML Email
CSS Foundations, pt 2
Basics of Web Navigation
Creating Images for the Web
Usability and User Experience
CSS Foundations, pt 1
Ad

Similar to Intro to jQuery (20)

PPT
J Query
PPTX
Introduction to jQuery
PPT
J Query(04 12 2008) Foiaz
PDF
java-scriptcdvcx vnbm,azsdfghjkml;sxdfcgmndxfcgvhb nmfctgvbhjnm ,cfgvb nm,xc ...
PDF
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
PDF
Wt unit 2 ppts client side technology
PDF
Wt unit 2 ppts client sied technology
PPTX
Java script
PPTX
Jquery Basics
PPTX
unit4 wp.pptxjvlbpuvghuigv8ytg2ugvugvuygv
PPTX
Jquery Complete Presentation along with Javascript Basics
DOCX
Basic Java script handouts for students
PPTX
Java Script - A New Look
PPTX
PPT
Java script Learn Easy
PPTX
FYBSC IT Web Programming Unit III Javascript
PPTX
PDF
3. Java Script
PPTX
Jquery beltranhomewrok
PPTX
Jquery beltranhomewrok
J Query
Introduction to jQuery
J Query(04 12 2008) Foiaz
java-scriptcdvcx vnbm,azsdfghjkml;sxdfcgmndxfcgvhb nmfctgvbhjnm ,cfgvb nm,xc ...
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
Wt unit 2 ppts client side technology
Wt unit 2 ppts client sied technology
Java script
Jquery Basics
unit4 wp.pptxjvlbpuvghuigv8ytg2ugvugvuygv
Jquery Complete Presentation along with Javascript Basics
Basic Java script handouts for students
Java Script - A New Look
Java script Learn Easy
FYBSC IT Web Programming Unit III Javascript
3. Java Script
Jquery beltranhomewrok
Jquery beltranhomewrok

More from Shawn Calvert (11)

PDF
Web Design I Syllabus 22 3375-03
PDF
HTML Foundations, part 1
PDF
Web Design 1: Introductions
PDF
22-3530, Photo Communications Syllabus
PDF
An Overview of Stock Photography
PDF
Color Photography
PDF
PSA posters
PDF
Composition & Light
PDF
of Pixels and Bits
PDF
Camera basics
PDF
Typography I syllabus
Web Design I Syllabus 22 3375-03
HTML Foundations, part 1
Web Design 1: Introductions
22-3530, Photo Communications Syllabus
An Overview of Stock Photography
Color Photography
PSA posters
Composition & Light
of Pixels and Bits
Camera basics
Typography I syllabus

Recently uploaded (20)

PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
Review of recent advances in non-invasive hemoglobin estimation
PDF
Electronic commerce courselecture one. Pdf
PPTX
MYSQL Presentation for SQL database connectivity
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PDF
cuic standard and advanced reporting.pdf
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Spectral efficient network and resource selection model in 5G networks
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
Modernizing your data center with Dell and AMD
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Agricultural_Statistics_at_a_Glance_2022_0.pdf
Review of recent advances in non-invasive hemoglobin estimation
Electronic commerce courselecture one. Pdf
MYSQL Presentation for SQL database connectivity
Advanced methodologies resolving dimensionality complications for autism neur...
Unlocking AI with Model Context Protocol (MCP)
Mobile App Security Testing_ A Comprehensive Guide.pdf
NewMind AI Weekly Chronicles - August'25 Week I
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
Digital-Transformation-Roadmap-for-Companies.pptx
Per capita expenditure prediction using model stacking based on satellite ima...
cuic standard and advanced reporting.pdf
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Spectral efficient network and resource selection model in 5G networks
“AI and Expert System Decision Support & Business Intelligence Systems”
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Encapsulation_ Review paper, used for researhc scholars
Modernizing your data center with Dell and AMD
Building Integrated photovoltaic BIPV_UPV.pdf

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>