II Semester – 2023-2024
Web Application Development
Lecture 4 C S E 2 0 30
II-Semester 1
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
JavaScript
What is JavaScript?
Two ways to write JavaScript Code
JavaScript Engine in browsers
JavaScript Frameworks
JavaScript Variables
II-Semester 2
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
What is JavaScript?
JavaScript is a dynamic computer programming language.
It is lightweight and most commonly used as a part of web pages, whose
implementations allow client-side script to interact with the user and make dynamic
pages.
It is an interpreted programming language with object-oriented capabilities.
JavaScript can be used to create web and mobile applications, build web servers, create
games, etc.
NOT related to Java. Completely different types of languages that just happen to be
similarly named
JavaScript - programs are interpreted in the browser
II-Semester 3
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Two Ways to write JavaScript code
1. embed JavaScript code directly into the html page’s body or head
but this is bad style (should separate content, presentation, and behavior)
<body>
<script>
document.write (“Hello World!”);
</script>
</body>
II-Semester 4
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Two Ways to write JavaScript code
2. link external javascript file, the src attribute is required. The value of src is a URL
linked to a file containing JavaScript code.
script tag should be placed in HTML page's head
</head>
<script type=“text/javascript” src=“example.js”></script>
</head>
II-Semester 5
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
JavaScript Engines in Browsers
Browser Name of JavaScript Engine
Google Chrome V8
Edge (Internet Explorer) Chakra
Mozilla Firefox Spider Monkey
Safari Javascript Core Webkit
II-Semester 6
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
JavaScript frameworks
Popular front-end JavaScript frameworks
1. Angular JS
2. Vue JS
3. Next JS
4. React JS
5. Ember JS
6. Svelte JS
7. Gatsby JS
8. Nuxt JS
9. Bootstrap
Popular back-end JavaScript frameworks
10. Node
11. Spring boot
12. Express JS
13. Laravel
14. Micronaut
II-Semester 7
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
JavaScript Comments
1. Inserting comment on one line
// Your comment here
2. Inserting comments on multiple-lines
/*
My script will write some text into my HTML document!
All of this text is ignored by the browser.
*/
II-Semester 8
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Sample JavaScript Code
<!DOCTYPE html>
<html>
<head>
<title>Hello World Example</title>
</head>
<body>
<script>
document.write("<h1>Hello, world!</h1>");
</script>
</body>
</html>
The document.write() method writes a string of text to the browser.
II-Semester 9
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
JavaScript Variable
II-Semester 10
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
JavaScript Variable
There are four ways to Declare a JavaScript Variable:
Using var
Using let
Using const
Using nothing
JavaScript is untyped language. This means that a JavaScript variable can hold a value of
any data type. Unlike many other languages, you don't have to tell JavaScript during
variable declaration what type of value the variable will hold. The value type of a variable
can change during the execution of a program.
II-Semester 2023- 11
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2024
Variables declaration
In the old, JavaScript developers used to declare variables using the keyword var or without
any keywords.
var keyword is used to declare variables since JavaScript was created. The var keyword is
used in all JavaScript code from 1995 to 2015.
It is confusing and error-prone when using variables declared using var .
The let and const keywords were added to JavaScript in 2015.
If you want your code to run in older browsers, you must use var.
let keyword removes the confusion and error of var. It is the new and recommended way of
declaring
II-Semestervariables
2023- in JavaScript. 12
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2024
JavaScript Scope
:
II-Semester 13
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
JavaScript Variable Scope
II-Semester 14
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Block Scope
II-Semester 15
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
<script>
{
var num1 = 100;
console.log("Inside Block " + num1);
}
console.log("Outside Block " + num1);
</script>
Inside Block 100
Outside Block 100
II-Semester 16
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
<script>
{
let num1 = 100;
console.log("Inside Block " + num1);
}
console.log("Outside Block " + num1);
</script>
Inside Block 100
Uncaught ReferenceError:num1 is not
defined
II-Semester 17
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
<script>
{
const num1 = 100;
console.log("Inside Block " + num1);
}
console.log("Outside Block " + num1);
</script>
Inside Block 100
Uncaught ReferenceError:num1 is not
defined
II-Semester 18
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Function Scope
II-Semester 19
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
<script>
function fun1()
{
var num1 = 100;
console.log("Inside function " + num1);
}
fun1(); // call the function
console.log("Outside function " + num1);
</script>
Inside function 100
Uncaught ReferenceError: num1 is not
defined
II-Semester 20
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Global Scope
II-Semester 21
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
<script>
var num1 = 200;
function fun1()
{
console.log("Inside function " + num1);
}
fun1(); // call the function
console.log("Outside function " + num1);
</script>
Inside function 200
Outside function 200
II-Semester 22
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Block-Scoped: let
Variables declared using the let/const keywords are block-scoped.
Consider the following example:
function letScoping() {
let x = 1;
if (true) { Output:
let x = 2; 2
console.log(x); // will print 2 1
}
console.log(x); // will print 1
}
II-Semester 23
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Block-Scoped: const
Variables declared using the let/const keywords are block-scoped.
Consider the following example:
const x = 22;
const x = 22; x=30;
{ {
const x = 90; Output: const x = 90; Output:
console.log(x); 90 console.log(x); x=30;
77
45
^
{ { TypeError: Assignment to constant
22
const x = 77; const x = 77; variable.
console.log(x); console.log(x);
} }
{ {
const x = 45; const x = 45;
console.log(x); console.log(x);
} }
} }
console.log(x); console.log(x);
II-Semester 24
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Function-Scoped: var
Variables declared using the var keyword are function-scoped.
Consider the following example:
function varScoping() {
var x = 1;
if (true) { Output:
var x = 2; 2
console.log(x); // will print 2 2
}
console.log(x); // will print 2
}
II-Semester 25
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Function-Scoped: var (Example)
Consider the following example:
var a = 2;
Output:
for(var a = 0; a < 3; a++) hello
{ hello
console.log('hello'); hello
} 3
console.log(a);
II-Semester 26
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Function-Scoped: let (Example)
Consider the following example:
let a = 2;
Output:
for(let a = 0; a < 3; a++) hello
{ hello
console.log('hello'); hello
} 2
console.log(a);
II-Semester 27
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Testing Variables (1)
Consider the following example:
{
let f_name = 'Alex';
const ZIP = 500067; Output:
var age = 25; // Uncaught ReferenceError: f_name is not defined
} // Uncaught ReferenceError: ZIP is not defined
// 25
console.log(f_name);
console.log(ZIP);
console.log(age);
II-Semester 28
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Testing Variables (2)
Consider the following example:
function f1() {
let f_name = "Alex";
const ZIP = 560089; Output:
var age = 25; // Uncaught ReferenceError: f_name is not defined
} // Uncaught ReferenceError: ZIP is not defined
// Uncaught ReferenceError: age is not defined
f1();
console.log(f_name);
console.log(ZIP);
console.log(age);
II-Semester 29
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Testing Variables (3)
Consider the following example:
let f_name = "Alex";
const ZIP = 560089;
var age = 25; Output:
function f1() { // Alex
console.log(f_name); // 560089
// 25
console.log(ZIP); // Alex
console.log(age); // 560089
} // 25
f1();
console.log(f_name);
console.log(ZIP);
console.log(age);
II-Semester 30
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Re-declaration: let/const
Variables declared using the let/const keywords cannot be re-declared in the same scope.
Consider the following example:
let miit = ‘Students';
let miit = ‘Faculties';
console.log(miit);
In the above code, you declared a variable with the name miit using the let keyword and then you
declared it again on the next line. Thus, the second line throws an SyntaxError as mentioned in the
output.
Uncaught SyntaxError: Identifier ‘miit' has already been declared
II-Semester 31
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Re-declaration: var
Variables declared using the var keyword can be re-declared in the same scope.
Consider the following example:
var y = ‘Students';
var y = ‘Faculties';
console.log(y);
As evident from the output , you can re-declare variables having the same name in the same
scope using the var keyword. The value contained in the variable will be the final value that you
have assigned to it.
Output: Faculties
II-Semester 32
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Re-assignment: let
Variables declared using the let keyword can change their values in future.
Consider the example given below:
let PI = 22/7;
PI = 3.142;
console.log(PI);
Output:
3.142
II-Semester 2023- 33
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2024
Re-assignment: const
Variables declared using the const keyword cannot change their values in future.
Consider the example given below:
const PI = 22/7;
PI = 3.142;
console.log(PI);
Output:
Uncaught TypeError: Assignment to constant variable
II-Semester 2023- 34
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2024
Re-assignment: var
Variables declared using the var keyword can change their values in future.
Consider the example given below:
var PI = 22/7;
PI = 3.142;
console.log(PI);
Output:
3.142
II-Semester 2023- 35
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2024
Hoisting: let/const
Variables declared using the let/const keywords are NOT hoisted.
Consider the following example:
console.log(a-named);
let a-named=40;
Notice that on the first line in the code given above, you are trying to access a variable a-
named, which is declared and assigned a value on the next line. Essentially, you are trying to
access a variable, which has not yet been allocated memory (declared). Since the variable a-
named is declared using the let keyword and the variables declared using the let/const keywords
are not hoisted, this throws a ReferenceError: Cannot access ‘a-named’ before initialization.
II-Semester 2023- 36
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2024
Hoisting: var
Variables declared using the var keyword are hoisted to the top of their scope.
Consider the following example:
console.log(z);
var z=90;
Output : Undefined
Here, the variable z is declared on line 1 and is not assigned any value. All the
variables in JavaScript are initialized with the default value undefined, if no other
value is assigned explicitly by the user. Thus, z is assigned the value undefined,
which is what is printed on the second line (before z is updated to 90).
II-Semester 2023- 37
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2024
Summary
Keyword Scope Re-declaration Re-assignment Hoisting
var function scope Yes Yes Yes
let block scope No Yes No
const block scope No No No
II-Semester 2023- 38
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2024
Getting input in JavaScript
II-Semester 39
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Getting input in javascript
const prompt=require("prompt-sync")();
let name = prompt("What's your name ");
console.log("hello" +name+ "How are you today!");
Hello Ma Honey! How are you today?
II-Semester 40
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Getting input in javascript
Write a Program in JavaScript to Find the sum of two numbers from user input.
const prompt=require("prompt-sync")();
let num1 = prompt("Enter first number ");
num1=parseInt(num1);
let num2= prompt("Enter second number");
num2=parseInt(num2);
const prompt=require("prompt-sync")();
let sum=num1+num2;
let num1 = prompt("Enter first number ");
console.log("the sum of two values"+sum);
num1=Number(num1);
let num2= prompt("Enter second number");
Or num2=Number(num2);
let sum=num1+num2;
const prompt=require("prompt-sync")(); console.log("the sum of two values"+sum);
let num1 = +prompt("Enter the first
number:");
let num2 = +prompt("Enter the second
number:");
let sum = num1 + num2;
console.log("The sum of the two numbers is:
II-Semester
" + sum);
2023-2024
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY 41
Exercise
Write a Program in JavaScript to Find Area of Circle.
Expected output:
Diameter = 20 units
Circumference = 62.800000000000004 units
Area = 314 sq. units
II-Semester 42
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
Exercise
Write a Program in JavaScript to Find Area of Triangle.
Expected output:
The are of Triangle is 48
II-Semester 43
MYANMAR INSTITUTE OF INFORMATION TECHNOLOGY
2023-2024
