The Basics of JavaScript
Maithili Paranjape
Overview
Overview of JavaScript
Syntactic Characteristics
Primitives, Operations and Expressions
Introduction to JavaScript
JavaScript is a scripting language.
Why study JavaScript?
JavaScript is one of the 3 languages that all web developers should
learn:
HTML to define the content of web pages
CSS to specify the layout of web pages
JavaScript to program the behaviour of web pages web pages
Where is your JavaScript code located?
JavaScript can be inside your HTML page
JavaScript can be external
Uses of JavaScript
Transfer of some load from server to client
User interactions through forms
Events easily detected with JavaScript
E.g. validate user input
The Document Object Model makes it possible
to create dynamic HTML documents with
JavaScript
JavaScript Execution
JavaScript scripts are executed entirely by the browser
Embedding in HTML docs
Or indirectly, as a file
Either directly, as in
specified in the src
attribute of <script>, as
in
Debugging errors
Declaring Variables
JavaScript is dynamically typed – any variable can
be used for anything (primitive value or reference to
any object)
The interpreter determines the type of a particular
occurrence of a variable
Variables can be either implicitly or explicitly
declared
var sum = 0,
today = "Monday",
flag = false;
Primitives
All primitive values have one of the five
types:
Number
String
Boolean
Objects, with type object:
This is a way to use objects in JavaScript,
which is a prototype oriented language.
Numbers
The DOM
Seems familiar, because it is!
The Document Object Model(DOM) is the objects that make up a
web page. This tree structure is formally called the DOM Tree
with the root, or topmost object called the Document Root.
Writing on the document
The Document object has a method, write, which
dynamically creates content
The parameter is a string, often concatenated from parts, some
of which are variables
document.write("Answer: “, result,
"<br>");
The parameter is sent to the browser, so it can be anything that
can appear in an HTML document (any HTML tags)
Screen Output
The Window object has three methods for
creating dialog boxes
1. Alert
alert(“The sum is:” + sum + ”\n");
Parameter is plain text, not HTML
Opens a dialog box which displays the parameter
string and an OK button
It waits for the user to press the OK button
Screen Output
2. Confirm
var question = confirm("Do you want to
continue this download?");
Opens a dialog box and displays the parameter and
two buttons, OK and Cancel
Returns a Boolean value, depending on which button
was pressed
Screen Output
3. Prompt
var name= prompt("What is your name?", “ ");
Opens a dialog box and displays its string parameter, along with a
text box and two buttons, OK and Cancel
The second parameter is for a default response if the user presses OK
without typing a response in the text box.
Typecasting required!
Finding elements by HTML id
The easiest way to find an HTML element in the DOM, is by
using the element id.
This example finds the element with id="intro":
var myElement =
document.getElementById("intro");
Events and Event Handling
An event is a notification that something specific
has occurred, either with the browser or an action
of the browser user
An event handler is a script that is implicitly
executed in response to the appearance of an
event
The process of connecting an event handler to an
event is called registration
Don’t use document.write in an event
handler, because the output may go on top of the
display
Events and their Tag Attributes
Event Tag Attribute
blur onblur
change onchange
click onclick
focus onfocus
load onload
mousedown onmousedown
mousemove onmousemove
mouseout onmouseout
mouseover onmouseover
mouseup onmouseup
select onselect
submit onsubmit
unload onunload
Events, Attributes and Tags
The same attribute can appear in several
different tags
e.g., The onclick attribute can be in <a> and
<input>
A text element gets focus in three ways:
1. When the user puts the mouse cursor over it and
presses the left button
2. When the user tabs to the element
3. By executing the focus method
Functions
function function_name([formal_parameters]) {
-- body –
}
Return value is the parameter of return
If there is no return or if return has no parameter, undefined is
returned
We place all function definitions in the head of the HTML
document
Calls to functions appear in the document body
Variables explicitly declared in a function are local
Registration of Event Handler
By assigning the event handler script to an event tag attribute
<input type= “button” name =
“myButton” onclick =
"alert('Mouse click!');“ />
<input type= “button” name =
“myButton” onclick =
"myHandler();" />
