Learn Javascript Basics

JavaScript Basics
Presented by : Manisha Chugh
Batch Code: B-14/PHP/04-01
Registration id: R13010624

What is JavaScript?
• JavaScript is a scripting language designed for Web
pages.
• It enhances Web pages with dynamic and interactive
features.
• It enables shopping carts, form validation,
calculations, special graphic and text effects, image
swapping and more.
©Copyright 2014 by Manisha All Rights
Reserved.

Methods of Using
JavaScript
1. External - JavaScript can reside in a separate page.
2. Internal - JavaScript can be embedded in HTML
documents -- in the <head>, in the <body>, or in both.
3. Inline - JavaScript object attributes can be placed in
HTML element tags.
Reserved.

External JavaScript
• Linking can be advantageous if many pages use the
same script.
• Use the source element to link to the script file.
<script src="myjavascript.js”
type="text/javascript">
</script>
Reserved.

Internal JavaScript
• When specifying a script only the tags <script>
and </script> are essential, but complete
specification is recommended:
<script language="javascript”

</script>
Reserved.

Using Comment Tags
• HTML comment tags should bracket any script.
• The  tags hide scripts in
HTML and prevent scripts from displaying in browsers
that do not interpret JavaScript.
• Double slashes // are the signal characters for a
JavaScript single-line comment.
Reserved.

Inline JavaScript
• Event handlers like onLoad are a perfect example of
an easy to add tag script.
e.g.
<body onLoad="alert('WELCOME')">
Reserved.

JavaScript Terminology
• Objects,
• Properties,
• Functions,
• Methods,
• Events,
• Listeners,
• Variables.
Reserved.

Objects
• Objects refers to windows, documents, images,
tables, forms, buttons or links, etc.
• Objects should be named.
• Objects have properties that act as modifiers.
Reserved.

Properties
• Properties are object attributes.
• Object properties are defined by using the object's
name, a period, and the property name.
• e.g., background color is expressed by:
document.bgcolor.
Here, document is the object.
bgcolor is the property.
Reserved.

Functions
• A group of statements that is put together once and
then can be used repeatedly on a Web page.
• JavaScript has built-in functions, and you can write
your own.
Reserved.

Format of a function
definition
function function-name( parameter-list )
{
declarations and statements
}
Here,
• Function name is any valid identifier.
• Parameter list contains names of variables that will receive
arguments.
• Declarations and statements are function body (“block” of
code)
Reserved.

Methods
• Methods are functions.
• They are unusual in the sense that they are stored as
properties of objects.
• e.g., document.write(”Hello World")
Here, document is the object.
write is the method.
Reserved.

Events
• Events are visitor’s and browser’s activities.
• There can be two types of events:
• User-Initiated Events
• Browser-Initiated Events
Reserved.

Browser-Initiated Events
• load
• unload
• error
• abort
Reserved.

User-Initiated Events
• click
• dblclick
• keydown
• keyup
• keypress
• mouseover
• mouseout
• mousedown
• mouseup
• mousemove
• change
• resize
• scroll
• select
• blur
• focus
• submit
Reserved.

Listeners
• Listeners capture and actually respond to those
events. Thus, they are also known as Event
Handlers.
• The system sends events to the listener program and
the program responds to them as they arrive.
Reserved.

Listeners (Cont.)
• Events handlers are placed in the BODY part of a Web page as
attributes in HTML tags.
e.g.
<input type=button name=btn1 value=“Click
Me” onClick=“alert(‘button was
clicked’);”>
• Alternatively, events can be captured in the HTML code, and then
directed to a JavaScript function for an appropriate response.
Reserved.

Listeners (Cont.)
e.g.
<head>
<script language= "JavaScript"
function mymessage()
{
alert(“Hello User!");
}
</script>
</head>
<body onload="mymessage()">
</body>
Reserved.

Various Event Handlers
• The following event handlers are available in
JavaScript:
• onAbort
• onBlur
• onChange
• onClick
• onDragDrop
• onError
• onFocus
• onKeyDown
• onKeyPress
• onKeyUp
• onSubmit
• onMouseDown
• onMouseMove
• onMouseOut
• onMouseOver
• onMouseUp
• onResize
• onSelect
• onSubmit
• onLoad
• onUnload
Reserved.

(Cont.)
• onAbort
An abort event occurs when a user aborts the loading of an image
(for example by clicking a link or clicking the Stop button).
• onBlur
A blur event occurs when object on a form loses focus.
• onChange
A change event occurs when any object (select, text, or textarea)
loses focus and its value has been modified.
• onClick
A click event occurs when an object on a form is clicked.
Reserved.

(Cont.)
• onDragDrop
A drapDrop event occurs when a user drops an object onto the browser
window, such as dropping a file.
• onError
An error event occurs when the loading of a document or image causes an
error.
• onFocus
A focus event occurs when a field receives input focus by tabbing with the
keyboard or clicking with the mouse.
• onKeyDown, onKeyPress, onKeyUp
A keyDown, keyPress, or keyUp event occurs when a user depresses a key,
presses or holds down a key, or releases a key, respectively.
Reserved.

(Cont.)
• onMouseDown, onMouseMove, onMouseOut,
onMouseOver, and onMouseUp
A MouseDown, MouseMove, MouseOut, MouseOver, or MouseUp
event occurs when a user depresses a mouse button, moves a cursor,
moves a cursor out of the object, moves a cursor over the object,
releases a mouse button, respectively.
• onResize
A Resize event occurs when a user or script resizes a window.
Reserved.

(Cont.)
• onSelect
A select event occurs when a user selects some of the text within a text or
textarea field.
• onSubmit
A submit event occurs when a user submits a form.
• onLoad
A load event occurs after a web page is loaded.
• onUnload
An unload event occurs when you exit a web page.
Reserved.

Event Handlers and the
“this” Keyword
• ‘This’ keyword is used for self-reference of object when an
event handler calls a JavaScript function.
e.g.
<input type="button" value="press me" onclick
= "callfunc(this);">
// Here ‘this’ keyword refers to the Button
object.
Reserved.

Variables
• Variables contain values and use the equal sign to specify
their value.
• Variables are created by declaration using the var
command with or without an initial value state.
• e.g. var month;
• e.g. var month = April;
Reserved.

Dialog Boxes
• Dialog boxes can be used to –
• inform the user of errors or events
• confirm actions initiated by the user
• ask some information from the user
Reserved.

Alert Dialog Box
• Alert Dialog Box informs the user about errors or events.
User can just read the message and press OK.
e.g.
alert(‘Hello! Welcome to my website.');
Reserved.

Confirm Dialog Box
• Confirm Dialog Box confirms actions initiated by the
user. User can confirm or Cancel the action.
e.g.
confirm('Are you sure you want to exit?');
Reserved.

Prompt Dialog Box
• Prompt Dialog Box is used to get information from the
user.
e.g.
prompt('Enter your name:');
Reserved.

Accessing HTML Elements
In JavaScript
• In JavaScript, you can access specific HTML elements by
using a pre-defined variable called document and requesting
the element by ID.
• Accessing an HTML element by ID, general syntax:
document.getElementById("<ID>")
e.g.
document.getElementById(“d1”).innerHTML=“Hello
World!”;
<div id=“d1”></div>
Reserved.

Accessing HTML Elements
In JavaScript (Cont.)
• Once you have access to a particular HTML element, you can
access all its attributes using the "dot" operator.
• Accessing an element's attribute, general syntax:
document.getElementById("<ID>").<attribute>
• Accessing form element, general syntax:
document.formname.elementname.value
Reserved.

Example
<form name="alertform">
Enter your name:
<input type="text" name="yourname">
<input type="button" value= "Go"
onClick="window.alert('Hello ' +
document.alertform.yourname.value);">
</form>
Reserved.

Accessing CSS Properties
• Accessing CSS properties, general syntax:
document.getElementById("<ID>").style.<property>
• Property names in JavaScript are identical to those in CSS, but
with namesLikeThis instead of names-like-this
e.g.
backgroundColor instead of background-color
• Example:
document.getElementById("name").style.backgroundColor =
"yellow";
Reserved.

Form Validations
• JavaScript is very good at processing and validating user input
in the web browser.
• Requirements to perform validations:
• Form’s name must be specified.
• Object’s name must be specified.
• Input must be of Submit type.
• Validations can be applied in two ways:
1. Traditional iterative programming methodologies
2. Pattern matching (via regular expressions)
Reserved.

Traditional iterative
programming methodologies
• Write a small program (function) that iterates
through the user input and validates the data type
and returns true or false depending on result.
• This can be relatively slow, especially if form has
many fields to be validated.
Reserved.

Example
function validate()
{
if(document.login.uname.value==“”)
{
alert(“Please enter username”);
document.login.uname.focus();
return false;
}
return true;
}
<form name=“login” action=“” onsubmit=“validate()”>
<input type=“text” name=“uname”>
Reserved.

Pattern matching
• Create a regular expression pattern for the data type
and let the system validate the user input via its
pattern matching capabilities.
• Pattern matching is very quick (even for long
forms).
Reserved.

HTML5 Validation
• required
<input type=“text” name=“uname” required/>
• pattern= ‘a regular expression’ like text, search,
url, telephone, email, and password.
<input type=“email” name=“email”/>
• min= max = step= can be used with <input type=range>
<input type=“range” max=“30”>
Reserved.

Learn Javascript Basics

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (17)

Similar to Learn Javascript Basics

Similar to Learn Javascript Basics (20)

Recently uploaded

Recently uploaded (20)

Learn Javascript Basics