SlideShare a Scribd company logo
1 of 34
Learning About JavaScript
…and its little buddy, JQuery!
GWU Libraries ● 26 June 2012
Julie Meloni // @jcmeloni // jcmeloni@gmail.com
Today’s General Outline
• Understanding JavaScript Basics
• About the DOM (Document Object Model)
• Where JQuery Fits in and How it Works
The Very Very Basics
• Developed in 1995 – it’s no spring chicken
• No relation to the Java programming language
• An interpreted rather than a compiled language
▫ Interpreted by the web browser software
• 98% of web traffic is JavaScript-enabled
▫ 2% made up of old screenreader software and
ultra-security-conscious people
Practical Uses
• Improving navigation
• Offering dynamic text display
• Creating special effects in response to user
• As the basis for remote scripting (the J in AJAX)
• Offering more interactivity than static HTML
▫ But less dynamism than a server-side language
How it Looks in the Source Code
<script type="text/javascript">
<!-- Hide the script from old browsers
document.write(document.lastModified);
// Stop hiding the script -->
</script>
Might display: 06/25/2012 08:07:51
How it Looks in the Source Code v2
<!DOCTYPE html>
<html>
<head>
<title>JS Test</title>
</head>
<body>
<h1>JS Test</h1>
<p style=“color: red”>
<script type="text/javascript">
<!-- Hide the script from old browsers
document.write(document.lastModified);
// Stop hiding the script -->
</script>
</p>
</body>
</html>
Moving Into Programming Basics
• Like other programming languages, JavaScript
has:
▫ Variables (& Arrays)
▫ Operators
▫ Flow Control
▫ Objects
About JavaScript Variables
• A variable is a bucket that holds one piece of
information.
• Examples:
• var string_variable = “The Library”;
• var numeric_variable = 4;
• var myname = “Julie”;
About JavaScript Arrays
• An array is a type of variable (or bucket) that
holds many pieces of information.
• Example:
• rainbow = new array(“red”, “orange”, “yellow”,
“green”, “blue”, “indigo”, “violet”);
 rainbow[0] holds “red”
 rainbow[1] holds “orange”
About JavaScript Operators
• Arithmetic
• +, -, *, / (add, subtract, multiply, divide)
• Assignment
• = (“Assign the value of 4 to the variable called a”)
 var a = 4;
• += (“Add the value of 5 to the variable that
already holds 4”)
 var a += 5; // a now holds 9
• -= (“Subtract the value of 3 to the variable that
already holds 4”)
 var a -= 3; // a now holds 1
About JavaScript Operators
• Comparison
• == (“when I compare the value in variable a to the
value in variable be, that comparison is true”)
 a == b
• != (“when I compare the value in variable a to the
value in variable be, that comparison is not true”)
• a != b
• >, >= (“the value of variable a is greater than (or
greater than or equal to) the value of variable b”)
 a > b
• <, <= (“the value of variable a is less than (or less
than or equal to) the value of variable b”)
 a < b
About JavaScript Operators
• Concatenation
• + (“this”+ “is a test”= “thisisatest”)
• Logical
• && (and)
• || (or)
• ! (not)
About JavaScript Flow Control
• if
if (something is true) {
do something here
}
• if ... else if ... else
if (something is true) {
do something here
} else if (something is true) {
do something here
} else {
do something here
}
About JavaScript Flow Control
• switch
switch (something) {
case “blue”:
do something here
break;
case “apple”:
do something else here
break;
case “fire truck”:
do something else here
break;
default:
do something else here
break;
}
About JavaScript Flow Control
• while
while (something is true) {
do something here
}
• for
for (something is true) {
do something here
}
About JavaScript Objects
• Objects can store multiple pieces of data,
but the internal structure of the data is
different than that of an array.
• The items of data stored in an object are called the properties of the
object.
 People objects in an address book might include a name, an address, and a
telephone number (Bob.address, Bob.phone, etc)
• Objects can use methods.
 Methods are built-in functions that work with the object's data, e.g. Bob.display()
• JavaScript supports three kinds of objects:
• Built-in to the JavaScript language.
• Custom objects you create.
• DOM (Document Object Model) -- components of the browser and the
current HTML document.
(The Document Object Model)
What is the DOM?
• The DOM is the invisible structure of all HTML
documents
▫ The overall container object is called the
document.
 Any container within the document that has an ID is
referenced by that ID.
 For example, if you have a <div> with an ID called
wrapper, then in the DOM that element is referenced
by document.wrapper
But it actually starts before that…
• The DOM is not part of JavaScript or any other
programming language -- it's an API built in to
the browser.
• At the top of the browser object hierarchy is the
window object.
• Also access the history object and the location object
• Inside a window is a document.
• window.document.header-image
<img id=“header-image” src=“some.jpg”/>
So what about document?
• The document object has several properties,
such as:
• document.URL
• document.title
• document.lastModified
• document.cookie
• document.images
• …and more!
And within document?
• The document object contains…containers (also called
nodes).
<!DOCTYPE html>
<html>
<head>
<title>A Simple HTML Document</title>
</head>
<body>
<h1>This is a Level-1 Heading.</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
Nodes Have Properties Too!
<h1>This is a Level-1 Heading.</h1>
• nodeName is the name of the node, e.g. h1
• innerHTML is the text within the node, e.g. “This is
a Level-1 Heading”
So…events?
• JavaScript can be used to detect events and react
to them
• Events include clicked buttons, mouse pointers moving, etc.
• The script that you use to detect and respond to
an event is called an event handler.
• You don't need the <script> tag to define an event handler; you
can add an event handler attribute to an individual HTML tag.
<a href="http://www.google.com/"
onmouseover="alert('You moved!');">
I’m a link.</a>
<a href="" onmouseover="DoIt();">Move Me</a>
A Few Event Examples
• Mouse
• onmouseover
• onmouseout
• onmouseup
• onmousedown
• onclick
• ondblclick
• Keyboard
• onkeydown
• onkeyup
• Form Elements
• onblur
• onchange
• onsubmit
Why JQuery (or any library?)
• Using a third-party library
• enables you to implement cross-browser scripting and sophisticated
UI elements without being a JavaScript expert.
• enables you to avoid reinventing the wheel for common tasks
• Execute code when the DOM is ready
• Collect elements
• Modify display
• Listen for events and enact upon them
• Execute AJAX requests
• …and more!
Loading JQuery
• Must be present in each calling page.
• You can download and host your own, or use a remotely hosted
version.
<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jq
uery.min.js" type="text/javascript"></script>
</head>
<body>
<!-- more html -->
</body>
</html>
Then What?
• jQuery has at its heart sophisticated, cross-browser methods for
selection of page elements.
• Selectors used to obtain elements; based on simple CSS-like selector
styles.
• To get an element that has an ID of someElement, use:
 $("#someElement")
• To reference a collection of elements that use the someClass class name, use:
 $(".someClass")
• You can manipulate HTML and CSS properties using built-in methods.
• To append the phrase "powered by jQuery" to all paragraph elements, for
example, we would simply write:
 $("p").append(" powered by jQuery");
• To then change the background color of those same elements, we can
manipulate their CSS properties directly:
 $("p").css("background-color","yellow");
• To hide all elements having in class hideMe, use:
 $(".hideMe").hide();
Moving Forward
• Understanding what you want to do will help
you find the JQuery examples to do it.
▫ Everything is based on interactions (and events)
▫ Everything is rooted in things you want to do with
HTML and CSS
 Even if it’s AJAX
Getting the Document Ready
<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
// Your code here
});
</script>
</body>
</html>
Getting the Document Ready – Alert!
<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("Hi!");
event.preventDefault();
});
});
</script>
<a href="http://www.google.com">Go to Google</a>
</body>
</html>
Fading In – An Effect Example
<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
type="text/javascript"></script>
</head>
<body>
<div id="clickme">Click here to fade in</div>
<img id="logo" src="logo.jpg"
height="112" width="241" alt="logo"
style="display:none" />
<script type="text/javascript">
$('#clickme').click(function() {
$('#logo').fadeIn('slow', function() {});
});
</script>
</body>
</html>
Where to Go From Here?
• ANYWHERE
• Hopefully right to the JQuery API documentation
at http://api.jquery.com

More Related Content

What's hot

Getting Started with jQuery
Getting Started with jQueryGetting Started with jQuery
Getting Started with jQueryAkshay Mathur
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQueryGunjan Kumar
 
jQuery introduction
jQuery introductionjQuery introduction
jQuery introductionTomi Juhola
 
jQuery -Chapter 2 - Selectors and Events
jQuery -Chapter 2 - Selectors and Events jQuery -Chapter 2 - Selectors and Events
jQuery -Chapter 2 - Selectors and Events WebStackAcademy
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuerycolinbdclark
 
Getting Started with Web
Getting Started with WebGetting Started with Web
Getting Started with WebAkshay Mathur
 
Easy javascript
Easy javascriptEasy javascript
Easy javascriptBui Kiet
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery EssentialsMark Rackley
 
JavaScript!
JavaScript!JavaScript!
JavaScript!RTigger
 
AMD - Why, What and How
AMD - Why, What and HowAMD - Why, What and How
AMD - Why, What and HowMike Wilcox
 
Unobtrusive javascript with jQuery
Unobtrusive javascript with jQueryUnobtrusive javascript with jQuery
Unobtrusive javascript with jQueryAngel Ruiz
 
Scalable JavaScript
Scalable JavaScriptScalable JavaScript
Scalable JavaScriptYnon Perek
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overviewjeresig
 
Learn javascript easy steps
Learn javascript easy stepsLearn javascript easy steps
Learn javascript easy stepsprince Loffar
 

What's hot (20)

jQuery
jQueryjQuery
jQuery
 
Getting Started with jQuery
Getting Started with jQueryGetting Started with jQuery
Getting Started with jQuery
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
jQuery introduction
jQuery introductionjQuery introduction
jQuery introduction
 
Real World MVC
Real World MVCReal World MVC
Real World MVC
 
70 536
70 53670 536
70 536
 
jQuery -Chapter 2 - Selectors and Events
jQuery -Chapter 2 - Selectors and Events jQuery -Chapter 2 - Selectors and Events
jQuery -Chapter 2 - Selectors and Events
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
 
Getting Started with Web
Getting Started with WebGetting Started with Web
Getting Started with Web
 
Easy javascript
Easy javascriptEasy javascript
Easy javascript
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery Essentials
 
Ajax
AjaxAjax
Ajax
 
Unit 4(it workshop)
Unit 4(it workshop)Unit 4(it workshop)
Unit 4(it workshop)
 
JavaScript!
JavaScript!JavaScript!
JavaScript!
 
AMD - Why, What and How
AMD - Why, What and HowAMD - Why, What and How
AMD - Why, What and How
 
Unobtrusive javascript with jQuery
Unobtrusive javascript with jQueryUnobtrusive javascript with jQuery
Unobtrusive javascript with jQuery
 
Scalable JavaScript
Scalable JavaScriptScalable JavaScript
Scalable JavaScript
 
Fluentlenium
FluentleniumFluentlenium
Fluentlenium
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overview
 
Learn javascript easy steps
Learn javascript easy stepsLearn javascript easy steps
Learn javascript easy steps
 

Similar to Learning About JavaScript (…and its little buddy, JQuery!)

jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)Doris Chen
 
JavaScript DOM & event
JavaScript DOM & eventJavaScript DOM & event
JavaScript DOM & eventBorey Lim
 
J query presentation
J query presentationJ query presentation
J query presentationakanksha17
 
J query presentation
J query presentationJ query presentation
J query presentationsawarkar17
 
Applied component i unit 2
Applied component i unit 2Applied component i unit 2
Applied component i unit 2Pramod Redekar
 
Getting started with jQuery
Getting started with jQueryGetting started with jQuery
Getting started with jQueryGill Cleeren
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)François Massart
 
Javascript
JavascriptJavascript
JavascriptMozxai
 
Advanced guide to develop ajax applications using dojo
Advanced guide to develop ajax applications using dojoAdvanced guide to develop ajax applications using dojo
Advanced guide to develop ajax applications using dojoFu Cheng
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationLotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationSean Burgess
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to JqueryGurpreet singh
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScriptMarlon Jamera
 

Similar to Learning About JavaScript (…and its little buddy, JQuery!) (20)

JS Essence
JS EssenceJS Essence
JS Essence
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
 
JavaScript DOM & event
JavaScript DOM & eventJavaScript DOM & event
JavaScript DOM & event
 
J query presentation
J query presentationJ query presentation
J query presentation
 
J query presentation
J query presentationJ query presentation
J query presentation
 
Applied component i unit 2
Applied component i unit 2Applied component i unit 2
Applied component i unit 2
 
Getting started with jQuery
Getting started with jQueryGetting started with jQuery
Getting started with jQuery
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
 
Javascript
JavascriptJavascript
Javascript
 
bcgr3-jquery
bcgr3-jquerybcgr3-jquery
bcgr3-jquery
 
bcgr3-jquery
bcgr3-jquerybcgr3-jquery
bcgr3-jquery
 
Advanced guide to develop ajax applications using dojo
Advanced guide to develop ajax applications using dojoAdvanced guide to develop ajax applications using dojo
Advanced guide to develop ajax applications using dojo
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationLotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
 
Jquery fundamentals
Jquery fundamentalsJquery fundamentals
Jquery fundamentals
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to Jquery
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Jquery
JqueryJquery
Jquery
 
Week3
Week3Week3
Week3
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Java script
Java scriptJava script
Java script
 

More from Julie Meloni

Everything I learned about a diverse workforce in tech, I learned…in the gove...
Everything I learned about a diverse workforce in tech, I learned…in the gove...Everything I learned about a diverse workforce in tech, I learned…in the gove...
Everything I learned about a diverse workforce in tech, I learned…in the gove...Julie Meloni
 
Developing and Deploying Open Source in the Library: Hydra, Blacklight, and B...
Developing and Deploying Open Source in the Library: Hydra, Blacklight, and B...Developing and Deploying Open Source in the Library: Hydra, Blacklight, and B...
Developing and Deploying Open Source in the Library: Hydra, Blacklight, and B...Julie Meloni
 
Libra: An Unmediated, Self-Deposit, Institutional Repository at the Universit...
Libra: An Unmediated, Self-Deposit, Institutional Repository at the Universit...Libra: An Unmediated, Self-Deposit, Institutional Repository at the Universit...
Libra: An Unmediated, Self-Deposit, Institutional Repository at the Universit...Julie Meloni
 
Development Lifecycle: From Requirement to Release
Development Lifecycle: From Requirement to ReleaseDevelopment Lifecycle: From Requirement to Release
Development Lifecycle: From Requirement to ReleaseJulie Meloni
 
Everyone's a Coder Now: Reading and Writing Technical Code
Everyone's a Coder Now: Reading and Writing Technical CodeEveryone's a Coder Now: Reading and Writing Technical Code
Everyone's a Coder Now: Reading and Writing Technical CodeJulie Meloni
 
Community, Cohesion, and Commitment
Community, Cohesion, and CommitmentCommunity, Cohesion, and Commitment
Community, Cohesion, and CommitmentJulie Meloni
 
Residential Learning Communities and Common Reading Programs
Residential Learning Communities and Common Reading ProgramsResidential Learning Communities and Common Reading Programs
Residential Learning Communities and Common Reading ProgramsJulie Meloni
 
Managing Your (DH) Project: Setting the Foundation for Working Collaborativel...
Managing Your (DH) Project: Setting the Foundation for Working Collaborativel...Managing Your (DH) Project: Setting the Foundation for Working Collaborativel...
Managing Your (DH) Project: Setting the Foundation for Working Collaborativel...Julie Meloni
 
Entering the Conversation
Entering the ConversationEntering the Conversation
Entering the ConversationJulie Meloni
 
Mavericks: The Ultra-Collaborative Composition Classroom
Mavericks: The Ultra-Collaborative Composition ClassroomMavericks: The Ultra-Collaborative Composition Classroom
Mavericks: The Ultra-Collaborative Composition ClassroomJulie Meloni
 

More from Julie Meloni (11)

Everything I learned about a diverse workforce in tech, I learned…in the gove...
Everything I learned about a diverse workforce in tech, I learned…in the gove...Everything I learned about a diverse workforce in tech, I learned…in the gove...
Everything I learned about a diverse workforce in tech, I learned…in the gove...
 
Developing and Deploying Open Source in the Library: Hydra, Blacklight, and B...
Developing and Deploying Open Source in the Library: Hydra, Blacklight, and B...Developing and Deploying Open Source in the Library: Hydra, Blacklight, and B...
Developing and Deploying Open Source in the Library: Hydra, Blacklight, and B...
 
Libra: An Unmediated, Self-Deposit, Institutional Repository at the Universit...
Libra: An Unmediated, Self-Deposit, Institutional Repository at the Universit...Libra: An Unmediated, Self-Deposit, Institutional Repository at the Universit...
Libra: An Unmediated, Self-Deposit, Institutional Repository at the Universit...
 
Development Lifecycle: From Requirement to Release
Development Lifecycle: From Requirement to ReleaseDevelopment Lifecycle: From Requirement to Release
Development Lifecycle: From Requirement to Release
 
Everyone's a Coder Now: Reading and Writing Technical Code
Everyone's a Coder Now: Reading and Writing Technical CodeEveryone's a Coder Now: Reading and Writing Technical Code
Everyone's a Coder Now: Reading and Writing Technical Code
 
Community, Cohesion, and Commitment
Community, Cohesion, and CommitmentCommunity, Cohesion, and Commitment
Community, Cohesion, and Commitment
 
Residential Learning Communities and Common Reading Programs
Residential Learning Communities and Common Reading ProgramsResidential Learning Communities and Common Reading Programs
Residential Learning Communities and Common Reading Programs
 
Managing Your (DH) Project: Setting the Foundation for Working Collaborativel...
Managing Your (DH) Project: Setting the Foundation for Working Collaborativel...Managing Your (DH) Project: Setting the Foundation for Working Collaborativel...
Managing Your (DH) Project: Setting the Foundation for Working Collaborativel...
 
Let's Remediate!
Let's Remediate!Let's Remediate!
Let's Remediate!
 
Entering the Conversation
Entering the ConversationEntering the Conversation
Entering the Conversation
 
Mavericks: The Ultra-Collaborative Composition Classroom
Mavericks: The Ultra-Collaborative Composition ClassroomMavericks: The Ultra-Collaborative Composition Classroom
Mavericks: The Ultra-Collaborative Composition Classroom
 

Recently uploaded

unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????blackmambaettijean
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 

Recently uploaded (20)

unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 

Learning About JavaScript (…and its little buddy, JQuery!)

  • 1. Learning About JavaScript …and its little buddy, JQuery! GWU Libraries ● 26 June 2012 Julie Meloni // @jcmeloni // jcmeloni@gmail.com
  • 2. Today’s General Outline • Understanding JavaScript Basics • About the DOM (Document Object Model) • Where JQuery Fits in and How it Works
  • 3.
  • 4. The Very Very Basics • Developed in 1995 – it’s no spring chicken • No relation to the Java programming language • An interpreted rather than a compiled language ▫ Interpreted by the web browser software • 98% of web traffic is JavaScript-enabled ▫ 2% made up of old screenreader software and ultra-security-conscious people
  • 5. Practical Uses • Improving navigation • Offering dynamic text display • Creating special effects in response to user • As the basis for remote scripting (the J in AJAX) • Offering more interactivity than static HTML ▫ But less dynamism than a server-side language
  • 6. How it Looks in the Source Code <script type="text/javascript"> <!-- Hide the script from old browsers document.write(document.lastModified); // Stop hiding the script --> </script> Might display: 06/25/2012 08:07:51
  • 7. How it Looks in the Source Code v2 <!DOCTYPE html> <html> <head> <title>JS Test</title> </head> <body> <h1>JS Test</h1> <p style=“color: red”> <script type="text/javascript"> <!-- Hide the script from old browsers document.write(document.lastModified); // Stop hiding the script --> </script> </p> </body> </html>
  • 8. Moving Into Programming Basics • Like other programming languages, JavaScript has: ▫ Variables (& Arrays) ▫ Operators ▫ Flow Control ▫ Objects
  • 9. About JavaScript Variables • A variable is a bucket that holds one piece of information. • Examples: • var string_variable = “The Library”; • var numeric_variable = 4; • var myname = “Julie”;
  • 10. About JavaScript Arrays • An array is a type of variable (or bucket) that holds many pieces of information. • Example: • rainbow = new array(“red”, “orange”, “yellow”, “green”, “blue”, “indigo”, “violet”);  rainbow[0] holds “red”  rainbow[1] holds “orange”
  • 11. About JavaScript Operators • Arithmetic • +, -, *, / (add, subtract, multiply, divide) • Assignment • = (“Assign the value of 4 to the variable called a”)  var a = 4; • += (“Add the value of 5 to the variable that already holds 4”)  var a += 5; // a now holds 9 • -= (“Subtract the value of 3 to the variable that already holds 4”)  var a -= 3; // a now holds 1
  • 12. About JavaScript Operators • Comparison • == (“when I compare the value in variable a to the value in variable be, that comparison is true”)  a == b • != (“when I compare the value in variable a to the value in variable be, that comparison is not true”) • a != b • >, >= (“the value of variable a is greater than (or greater than or equal to) the value of variable b”)  a > b • <, <= (“the value of variable a is less than (or less than or equal to) the value of variable b”)  a < b
  • 13. About JavaScript Operators • Concatenation • + (“this”+ “is a test”= “thisisatest”) • Logical • && (and) • || (or) • ! (not)
  • 14. About JavaScript Flow Control • if if (something is true) { do something here } • if ... else if ... else if (something is true) { do something here } else if (something is true) { do something here } else { do something here }
  • 15. About JavaScript Flow Control • switch switch (something) { case “blue”: do something here break; case “apple”: do something else here break; case “fire truck”: do something else here break; default: do something else here break; }
  • 16. About JavaScript Flow Control • while while (something is true) { do something here } • for for (something is true) { do something here }
  • 17. About JavaScript Objects • Objects can store multiple pieces of data, but the internal structure of the data is different than that of an array. • The items of data stored in an object are called the properties of the object.  People objects in an address book might include a name, an address, and a telephone number (Bob.address, Bob.phone, etc) • Objects can use methods.  Methods are built-in functions that work with the object's data, e.g. Bob.display() • JavaScript supports three kinds of objects: • Built-in to the JavaScript language. • Custom objects you create. • DOM (Document Object Model) -- components of the browser and the current HTML document.
  • 19. What is the DOM? • The DOM is the invisible structure of all HTML documents ▫ The overall container object is called the document.  Any container within the document that has an ID is referenced by that ID.  For example, if you have a <div> with an ID called wrapper, then in the DOM that element is referenced by document.wrapper
  • 20. But it actually starts before that… • The DOM is not part of JavaScript or any other programming language -- it's an API built in to the browser. • At the top of the browser object hierarchy is the window object. • Also access the history object and the location object • Inside a window is a document. • window.document.header-image <img id=“header-image” src=“some.jpg”/>
  • 21. So what about document? • The document object has several properties, such as: • document.URL • document.title • document.lastModified • document.cookie • document.images • …and more!
  • 22. And within document? • The document object contains…containers (also called nodes). <!DOCTYPE html> <html> <head> <title>A Simple HTML Document</title> </head> <body> <h1>This is a Level-1 Heading.</h1> <p>This is a simple paragraph.</p> </body> </html>
  • 23. Nodes Have Properties Too! <h1>This is a Level-1 Heading.</h1> • nodeName is the name of the node, e.g. h1 • innerHTML is the text within the node, e.g. “This is a Level-1 Heading”
  • 24. So…events? • JavaScript can be used to detect events and react to them • Events include clicked buttons, mouse pointers moving, etc. • The script that you use to detect and respond to an event is called an event handler. • You don't need the <script> tag to define an event handler; you can add an event handler attribute to an individual HTML tag. <a href="http://www.google.com/" onmouseover="alert('You moved!');"> I’m a link.</a> <a href="" onmouseover="DoIt();">Move Me</a>
  • 25. A Few Event Examples • Mouse • onmouseover • onmouseout • onmouseup • onmousedown • onclick • ondblclick • Keyboard • onkeydown • onkeyup • Form Elements • onblur • onchange • onsubmit
  • 26.
  • 27. Why JQuery (or any library?) • Using a third-party library • enables you to implement cross-browser scripting and sophisticated UI elements without being a JavaScript expert. • enables you to avoid reinventing the wheel for common tasks • Execute code when the DOM is ready • Collect elements • Modify display • Listen for events and enact upon them • Execute AJAX requests • …and more!
  • 28. Loading JQuery • Must be present in each calling page. • You can download and host your own, or use a remotely hosted version. <!DOCTYPE html> <html> <head> <title>JQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jq uery.min.js" type="text/javascript"></script> </head> <body> <!-- more html --> </body> </html>
  • 29. Then What? • jQuery has at its heart sophisticated, cross-browser methods for selection of page elements. • Selectors used to obtain elements; based on simple CSS-like selector styles. • To get an element that has an ID of someElement, use:  $("#someElement") • To reference a collection of elements that use the someClass class name, use:  $(".someClass") • You can manipulate HTML and CSS properties using built-in methods. • To append the phrase "powered by jQuery" to all paragraph elements, for example, we would simply write:  $("p").append(" powered by jQuery"); • To then change the background color of those same elements, we can manipulate their CSS properties directly:  $("p").css("background-color","yellow"); • To hide all elements having in class hideMe, use:  $(".hideMe").hide();
  • 30. Moving Forward • Understanding what you want to do will help you find the JQuery examples to do it. ▫ Everything is based on interactions (and events) ▫ Everything is rooted in things you want to do with HTML and CSS  Even if it’s AJAX
  • 31. Getting the Document Ready <!DOCTYPE html> <html> <head> <title>JQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js " type="text/javascript"></script> </head> <body> <script type="text/javascript"> $(document).ready(function(){ // Your code here }); </script> </body> </html>
  • 32. Getting the Document Ready – Alert! <!DOCTYPE html> <html> <head> <title>JQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(event){ alert("Hi!"); event.preventDefault(); }); }); </script> <a href="http://www.google.com">Go to Google</a> </body> </html>
  • 33. Fading In – An Effect Example <!DOCTYPE html> <html> <head> <title>JQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> </head> <body> <div id="clickme">Click here to fade in</div> <img id="logo" src="logo.jpg" height="112" width="241" alt="logo" style="display:none" /> <script type="text/javascript"> $('#clickme').click(function() { $('#logo').fadeIn('slow', function() {}); }); </script> </body> </html>
  • 34. Where to Go From Here? • ANYWHERE • Hopefully right to the JQuery API documentation at http://api.jquery.com