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
