The Foundation of JavaScript Syntax Session Objectives  Describe JavaScript  Understand foundation of JavaScript syntax What is JavaScript  It is a scripting language that can be used to create client-side scripts and server-side scripts  For HTML developers, JavaScript is a boon, which helps in building HTML systems that interact with the user  JavaScript makes it easier to dynamic and interactive Web pages  JavaScript is a scripting language developed by Sun Microsystems and Netscape  JavaScript developed from Netscape's Livescript  Where is JavaScript running ?  Client applications run in a browser such as Netscape Navigator or Internet Explorer create JavaScript effects and rules ► JavaScript can enhance the dynamics interactivity of the site by using its effects     ► and Provide User Interaction Dynamically Change Content Validate data Provide Database Interaction Similar to any other language, JavaScript also follows some basic grammar rules like:     Using Caps JavaScript is case sensitive Using Pairs Open and closed symbols need to work in pairs Using Spaces JavaScript ignores extra white space Using Comments make notes to yourself about what the script is doing JavaScript Tools and Run- Time Environment ► The JavaScript code-generating tools and IDE helps in creating useful JavaScript code A few of these include:    Dialog Box Pop – up Menu Builder Remotes ► Run Time Environment  Client Side Scripting  Java Script on Web Server Client-Side JavaScript ► If a client-side script is embedded in the page, the server forwards the full content of the HTML document – The JavaScript statements and the HTML content ► When the browser receives the document, it executes the HTML and JavaScript statements without any interaction with the server Server-Side JavaScript ► We can embedded JavaScript statements in an HTML document that are executed on the server  All the files are then compiled into a single executable in bytecode format  When the client browser requests the executable, the run-time engine executes the server-side JavaScript statements and returns the HTML page to the browser ► Some of the uses of server-side scripts Embedding JavaScript in Web Page ► The JavaScript can be inserted into an HTML document in the following ways :  Using SCRIPT tag:  Using an external File  Using JavaScript Expressions within HTML Tag Attribute Values  Using JavaScript in event handlers Program Using Msg box and write method Example: Output: confirm ("Are you Sure?"); alert("OK"); document.write(" Thank You !"); Variables A variable is a container that refers to a memory location ► It is used to hold values that may change while the script is executing ► Variables follow some naming conventions ► A variable is declared using the keyword ‘var’ ► eg var A = 10; ► Variables have a scope that is determined by where they are declared in the script  Global Variable  Local Variable ► Literals are fixed values that can be used10in the script Comparison Operator ► A comparison operator compares its operands and returns a logical value based on whether the comparison is true or not ► Comparison Operators include:       Equal to (==) Not Equal to (!+) Greater than (>) Greater than or equal to (>=) Less than (= 18) ? "adult" : "minor“  Typeof operator The typeof operator returns a string indicating the type of the operand eg var x = 5; document.write(typeof(x)); 20 Operator Precedence ► When there are several operators to be evaluated in an expression, the precedence of the operator determines the sequence in which the operators are evaluated ► The following table lists the operators, from lowest to highest: precedence 21 of Expressions ► ► ► Expressions are used to manipulate and evaluate variables in different contexts An expression is any valid set of literals, variables, and operators which evaluates to a single value Expression types available in JavaScript includes:    ► Arithmetic: evaluates to a number Logical: evaluates to a boolean value String: evaluates to a string Expressions combine variables and literals together via operators 22 Regular Expression ► ► ► A regular expression is defined pattern that can be used to match the character combinations of a string Regular expressions can be used to search for character patters in a string input by the user Regular expression can include:   ► Simple patterns Combination of simple and special characters Regular expressions can be created in one of two ways:   Using an object initializer Calling the constructor function of the RegExp object 23 Using Regular Expression ► The methods that can be used with Regular Expression includes:  ► Exec, Test, Match, Search, Replace, Split The syntax to use a method: objectname.method = function_name ► The syntax for calling the method in the context of the object is: objectname.methodname(parameters) 24 Regular Expression - Example Example: Output: re = /Time/ str = re.test ("Time and Tide wait for none"); window.alert(str); 25 Arrays ► ► ► ► Arrays are used to store a series of variables with the same name A number (an index) is used to differentiate each value Arrays start with index zero in JavaScript Creating arrays: Syntax arrayObjectName = new Array([element0, element1, , elementN]) ► ► Adding elements: We can add elements to an array when we create it Eg emp[0] = "Ryan Dias" The elements of an array can be accessed by using Name or Index number of element.26 Arrays(1) ► Methods of the array object can be used to manipulate the array ► The methods of Array object include:       ► join pop push reverse shift sort JavaScript support mutli-dimensional array 27 Conditional Statements ► A conditional statement is used to test a condition The result determines the statement or block of statements to be executed ► The various conditional statements include:  If… Else  Switch 28 Loop ► Structures that control repetition in a program are known as loops ► The various types of loops include:  For  Do … While  While  Break & continue  For….in  with 29 Function ► ► ► ► ► JavaScript has several pre-defined functions that we can use within the script Some of pre-defined JavaScript functions includes:  eval function  isNaN function Creating User Defined Functions function funcName(argument1,argument2,etc) { statements; } Calling a Function Return Statement 30 [...]...  Typeof operator The typeof operator returns a string indicating the type of the operand eg var x = 5; document.write(typeof(x)); 20 Operator Precedence ► When there are several operators to be evaluated in an expression, the precedence of the operator determines the sequence in which the operators are evaluated ► The following table lists the operators, from lowest to highest: precedence 21 of Expressions... element.26 Arrays(1) ► Methods of the array object can be used to manipulate the array ► The methods of Array object include:       ► join pop push reverse shift sort JavaScript support mutli-dimensional array 27 Conditional Statements ► A conditional statement is used to test a condition The result determines the statement or block of statements to be executed ► The various conditional statements... with Regular Expression includes:  ► Exec, Test, Match, Search, Replace, Split The syntax to use a method: objectname.method = function_name ► The syntax for calling the method in the context of the object is: objectname.methodname(parameters) 24 Regular Expression - Example Example: Output: re = /Time/ str = re.test ("Time and Tide wait for none"); window.alert(str);... combinations of a string Regular expressions can be used to search for character patters in a string input by the user Regular expression can include:   ► Simple patterns Combination of simple and special characters Regular expressions can be created in one of two ways:   Using an object initializer Calling the constructor function of the RegExp object 23 Using Regular Expression ► The methods that...Data Types ► JavaScript     has a relatively small set of data types Numbers Logical or Boolean Strings Null ► JavaScript is case-sensitive ► In JavaScript, two variables of different types can be combined example: A = “ This apple costs Rs.” + 5 will result in a string with the value "This apple costs Rs 5" 11 Data Type - Example Example: Output: ... a series of variables with the same name A number (an index) is used to differentiate each value Arrays start with index zero in JavaScript Creating arrays: Syntax arrayObjectName = new Array([element0, element1, , elementN]) ► ► Adding elements: We can add elements to an array when we create it Eg emp[0] = "Ryan Dias" The elements of an array can be accessed by using Name or Index number of element.26... into a conditional expression ► It includes: 17 Logical Operators - Example Example: var x = 10; var y = 5; alert ( "The value of x is " + x + "The value of y is alert("x AND y = " + (x && y)); alert("x OR y = " + (x || y)); alert("NOT x = " + (!x)); Output: " + y); 18 String Operator ► The string operator takes two string operators... Else  Switch 28 Loop ► Structures that control repetition in a program are known as loops ► The various types of loops include:  For  Do … While  While  Break & continue  For….in  with 29 Function ► ► ► ► ► JavaScript has several pre-defined functions that we can use within the script Some of pre-defined JavaScript functions includes:  eval function  isNaN function Creating User Defined Functions... string, which is same, as the two original strings run together Example: x = ‘yellow’; y = ‘green’; z = x + y + ‘white’; which means z is “yellowgreenwhite” w = y + 9, which means w is “green9” 19 Evaluation Operator ► These operators generally includes:  Conditional operator condition) ? trueVal : falseVal Assigns a specified value to a variable if a condition is true, otherwise assigns an alternate... take numerical values (either literals or variables) as their operands and return a single numerical value Arithmetic Operators include:        Addition (+) Subtraction (-) Division (/) Modulus (%) Unary increment (++) Unary decrement (- -) Unary negation (-) 15 Comparison Operator ► A comparison operator compares its operands and returns a logical value based on whether the comparison is true