University of Wollongong in Dubai
CSIT128 – Introduction to Web Technology
JavaScript #1
2
Outline
1 Introduction
2 Insert a script element
3 Write JavaScript comments
4 Display an alert dialog box
5 Reference browser and page objects
6 Use JavaScript properties and methods
7 Write HTML code and text content into a
8 page
Use JavaScript operators
9 Create a JavaScript function
3
Server-Side and Client-Side Programming
• Server-side programming: Program code runs from the server hosting
the website
• Advantage
• Connects a server to an online database containing information not directly
accessible to end users
• Disadvantages
– Use server resources and requires Internet access
– Long delays in cases of system over-load
4
Server-Side and Client-Side Programming
5
Server-Side and Client-Side Programming
• Client-side programming: Programs run on the user’s computer using
downloaded scripts with HTML and CSS files
• Client-side programs can never replace server-side programming
6
Server-Side and Client-Side Programming
7
The Development of JavaScript
• JavaScript is a programming language for client-side programs.
• It is an interpreted language that executes a program code without
using an application.
• Compiler is an application that translates a program code into
machine language.
• JavaScript code can be directly inserted into or linked to an HTML file.
8
Working with the script Element
• JavaScript code is attached to an HTML file using the script element (using external
JS file)
<script src=”url”></script>
where url is the URL of the external file containing the JavaScript code
Example: <script src="myScript.js"></script>
https://www.w3schools.com/js/myScript.js
• An embedded script can be used instead of an external file by omitting the
src attribute
<script>
code …
</script>
9
Loading the script Element
• script element can be placed anywhere within an HTML document.
• When a browser encounters a script, it immediately stops loading the
page and begins loading and then processing the script commands.
• async and defer attributes can be added to script element to
modify its sequence of processing.
10
Loading the script Element (continued)
• async attribute tells a browser to parse the HTML and JavaScript code
together.
• defer attribute defers script processing until after the page has been
completely parsed and loaded.
• async and defer attributes are ignored for embedded scripts
<script>
code ..
</script>
11
Inserting the script Element
12
Creating a JavaScript Program
• JavaScript programs are created using a standard text editor
• Adding Comments to your JavaScript Code
• Comments help understand the design and purpose of programs
• JavaScript comments can be entered on single or multiple lines
13
Creating a JavaScript Program
• Syntax of a single-line comment is as follows:
// comment text
• Syntax of multiple-line comments is as follows:
/*
comment text spanning
several lines
*/
14
Creating a JavaScript Program
15
Creating a JavaScript Program
• Writing a JavaScript Command
• A command indicates an action for a browser to take
• A command should end in a semicolon
JavaScript command;
16
Creating a JavaScript Program
17
Creating a JavaScript Program - Example
<html>
<head>
<script>
window.alert("welcome to UOWD");
</script>
</head>
<title> Test Javascript Alert</title>
</html>
18
Creating a JavaScript Program
• Understanding JavaScript Syntax
• JavaScript is case sensitive
• Extra white space between commands is ignored
19
Introducing Objects
• Object: Entity within a browser or web page that has properties and
methods
• Properties: Define objects
• Methods: Act upon objects
• JavaScript is an object-based language that manipulates an object by
changing one or more of its properties
20
Introducing Objects
• Types of JavaScript objects
• Built-in objects – substantial to JavaScript language
• Browser objects – part of browser
• Document objects – part of web document
• Customized objects – created by a programmer to use in an application
• Browser object model (BOM) and document object model (DOM)
organize browser and document objects in hierarchical structures,
respectively
21
Introducing Objects
22
Object References
• Objects within the object hierarchy are referenced by their object
names such as window, document, or navigator
• Objects can be referenced using the notation
object1.object2.object3 ...
where object1 is at the top of the hierarchy, object2 is a child of
object1, and so on
23
Referencing Object Collections
• Object collections: Objects organized into groups
• To reference a specific member of an object collection, use
collection[idref]
or collection.idref
where collection is a reference to the object collection and idref
is either an index number or the value of id attribute
24
Referencing Object Collections
25
Referencing an Object by ID and Name
• An efficient approach to reference an element is to use its id
attribute using the expression
document.getElementById(id)
where id is the value of id attribute
26
Changing Properties and Applying
Methods
• Object Properties
• Object property is accessed using
object.property
where object is a reference to an object and property is a
property associated with that object
– Read-only properties cannot be modified
27
Changing Properties and Applying
Methods
• Applying a Method
• Objects can be modified using methods
• Methods are applied using the expression
object.method(values)
where,
- object is a reference to an object
- method is the name of the method applied to the object,
- and values is a comma-separated list of values associated with the
method
28
Writing HTML Code
• HTML code stored within a page element is referenced using
element.innerHTML
where element is an object reference to an element within a web
document
29
Referencing an Object by ID and Name
- Example
Output
Click on the link
Step 1 Step 2 30
Writing HTML Code - Example
Output
Step 1 Step 2
31
Working with Variables
• Variable: Named item in a program that stores a data value
• Declaring a Variable
• Introduced into a script by declaring the variable using the var keyword
var variable = value;
where variable is the name assigned to the variable and value is the
variable’s initial value
32
Working with Variables
• Conditions to assign variable names in JavaScript
• First character must be either a letter or an underscore character ( _ )
• The characters after the first character can be letters, numbers, or underscore
characters
• No spaces
• No using names that are part of JavaScript language (resaved names
https://www.w3schools.com/js/js_reserved.asp )
33
Variables and Data Types
• Data type: Type of information stored in a variable
• Supported data types
• Numeric value
• Text string
• Boolean value
• Object
• null value
34
Variables and Data Types
• Numeric value: Any number
• Text string: Group of characters enclosed within either
double or single quotation marks ( “ “ or ‘ ’ )
• Boolean value: Indicates the truth or falsity of a statement
(true or false)
35
Variables and Data Types
• Object – Simplifies code by removing the need to rewrite
complicated object references
• null value – Indicates that no value has yet been assigned
to a variable
36
Working with Date Objects
• Date object: Built-in JavaScript object used to store information about
dates and times
37
Working with Date Objects – Example
Output
Step 1 Step 2 38
Working with Date Objects
39
Setting Date and Time Values
date.setTime(1332403882588);
40
Working with Operators and Operands
• Operator: Symbol used to act upon an item or a variable within an
expression
• Operands: Variables or expressions that operators act upon
• Types of operators
• Binary operators – require two operands in an expression
41
Working with Operators and Operands
• Unary operators – require only one operand
o Increment operator (++) – increases the value of an operand by 1
o Decrement operator (--) – decreases the value of an operand by 1
Example:
Var a = 5;
Var b = a++;
a equals 5 and b equals 6
42
Using Assignment Operators
• Assignment operator: Assigns a value to an item
43
Operators - Example
Output
Step 1 Step 2
44
Working with the Math Object
• Math object: Built-in object used to perform mathematical tasks and
store mathematical values
• Syntax to apply a Math method is
Math.method(expression)
where method is the method applied to a mathematical expression
45
Working with the Math Object
46
Using Math Constants
• Math functions refer to built-in constants stored in JavaScript
Math object
• Syntax to access mathematical constants is
Math.CONSTANT
where CONSTANT is the name of one of the mathematical constants
supported by Math object
47
Using Math Constants
48
Working with JavaScript Functions
• General syntax of a JavaScript function is
function function_name(parameters){
commands
}
where,
– function_name is the name of the function
– parameters is a comma-separated list of variables used in the
function
– commands is the set of statements run by the function
49
Calling a Function
50
Calling a Function - Example
Output
51
Step 1 Step 2
Creating a Function to Return a Value
• Functions return values using return statement
function function_name(parameters){
commands
return value;
}
where value is the calculated value that is returned by the
function
52
Creating a Function to Return a Value -
Example
Output
53
Converting Between Numbers and Text
• + operator adds a text string to a number
• For example,
testNumber = 123; // numeric value
testString = testNumber + “”; // text string
where + operator concatenates a numeric value with an empty text
string resulting in a text string
54
References
1. New Perspectives on HTML5, CSS3, and JavaScript , 6th Edition,
Patrick M. Carey, ISBN-13: 978-1-305-50392-2.
2. JavaScript Tutorial. https://www.w3schools.com/js/ Last Accessed
27 April 2024.
3. JavaScript Reserved Words
https://www.w3schools.com/js/js_reserved.asp Last Accessed 27
April 2024.
55
THANK YOU
56
