Scribd
Upload
6 views

JavaScript - session-1

Uploaded by

PhyoeThu Naingg
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

JavaScript - session-1

Uploaded by

PhyoeThu Naingg
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 54

Introduction to JavaScript

Contents

✓ JavaScript Introduction
✓ JavaScript Syntax
✓ JavaScript Output
✓ JavaScript Function & Statements
✓ Types of JavaScript
✓ JavaScript Variables
✓ JavaScript Data type
✓ JavaScript Scope
✓ JavaScript Operators 2
JavaScript Introduction

✓ JavaScript is a scripting language that was


introduced to make web pages alive and be
interactive with the user.
✓ JS is the most popular programming language
on the frontend web development.
✓ JavaScript inserted into HTML pages, can be
executed by all modern web browsers.
✓ Used to add functionality, validate input and
much more.
✓ JavaScript is easy to learn.
3
JavaScript Versions

✓ JavaScript was invented by Brendan Eich in 1995, and became an


ECMA (European Computer Manufacturers Association) standard in
1997.
✓ ECMAScript is the official name of the language.
✓ ECMAScript versions have been abbreviated to ES1, ES2, ES3,
ES5, and ES6.
✓ Since 2016 new versions are named by year (ECMAScript 2016 /
2017 / 2018).
4
Why Use JavaScript?

✓ We want to execute code when an event occurs.

✓ You can place an unlimited number of scripts in an HTML document.

✓ Scripts can also be placed in external files.

✓ JavaScript makes easy to manipulate HTML elements.

5
What can JavaScript do?

Smart watches
Web application

Website
Games

6
JavaScript Framework

ReactJs Jquery

AngularJs
AngularJs MetorJs

7
Top Websites Built Using JavaScript

8
Benefits Of JavaScript

9
JavaScript Syntax

✓ JavaScript code can be written inside HTML Script Tags or in a


separate file with .js extension.

Write JavaScript Code


<script> //Write
javascript code here...
</script>
10
JavaScript Comments

✓ Single line comments start with //.

✓ Multi line comments start with /* and end with */.

✓ Comments will not be executed by JavaScript.

11
JavaScript Statements

✓ JavaScript is a sequence of statements to be executed by the browser

✓ The purpose of the statements is to tell the browser what to do.

✓ Semicolon separates JavaScript statements.


Example:
let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
document.getElementById(“demo”).innerHTML= “Hello World”; 12
JavaScript Functions

✓ A function is written as a code block (inside curly { } brackets), preceded by the


function keyword

function functionname( )

Some code to be executed

13
JavaScript Output

JavaScript can "display" data in different ways:

✓ Writing into an HTML element, using innerHTML.

✓ Writing into the HTML output using document.write().

✓ Writing into an alert box, using window.alert().

✓ Writing into the browser console, using console.log().

14
Using innerHTML

✓ To access an HTML element, JavaScript can use the document.getElementById(id) method.


✓ The id attribute defines the HTML element. The innerHTML property defines the HTML content:

Example: <!DOCTYPE html>


<html>
<body>

<h1>My First Web Page</h1>


<p>My First Paragraph</p>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = ”Hello DCS”;
</script>

</body>
</html> 15
Using document.write()

For testing purposes, it is convenient to use document.write():

<!DOCTYPE html>
Example-1: <html>
<body>

<h1>My First Web Page</h1>


<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html> 16
Using document.write()

For testing purposes, it is convenient to use document.write():

<!DOCTYPE html>
<html>
Example-2: <body>

<h1>My First Web Page</h1>


<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 +


6)">Try it</button>

</body>
</html>

Using document.write() after an HTML document is loaded, will delete 17


all existing HTML:
Using window.alert()

You can use an alert box to display data:

<!DOCTYPE html>
<html>
Example-: <body>

<h1>My First Web Page</h1>


<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>
18
Using console.log()

For debugging purposes, you can call the console.log() method in the browser to display data.

<!DOCTYPE html>
Example-:
<html>
<body>

<script>
console.log(5 + 6);
</script>

</body>
</html>

19
Types of JavaScript

✓ JavaScript provides 3 places to put the JavaScript code:


1. Between the body tag of html
2. Between the head tag of html
3. In .js file (external javaScript)

20
JavaScript Example : code between the body tag

1.<html>
2.<body>
3.<script type="text/javascript">
4.document.write("JavaScript is a simple language for DCS learners");
5.</script>
6.</body>
7.</html>

✓ The script tag specifies that we are using JavaScript.


✓ The text/javascript is the content type that provides information to the
browser about the data.
✓ The document.write() function is used to display dynamic content
through JavaScript. 21
JavaScript Example : code between the
head tag
1.<html>
2.<head>
✓ Let’s see the same example of displaying alert dialog 3.<script type="text/javascript">

box of JavaScript that is contained inside the head tag. ✓ function msg(){
1. alert("Hello JS");
2.}
✓ In this example, we are creating a function msg(). To 3.</script>
4.</head>
create function in JavaScript, you need to write 5.<body>
6.<p>Welcome to JavaScript</p>
function with function_name as given below. 7.<form>
8.<input type="button" value="click"
✓ To call function, you need to work on event. Here we onclick="msg()"/> </form>
9.</body>
are using onclick event to call msg() function. 10.</html>
22
External JavaScript file message.js

1.function msg(){
2. alert("Hello DCS");
3.}
✓ We can create external JavaScript file and
index.html
embed it in many html page.
1.<html>
✓ It provides code re usability because 2.<head>
3.<script type="text/javascript" src="message.js"><
single JavaScript file can be used in /script>
4.</head>
several html pages. 5.<body>
6.<p>Welcome to JavaScript</p>
✓ An external JavaScript file must be saved 7.<form>
8.<input type="button" value="click" onclick="msg(
by .js extension. Let's create an )"/>
9.</form>
external JavaScript.
10.</body> 23
11.</html>
JavaScript Variables

✓ Variable is a name given to a memory location which acts as a container for


storing data.

✓ There are two types of variables in JavaScript : local variable and global variable.
Memory Location

Variable Name 24
JavaScript Variables Cont’d

✓ There are some rules while declaring a


JavaScript variable (also known as identifiers).
✓ Name must start with a letter (a to z or A to
Z), underscore( _ ), or dollar( $ ) sign.
✓ After first letter we can use digits (0 to 9), for
example value1.
✓ JavaScript variables are case sensitive, for
example x and X are different variables.

25
JavaScript Variables Cont’d

✓ JavaScript provides three ways to declare a variable:

✓ var,

✓ const,

✓ and let.

✓ These keywords deliver different functionality from each other.

26
JavaScript var keyword

✓ The var keyword is used in all JavaScript code from 1995 to 2015.

✓ Var is a traditional method to declare a variable while const.

✓ In this example, x, y, and z, are variables, declared with the var keyword:

27
JavaScript const keyword

✓ A const variable cannot be reassigned:

✓ JavaScript const variables must be assigned a value when they are declared:

28
JavaScript Let keyword

✓ let keyword was introduced later by the ES2015/ES6, which create block
scope variable.

✓ Here is the syntax to declare a variable using the let keyword:

let variable_name;

29
JavaScript Data types

✓ JavaScript provides different data types


to hold different types of values.

✓ There are two types of data types in


JavaScript.

✓ Primitive data type and Non-primitive


(reference) data type:

30
JavaScript Data types

JavaScript Strings

✓ A string is a variable which stores a series of characters like "John Doe". A string
can be any text inside quotes. You can use single or double quotes:

31
JavaScript Data types
JavaScript Numbers

✓ JavaScript has only one type of numbers. Numbers can be written with, or
without decimals:

✓ Example:

32
JavaScript Data types

JavaScript Booleans

✓ Booleans can only have two values: true or false.

✓ Example:

33
JavaScript Data types

JavaScript Array

✓ An array is a special variable, which can hold more than one value at a
time.

✓ An array can be created in three ways. The following code creates an


Array object called myCars:

34
JavaScript Data types

1. Regular:

35
JavaScript Data types

1. Condensed:

36
JavaScript Data types

1. Literal:

37
JavaScript Data types

JavaScript Object
✓ An object is delimited by curly braces. Inside the braces the object's properties are
defined as name and value pairs (name : value). The properties are separated by
commas.

38
JavaScript Scope

✓ Scope determines the accessibility (visibility) of variables.


✓ JavaScript has 3 types of scope:
1. Block scope
2. Function scope
3. Global scope

39
JavaScript global variable
For example:

✓ A JavaScript global
variable is accessible from
any function.
✓ A variable i.e. declared
outside the function or
declared with window
object is known as global
variable.

40
JavaScript local variable

For example:
✓ A JavaScript local variable is
declared inside block or function.
✓ It is accessible within the function or
block only.

41
JavaScript Arithmetic Operators

Operation Description Example


+ Addition a= b+c
- Subtraction a= b-c
* Multiplication a= b*c
/ Division a= b/c
% Modulus(division remainder) a= b%c

** Exponent 5 ** 2 (returns 25, which is the same


as 5 * 5)

++ Increment a= ++b
-- Decrement a= b-- 42
Logical operators

> < >= <= && || ! == != === !==


most logical operators automatically convert
types:
5 < "7" is true
42 == 42.0 is true
"5.0" == 5 is true
=== and !== are strict equality tests; checks
both type and value
"5.0" === 5 is false 43
JavaScript Operator Basics

✓ To add two or more string variables together, use the + operator.

✓ The assignment operator = is used to assign values to JavaScript

variables.

✓ If you add a number and a string, the result will be a string!

44
Conditional Operators

✓ The conditional operator is the only JavaScript operator that takes three
operands. The operator can have one of two values based on a condition.

✓ Syntax:

var variable_name=(condition)?value1:value2

voteable =(age<18)?"Too young":"Old enough";

45
Conditional Operators Example

46
+ Operator used on Strings

✓ The + operator can be used to add string variables or text values together or it can be used to add a
string to a number.

Example:

47
delete operator in JavaScript

✓ The delete operator deletes an object, an object's property, or an element at a specified index in an
array.

delete objectName;

delete objectName.property;

delete objectName[index];

delete property; // legal only within a with statement

where objectName is the name of an object, property is an existing property, and index is
an integer representing the location of an element in an array.
48
delete operator in JavaScript

x = 42;

var y = 43;

myobj = new Number();

myobj.h = 4; // create property h

delete x; // returns true (can delete if declared implicitly)

delete y; // returns false (cannot delete if declared with var)

delete Math.PI;// returns false (cannot delete predefined properties)

delete myobj.h; // returns true (can delete user-defined properties)


49
delete myobj; // returns true (can delete if declared implicitly)
delete operator in JavaScript

Deleting array elements

✓ When you delete an array element, the array length is not affected. For example, if you
delete a[3], a[4] is still a[4] and a[3] is undefined.

✓ The trees[3] is removed with delete. However, trees[3] is still addressable and
returns undefined.

50
delete operator in JavaScript

✓ If you want an array element to exist but have an undefined value, use
the undefined keyword instead of the delete operator.

51
First JavaScript Program

52
JavaScript Tutorial

53
Question & Answer

Thank
You !!

Reference Book: IMCEITS (Ygn) & Internet 54

You might also like