script src="../JavaScript/sample.js"
	//No script goes here
/script

• an absolute URL like http://www.javascript.com/sampleJavascript.js (refers to another web site)
• a relative URL like /sample/sampleJavascript.js  (refers to a file within a web site)
  Note: To write something in a html page using JavaScript, we use document.write() . 

• It is a case sensitive language
• Semicolon(;) is used to separate statements
• It considers spaces, tabs and new line characters as whitespace characters
• It supports both single as well as multi line comments

//single line comment

/* multi line
 comment */

• Identifiers (to identify a variable or function) can only start with alphabetic characters or "$" or "_" . Subsequent characters for the identifier can be alphabet or numeric.
         Example: number_of_trainees, catch22, _DB_ID

js2

• Number : To represent numeric values ( Example : 1, 2.5 etc. )
• String : To represent text or sequence of characters ( Example : "Jack" ,'John' etc. )
• Boolean : To represent Boolean values( Example : true, false )
• Null : To initialize a variable, which has no object to refer
• Undefined : To initialize a variable which has no value for it

• Objects : Its an collection of properties. Objects will be discussed in detail, later in this course

js3

var v1 = 23;           // v1 is now a variable of type Number
var v1 = "HelloWorld"; // v1 is now a variable of type String
var v1 = false;        // v1 is now a variable of type Boolean

var id=1001;         //Variable declaration. Type is decided by the usage
var name="Rajath";

document.write("h2");
document.write("Value of id is "+id+"br");
document.write("Value of name is "+name+"br");
//document.write() is used to display a message on the webpage
document.write("/h2");

js4

var x='1'; //String type 
var y=1; // Number type 

typeof x;  //will return string
typeof(y); //will return number

var d = new Date(); //Here Date is a built-in object

var d = new Date(); 
d instanceof Date;    //will return true

var DA=2000;var basic = 10000;
var BoA=10000;

var PF=850;

var Gratuity=309;

var str="In hand you recieve a salary of Rs.";

var strTax="Tax you have to pay is Rs. ";

var today= new Date();


FixedSalary=Basic+DA+BoA+PF+Gratuity;  //usage of operators

TakeHome=FixedSalary-(PF+Gratuity);

Tax=(FixedSalary>20000)?((7.5/100)*FixedSalary):((5/100)*FixedSalary);


document.write("


");


document.write(str+TakeHome+"br");

document.write(strTax+Tax+ br);


document.write("typeof var str is:        "+typeof(str)+"br"+"br");

document.write(	"var today is instanceof Date: \t"+"     &nbsp");

document.write( today instanceof Date );

document.write("/h2");

• Decision Making

1. if
2. if-else
3. switch

• Looping

1. for
2. while
3. do-while

• Branching

1. break
2. continue
3. return

• if

if (expression) {
    //statements
 }

• if-else

if (expression) {
    //statements
 } else if{
    //statements
 } else{
    //statements
 }

• switch

switch (expression) {
   case label_1: //statements
                 [break;]
   . . .
   case label_n: //statements
                 [break;]
        default: //statements
                 [break;]
}

document.write("h2");var num=3;
document.write("Cool Drinks vending machine br")

if(num>0 && num<5 td="">
document.write("Item is available for the pressed number "+num+"br");



switch(num){										//working of control structures



case 1:document.write("Item is Fanta");

break;


case 2:document.write("Item is Pepsi");

break;


case 3:document.write("Item is Coke");

break;


case 4:document.write("Item is Sprite");

break;


}

}


else{

document.write("No item is available for the pressed number");

}


document.write("/h2");

}

• for

for (initial_expression; condition; increment/decrement_expression) {
    //statements
 }

• for..in

 for (variable in object) {
    //statements
 }

• while

while (condition) {
     //statements
}

• do while

 do {
     //statements
} while (condition) ;

• Alert dialog box : It is mostly used for providing a warning message to the user.
  Example:

  alert("Hello!");

  Output:js5
  

  

• Confirmation dialog box: It is used to take user's confirmation on any event.Confirmation dialog box returns a boolean value.
  Example:

confirm("Would you like to exit?");

Output:js6

• Prompt dialog box : It used to take the input from the user, along with an optional message being displayed.A prompt dialog box can have a default value defined for the prompt.
  Example:

prompt("What is your lucky number?",0);

Output:js7

var name=prompt("Please enter your name","");

	function display(enteredName){


if(enteredName!="" && enteredName!=null){


if(confirm("If entered name is "+enteredName+" , press OK to continue")==true){


alert(enteredName+" registered successfully");

document.write("h2 Welcome "+enteredName+"/h2")

}


}


else{

alert("Name is mandatory");

}	


}


	display(name);

• be stored in a variable, array, or object
• have properties
• be passed to, and returned from, another function

• return the value
• If no return value is specified in a function, by default it returns 'undefined'

• Function statement
• Function expression

function functionName(param1, param2,…){
 //statements
}

function myFunction(num1,num2){ 
      num3=num1*num2;
 }

myFunction(10,20);

eg
function myFunction(num1,num2){

alert("You are now inside a function")

num3=num1*num2;

document.write(num3)

}

myFunction(10, 20);

function(param1,param2,…) {
   //statements
}

var myFun = function(num1, num2){ 
       num3=num1*num2;                         
 }

myFun(10,20);

var myFun = function functionName(param1, param2 ,…) {
    //statements
}

var myFun = function myFunction(num1, num2 ) {
   num3=num1*num2;
}

myFun(10,20);

var myFun=function myFunction(num1,num2){
    num3=num1*num2;
    alert("calling myFunction internally");
    myFunction(num2,num3);
}
myFun(1,2)

eval(string)

var x=2, y=2; 
eval("x * y")          //  4
eval("2 * 2")          //  4 
eval("z = new Date()")    // z=today’s date

parseInt(String, [radix])

parseInt("5");     // 5
parseInt("5.5");   // 5
parseInt("5p0");   // 5
parseInt("p50");   // NaN (Not a Number)

parseFloat(String)

parseFloat("1.23");    // 1.23
parseFloat(".123");    // 0.123
parseFloat("1.23abc"); // 1.23
parseFloat("a123")     // NaN 

Number(argument)

var x="123";					
Number(x);    	           // 123			
Number("123");	           // 123			
Number("123.1");           // 123.1			
Number(true);              // 1
Number(false);             // 0
Number("123abc");          // NaN
Number(new Date());       // number of milliseconds since January 1, 1970 

String(argument)

String(1)                       //  "1"
String(Boolean (0))             //  "false"

isFinite(Number)

isFinite(0)                 // true
isFinite(NaN)               // false
isFinite("Hi")              // false
isFinite("12Hi")            // false

isNaN(value)

isNaN('12a');    // true
isNaN(12);       // false  

var a=isFinite(5-4); //true
var b=isNaN("4.4a"); //true
var c=isFinite(NaN); //false

var obj = { property1 : value1,
	     5  : value2,
	    "prop" : value3  }; 

var emp_one = {
    name : "John",
    empNumber : 1001,
    emailId : "Johny@123mail.com"
}; 

var trainee={traineeId:"329714",batch:"Jul15-LC1",stream:"JEE"}
document.write("h3 style='color:blue' Trainee object created using object literal notation/h3")
document.write("h3Trainee Details/h3")
document.write(trainee.traineeId+"br")
document.write(trainee.batch+"br")
document.write(trainee.stream)

function Name(param1,param2,param3) {
this.param1 = param1;
this.param2 = param2;
this.param3 = param3;
};
var obj = new Name(p1,p2,p3);

function Employee(name,empNumber,emailId) {
    this.name=name;
    this.empNumber=empNumber;
    this.emailId=emailId;
    }
var emp_one = new Employee("John",1001,"John@infy.com");

function Employee(name,empNumber,emailId) {
    this.name=name;
    this.empNumber=empNumber;
    this.emailId=emailId;
    }
var emp_one = new Employee("John",1001,"John@infy.com");

var obj = new Object([value]);
obj.prop1 = "value1";
obj.prop2 = value2;
obj.prop3 = "value3";

var emp_one = new Object();
emp_one.name = "John";
emp_one.empNumber = 1001;
emp_one.emailId = "John@infy.com";

emp_one.empDetails = function(){
// code goes here
}; 

emp_one.empDetails();

var obj = new Object(true);

var emp_one = {
    name : "John",
    empNumber : 1001,
    emailId : "John@infy.com"  }; 

var emp_one = {
    name : "John",
    empNumber : 1001,
    emailId : "John@infy.com" };

var props = Object.keys(emp_one);

Number is a built-in object that allows us to work with numerical values.

A Number object is created using the Number() constructor. 

NumberObject explore 

Syntax:

js8

Some of the commonly used attributes and methods for you to explore are as follows:

• Attributes

1. Number.NaN
2. Number.MAX_VALUE
3. Number.MIN_VALUE

• Methods

1. Number.isFinite()
2. Number.isNaN()
3. Number.isInteger()

var x=new Number("89"); alert(x +" " +typeof(x)); var y=new Number("32wetf"); alert(y +" " +typeof(y)); alert("isFinite() of x"+" "+ isFinite(x)) alert("isNaN() of y"+" "+ isNaN(y)) alert("minimum value in JavaScript"+ " " +Number.MIN_VALUE) alert("maximum value in JavaScript"+ " " +Number.MAX_VALUE) alert( Math.floor(5.2) ) alert( Math.ceil(4.1) ) alert( Math.round(3.2) ) alert( Math.random() ) alert(Math.tan(0.78)) alert(Math.sin(0.78)) alert(Math.cos(0.78)) alert(Math.pow(2,3)) Date Object Date is a built-in object which is used to create a Date instance. All Date objects are calculated using the number of milliseconds since 1 January, 1970 UTC. Date instance can be created using Date() constructor.  Some methods of object are: js10 Note: Month in Date is 0 based. js9 today=new Date(); alert("Today is (To locale string) :"+today.toLocaleString()); alert("toLocaleDateString()->"+today.toLocaleDateString()) alert("getdate()->"+today.getDate()) alert("getday()->"+today.getDay()) // day monday -1 friday -5 alert("gethours()->"+today.getHours()) alert("getminutes()->"+today.getMinutes()) alert("getmonth()->"+today.getMonth()) alert("getfullyear()->"+today.getFullYear()) alert("getseconds()->"+today.getSeconds()) alert("gettime()->"+today.getTime()) year=today.getYear(); nextyear=new Date((today.getFullYear()+1),0,1); // month starts from 0 - 11 days=(nextyear-today)/(24*60*60*1000); String Object String is a built-in object that allow us to work with string. A String object is created using the String() constructor. Syntax :js11 js12 js13 Regular Expression reg ex Regular Expressions are used for pattern matching. The RegExp built-in object is used to create a regular expression object for pattern matching. There are 2 ways to define a pattern:- Literal way (creates a RegExp object): The literal notation is compiled once and then used any number of times This should be used when your regular expression does not need to change with time and remains constant                 Example : /E[1-9][0-9]{5}/ /E[1-9][0-9]{5}/ matches an employee ID starting with E with first digit between 1-9 and remaining five digits between 0-9 RegExp() constructor: In constructor function, the expression is compiled at run time. We can use this when the pattern keeps changing      Example : new RegExp("E[1-9][0-9]{5}") var s=new String("Hello"); alert(s) s1=s.concat("World"); alert(s1); alert(s1.toLocaleString().substr(5,5)); alert(s1.toUpperCase().substring(5, 11)); alert(s1.charAt(4)); var s2=new String("Hello-World"); s3=s2.split("-") //here '-' is delimiter alert(s3); alert(/Java/.test("JavaStream")); // Returns true var re = new RegExp("Java"); alert(re.test("JavaStream")); // Returns true Array Object Array built-in object is used to create arrays. Different ways to create an Array are: var arr1 = [element0,element1,...,elementN]; var arr2 = new Array(element0,element1,...,elementN); var arr3 = new Array(arrayLength); Some of the attributes/methods of an Array object are given below:js14 eg var courseArray = ['HTML','CSS','JS','JSF']; courseArray.forEach(function PrintThis (value, index, arr) { alert("value :" + value); alert("index :" + index); } ); courseArray.pop() courseArray.push("Angular") alert(courseArray) JSON - JavaScript Object Notation JSON is a data exchange format derived from JavaScript which is text based. link It is mainly used in web based applications for data exchange like in web services. Object Literal Notation JavaScript Object Notation var emp_one = { name : "John", empNumber : 1001, emailId : "John@infy.com" } var emp_one = { "name": "John", "empNumber": 1001, "emailId":"John@infy.com" } JavaScript provides a standard built-in object called JSON which has methods for parsing and generating JSON data. parse(): var json = '{ "firstName":"Infosys", "lastName":"Limited", "pincode":570017 }'; var company = JSON.parse(json); //will convert JSON string into an object alert(company.firstName +" "+ company.lastName +" "+ company.pincode );  stringify(): var jScores = { "Java": 70, "JavaScript": 80, "CSS": 30 }; var tScores = JSON.stringify(jScores); //will convert object to JSON alert(typeof(jScores)); // returns Object alert(typeof(tScores)); // returns String var trainees = { "Trainee" : [ { "Name" : "Ram", "age" : 34 }, { "Name" : "Raj", "age" : 23 }], } alert(trainees.Trainee[0].Name) alert(trainees.Trainee[1].age) var json = '{ "firstName":"Infosys", "lastName":"Limited", "pincode":570017 }'; var company = JSON.parse(json); //will convert JSON string into an object alert(company.firstName +" "+ company.lastName +" "+ company.pincode ); var jScores = { "Java": 70, "JavaScript": 80, "CSS": 30 }; var tScores = JSON.stringify(jScores); //will convert object to JSON alert(typeof(jScores)); // returns Object alert(typeof(tScores)); // returns String DOM - Document Object Model Consider the gmail sign up password matching logic. In order to develop this logic, we need to know how to access the values of password and confirm password fields in JavaScript.js15 The values of these fields can be accessed with the help of DOM. DOM (document object model) acts as a programming interface between HTML and JavaScript. It turns HTML tags to objects, which can be accessed and manipulated by JavaScript Our browser parses the HTML document and turns it into the DOM representation js16 Here the DOM objects are shown along with the HTML code. Before we can learn to access these DOM objects(also known as Nodes), we will see how they are arranged in a hierarchical fashion. Note : Window object depicts our browser. It is root node for the rest of the objects.  DOM Hierarchy js17 This is a simple hierarchy of the few important objects. Let us see how we can access these objects in our JavaScript code by following this hierarchy. Consider the code below : form name="userlogin" Usernameinput type="text" name="username" Passwordinput type="text" name="pass" /form Here, the value in the Username textbox can be accessed in the JavaScript code as js18 We know that every HTML document is represented by a Document object in a web browser. DOM Properties and Methods js19 To use any method or property, we have to use it in document.write() or document.URL format Every form element present in a document is represented by a form object in DOM. Note : console.log is used to print output in browser's console. Console can be viewed by pressing F12 in Chrome. var sAnswer = window.prompt("Please enter your favorite color : choose from the following Yellow, Green, Red, Blue, Pink, Orange, Black, Grey"); document.bgColor = sAnswer; document. write ("H1Welcome to " + sAnswer + " background :-)!!/H1HRWe are very happy to demonstrate the usage of document. write. Do remember to view the source!"); HTML Form as DOM Object

            
        
    
    
        

           Yes

           No

        
        

        

document.form1.rad1[0].value

document.forms[0].elements[0].value

js20

form name="register"
 Enter username .input value="John" id="name" name="username".
/form

js21

Every action of a user or browser causes events on a web page. 

HTML elements for which we want to handle the event, can specify event attributes.

Let us see, some of the common events and its corresponding event attributes.

We expect our page to respond accordingly to these events(isn’t that’s why we started with JavaScript, to make our page interactive).

The JavaScript code(called specifically as function) is written to respond to these events are called as event handlers.

• It handles all the communication to and from the server and helps in fetching resources
• It is an HTTP API. But it can even be used with protocols other than HTTP
• It supports the following data formats:  XML, JSON, HTML, plain text
• It supports all activities involved with HTTP requests or responses and allows the client to interact with the server using below methods and attributes

js28

js29

• Inputs provided to the web app are not validated
• HTML encoding is not applied, then the browser interprets output as code

• Validation to filter out the user input. Then the browser interprets it as code without malicious content
• Encoding escapes the user input only as data, not as code so that the browser interprets accordingly