Web Application

QUICK REVIEW ON JAVASCRIPT CLASS 12

(MRS. NITI KOHLI)

JavaScript
THE LANGUAGE OF WEB.

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.

The merits of using JavaScript are:

• Less server interaction: You can validate user input before sending the page
off to the server. This saves server traffic, which means less load on your
server.
• Immediate feedback to the visitors: They don't have to wait for a page reload
to see if they have forgotten to enter something.
• Increased interactivity: You can create interfaces that react when the user
hovers over them with a mouse or activates them via the keyboard.
• Richer interfaces: You can use JavaScript to include such items as drag-and
drop components and sliders to give a Rich Interface to your site visitors.

We cannot treat JavaScript as a full-fledged programming language. It lacks

the following important features. The limitations include:
• Client-side JavaScript does not allow the reading or writing of files. This has
been kept for security reason.
• JavaScript cannot be used for networking applications because there is no
such support available.
• JavaScript doesn't have any multithreading or multiprocessor capabilities.
Once again, JavaScript is a lightweight, interpreted programming language that
allows you to build interactivity into otherwise static HTML pages
JAVASCRIPT BASICS

Including JavaScript in an HTML Page

<script type="text/javascript">

//JS code goes here

</script>

Call an External JavaScript File

<script src="myscript.js"></script><code></code>

Including Comments
Single line comments - //

Multi-line comments - /* comment here */

VARIABLES IN JAVASCRIPT

var, const, let

var — The most common variable. Can be reassigned but only accessed
within a function. Variables defined with var move to the top when
code is executed.

const — Cannot be reassigned and not accessible before they appear

within the code.

let — Similar to const, however, let variable can be reassigned but

not re-declared.

Data Types
Numbers — var age = 23

Variables — var x

Text (strings) — var a = "init"

Operations — var b = 1 + 2 + 3
Constant numbers — const PI = 3.14

Objects — var name = {firstName:"John", lastName:”Doe"}

Objects
var person = {

firstName:"Jim",

lastName:"Stark",

age:29,

nationality:"German"

};

THE NEXT LEVEL: ARRAYS

var fruit = ["Banana", "Apple", "Pear"];

Array Methods
concat() — Join several arrays into one

indexOf() — Returns the primitive value of the specified object

join() — Combine elements of an array into a single string and return

the string

lastIndexOf() — Gives the last position at which a given element

appears in an array

pop() — Removes the last element of an array

push() — Add a new element at the end

reverse() — Sort elements in descending order

shift() — Remove the first element of an array

slice() — Pulls a copy of a portion of an array into a new array

sort() — Sorts elements alphabetically

splice() — Adds elements in a specified way and position

toString() — Converts elements to strings

unshift() — Adds a new element to the beginning

valueOf() — Returns the first position at which a given element

appears in an array

OPERATORS

Basic Operators
+ — Addition

- — Subtraction

* — Multiplication

/ — Division

(...) — Grouping operator, operations within brackets are executed

earlier than those outside

% — Modulus (remainder )

++ — Increment numbers

-- — Decrement numbers

Comparison Operators
== — Equal to

=== — Equal value and equal type

!= — Not equal

!== — Not equal value or not equal type

> — Greater than

< — Less than

>= — Greater than or equal to

? — Ternary operator

Logical Operators
&& — Logical and

|| — Logical or

! — Logical not

Bitwise Operators
& — AND statement

| — OR statement

~ — NOT

^ — XOR

<< — Left shift

>> — Right shift

>>> — Zero fill right shift

FUNCTIONS
function name(parameter1, parameter2, parameter3) {

// what the function does

Outputting Data
alert() — Output data in an alert box in the browser window

confirm() — Opens up a yes/no dialog and returns true/false depending

on user click

console.log() — Writes information to the browser console, good for

debugging purposes
prompt() — Creates an dialogue for user input

Global Functions

eval() — Evaluates JavaScript code represented as a string

isFinite() — Determines whether a passed value is a finite number

isNaN() — Determines whether a value is NaN or not

Number() — Returns a number converted from its argument

parseFloat() — Parses an argument and returns a floating point number

parseInt() — Parses its argument and returns an integer

STRINGS
var person = "John Doe";

Escape Characters
\' — Single quote

\" — Double quote

\\ — Backslash

\b — Backspace

\f — Form feed

\n — New line

\r — Carriage return

\t — Horizontal tabulator

\v — Vertical tabulator

String Methods
charAt() — Returns a character at a specified position inside a
string
charCodeAt() — Gives you the unicode of character at that position

concat() — Concatenates (joins) two or more strings into one

fromCharCode() — Returns a string created from the specified sequence

of UTF-16 code units

indexOf() — Provides the position of the first occurrence of a

specified text within a string

lastIndexOf() — Same as indexOf() but with the last occurrence,

searching backwards

match() — Retrieves the matches of a string against a search pattern

replace() — Find and replace specified text in a string

search() — Executes a search for a matching text and returns its

position

slice() — Extracts a section of a string and returns it as a new

string

split() — Splits a string object into an array of strings at a

specified position

substr() — Similar to slice() but extracts a substring depended on a

specified number of characters

substring() — Also similar to slice() but can’t accept negative

indices
toLowerCase() — Convert strings to lower case

toUpperCase() — Convert strings to upper case

valueOf() — Returns the primitive value (that has no properties or

methods) of a string object
NUMBERS AND MATH

Number Properties
MAX_VALUE — The maximum numeric value representable in JavaScript

MIN_VALUE — Smallest positive numeric value representable in

JavaScript

NaN — The “Not-a-Number” value

NEGATIVE_INFINITY — The negative Infinity value

POSITIVE_INFINITY — Positive Infinity value

Number Methods
toExponential() — Returns a string with a rounded number written as
exponential notation

toFixed() — Returns the string of a number with a specified number of

decimals

toPrecision() — String of a number written with a specified length

toString() — Returns a number as a string

valueOf() — Returns a number as a number

max(x,y,z,...,n) — Returns the number with the highest value

min(x,y,z,...,n) — Same for the number with the lowest value

pow(x,y) — X to the power of y

random() — Returns a random number between 0 and 1

round(x) — The value of x rounded to its nearest integer

sin(x) — The sine of x (x is in radians)

sqrt(x) — Square root of x

tan(x) — The tangent of an angl

JAVASCRIPT LOOPS
for (before loop; condition for loop; execute after loop) {

// what to do during the loop

for — The most common way to create a loop in JavaScript

while — Sets up conditions under which aloop executes

do while — Similar to the while loop, however, it executes at least

once and performs a check at the end to see if the condition is met
to execute again

break — Used to stop and exit the cycle at certain conditions

continue — Skip parts of the cycle if certain conditions are met

IF - ELSE STATEMENTS
if (condition) {
// what to do if condition is met

} else {

// what to do if condition is not met

}
JAVASCRIPT EVENTS

Mouse
onclick — The event occurs when the user clicks on an element

oncontextmenu — User right-clicks on an element to open a context menu

ondblclick — The user double-clicks on an element

onmousedown — User presses a mouse button over an element

onmouseenter — The pointer moves onto an element

onmouseleave — Pointer moves out of an element

onmousemove — The pointer is moving while it is over an element

onmouseover — When the pointer is moved onto an element or one of its

children

Form
onblur — When an element loses focus

onchange — The content of a form element changes

(for <input>, <select>and <textarea>)

onfocus — An element gets focus

onfocusin — When an element is about to get focus

onfocusout — The element is about to lose focus

oninvalid — An element is invalid

onreset — A form is reset

onsearch — The user writes something in a search field

(for <input="search">)

onselect — The user selects some text (for <input> and <textarea>)

onsubmit — A form is submitted

Drag
ondrag — An element is dragged

ondragend — The user has finished dragging the element

ondragenter — The dragged element enters a drop target

ondragleave — A dragged element leaves the drop target

ondragover — The dragged element is on top of the drop target

ondragstart — User starts to drag an element

ondrop — Dragged element is dropped on the drop target