Course Code:20CSC314A

Course Title: Web Architecture and Application

Development

1
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences
 Objectives
After completing this lecture, the student will be able to
– Analyze basics of Javascript

2
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences
 Contents
• Javascript

3
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences
 JavaScript
• JavaScript is a lightweight, interpreted programming language.
• It is designed for creating network-centric applications.
• It is complimentary to and integrated with Java.
• JavaScript is very easy to implement because it is integrated with HTML.
• It is open and cross-platform.
• JavaScript can be implemented using JavaScript statements that are placed within
the <script>... </script> HTML tags in a web page.

4
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences
 JavaScript
Your First JavaScript

This function can be used to write text, HTML, or both. Take a look at the following
code

5
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences
 JavaScript
JavaScript Variables
• Like many other programming languages, JavaScript has variables.
• Variables can be thought of as named containers.
• You can place data into these containers and then refer to the data simply by
naming the container.

6
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences
 JavaScript
JavaScript if-else

The 'if...else' statement is a form of control statement that allows JavaScript to execute
statements in a more controlled way.

7
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences
 JavaScript
JavaScript The while Loop

The purpose of a while loop is to execute a statement or code block repeatedly as long
as an expression is true.Once the expression becomes false, the loop terminates.

8
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences
 JavaScript
JavaScript – Functions

Like any other advanced programming language, JavaScript also supports all the
features necessary to write modular code using functions

Syntax

The basic syntax is shown here

9
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences
 JavaScript
JavaScript – Functions

10
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences
 JavaScript
JavaScript - Page Redirection

It is quite simple to do a page redirect using JavaScript at client side. To redirect your
site visitors to a new page, you just need to add a line in your head section as follows

11
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences
 JavaScript
JavaScript - Dialog Boxes
• An alert dialog box is mostly used to give a warning message to the users. For
example, if one input field requires to enter some text but the user does not
provide any input, then as a part of validation, you can use an alert box to give a
warning message
• Nonetheless, an alert box can still be used for friendlier messages. Alert box gives
only one button "OK" to select and proceed

12
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences
 JavaScript
JavaScript - Dialog Boxes

13
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences
 JavaScript
JavaScript - Dialog Boxes

Confirmation Dialog Box:

• A confirmation dialog box is mostly used to take user's consent on any option. It
displays a dialog box with two buttons: OK and Cancel
• If the user clicks on the OK button, the window method confirm() will return true.
If the user clicks on the Cancel button, then confirm() returns false. You can use a
confirmation dialog box as follows

14
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences
 JavaScript
JavaScript - Dialog Boxes

15
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences
 JavaScript
JavaScript - Dialog Boxes

Prompt Dialog Box:

• The prompt dialog box is very useful when you want to pop-up a text box to get
user input
• Thus, it enables you to interact with the user. The user needs to fill in the field and
then click OK
• This dialog box has two buttons: OK and Cancel. If the user clicks the OK button,
the window method prompt() will return the entered value from the text box
• If the user clicks the Cancel button, the window method prompt()returns null

16
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences
 JavaScript
JavaScript - Dialog Boxes
Prompt Dialog Box:

17
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences
 Summary
• JavaScript is a lightweight, interpreted programming language

18
Faculty of Engineering & Technology ©Ramaiah University of Applied Sciences