CHAPTER 6:
Introduction to JavaScript
Prepared for:
CSC 318 – Web Application Development
© Najwa Abd Ghafar – UiTM Johor
OVERVIEW OF THIS CHAPTER
In this chapter, you will learn about:
What is JavaScript
Variables & Data Types
Comments
Output Operations
Escape Sequences
INTRODUCTION
JavaScript:
Is a language similar to ordinary programming language
WHY?
Has variable declaration, branching, looping, array, and many more
Basically, JavaScript is called a scripting language
WHY?
A JavaScript program does not need to be compiled, instead it is
interpreted by a browser
INTRODUCTION
JavaScript:
Is also known as Client-Side Scripting
WHY?
The scripts involved will be processed by the browser (client), not the server
Will provide better performance and faster response time:
Because it doesn’t need to contact the sever to do any processing
Allow web pages to be dynamic and interactive:
By reacting to user events
INTRODUCTION
Client-Side Script vs Server Side Script
Client side script Server side script
The action takes on the user's (client’s) The action takes place on a web server,
computer that is used to provide as it is used to is used to interact with
user functionality without needing to permanent storage like databases or files
access a web server
Executed at browser Executed at server
E.g.: JavaScript E.g.: PHP
INTRODUCTION
Why do you need to learn
JavaScript?
Enables the developer to incorporate some programming
features inside the website
Will make the web page lively and responsive to changes
from the browsers or the users
JAVASCRIPT
JavaScript:
To write JavaScript, use the script element:
<script> When the browser finds a <script> tag:
..... It will switch into Javascript mode and executes
</script> the code inside
ALL JavaScript scripts will be embedded in HTML documents, either by:
1. Including directly inside a HTML document
The <script> tag can be placed anywhere in the web page depending
on the suitability, but the most suitable place are:
i. Inside the <head> section of the document:
Especially if it contains functions that are called throughout the
page
ii. At the <body> of the document:
The <script> tag can be used multiple times along the <body>
JAVASCRIPT
JavaScript:
All JavaScript scripts will be embedded in HTML documents, either by:
2. Linking to a Javascript document as an external file:
The external JavaScript file will have an extension .js
To use the external JavaScript, the src attribute can be
used
<script src=“myScript.js”></script>
JAVASCRIPT: VARIABLES
Variables:
Unlike HTML, JavaScript is case-sensitive
JavaScript’s variable can hold a value of any data type
You don't have to specify what type of value will be stored
during variable declaration
The value type of a variable can change during the execution of a
program and JavaScript takes care of it automatically
JAVASCRIPT: VARIABLES
Variables:
To declare a variable in JavaScript, the following syntax is used:
var variableName;
Notice that the data type is not specified
Each variable created must follow the following rules:
Begin with a letter or underscore ONLY
Consists of either letters, underscores, and numbers
Do not use any reserved keyword as variable name
For example:
var fullName;
var age;
var _gender;
var drink_option;
JAVASCRIPT: DATA TYPES
Data Types:
JavaScript allows you to work with three primitive data types:
1. Numbers:
In JavaScript, there is no distinction between integer values and
floating-point values:
All numbers in JavaScript are represented as floating-point values
For example: 50, -100, 120.78
2. Strings of text:
Each string must be enclosed in either:
Double quotation “ ”
Single quotation ‘ ’
For example: “Marc Jacobs”, “My name is ”
3. Boolean value:
The value can either be true or false
JAVASCRIPT: COMMENTS
Comments:
Will be ignored when the program is executed
To make a single comment in JavaScript:
// This is a single line comment
To make multiple line comments in JavaScript:
/*This is a comment
This is also a comment*/
JAVASCRIPT: OUTPUT
Output Operation:
There are different ways to display data in JavaScript:
1. Writing into the HTML output:
The output will be displayed as HTML output
The syntax used is:
document.write(............);
1st way:
JavaScript is placed at the
bottom of the body section
JAVASCRIPT: OUTPUT
Output Operation:
There are different ways to display data in JavaScript:
1. Writing into the HTML output:
2nd way:
JavaScript is placed as a function
at the head section
JAVASCRIPT: OUTPUT
Output Operation:
There are different ways to display data in JavaScript:
2. Writing into an alert box:
The output will be displayed on a dialogue box which will pop up
on the screen
The syntax used is:
alert(............);
JAVASCRIPT: OUTPUT
Output Operation:
There are different ways to display data in JavaScript:
3. Writing into the browser console:
The output will be displayed on the console of the browser
(press F12 on your browser to get to its control)
The syntax used is: console.log(............);
JAVASCRIPT: OUTPUT
Output Operation:
There are different ways to display data in JavaScript:
4. Writing into an HTML element:
The output will be displayed as the content of an HTML element
Will use an ID of the chosen HTML element
Use this when you want to change the content of an HTML element
The syntax used is:
document.getElementById(“htmlElementID”).innerHTML = ........ ;
JAVASCRIPT: OUTPUT
Output Operation:
There are different ways to display data in JavaScript:
4. Writing into an HTML element:
Use this when you want to change the content of an HTML element
JAVASCRIPT: OUTPUT
Output Operation:
When you have many data or strings to display:
You can use “+” to concatenate them
JAVASCRIPT: ESCAPE SEQUENCES
Escape Sequences:
Are used to display special characters into a string:
What would happen if the following is written?
document.write("We must "work hard" to survive");
Because strings must be written within quotes, JavaScript might
misunderstood the string if the escape sequences is not used
To display special characters, use backslash (\)
document.write(“We must \"work hard\" to survive");
JAVASCRIPT: ESCAPE SEQUENCES
Escape Sequences:
Below is a list of other special characters that can be added to a text string with
the backslash sign (\)
EXERCISE
To help you get familiar with basic JavaScript, create a webpage
that will contain the following:
1. Create 6 variables which will store a name, nickname, age, address, mother and
father.
2. Store a default value for each of those variables.
3. The output should be in the following format:
Hello there, my name is __________ but people call me “______”.
This year I am _____ years old.
I currently live in ________________.
My mother’s name is ______ & my father’s name is _______.
4. Display the output using each of the following method (do one by one):
Alert box
Console
Display as HTML output
Display using HTML elements (use the <p> tag)
JAVASCRIPT: DIALOG BOX
Dialog Box:
In JavaScript, there are 3 kinds of pop-up dialog boxes for interacting
with the users:
1. Alert Box:
Will open a dialog box that displays the parameter and an OK
button
Often used if you want to make sure information comes
through to the user:
Because it will wait for the user until they press the OK
button
The syntax used is:
alert(displayParameter);
JAVASCRIPT: DIALOG BOX
JAVASCRIPT: DIALOG BOX
Dialog Box:
In JavaScript, there are 3 kinds of pop-up dialog boxes for interacting
with the users:
2. Prompt Box:
Will open a dialog box and display the parameter, along with a
text box and two buttons (OK and Cancel)
Often used if you need an input from the user
The second parameter is for a default response (optional):
Will provide an initial value as input
The syntax used is:
prompt(displayParameter, “defaultResponse”);
JAVASCRIPT: DIALOG BOX
JAVASCRIPT: DIALOG BOX
JAVASCRIPT: DIALOG BOX
Dialog Box:
In JavaScript, there are 3 kinds of pop-up dialog boxes for interacting with the
users:
3. Confirm Box:
Will open a dialog box and display the parameter and two buttons
(OK and Cancel)
Will return a Boolean value, depending on which button was pressed
(OK: true or CANCEL: false)
Is often used if you want the user to verify or accept something
The syntax used is
confirm(displayParameter);
JAVASCRIPT: DIALOG BOX
EXERCISE
Write JavaScript that will produce the followings:
EXERCISE
Write JavaScript that will produce the followings:
Notice what actually happens here
JAVASCRIPT: PARSING
Parsing User Input:
By default, all input given by users (through prompt function or form) are
treated as string
To convert user input into valid number, we must use either one of
the following:
Function Description
parseFloat() Convert value into number of type float
parseInt() Convert value into number of type integer
Number() Convert value into a number
JAVASCRIPT: PARSING
EXERCISE
Write JavaScript that will produce the followings:
