Scribd
Upload
2 views25 pages

JavaScript

This document provides an overview of JavaScript, highlighting its importance as a core web development language alongside HTML and CSS. It covers various aspects of JavaScript, including variable declaration, operators, arrays, events, and conditional statements, explaining how they function and their syntax. The tutorial aims to equip readers with foundational knowledge to effectively use JavaScript in web development.

Uploaded by

Anmol Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views25 pages

JavaScript

This document provides an overview of JavaScript, highlighting its importance as a core web development language alongside HTML and CSS. It covers various aspects of JavaScript, including variable declaration, operators, arrays, events, and conditional statements, explaining how they function and their syntax. The tutorial aims to equip readers with foundational knowledge to effectively use JavaScript in web development.

Uploaded by

Anmol Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 25

JavaScript

PIYUSH MISHRA

JavaScript is the programming language of the Web.

Why Study JavaScript?


JavaScript is one of the 3 languages all web developers must learn:

1. HTML to define the content of web pages

2. CSS to specify the layout of web pages

3. JavaScript to program the behavior of web pages

This tutorial is about JavaScript, and how JavaScript works with HTML and CSS.
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document.

Scripts can be placed in the <body>, or in the <head> section of an HTML


page, or in both.

External JavaScript
Scripts can also be placed in external files.

External scripts are practical when the same code is used in many different web
pages.

JavaScript files have the file extension .js.

To use an external script, put the name of the script file in the src (source)
attribute of the <script> tag:

<script src="first.js"></script>
External JavaScript Advantages
Placing Java Scripts in external files has some advantages:

 It separates HTML and code.


 It makes HTML and JavaScript easier to read and maintain
 Cached JavaScript files can speed up page loads.
JavaScript Data variables
Variables are container to hold some value.

Like many other programming languages,


JavaScript has variables. Variables can be
thought of as named containers. You can
place data into these containers and then
refer to the data simply by naming the
container.
Before you use a variable in a JavaScript
program, you must declare it. Variables are
declared with the var keyword as follows.
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 and JavaScript takes care of it
automatically.
JavaScript variables can hold numbers like 100, and text values like "John Doe".

In programming, text values are called text strings.

Strings are written inside double or single quotes. Numbers are written without
quotes.
If you put quotes around a number, it will be treated as a text string.
Ex.

var pi = 3.14;
var person = "John Doe";

JavaScript Operators
JavaScript Arithmetic Operators
Arithmetic operators perform arithmetic on numbers (literals or variables).

Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement

A typical arithmetic operation operates on two numbers.


The two numbers can be literals:

var x = 100 + 50;


or variables:

var x = a + b;
or expressions:

var x = (100 + 50) * a;


Operators and Operands
The numbers (in an arithmetic operation) are called operands.

The operation (to be performed between the two operands) is defined by


an operator.

Operand Operator Operand

100 + 50

The addition operator (+) adds numbers:

Adding

var x = 5;
var y = 2;
var z = x + y;
Output z=7;
The subtraction operator (-) subtracts numbers.
Subtracting
var x = 5;
var y = 2;
var z = x - y;
Output z=3;

The multiplication operator (*) multiplies numbers.


Multiplying
var x = 5;
var y = 2;
var z = x * y;
Output z=10;

The division operator (/) divides numbers.


Dividing
var x = 5;
var y = 2;
var z = x / y;
Output z=2.5;

The modular operator (%) returns the division remainder.


Modulus
var x = 5;
var y = 2;
var z = x % y;
Output z=1;

The increment operator (++) increments numbers.


Incrementing
var x = 5;
x++;
var z = x;
Output z=6;
The decrement operator (--) decrements numbers.
Decrementing
var x = 5;
x--;
var z = x;
Output z=4;

The Assignment Operator


In JavaScript, the equal sign (=) is an "assignment" operator, not
an "equal to" operator.
This is different from algebra. The following does not make sense
in algebra:

x = x + 5
In JavaScript however, it makes perfect sense: It assigns the value of x + 5 to x.

(It calculates the value of x + 5 and puts the result into x. The value of x is
incremented by 5)

The "equal to" operator is written like == in JavaScript.

Comparison Operators
Comparison operators are used in logical statements to determine equality or
difference between variables or values.

Given that x=5, the table below explains the comparison operators:

Operator Description Comparing Returns


== equal to x == 8 false

x == 5 true

=== equal value and equal x === false


type "5"

x === 5 true

!= not equal x != 8 true

!== not equal value or not x !== "5" true


equal type
x !== 5 false

> greater than x>8 false

< less than x<8 true

>= greater than or equal x >= 8 false


to
<= less than or equal to x <= 8 true

Logical Operators
Logical operators are used to determine the
logic between variables or values.
Given that x=6 and y=3, the table below explains the logical operators:

Operator Description Example

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

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

! not !(x == y) is true

JavaScript Arrays
JavaScript arrays are used to store multiple
values in a single variable.
var cars =
["Maruti", "Volvo", "BMW"];
What is an Array?
An array is a special variable, which can
hold more than one value at a time.
If you have a list of items (a list of car
names, for example), storing the cars in
single variables could look like this:
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

However, what if you want to loop


through the cars and find a specific one?
And what if you had not 3 cars, but 300?
The solution is an array!
An array can hold many values under a
single name, and you can access the
values by referring to an index number.
Creating an Array
Using an array literal is the easiest way to
create a JavaScript Array.

var array-name =
[item1, item2, ...];

Spaces and line breaks are not important. A


declaration can span multiple lines:
var cars = ["Saab","Volvo","BMW"];

Using the JavaScript Keyword new


The following example also creates an
Array, and assigns values to it:
var cars
= new Array("Saab", "Volvo", "BMW");
Access the Elements of an Array
You refer to an array element by referring to
the index number.
This statement accesses the value of the first
element in cars:

var name = cars[0];


Objects use names to access its "members". In
this example, person.firstName returns John:

var person =
{firstName:"John",
lastName:"Doe", age:46};

Array Properties and Methods


The real strength of JavaScript arrays are the built-in array
properties and methods:

var x = carslist.length; // The


length property returns the number of
elements
var y = carslist.sort(); // The
sort() method sorts arrays

JavaScript Array indexOf() Method


var cars = ["Maruti", "Volvo", "BMW"];

var a=cars.indexOf("Volvo");

document.write(a);

JavaScript Array concat() Method


<script>
var cars = ["Maruti", "Volvo",
"BMW"];
var car1 = ["Honda", "Huyndai"];
var a=car1.concat(cars);
document.write(a);
</script>

JavaScript Events
HTML events are "things" that happen to HTML
elements.
When JavaScript is used in HTML pages, JavaScript
can "react" on these events.

HTML Events
An HTML event can be something the browser does, or
something a user does.

Here are some examples of HTML events:

 An HTML web page has finished loading


 An HTML input field was changed
 An HTML button was clicked

Often, when events happen, you may want to do


something.

JavaScript lets you execute code when events are


detected.

HTML allows event handler attributes, with


JavaScript code, to be added to HTML elements.
With single quotes:

<some-HTML-element some-
event='some JavaScript'>
Common HTML Events
Here is a list of some common HTML events:
Event Description

Onchange An HTML element has been changed

Onclick The user clicks an HTML element

onmouseove The user moves the mouse over an


r
HTML element

Onmouseout The user moves the mouse away from


element

Onkeydown The user pushes a keyboard key

Onload The browser has finished loading the

Page
JavaScript If...Else Statements

Conditional statements are used to perform


different actions based on different conditions.
Conditional Statements

Very often when you write code, you want to


perform different actions for different decisions.
You can use conditional statements in your code to
do this.
In JavaScript we have the following conditional
statements:

 Use if to specify a block of code to be


executed, if a specified condition is true
 Use else to specify a block of code to be
executed, if the same condition is false
 Use else if to specify a new condition to
test, if the first condition is false
The if Statement
Use the if statement to specify a block of JavaScript code
to be executed if a condition is true.

Syntax
if (condition) {
block of code to be executed
if the condition is true
}

Note that if is in lowercase letters. Uppercase letters (If or IF)


will generate a JavaScript error.

Example
Make a "Good day" greeting if the time is less than 20:00:
if (age<= 18) {
greeting = "Good day";
}

The result of greeting will be:


Good day

The else Statement


Use the else statement to specify a block of code
to be executed if the condition is false.
if (condition) {
block of code to be executed if
the condition is true
} else {
block of code to be executed if
the condition is false
}
Example
If the time is less than 20:00, create a "Good day" greeting, otherwise "Good
evening":
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}

The result of greeting will be:


Good day

The else if Statement


Use the else if statement to specify a new condition if the first condition is
false.

Syntax
if (condition1) {
block of code to be executed
if condition1 is true
} else if (condition2) {
block of code to be executed
if the condition1 is false and
condition2 is true
} else {
block of code to be executed
if the condition1 is false and
condition2 is false
}

Example
If time is less than 10:00, create a "Good morning" greeting, if not, but time is
less than 20:00, create a "Good day" greeting, otherwise a "Good evening":
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}

The result of greeting will be:


Good day

You might also like