Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
8 views

Lecture-4 (JavaScript Intro + Variable)

Javascript

Uploaded by

myowithmom
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views

Lecture-4 (JavaScript Intro + Variable)

Javascript

Uploaded by

myowithmom
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 43

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

You might also like