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

JavaScript

Uploaded by

mdsulemankhan2767
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

JavaScript

Uploaded by

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

Java script

Javascript:
 JavaScript is a powerful programming language that can add
interactively to a website.
 A scripting language is a computer programming language that
provides instructions, called scripts, for software in apps and
websites.
Why we need js:
 Its an event based programming lanagauge.
 Click, double click, right click ,left click, drag and drop, key
press ,load etc..
 Java is very versatile as it is used for programming
applications on the web, mobile, desktop, etc.

Use of js in web development:


 Drop down menu
 Animated slider
 Maps
 Charts graphs
 Audio
 Video player
 Zoom effect
 Form validation
Java script
Requirement of software in js:
 Html editor : note pad, notepad++,vs code, etc
 Web browser: google chrome ,Mozilla
firebox,internet explorer…

2 ways to implement the js:


 In page JavaScript
 External js

In page or internal page:


<html>
<head>
<script>
document. Write(“hello”);
</script>
</head>
<body>
<h1>hello</h1>
<script>
</script>
</body>
</html>
Java script
External js:
Make a separate file and give the name as .js
Example: myfile.js
<head>
<script src=“myfile.js”></script>
</head>

OUTPUT DISPLAY:
 Document.write(“hello”); :its used to display some
string in the output of the html page .document.write
in js is methods or functions in js
 Alter(“hii”) : this method is used to alter the message
.
 Comsole.log(“welcome”); its build in function that
allows you to output message to console .
 Its commomnly used in browder to debugging your
code.

JavaScript Statements:
 A computer program is a list of "instructions" to be
"executed" by a computer.
 In a programming language, these programming
instructions are called statements.
 EXAMPLES:
"Hello Dolly."
Java script
JavaScript Comments:
 JavaScript comments can be used to explain
JavaScript code, and to make it more readable.
 JavaScript comments can also be used to prevent
execution, when testing alternative code.
 Single Line Comments:
 Multi-line Comments

Single Line Comments:


Single line comments start with //.
Any text between // and the end of the line will be
ignored by JavaScript (will not be executed).
This example uses a single-line comment before
each code line:
EXAMPLE:
<script>
var a=10;
var b=20;
var c=a+b;//It adds values of a and b variable
document.write(c);//prints sum of 10 and 20
</script>

Multi-line Comments:
Java script
It is represented by forward slash with asterisk then
asterisk with forward slash. For example:
/* your code here */
EXAMPLE :
<script>
/* It is multi line comment.
It will not be displayed */
document.write("example of javascript multiline comm
ent");
</script>

JavaScript Variables:
Variables are Containers for Storing Data
JavaScript Variables can be declared in 3 ways:
• Using var
• Using let
• Using const

Rules for declaring the variable:


 Must begin with a letter, or $, or _
 Names are case sensitive (y and Y are different)
 Reserved JavaScript words cannot be used as
names like
 Double , finally ,goto,else, arguments
Java script
 We cant start with number donot use space between
two variable.
Using var:
 Variables are containers for storing information.
Creating a variable in JavaScript is called "declaring"
a variable:
 Syntax: var name = value;
 Example : var carName;
 o assign a value to the variable, use the equal sign:
 carName = "Volvo";
 You can also assign a value to the variable when you
declare it:
 var carName = "Volvo";
 Example:
 var x= 5;
var y= 6;
var z = x + y;
LET VARIABLE:
 let is a keyword that is used to declare a block
scoped variable.
 A block-scoped variable is a variable that can only be
accessed within the block where it was declared.
 Syntax of let:
 let variable_name;
 example :
Java script
<script>
{
let num = 30;

document.write("Inside the function num = " + nu


m);
}
document.write("<br> Outside the function num =
" + num);
</script>

CONSTANT VARIABLES:
 Java script key word const is used tho declared the
constant values and cannot be reassigned the
values .once it declare the value it cant be change.
 Example:
Pi = 3.14159;

JavaScript Operators:
 There are different types of JavaScript operators:
• Arithmetic Operators
• Assignment Operators
• Comparison Operators
• String Operators
Java script
• Logical Operators
• Bitwise Operators
• Ternary Operators

JavaScript Arithmetic Operators:


 Arithmetic Operators :are used to perform
arithmetic on numbers.

Operator Description

+ Addition

- Subtraction

* Multiplication

** Exponentiation

/ Division

% Modulus (Division Remainder)

++ Increment

-- Decrement

JavaScript Assignment Operators:


 The = Operator
Java script
 The Simple Assignment Operator assigns a value
to a variable.
 Example:
 let x = 10;
 The += Operator compound operator
 The Addition Assignment Operator adds a value
to a variable.
 Example:
 A+=b
 A=a+b;
 The -= Operator
 The Subtraction Assignment Operator subtracts a
value from a variable.
 Example:
 a-=b
 The *= Operator
 The Multiplication Assignment
Operator multiplies a variable.
 Example:
 let x = 10;
x *= 5;
 The **= Operator
 The Exponentiation Assignment Operator raises
a variable to the power of the operand.
Java script
 Example:
 let x = 10;
x **= 5;
 The /= Operator
 The Division Assignment Operator divides a
variable.
 Example:
 let x = 10;
x /= 5;
 The *= Operator
 The Multiplication Assignment
Operator multiplies a variable.
 Example:
 let x = 10;
x *= 5;
 The **= Operator
 The Exponentiation Assignment Operator raises
a variable to the power of the operand.
 Example:
 let x = 10;
x **= 5;
 The /= Operator
 The Division Assignment Operator divides a
variable.
 Example:
Java script
 let x = 10;
x /= 5;

Bitwise Assignment Operators:


 Bitwise operator works on bit that’s 0 and 1

Bitwise AND(&) a&b

Bitwise OR(|) a|b

Biwise XOR(^) a^b

Bitwise NOT(~) a~b

Bitwise Left Shift(<<) a << b

Bitwise Right Shift(>>) a >> b


Java script

Zero Fill Right Shift(>>>) a >>> b

Comparison Operators:
 Comparison operators are used in logical statements
to determine equality or difference between variables
or values.
 Examples:
 if (age < 18) text = "Too young to buy alcohol";

== equal to

!= not equal

> greater than

< less than

>= greater than or equal to

<= less than or equal to


Java script
? ternary operator

Logical Operators:
 Logical operators are used to determine the logic
between variables or values.
 Example :
Operator Description Example

&& And (x < 10 && y > 1) is true

|| Or (x == 5 || y == 5) is false

! Not !(x == y) is true


Java script
Conditional (Ternary) Operator:
 JavaScript also contains a conditional operator that
assigns a value to a variable based on some
condition.
 Short cut way to write if statement
Syntax
 variablename = (condition) ? value1:value2
 Example:
 let voteable = (age < 18) ? "Too young":"Old
enough";

Java string operation:


 JavaScript String Operators are used to manipulate
and perform operations on strings.
 String Concatenate Operator
 Concatenate Operator in JavaScript combines
strings using the ‘+’ operator and creates a new
string that includes the contents of the original strings
in which Concatenate string1 and string2,.
 Example:
 var str1 = "Geeks";
 var str2 = "forGeeks";
 var result = (str1 + str2);
 console.log(result);
Java script
String Concatenate Assignment Operator:
 In this, we perform a concatenation assignment by
using the ‘+=’ operator to add the value of a variable
or string to an existing string variable.
 Syntax:
str1 += str2
Example:
var str1 = "Geeks";
Var str2 = "forGeeks";
// Concatenation assignment
str1 += str2;
console.log(str1)

JAVASCRIPT DATA TYPES:


JavaScript data types are divided into primitive and
non-primitive types.
 Primitive Data Types: They can hold a single simple
value. String , Number , BigInt , Boolean , undefined , null , and Symbol are primitive
data types.
 Non-Primitive Data Types: They can hold multiple values. Objects are
non-primitive data types.

There are altogether 7 basic data types in JavaScript.

Data Type Description Example

String Textual data. 'hello' , "hello world!" , etc.


Java script
Number An integer or a floating-point number. 3 , 3.234 , 3e-2 , etc.

BigInt An integer with arbitrary precision. 900719925124740999n , 1n , et

Boolean Any of two values: true or false . true and false

undefined A data type whose variable is not initialized. let a;

null Denotes a null value. let a = null;

Object Key-value pairs of collection of data. let student = {name: "John"};

JavaScript String
A string represents textual data. It contains a sequence of characters. For
example, "hello" , "JavaScript" , etc.
In JavaScript, strings are surrounded by quotes:

 Single quotes: 'Hello'

 Double quotes: "Hello"

For example:

// string enclosed within single quotes


let fruit = 'apple';
console.log(fruit)

For example:

// string enclosed within double quotes


let country = "USA";
Java script
console.log(country);

JavaScript Number:
In JavaScript, the number type represents numeric values (both integers
and floating-point numbers).

 Integers - Numeric values without any decimal parts. Example: 3, -74,


etc.

 Floating-Point - Numeric values with decimal parts. Example: 3.15, -


1.3, etc.

Examples:
 // integer value
 let integer_number = -3;
 console.log(integer_number);

 // floating-point value
 let float_number = 3.15;
 console.log(float_number);

JavaScript BigInt :
BigInt is a type of number that can represent very large or very small
integers beyond the range of the regular number data type.

A BigInt number is created by appending n to the end of an integer.

For example:

// BigInt value
let value1 = 900719925124740998n;
Java script

JavaScript Boolean
A Boolean data can only have one of two
values: true or false

let dataChecked = true;


console.log(dataChecked); // true

let valueCounted = false;


console.log(valueCounted); // false

JavaScript undefined:

In JavaScript, undefined represents the absence of a value.


If a variable is declared but the value is not assigned, then the
value of that variable will be undefined.
For example:

let name;
console.log(name); // undefined

JavaScript null:
In JavaScript, null represents "no value" or "nothing."

For example:
Java script
let number = null;
console.log(number); // null

JavaScript Object
An Object holds data in the form of key-value pairs.
For example,

let student = {
firstName: "John",
lastName: null,
class: 10
};

JS Control Flow Or Condition

JavaScript if Statement
We use the if keyword to execute code based on some specific
condition.
The syntax of if statement is:
if (condition) {
// block of code
}
Java script
The if keyword checks the condition inside the parentheses ().
 If the condition is evaluated to true, the code inside { } is

executed.
 If the condition is evaluated to false, the code inside { } is

skipped.
Example:
// Program to check if the number is positive

const number = 6;

// check if number is greater than 0


if (number > 0) {
// the body of the if statement
console.log("positive number");
}

console.log("nice number");

JavaScript else Statement


We use the else keyword to execute code when the condition
specified in the preceding if statement evaluates to false.
The syntax of the else statement is:
if (condition) {
// block of code
// execute this if condition is true
}
else {
// block of code
// execute this if condition is false
Java script
}

The if...else statement checks the condition and executes code


in two ways:
 If condition is true, the code inside if is executed. And, the

code inside else is skipped.


 If condition is false, the code inside if is skipped. Instead,

the code inside else is executed.

Example :

let age = 17;

// if age is 18 or above, you are an adult


// otherwise, you are a minor

if (age >= 18) {


console.log("You are an adult");
}
else {
console.log("You are a minor");
}

// Output: You are a minor

JavaScript else if Statement


We can use the else if keyword to check for multiple conditions.
The syntax of the else if statement is:
Java script
// check for first condition
if (condition1) {
// if body
}

// check for second condition


else if (condition2){
// else if body
}

// if no condition matches
else {
// else body
}

// rating of 2 or below is bad


// rating of 4 or above is good
// else, the rating is average

if (rating <= 2) {
console.log("Bad rating");
}
else if (rating >= 4) {
console.log("Good rating!");
}
else {
console.log("Average rating");
}

// Output: Good rating!


Java script
Nested if...else Statement:
When we use an if...else statement inside another if...else statement, we
create a nested if...else statement.
For example:

let marks = 60;

// outer if...else statement


// student passed if marks 40 or above
// otherwise, student failed

if (marks >= 40) {

// inner if...else statement


// Distinction if marks is 80 or above

if (marks >= 80) {


console.log("Distinction");
}
else {
console.log("Passed");
}
}

else {
console.log("Failed");
}

// Output: Passed

JavaScript for loop :


Java script

In JavaScript, the for loop is used for iterating over a block of code

a certain number of times.

for (initialsation; condition;increament) {


// for loop body
}

Example 1: Print Numbers From 1 to 5

for (let i = 1; i < 6; i++) {


console.log(i);
}
Output

1
2
3
4
5

Iteration Variable Condition: i < 6 Action

1 is pri
1st i=1 true
i is increased to 2.

2 is pri
2nd i=2 true
i is increased to 3.

3 is pri
3rd i=3 true
i is increased to 4.

4 is pri
4th i=4 true
i is increased to 5.
Java script
5 is pri
5th i=5 true
i is increased to 6.

6th i=6 false The loop is terminated.

JavaScript while and do...while


Loop:
JavaScript while Loop
The while loop repeatedly executes a block of code as long as a specified
condition is true .

The syntax of the while loop is:

while (condition) {
// body of loop
}

1. The while loop first evaluates the condition inside ( ).

2. If the condition evaluates to true , the code inside {} is executed.


3. Then, the condition is evaluated again.

4. This process continues as long as the condition evaluates to true .

5. If the condition evaluates to false , the loop stops.


Example 1: Display Numbers From 1 to 3
// initialize variable i
let i = 1;

// loop runs until i is less than 4


while (i < 4) {
console.log(i);
i += 1;
Java script
}
Run Code

Output

1
2
3

Here is how the above program works in each iteration of the loop:

Variable Condition: i < 4 Action

i=1 true 1 is printed. i is increased to 2.

i=2 true 2 is printed. i is increased to 3.

i=3 true 3 is printed. i is increased to 4.

i=4 false The loop is terminated.

JavaScript do...while Loop


The do...while loop executes a block of code once, then repeatedly executes it
as long as the specified condition is true .

The syntax of the do...while loop is:

do {
// body of loop
} while(condition);

Example 3: Display Numbers from 3 to 1


Java script

let i = 3;

// do...while loop
do {
console.log(i);
i--;
} while (i > 0);

Output

3
2
1

JavaScript break Statement


The break statement terminates the loop immediately when it's encountered
if (i == 3) {
break;
}
console.log(i);
}
Run Code

Output

1
2

JavaScript continue Statement:


Java script

The continue statement skips the current iteration of the loop and

proceeds to the next iteration.

/ display odd numbers

for (let i = 1; i <= 5; i++) {


// skip the iteration if i is even
if (i % 2 == 0) {
continue;
}
console.log(i);
}

// Output:
// 1
// 3
// 5

JavaScript switch...case
Statement:
Java script

The JavaScript switch...case statement executes different blocks of code

based on the value of a given expression.

Syntax of the switch...case Statement

switch (expression) {

case value1:
// code block to be executed
// if expression matches value1
break;

case value2:
// code block to be executed
// if expression matches value2
break;

...

default:
// code block to be executed
// if expression doesn't match any case
}

let day = 3;
let activity;

switch (day) {

case 1:
console.log("Sunday");
Java script
break;

case 2:
console.log("Monday");
break;

case 3:
console.log("Tuesday");
break;

case 4:
console.log("Wednesday");
break;

case 5:
console.log("Thursday");
break;

case 6:
console.log("Friday");
break;

case 7:
console.log("Saturday");
break;

default:
console.log("Invalid Day");
}

Output

Tuesday

Difference between While and Do-While Loop


Parameter While Do-While
Loop body is executed after the given condition is Loop body is executed, and then the given
Definition evaluated. condition is checked.
Java script
Variable Variables are initialized before the execution of
Variables may initialize after the loop.
Initialization the loop.

Loop Type Entry Control Loop Exit Control Loop.


Semicolon Semicolon is not used as a part of the syntax. Semicolon is used as a part of the syntax.

while(condition){ do{
Syntax // loop body // loop body
} } while (condition);

JavaScript Objects:

JavaScript object is a variable that can store multiple data in key-

value pair.

Create JavaScript Objects


The syntax of JavaScript object is:

const objectName = {
key1: value1,
key2: value2,
...,
keyN: valueN
};

Here,

 objectName - Name of the object.


 key1: value1 - The first key-value pair.
 key2: value2 - The second key-value pair.
Java script
 keyN: valueN - The Nth key-value pair.
Each key-value pair has a colon : between them and is separated by a
comma , .

Access Object Properties


You can access the value of a property by using its key.

const dog = {
name: "Rocky",
};

// access property
console.log(dog.name);

JavaScript Array
An array is an object that can store multiple values at once.

const age = [17, 18, 15, 19, 14];

In the above example, we created an array to record the age of five students.

Why Use Arrays?


Arrays allow us to organize related data by grouping them within a single
variable.
Java script
Suppose you want to store a list of fruits. Using only variables, this process
might look like this:

let fruit1 = "Apple";


let fruit2 = "Banana";
let fruit3 = "Orange";

Here, we've only listed a few fruits. But what if we need to store 100 fruits?
For such a case, the easiest solution is to store them in an array.

let fruits = ["Apple", "Banana", "Orange", ...];

Create an Array
We can create an array by placing elements inside an array literal [] ,
separated by commas. For example,

const numbers = [10, 30, 40, 60, 80];

Here,

 numbers - Name of the array.


 [10, 30, 40, 60, 80] - Elements of the array.

JavaScript Date and Time


Java script
In JavaScript, date and time are represented by the Date object.
The Date object provides the date and time information and also provides
various methods.

Creating Date Objects


There are four ways to create a date object.

 new Date()

 new Date(milliseconds)

 new Date(Date string)

 new Date(year, month, day, hours, minutes, seconds, milliseconds)

new Date()
You can create a date object using the new Date() constructor. For example,
const timeNow = new Date();
console.log(timeNow); // shows current date and time
Output

Mon Jul 06 2020

Here, new Date() creates a new date object with the current date and local time.

JavaScript Date Methods


There are various methods available in JavaScript Date object.
Java script
Method Description

Returns the numeric value corresponding to the current time (the number of milliseconds
now()
elapsed since January 1, 1970 00:00:00 UTC)

getFullYear() Gets the year according to local time

getMonth() Gets the month, from 0 to 11 according to local time

getDate() Gets the day of the month (1–31) according to local time

getDay() Gets the day of the week (0-6) according to local time

getHours() Gets the hour from 0 to 23 according to local time

getMinutes Gets the minute from 0 to 59 according to local time

getUTCDate() Gets the day of the month (1–31) according to universal time

setFullYear() Sets the full year according to local time

setMonth() Sets the month according to local time


Java script
Characteristics of JavaScript:

 Scripting Language

JavaScript is an incredibly powerful scripting language, designed specifically for


powering immersive web applications. With its lightweight, browser-side execution
capabilities and tailored libraries aimed at providing the best possible experience in a
variety of scenarios – this versatile programming tool packs quite the punch!

 Validation of User’s Input

Form validation is an integral part of the user experience on web pages, allowing
clients to ensure accuracy when users are entering data into forms. By offering this
service, both parties can be sure that all relevant details have been correctly filled out
– a key step in any successful interaction!

 Ability to Perform In-build Function

Java Script boasts a wide repertoire of helpful In-Built Functions like Number(),
parseFloat(), and parseInt(). These functions come in handy for verifying numbers,
converting objects into numerical values, and analyzing strings – making it easier than
ever to work with data!

 Case Sensitive Format

When programming in JavaScript, it’s best to be mindful of the case – capitalization


matters! That means if a code is written with one letter UPPER-cased and another
lower-cased, chances are you’ll get different results.

 Light Weight and Delicate

JavaScript is an incredibly lightweight and dynamic programming language, allowing


for efficient code creation without the need to declare variables. Instead, only objects
are required in order to carry out all operations.
Java script
 Statements Looping

Looping is a powerful tool used to execute the same code multiple times, allowing
developers to automate tedious and time-consuming tasks easily. This technique can
be employed with specified or indefinite repetition – giving software engineers more
control over their workflow!.

 Control Statements

JavaScript is a powerful programming language that allows developers to conquer


tasks of any complexity, by leveraging control statements such as if-else-if and switch-
case or loops like for, while, and do-while. With JavaScript at their side, the possibilities
are endless!

 Prototype-based

The way code is written has been revolutionized with JavaScript’s prototype-based
scripting language, which allows for quicker development cycles and efficient use of
memory. Rather than using classes to determine object types, it makes use of a
prototypal inheritance model – much like an Object factory method.

This pattern can be found throughout JavaScript code, optimizing the speed and
reliability of coding projects.
Java script
JavaScript keyboard events
The JavaScript provided keyboard events for the selection, type, and use
of particular forms of information. The event occurs when the key presses
the key up and the key down as per action.

Types of the keyboard event


The JavaScript provides the following types of events to use keyboard
functionality.

o Keydown event: Keydown occurs when the key is depressed and


continuously repeats if the key is depressed for an extended time.
o Keyup event: When a punctuation, numeric, or alphabetic key is
pushed, then the keyup event is triggered and starts functionality.
o Keypress event: When the key is released from the user, the keyup
event occurs and starts functionality. Some browsers no longer
support Keypress Event.

You might also like