JAVASCRIPT
INTRODUCTION
• HTML CREATES STATIC PAGES.
• SCRIPTING LANGUAGES CONVERTS STATIC PAGES TO DYNAMIC PAGES.
• THE STATEMENTS(SCRIPTS) WOULD CHANGE THE APPEARANCE OF THE WEB
PAGES AND RESPOND TO USER ACTIONS EVEN AFTER LOADING THE PAGES.
WHAT IS JAVASCRIPT?
• JAVASCRIPT WAS INITIALLY CREATED TO “MAKE WEB PAGES ALIVE”.
• THE PROGRAMS IN THIS LANGUAGE ARE CALLED SCRIPTS. THEY CAN BE
WRITTEN RIGHT IN A WEB PAGE’S HTML AND RUN AUTOMATICALLY AS THE PAGE
LOADS.
• SCRIPTS ARE PROVIDED AND EXECUTED AS PLAIN TEXT. THEY DON’T NEED
SPECIAL PREPARATION OR COMPILATION TO RUN.
HISTORY OF JAVASCRIPT
• THE FIRST SCRIPTING LANGUAGE WAS INTRODUCED BY BRENDAN EICH, IN 1996 , TO
PROVIDE DYNAMICITY AND INTERACTIVITY TO WEB PAGES.
• LIVESCRIPT JAVASCRIPT.
• THE WAY, JAVASCRIPT WAS USED TO REFER LINKS, FORMS AND ANCHORS, BECOME
KNOWN AS DOM LEVEL 0.
• IN 1996, A STANDARD WAS PRODUCED BY ECMA(EUROPEAN COMPUTER MANUFACTURERS
ASSOCIATION), KNOWN AS ECMASCRIPT.
• IN 1997, ECMASCRIPT STANDARD WAS UPDATED AND RELEASED MODIFIED VERSION(WHICH
WAS ALLOWED TO DO CHANGES STYLES OF HTML ELEMENTS,ESPECIALLY THEIR VISIBILITY
AND POSITION).
• IN 1997, MICROSOFT INTRODUCED ITS OWN PROPRIETARY LANGUAGE, CALLED JSCRIPT.
• TODAY, JAVASCRIPT CAN EXECUTE NOT ONLY IN THE BROWSER, BUT ALSO ON
THE SERVER, OR ON ANY DEVICE THAT SUPPORTS JAVASCRIPT ENGINE.
• HOW DO ENGINES WORK?
• THE ENGINE (EMBEDDED IF IT’S A BROWSER) READS (“PARSES”) THE SCRIPT.
• THEN IT CONVERTS (“COMPILES”) THE SCRIPT TO THE MACHINE LANGUAGE.
• AND THEN THE MACHINE CODE RUNS, PRETTY FAST.
WHAT MAKES JAVASCRIPT UNIQ
UE?
• FULL INTEGRATION WITH HTML/CSS.
• SIMPLE THINGS ARE DONE SIMPLY.
• SUPPORT BY ALL MAJOR BROWSERS AND ENABLED BY DEFAULT.
INSERTING JAVASCRIPT CODE
• JAVASCRIPT CODE IS EXECUTED FROM WITHIN HTML DOCUMENTS.
• THERE ARE 2 WAYS TO INSERT JAVASCRIPT CODE INTO AN HTML FILE
• USING <SCRIPT>….</SCRIPT> TAG
• EG: <SCRIPT LANGUAGE=“JAVASCRIPT”> JS CODE WRITE HERE</SCRIPT>
• USING .JS SOURCE FILE(USING EXTERNAL SOURCE FILE)
• EG: <SCRIPT LANGUAGE=“JAVASCRIPT” SRC=“SFILE.JS”></SCRIPT>
• NOTE: WHEN USING A JAVASCRIPT SOURCE FILE, THE BROWSER IGNORES
ANY JAVASCRIPT STATEMENTS WITHIN THE <SCRIPT> AND </SCRIPT> TAGS.
FIRST PROGRAM
<HTML>
<HEAD>
<TITLE>JS PROGRAM</TITLE>
</HEAD>
<BODY>
<SCRIPT>
DOCUMENT.WRITELN("<H1>WELCOME TO FIRST JAVASCRIPT PROGRAM</H1>");
</SCRIPT>
</BODY>
</HTML>
JAVASCRIPT CAN "DISPLAY"
DATA IN DIFFERENT WAYS:
• WRITING INTO AN HTML ELEMENT,
<script>
USING INNERHTML.
document.getElementById("demo").innerHTML = 5 + 6;
</script>
<script>
• WRITING INTO THE HTML OUTPUT USING DOCUMENT.WRITE(). document.write(5 + 6);
</script>
• WRITING INTO AN ALERT BOX, USING WINDOW.ALERT().
<script>
window.alert(5 + 6);
</script> <script>
console.log(5 + 6);
</script>
• WRITING INTO THE BROWSER CONSOLE, USING CONSOLE.LOG().
ADDING COMMENTS
• FOR SINGLE LINE COMMENTS, USE //
• EG: // THIS IS A LINE COMMENT
• FOR MULTIPLE LINES, USE /* */
• EG: /* THIS IS
A BLOCK
COMMENT */
JAVASCRIPT RESERVED WORDS
abstract else instanceof switch
boolean enum int synchronized
break export interface this
byte extends long throw
case false native throws
catch final new transient
char finally null true
class float package try
const for private typeof
continue function protected var
debugger goto public void
default if return volatile
delete implements short while
do import static with
double in super
VARIABLES
• VAR IS A KEYWORD USED TO DECLARE VARIABLES IN JAVASCRIPT.
• EG: VAR I=0;
• JAVASCRIPT VARIABLES ARE UN-TYPED. THE TYPE OF THE VARIABLE IS
DETERMINED BY ITS CONTENT.
• NAMING CONVENTION( HOW TO GIVE VARIABLE NAMES)
• LOCAL VARIABLES(DEFINED WITH IN BLOCK OR FUNCTION)
• EG: VAR I=0; LET I=0;
• GLOBAL VARIABLES(DEFINED WITHOUT VAR KEYWORD)
• EG: X=1;
• “TYPEOF” OPERATOR, USED TO DETERMINE THE TYPE OF A VARIABLE
• EG: VAR S=10;
VAR T=TYPEOF(S); // T IS A NUMBER
JAVASCRIPT VARIABLES CAN BE
DECLARED IN 4 WAYS:
When to Use var, let, or const?
• AUTOMATICALLY 1. Always declare variables
2. Always use const if the value should not be changed
• USING VAR 3. Always use const if the type should not be changed
• USING LET (Arrays and Objects)
• USING CONST 4. Only use let if you can't use const
5. Only use var if you MUST support old browsers.
The var keyword was used in all JavaScript code from 1995 to 2015.
The let and const keywords were added to JavaScript in 2015.
The two new JavaScript keywords: let and const.
These two keywords provided Block Scope in JavaScript.
Variables declared with the var always have Global Scope.
Variables defined with let can not be redeclared.
Example:
var carName = "Volvo";
Variables defined with const cannot be Redeclared
var carName; Variables defined with const cannot be Reassigned
alert(carName); --- it display Volvo Variables defined with const have Block Scope
let carName = "Volvo"; JavaScript const variables must be assigned a value
let carName;
alert(carName); ----it won’t display anything
when they are declared.
LITERALS
• JAVASCRIPT SUPPORTS THE FOLLOWING DATA TYPES:
• STRING
• NUMBER
• INTEGER
• FLOAT
• BOOLEAN
• FUNCTION
• OBJECT
• OPERATORS
• ARITHMETIC OPERATORS(+,-,*,/,%,++,--)
• ASSIGNMENT OPERATORS(+=,-=,*=,/=,%=,<<=,>>=,>>>=,&=,!=,^=)
• RELATIONAL OPERATORS(==,!=,<,<=,>,>=,===)
• LOGICAL OPERATORS(&&,||,!)
• BITWISE OPERATORS(&,|,^,~,<<,>>,>>>)
• CONTROL STRUCTURE
• FOR
• WHILE
• DO-WHILE
• CONDITIONAL STATEMENTS
• IF/IF-ELSE
• SWITCH
ARRAYS
• AN ARRAY IS A SPECIAL VARIABLE, WHICH CAN HOLD MORE THAN ONE VALUE AT A
TIME.
• TRADITIONALLY, AN ARRAY IS CONSIDERED TO BE A COLLECTION OF
HOMOGENEOUS ITEMS.
• JAVASCRIPT ARRAY MAY CONTAIN HETEROGENEOUS ITEMS.
• JAVASCRIPT ARRAYS ARE SOMETIMES KNOWN AS ASSOCIATIVE ARRAYS.
• SYNTAX:
• VAR ARRAY_NAME = [ITEM1, ITEM2, ...];
• EG: VAR COLORS=[“RED”,”GREEN”,”BLUE”];
• SIMPLE EXAMPLE PROGRAM(ADDING ARRAY ELEMENTS)
<SCRIPT>
VAR N=[1,2,3,4,5];
VAR SUM=0;
FOR(I=0;I<N.LENGTH;I++)
SUM+=N[I];
DOCUMENT.WRITELN(SUM);
</SCRIPT>
• CREATING ARRAY USING CONSTRUCTOR:
•THERE ARE 3 VERSIONS OF AN ARRAY CONSTRUCTORS
• ARRAY();
• ARRAY(NUM OF ELEMENTS);
• ARRAY(LIST OF ELEMENTS SEPARATED BY COMMA);
• EG: VAR N=NEW ARRAY(1,2,3,4); //LENGTH OF THE ARRAY IS 4
• MULTI-DIMENSIONAL ARRAYS
• THESE ARE CREATED IN EXACTLY THE SAME WAY AS ONE-DIMENSIONAL ARRAYS.
HOWEVER, ELEMENTS IN A MULTI-DIMENTIONAL ARRAY ARE THEMSELVES ARRAYS.
• EG: VAR N=[[1,2,3][4,5,6]];
• ARRAY METHODS:
• REVERSE
• CONCAT
• SORT(IT SORT VALUES AS STRINGS)
• PUSH
• POP ETC.,.
FUNCTIONS
• FUNCTION IS A SEGMENT OF CODE THAT PERFORMS A PARTICULAR TASK.
• SYNTAX:
FUNCTION FNAME([PARAMETERS])
{
//SET OF STATEMENTS(FUNCTION-BODY)
}
• “FUNCTION” IS A KEYWORD, USED TO DEFINE FUNCTIONS IN JAVASCRIPT.
• EG: FUNCTION ADD(X,Y)
{ RETURN (X+Y); }
JAVASCRIPT
OBJECTS(PREDEFINED)
• WINDOW OBJECT
• WINDOW OBJECT REPRESENTS AN OPEN WINDOW IN A BROWSER.
• METHODS: ALERT() ,PROMPT() AND SO ON..
• DOCUMENT OBJECT
• WHEN AN HTML DOCUMENT IS LOADED INTO A WEB BROWSER, IT BECOMES
A DOCUMENT OBJECT.
• THE DOCUMENT OBJECT IS THE ROOT NODE OF THE HTML DOCUMENT.
• METHODS: WRITE(), WRITELN(), GETELEMENTBYID() AND SO ON..
• STRING OBJECT
• A JAVASCRIPT STRING STORES A SERIES OF CHARACTERS.
• A STRING CAN BE ANY TEXT INSIDE DOUBLE OR SINGLE QUOTES
• METHODS: CONCAT(),SEARCH(),REPLACE() AND SO ON..
• MATH OBJECT
• THE MATH OBJECT ALLOWS YOU TO PERFORM MATHEMATICAL TASKS.
• METHODS: SQRT(), MAX(), SIN() AND SO ON..
• NUMBER OBJECT
• JAVASCRIPT HAS ONLY ONE TYPE OF NUMBER.
• NUMBERS CAN BE WRITTEN WITH, OR WITHOUT, DECIMALS.
• USES NUMBER WRAPPER CLASS
• METHODS: TOSTRING(), VALUEOF(), ISINTEGER(), ISNAN() AND SO ON..
• BOOLEAN OBJECT
• IT HAVE 2 VALUES…TRUE OR FALSE.
• IT USES BOOLEAN WRAPPER CLASS.
• METHODS: TOSTRING() AND VALUEOF().
• DATE OBJECT
• THE DATE OBJECT IS USED TO WORK WITH DATES AND TIMES.
• DATE OBJECTS ARE CREATED WITH NEW DATE().
• CONSTRUCTORS:
• DATE();
• DATE(MILLISECONDS);
• DATE(DATESTRING);
• DATE(YEAR, MONTH, DAY, HOURS, MINUTES, SECONDS, MILLISECONDS);
• METHODS: GETDATE(), GETMONTH(), GETDAY() AND SO ON..
