Lecture 4 JavaScript

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();" />

Lecture 4 JavaScript

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

Lecture 4 JavaScript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 4 JavaScript

Uploaded by

Copyright:

Available Formats

The Basics of JavaScript

 Where is your JavaScript code located?

 JavaScript is dynamically typed – any variable can

 All primitive values have one of the five

The Document Object Model(DOM) is the objects that make up a

The parameter is a string, often concatenated from parts, some

The parameter is sent to the browser, so it can be anything that

 The Window object has three methods for

 The easiest way to find an HTML element in the DOM, is by

 This example finds the element with id="intro":

 An event is a notification that something specific

Event Tag Attribute

 The same attribute can appear in several

 By assigning the event handler script to an event tag attribute

<input type= “button” name =

<input type= “button” name =

You might also like