Scribd
Upload
104 views

Chap 04 - Intro To Client-Side Scripting

This document provides an overview of JavaScript and client-side scripting. It introduces JavaScript as a scripting language that runs in web browsers. JavaScript allows for dynamic and interactive web pages by reacting to user events on the client-side without needing to contact the server. The document discusses JavaScript variables, data types, comments, output operations, and dialog boxes. It also explains how to write JavaScript code in HTML documents and external files.

Uploaded by

Isyraf Azri
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
104 views

Chap 04 - Intro To Client-Side Scripting

This document provides an overview of JavaScript and client-side scripting. It introduces JavaScript as a scripting language that runs in web browsers. JavaScript allows for dynamic and interactive web pages by reacting to user events on the client-side without needing to contact the server. The document discusses JavaScript variables, data types, comments, output operations, and dialog boxes. It also explains how to write JavaScript code in HTML documents and external files.

Uploaded by

Isyraf Azri
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

CHAPTER 4:

Introduction to
Client-Side Scripting
( JavaScript )

Prepared for:
CSC264 – Introduction to Web and Mobile Application
OVERVIEW OF THIS CHAPTER

In this chapter, you will learn about:


 What is JavaScript
 Variables & Data Types
 Comments
 Output Operations
 Escape Sequences
 String-Handling
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: 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
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 (\)
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
JAVASCRIPT: STRING HANDLING
String Handling:
 There are many methods that can be used on a string:
EXAMPLE
JAVASCRIPT: NONSTANDARD METHOD
Non-standard Method:
 Below are some JavaScript method that can also be used:
 Instead of using HTML code <b></b> for bold:

.bold()

 Instead of using HTML code <font color=“ ”></font> for font colour:

.fontcolor(“....”)

 Instead of using <a href=“ “></a> for links:

.link(“....”)
EXAMPLE
JAVASCRIPT: HTML CODE
HTML Code:
 Can be included in JavaScript (by writing it as HTML output)
 However, it must be enclosed inside a quotation mark (“ ”or ‘ ’)
JAVASCRIPT: HTML CODE

You might also like