1 / 84

JavaScript Fundamentals

JavaScript Fundamentals. Agenda. The Foundation of JavaScript Syntax The Core language Objects in JavaScript The Browser Objects in JavaScript Handling Form and Form Element Events. What is JavaScript.

morse
Download Presentation

JavaScript Fundamentals

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript Fundamentals

  2. Agenda • The Foundation of JavaScript Syntax • The Core language Objects in JavaScript • The Browser Objects in JavaScript • Handling Form and Form Element Events

  3. What is JavaScript • It is a scripting language that can be used to create client-side scripts and server-side scripts. • JavaScript makes it easier to create dynamic and interactive Web pages. • JavaScript is a scripting language developed by Sun Microsystems and Netscape. • JavaScript developed from Netscapes’s Livescript. • Client applications run in a browser such as Netscape Navigator or Internet Explorer.

  4. JavaScript effects and rules • JavaScript can enhance the dynamics and interactivity of the site by using its effects. • Provide User Interaction • Dynamically Change Content • Validate data • Similar to any other language, JavaScript also follows some basic grammar rules like: • Using Caps • Using Pairs • Using Spaces • Using Comments

  5. 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

  6. Embedding JavaScript in Web Page • The JavaScript can be inserted into an HTML document in the following ways : • Using SCRIPT tag: <script language="JavaScript"> <!-- JavaScript statements; //--> </script> • Using an external File <script language="JavaScript" src="filename.js"> </script> • Using JavaScript Expressions within HTML Tag Attribute Values • Using JavaScript in event handlers

  7. Program Using Msg box and write method Output: Example: <HTML> <HEAD> <SCRIPT LANGUAGE = "Javascript"> confirm ("Are you Sure?"); alert("OK"); document.write(" Thank You !"); </SCRIPT> </HEAD> </HTML>

  8. 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 used in the script.

  9. 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".

  10. Data Type - Example Output: <HTML> <HEAD> <SCRIPT LANGUAGE = "Javascript"> var A = "12" + 7.5; document.write(A); </SCRIPT> </HEAD> </HTML>

  11. Literal - Types • Integer – These can be expressed in decimal, hexadecimal and binary number system. • Floating- point - These number can have a decimal point or an “e” or “”E” followed by an integer. • String - A string literal is zero or more characters enclosed in single or double quotation marks. • Boolean - This can take only two values: True or False. • null - The null type has only one value: null. Null implies no data.

  12. Operators • Operators take one or more variables or values (operands) and return a new value. • JavaScript uses both binary and unary operators. • Operators are classified depending on the relation they perform like: • Arithmetic Operator • Comparison Operator • Logical Operator • String Operator • Evaluation Operator • Operator Precedence

  13. Arithmetic Operator • Arithmetic operators 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 (-)

  14. 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 (<) • Less than or equal to (<=)

  15. Logical Operators • Logical operators are typically used to combine multiple comparisons into a conditional expression. • It includes:

  16. Logical Operators - Example Output: Code: <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> var x = 10; var y = 5; alert ("The value of x is " + x + "The value of y is " + y); alert("x AND y = " + (x && y)); alert("x OR y = " + (x || y)); alert("NOT x = " + (!x)); </SCRIPT> </HEAD> </HTML>

  17. String Operator • The string operator takes two string operators as operands and creates a new 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”

  18. 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 value if condition is false. eg. status = (age >= 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));

  19. 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 precedence of operators, from lowest to highest:

  20. 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.

  21. 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

  22. 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)

  23. Regular Expression - Example Output: Example: <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> re = /Time/ str = re.test ("Time and Tide wait for none"); window.alert(str); </SCRIPT> </HEAD> </HTML>

  24. 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.

  25. 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.

  26. 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

  27. 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

  28. Function • JavaScript has several pre-defined functions that we can use within the script. • Some of pre-defined JavaScript functions includes: • eval function • isNaN funtion • Creating User Defined Functions function funcName(argument1,argument2,etc) { statements; } • Calling a Function • Return Statement

  29. The Core language Objects in JavaScript

  30. Objectives • Work on Core Language Objects • Use object Attributes and Methods

  31. Objects • The properties (variables) that define the object and the methods (functions) that work on the data are included in the object • For example, a car is an object. The properties of the car are its make, model, and color. They have some common methods like, go (), brake(), reverse().

  32. Properties and Methods • To access the properties of the object, we must specify the object name and the property: objectName.propertyName • To access the methods of an object, we must specify the object name and the required method: objectName.method ()

  33. Using objects • When creating a Web page we can insert: • Browser objects • Built in script language objects (vary depending on the scripting language used) • HTML elements • We can also create our own objects for use in the programs.

  34. Object Hierarchy Browser Objects Script Objects HTML Elements

  35. The this statement • The this statement is more of an internal property. • Its value indicates the current object. It can have standard properties such as name, length and value applied accordingly.

  36. The for . . . in statement • The for . . in statement is used to cycle through each property of an object or each element of an array. • The syntax is: for (variable in object) { statements; } 

  37. The with statement • The with statement is used to execute a set of statements that have a specified object as the reference. • The property is assigned to the object specified in the with statement. •  The syntax is: with (object) { statements; }

  38. New Operator • The new operator is used to create a new instance of an object type • The object type may be user-define or built-in • objectName = new objectType (param1 [,param2] ...[,paramN]) where, objectName is the name of the new object instance. ObjectType is a function that defined the type of the object. For example, Array. Param[1, 2, . . ] are the property values of the object.

  39. Eval function • The eval function is used to evaluate a string of code without reference to any specific object. • The string can be a JavaScript expression, statement, or a group of statements • The expression can include variables and properties of an object. var x = 5; var z = 10; document.write(eval(“x + z + 5”));

  40. String object • The string object is used to manipulate and work with strings of text. • We can extract substrings and convert text to upper- or lowercase characters in a program. • The general syntax is, stringName.propertyNameorstringName.methodName

  41. Creating String object • There are 3 different methods of creating strings. • Using the var statement and optionally assigning it to a value. • Using an assignment operator (=) with a variable name. • Using the string () constructor.

  42. Math Object • The Math object has properties and methods that represent advanced mathematical calculations. function doCalc(x) { var a;   a = Math.PI * x * x;   alert ("The area of a circle with a radius of " + x + “ is " + a); }

  43. Date object • The Date built-in object contains both date and time information. • The Date object does not have any properties. • It has a large number of methods for setting, getting, and manipulating dates.

  44. Date object • The Date object stores dates as the number of milliseconds since January 1, 1970, 00:00:00. DateObject = new Date(parameters)

  45. The Browser Objects in JavaScript

  46. Objectives • Common events in JavaScript • Browser Objects – Attributes and Methods

  47. Event Object - Concept • Events are a result of an action done by the user • An event may be user-generated or generated by the system • Each event has an associated event object. The event object provides information on: • the type of event • the location of the cursor at the time of the event • The event object is used as a part of an event handler

  48. Event – Life Cycle • The life cycle of an event generally consist of following steps: • The user action or condition associated with the event occurs • The event object is instantly updated to reflect the conditions of the event • The event fires • The associated event handler is called • The event handler carries out its actions and returns

  49. JavaScript Event • Common events supported by JavaScript includes: • onClick • onChange • onFocus • onBlur • onMouseOver • onMouseOut • onLoad • onSubmit • onMouseDown • onMouseUp

  50. onClick - Example • The onClick event is generated whenever the user clicks the mouse button on certain form elements or on a hypertext link. Enter an expression: <INPUT TYPE="text" NAME="expr" SIZE=15 ><BR><BR> <INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)"> <BR><BR><BR> Result: <INPUT TYPE="text" NAME="result" SIZE=15 > <BR> </FORM> </BODY> </HTML> <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function compute(form) { if (confirm("Are you sure?")) form.result.value = eval(form.expr.value) else alert("Please come back again.") } </SCRIPT> </HEAD> <BODY> <FORM>

More Related