Scribd
Upload
12 views

JS Notes

Hello

Uploaded by

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

JS Notes

Hello

Uploaded by

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

Features of JavaScript

There are following features of JavaScript:


1.All popular web browsers support JavaScript as they provide built-in execution environments.
2.JavaScript follows the syntax and structure of the C programming language. Thus, it is a structured
programming language.
3.JavaScript is a weakly typed language, where certain types are implicitly cast (depending on the
operation).
4.JavaScript is an object-oriented programming language that uses prototypes rather than using
classes for inheritance.
5.It is a light-weighted and interpreted language.
6.It is a case-sensitive language.
7.JavaScript is supportable in several operating systems including, Windows, macOS, etc.
8.It provides good control to the users over the web browsers.
Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:
•Client-side validation,
•Dynamic drop-down menus,
•Displaying date and time,
•Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box and
prompt dialog box),
•Displaying clocks etc.
JavaScript Example

<script language=“javascript” type="text/javascript">


document.write("Hello");
</script>
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.

3 Places to put JavaScript code


1.Between the body tag of html
2.Between the head tag of html
3.In .js file (external javaScript)
External JavaScript file
We can create external JavaScript file and embed it in many html page.
It provides code re usability because single JavaScript file can be used in several html pages.
An external JavaScript file must be saved by .js extension. It is recommended to embed all JavaScript files into a
single file. It increases the speed of the webpage.
message.js index.html
function msg(){ <html>
alert("Hello"); <head>
} <script type="text/javascript" src="message.js"></script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
Advantages of External JavaScript
There will be following benefits if a user creates an external javascript:
1.It helps in the reusability of code in more than one HTML file.
2.It allows easy code readability.
3.It is time-efficient as web browsers cache the external js files, which further reduces the page loading time.
4.It enables both web designers and coders to work with html and js files parallelly and separately, i.e., without
facing any code conflictions.
5.The length of the code reduces as only we need to specify the location of the js file.

Disadvantages of External JavaScript


There are the following disadvantages of external files:
1.The stealer may download the coder's code using the url of the js file.
2.If two js files are dependent on one another, then a failure in one file may affect the execution of the other
dependent file.
3.The web browser needs to make an additional http request to get the js code.
4.A tiny to a large change in the js code may cause unexpected results in all its dependent files.
5.We need to check each file that depends on the commonly created external javascript file.
6.If it is a few lines of code, then better to implement the internal javascript code.
JavaScript Comment

There are two types of comments in JavaScript.


1. Single-line Comment
// It is single line comment
2. Multi-line Comment
/* It is multi line comment.
It will not be displayed */
JavaScript Variable

A JavaScript variable is simply a name of storage location. There are two types of variables in JavaScript : local
variable and global variable.
There are some rules while declaring a JavaScript variable (also known as identifiers).
1.Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
2.After first letter we can use digits (0 to 9), for example value1.
3.JavaScript variables are case sensitive, for example x and X are different variables.

Example of JavaScript variable JavaScript local variable


<script> <script>
var x = 10; function abc()
var y = 20; {
var z=x+y; var x=10;//local variable
document.write(z); }
</script> </script>
A JavaScript local variable is declared inside block or
function. It is accessible within the function or block only.
JavaScript global variable

<script>
var x=50; //gloabal variable
function fun1()
{
document.writeln(x);
}
function fun2()
{
document.writeln(x);
}
fun1();//calling JavaScript function
fun2();
</script>

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.
Declaring JavaScript global variable within function

To declare JavaScript global variables inside function, you need to use window object.
function m(){
window.value=100;//declaring global variable by window object
}
function n(){
alert(window.value);//accessing global variable from other function
}
Javascript Data Types

JavaScript provides different data types to hold different types of values. There are two types of data
types in JavaScript.
1.Primitive data type
2.Non-primitive (reference) data type
JavaScript primitive data types JavaScript non-primitive data types
Data Type Description Data Type Description
represents sequence of characters e.g.
String represents instance through which
"hello" Object
we can access members
Number represents numeric values e.g. 100
represents boolean value either false or
Boolean Array represents group of similar values
true
Undefined represents undefined value
RegExp represents regular expression
Null represents null i.e. no value at all
JavaScript Operators
There are following types of operators in JavaScript.
1.Arithmetic Operators
2.Comparison (Relational) Operators
3.Bitwise Operators
4.Logical Operators
5.Assignment Operators
6.Special Operators

JavaScript Arithmetic Operators JavaScript Logical Operators


Operator Description Example
Operator Description Example
+ Addition 10+20 = 30
- Subtraction 20-10 = 10 (10==20 && 20==33) =
&& Logical AND
* Multiplication 10*20 = 200 false
/ Division 20/10 = 2 || Logical OR (10==20 || 20==33) = false
% Modulus (Remainder) 20%10 = 0
! Logical Not !(10==20) = true
++ Increment var a=10; a++; Now a = 11
-- Decrement var a=10; a--; Now a = 9
JavaScript Comparison Operators
Operator Description Example
== Is equal to 10==20 = false
=== Identical (equal and of same type) 10==20 = false
!= Not equal to 10!=20 = true
!== Not Identical 20!==20 = false
> Greater than 20>10 = true
>= Greater than or equal to 20>=10 = true
< Less than 20<10 = false
<= Less than or equal to 20<=10 = false

JavaScript Bitwise Operators


Operator Description Example
& Bitwise AND (10==20 & 20==33) = false
| Bitwise OR (10==20 | 20==33) = false
^ Bitwise XOR (10==20 ^ 20==33) = false
~ Bitwise NOT (~10) = -10
<< Bitwise Left Shift (10<<2) = 40
>> Bitwise Right Shift (10>>2) = 2
>>> Bitwise Right Shift with Zero (10>>>2) = 2
JavaScript Assignment Operators JavaScript Special Operators

Opera Operator Description


Description Example
tor Conditional Operator returns value based on the
(?:)
condition. It is like if-else.
= Assign 10+10 = 20
Comma Operator allows multiple expressions to be
+= Add and assign var a=10; a+=20; Now a = 30 ,
evaluated as single statement.

delete Delete Operator deletes a property from the object.


Subtract and
-= var a=20; a-=10; Now a = 10 in In Operator checks if object has the given property
assign
instanceof checks if the object is an instance of given type
Multiply and
*= var a=10; a*=20; Now a = 200
assign new creates an instance (object)
typeof checks the type of object.
/= Divide and assign var a=10; a/=2; Now a = 5
void it discards the expression's return value.

Modulus and checks what is returned in a generator by the


%= var a=10; a%=2; Now a = 0 yield
assign generator's iterator.
JavaScript simple If statement

Syntax
if(expression)
{
//content to be evaluated
}
Example
<script language=“javascript”>
var a=20;
if(a>10)
{
document.write("value of a is greater than 10");
}
</script>
JavaScript If...else Statement

Syntax Example
if(expression) <script language=“javascript”>
{ var a=20;
//content to be evaluated if condition is true if(a%2==0)
} {
else document.write("a is even number");
{ }
//content to be evaluated if condition is false else
} {
document.write("a is odd number");
}
</script>
JavaScript If...else if Statement
Syntax Example
if(expression1) <script>
{ var a=20;
//content to be evaluated if expression1 is true if(a==10)
} {
document.write("a is equal to 10");
else if(expression2)
}
{
else if(a==15)
//content to be evaluated if expression2 is true
{
} document.write("a is equal to 15");
else if(expression3) }
{ else if(a==20)
//content to be evaluated if expression3 is true {
} document.write("a is equal to 20");
else }
{ else
//content to be evaluated if no expression is true {
} document.write("a is not equal to 10, 15 or 20");
}
</script>
JavaScript switch Statement

Example
Syntax <script>
switch(expression) var grade='B';
{ var result;
switch(grade)
case value1:
{
code to be executed;
case 'A':
break;
result="A Grade";
case value2: break;
code to be executed; case 'B':
break; result="B Grade";
...... break;
case 'C':
default: result="C Grade";
code to be executed; break;
} default:
result="No Grade";
}
document.write(result);
</script>
JavaScript for loop

Syntax Example
for (initialization; condition; increment) <script>
{ for (i=1; i<=5; i++)
code to be executed {
} document.write(i + "<br/>")
}
</script>
JavaScript while loop

Syntax Example
while (condition) <script>
{ var i=11;
code to be executed while (i<=15)
} {
document.write(i + "<br/>");
i++;
}
</script>
JavaScript do-while loop

Syntax Example
do <script>
{ var i=21;
code to be executed do
}while (condition); {
document.write(i + "<br/>");
i++;
}while (i<=25);
</script>
Explanation
Syntax for-in
for (var in expression) A for...of loop operates on the values sourced from an iterable one by one in
{ sequential order. Each operation of the loop on a value is called an iteration,
//statement(s) and the loop is said to iterate over the iterable. Each iteration executes
} statements that may refer to the current sequence value.
When a for...of loop iterates over an iterable, it first calls the iterable's
Syntax for-of [@@iterator]() method, which returns an iterator, and then repeatedly calls the
resulting iterator's next() method to produce the sequence of values to be
for (variable of iterable)
assigned to variable.
{
A for...of loop exits when the iterator has completed (the iterator's next()
statement
method returns an object containing done: true). You may also use control
}
flow statements to change the normal control flow. break exits the loop and
Variable -Receives a value from the goes to the first statement after the loop body, while continue skips the rest of
sequence on each iteration. the statements of the current iteration and proceeds to the next iteration.
Iterable -An iterable object. The source of If the for...of loop exited early (e.g. a break statement is encountered or an
the sequence of values on which the loop error is thrown), the return() method of the iterator is called to perform any
operates cleanup.
The variable part of for...of accepts anything that can come before the =
operator. You can use const to declare the variable as long as it's not reassigned
within the loop body (it can change between iterations, because those are two
separate variables).
// Example-1 :- array // Example-2 :- string //Example-3 :-
const students = ['John', 'Sara', 'Jack’]; const string = 'code’; var list1 = [10,20,30,40,50];
// using for...of // using for...of loop
for ( let element of students ) for (let i of string) for(var i in list1)
{ { {
// display the values document.write(i); document.write(i);
document.write(element); } }
}

Output
Output c
John o
Sara d
Jack e

You might also like