JAVASCRIPT and JQUERY For Beginner

AGENDA
JavaScript
Functions and Variables
jQuery and Third-Party Libraries
Locating and Accessing Elements
Listening and Responding to Events
Updating the Content of Elements
Adding Elements

BUILDING INTERACTIVE APPLICATIONS
• HTML5 AND CSS3 ARE AWESOME FOR CREATING BEAUTIFUL
WEBSITES
• HOWEVER, TODAY’S USERS WANT AN INTERACTIVE WEB
EXPERIENCE
• IMPLEMENTING INTERACTIVITY REQUIRES A PROGRAMMING
LANGUAGE, SUCH AS JAVASCRIPT

WHAT IS JAVASCRIPT?• JAVASCRIPTIS A LOOSELY-TYPED
SCRIPTINGLANGUAGETHAT IS
INTERPRETEDBY A BROWSER
• IT CHANGESHOWELEMENTSIN AN
HTML DOCUMENTACT AND RESPOND
TOUSER INPUT
• WE CREATESCRIPTSWITHJAVASCRIPT
• SCRIPTS ARE STEP-BY-STEP INSTRUCTIONS THAT TELL A BROWSER
HOW TO RESPOND TO EVENTS, SUCH AS A USER CLICKING A BUTTON
• THE FILE EXTENSION FOR A SCRIPT IS .JS
.js

CONNECTING JAVASCRIPT WITH HTML
WE CANCONNECTJAVASCRIPT TOHTML DOCUMENTSIN A COUPLEOF WAYS:
1. EMBEDDING IT WITH THE <SCRIPT> TAG
2. LINKING A SEPARATE JAVASCRIPT FILE TO THE HTML DOCUMENT
<script type="text/javascript">
document.write("Hello World Wide Web");
</script>
<head>
<script type="text/javascript" src="Script.js"></script>
</head>
1
2

JAVASCRIPT DEMO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>This is a boring website!</h1>
document.write("Hello, World!");
</script>
</body>
</html>
1

FUNCTIONS
• A FUNCTIONIS A GROUP OF STATEMENTSTHAT ARE COMBINEDTO PERFORMA
SPECIFICTASK
• A STATEMENTIS A LINEOF CODETHAT PERFORMSAN ACTION
• STATEMENTS SHOULD END WITH A SEMICOLON (;)
• IF DIFFERENTPARTS OF A SCRIPT REPEATTHE SAME TASK, THENYOU CANREUSE A
FUNCTIONINSTEAD OF REPEATINGTHESAME STATEMENTS
function doSomethingAwesome() {
var name = prompt(“What is your name?”);
alert(name + “, you just did something awesome!");
}

HOW TO DEFINE A FUNCTION
function helloWorld() {
alert(‘Hello, World!’);
}
function keyword function name
statement
everything between the curly braces is a code block

NAMING FUNCTIONS
A FUNCTIONCANHAVE ANY NAME,BUT THEREARE A COUPLEGUIDELINESTHAT MUST BE
CONSIDERED:
1. DON’TUSE ANY OF THERESERVED WORDSDEFINEDBY JAVASCRIPTSTANDARDS.
• SEE THE FULL LIST OF JAVASCRIPT RESERVED WORDS BY CLICKING HERE
2. THE NAME MUST BE MADE OF LETTERS,DIGITS, UNDERSCORES, OR DOLLARSIGNS
• IT CAN’T START WITH A NUMBER THOUGH!

DEFINITION AND EXECUTION OF FUNCTIONS
• THE WAYTHAT A FUNCTIONIS DEFINEDIS DIFFERENTFROM HOWIT IS EXECUTEDBY A
BROWSER
• A FUNCTION’SDEFINITIONOUTLINESITS NAME, ANY PARAMETERS IT MAY TAKE, AND
ITS STATEMENTS
• NOTE: A DEFINITION DOESN’T PERFORM ANY OF A FUNCTION’S STATEMENTS
• WHENA FUNCTIONIS CALLED,THE BROWSER WILLEXECUTEALL OF THE STATEMENTS
WITHINTHE FUNCTION
var name = prompt(“What is your name?”);
alert(name + “, you just did something awesome!");
}
Defining the Function
<input type="button" value="Click Me"
onclick="doSomethingAwesome()">
Calling the Function

VARIABLES
• SCRIPTS HAVE TOTEMPORARILYSTORE PIECESOF INFORMATION
• THESE BITS OF DATA CANBE STORED AS VARIABLES
• VARIABLESCAN BE DEFINEDUSING THE VAR SYNTAX WITHA UNIQUE KEYWORD,
SUCH AS HEIGHTOR WIDTH

HOW TO DECLARE A VARIABLE
var height = 6;
variable
keyword
variable
name
variable
value
assignment
operator

RULES FOR NAMING VARIABLES
Variable names must start with
a letter, dollar sign ($), or an
underscore (_).
It must NOT start with a number.
Variable names can contain
letters, numbers, dollar signs,
and underscores, but NOT
dashes (-) or periods (.).
You cannot use keywords or
reserved words.
Variables are case sensitive,
which means that
thisVariableis different
from ThisVariable.
Use names that describe the
information you are storing.
If a variable name uses two or
more words, capitalize the first
letter of ever word AFTER the
first word.
1 2 3
4 5 6

TYPES OF DATA
• NUMBERS  1, 2, 3
• STRINGS  ‘ZOMBIES FREAK ME OUT!’
• MUST ALWAYS BE SURROUNDED BY QUOTE MARKS
• BOOLEAN TRUE, FALSE

COMMENTS
ADD COMMENTS TO YOUR SCRIPT TO EXPLAIN
WHAT IT DOES
• IT WILL ALSO MAKE YOUR CODE EASIER FOR OTHERS TO
READ AND UNDERSTAND
ADD ASINGLE-LINE COMMENT BY PLACING
TWO FORWARD SLASH CHARACTERS // IN
FRONT OF YOUR COMMENT
• ANYTHING AFTER THE SLASHES WON’T BE INTERPRETED
BY THE BROWSER
ADD AMULTI-LINE COMMENT BY STARTING
WITHTHE /* CHARACTERS AND ENDING WITH
THE */ CHARACTERS
• ANYTHING BETWEEN THESE CHARACTERS WON’T BE
/*These comments are typically reserved
for describing how an entire script file
works or to comment out an entire block
of script. */
//this function does something awesome!
var name = prompt(“What is your
name?”);
alert(name + “, you just did
something awesome!");
}
JavaScript

JAVASCRIPT LIBRARIES
• JAVASCRIPTLIBRARIES ARE MADEOF CODETHATOTHERPROGRAMMERS HAVE
ALREADYDEVELOPED
• LIBRARIES INCLUDE PRE-WRITTEN FUNCTIONS AND STATEMENTS THAT YOU CAN USE TO CREATE PROGRAMS
• USE A LIBRARY BY LINKINGITS FILETO YOUR WEB PAGE
• ONE OF THEMOST POPULARJAVASCRIPTLIBRARIES IS JQUERY
• JQUERY ALLOWS YOU TO USE CSS-LIKE SELECTORS AND ITS METHODS TO PERFORM FUNCTIONS WITH MINIMAL CODE

OBJECTS IN JAVASCRIPT• AN HTML ELEMENTIS AN OBJECT,
SIMILAR TOA HOUSE OR A CAR
• JUST AS WITHREAL LIFEOBJECTS,WE
CAN ACCESSAND MODIFYHTML
OBJECTSTHAT APPEARONA SCREEN
• THE CREATION OF INTERACTIVE WEB
PAGES AND APPS RELIES ON OUR
ABILITY TO MANIPULATE OBJECTS
ON A SCREEN
• OBJECTS ARE MODELS OF THINGS IN THE REAL WORLD THAT
WERE BUILT USING DATA
• OBJECTS ARE GROUPED INTO
OBJECT MODELS, WHICH ARE USED
THIS IS AN OBJECT

DOCUMENT OBJECT MODEL (DOM)• THE DOCUMENT OBJECT MODEL
(DOM) CREATES A MODEL OF A WEB
PAGE
• THE DOM IS USED TO UPDATE
CONTENT, STRUCTURE, AND STYLES
ON THE FLY
• THE TOPMOST OBJECT IS THE
DOCUMENT OBJECT, WHICH
REPRESENTS THE PAGE AS A WHOLE
• IT HAS CHILD OBJECTS THAT REPRESENT INDIVIDUAL
ELEMENTS ON A PAGE
document
<html>
<head>
<title>
<body>
<div>
attribute
<p>
text>

LOCATING AND ACCESSING ELEMENTS
• WE CANACCESS OBJECTSIN THE DOM USING AN ELEMENT’SID
• TODO SO, WE CANUSE THE DOCUMENTOBJECT’SGETELEMENTBYID() METHOD
• THIS MEANS THAT THE ELEMENT MUST HAVE AN ID
• USING THIS METHOD ALLOWS YOU TO MANIPULATE THE CONTENTS OF THAT
ELEMENT
document.getElementById(‘demo’);
object method name parameter

GETELEMENTBYID() DEMO
<body>
<h1>Get today's date and add it to an element on the page.</h1>
<p id="demo"></p>
document.getElementById("demo").innerHTML=Date();
</script>
</body>

EVENTS IN PROGRAMMING
• EVENTSARE ACTIONS THATA USER
TAKES
• JAVASCRIPTFEATURES EVENT
HANDLERS,WHICHRESPONDTO
SPECIFICUSER EVENTS
• FOR EXAMPLE, THE ONCLICK EVENT HANDLER RESPONDS TO CLICKS
ON SCREEN
• EVENTHANDLERSRESPONDBY
EXECUTINGFUNCTIONS
Event Handlers Associated Events
onsubmit form submission
onkeydown
onkeypress
onkeyup
keystrokes
onclick
onmousedown
onmouseup
mouse or touchpad clicks
onload
onunload
page loading/unloading
onselect item selection

EVENT HANDLERS DEMO<body>
<p>Select some of the text:
<input type="text" value="Hello, World!"
onselect="myFunction()"></p>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById('demo').innerHTML =
"Selecting text is awesome!";
}
</script>
</body>

UPDATING CONTENT IN ELEMENTS
• USE THE INNERHTMLPROPERTYTO CHANGECONTENTOR INSERT NEWCONTENT
BETWEENELEMENTTAGS
• IT CAN BE USED ON ANY ELEMENT
• TOCHANGE CONTENT,SETTHE INNERHTMLPROPERTYTO THE DESIRED STRING
• TO DO THIS, WE MUST USE THE EQUALS SYMBOL (=)
• TOREMOVE CONTENT,SET IT TOAN EMPTYSTRING

INNERHTML DEMO
<body>
<h1>Updating Content</h1>
<p id="demo"></p>
document.getElementById("demo").innerHTML=‘Using
JavaScript is super fun!’;
</script>
</body>

THE CREATEELEMENT METHOD
• MAKE ELEMENTS,LIKEIMAGES, APPEAR
ONSCREENWITHTHEDOCUMENT
OBJECT’SCREATEELEMENTMETHOD
• ADD THE ELEMENTTOTHE SCREENUSING
THE APPENDCHILD()METHOD
function show_image(src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height; img.alt = alt;
// Adds it to the <body> tag
document.body.appendChild(img);
}
JavaScript
<button
onclick="show_image (’dog.jpg’,
276,110, ’Stella');">
Display an image!
</button>
HTML

CREATEELEMENT DEMO<body>
<h1>Creating Elements</h1>
<p id="demo"></p>
<button onclick="show_image
(’dog.jpg’,300,400,'Stella');">Display
an image!
</button>
</body>
<script>
function show_image(src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;
// Adds it to the <body> tag
document.body.appendChild(img);
}
</script>

SUMMARY
JavaScript
Functions and Variables
jQuery and Third-Party Libraries
Locating and Accessing Elements
Listening and Responding to Events
Updating the Content of Elements
Adding Elements

Contact:
+91-9039826766
www.rds93.blogspot.in
Mail to srmarohit@gmail.com

JAVASCRIPT and JQUERY For Beginner

More Related Content

What's hot

Similar to JAVASCRIPT and JQUERY For Beginner

Recently uploaded

JAVASCRIPT and JQUERY For Beginner