Scribd
Upload
3 views34 pages

Javascript Basic

Chapter 6 introduces JavaScript, covering its definition, variables, data types, comments, output operations, and escape sequences. It explains the difference between client-side and server-side scripting, emphasizing JavaScript's role in creating dynamic and interactive web pages. The chapter also includes practical exercises to reinforce learning about variable declaration, output methods, and user input parsing.

Uploaded by

elnini8412
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views34 pages

Javascript Basic

Chapter 6 introduces JavaScript, covering its definition, variables, data types, comments, output operations, and escape sequences. It explains the difference between client-side and server-side scripting, emphasizing JavaScript's role in creating dynamic and interactive web pages. The chapter also includes practical exercises to reinforce learning about variable declaration, output methods, and user input parsing.

Uploaded by

elnini8412
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

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:

You might also like