1. JavaScript Introduction 1

2. What is Java Script ? JavaScript is a client-side scripting language. A scripting language is a lightweight programming language. JavaScript is programming code that can be inserted into HTML pages. JavaScript inserted into HTML pages, can be executed by all modern web browsers. Java Script can enhance the dynamics and interactive features of your page by allowing you to perform calculations, check forms, write interactive games, add special effects, customize graphics selections, create security passwords and more. 2 JavaScript Introduction

3. What is Java Script ? JavaScript is used in Web site development to such things as:  check or modify the contents of forms  change images  open new windows and write dynamic page content.  to make DHTML by CSS.  This allows you to make parts of your web pages appear or disappear or move around on the page 3 JavaScript Introduction

4. Java Script Vs Java JavaScriptJava Interpreted (not compiled) by client. Compiled on server before execution on client. Object-based. Code uses built-in, extensible objects, but no classes or inheritance. Object-oriented. Applets consist of object classes with inheritance. Code integrated with, and embedded in, HTML. Applets distinct from HTML (accessed from HTML pages). Variable data types not declared (loose typing). Variable data types must be declared (strong typing). Secure. Cannot write to hard disk. 4 JavaScript Introduction

5. ECMA Script The responsibility for the development of a scripting standard has been transferred to an international body called the European Computer Manufacturers Association (ECMA). The standard developed by the ECMA is called ECMAScript, though browsers still refer to it as JavaScript. The latest version is ECMA-262, which is supported by the major browsers. 5 JavaScript Introduction

6. Writing a Java Script Program The Web browser runs a JavaScript program when the Web page is first loaded, or in response to an event. JavaScript programs can either be placed directly into the HTML file or they can be saved in external files. placing a program in an external file allows you to hide the program code from the user source code placed directly in the HTML file can be viewed by anyone 6 JavaScript Introduction

7. Writing a Java Script Program A JavaScript program can be placed anywhere within the HTML file. Many programmers favor placing their programs between tags in order to separate the programming code from the Web page content and layout. Some programmers prefer placing programs within the of the Web page at the location where the program output is generated and displayed. 7 JavaScript Introduction

8. How to use/implement Java Script? We can implement Java script in our web page by following three ways- 1.Inside the head tag 2.Within the body tag 3.In an external file (with extension.js) 8 JavaScript Introduction

9. Implementing Java Script 1.Inside HEAD Tag: Syntax: <!- - Java Script Code // - -> 9 JavaScript Introduction

10. Implementing Java Script 2.Within BODY Tag: Syntax: <!- - java script code // - -> 10 JavaScript Introduction

11. Implementing Java Script 3.In an External Link: Syntax: Myscript.js: Function msg() { alert("Hello") } 11 JavaScript Introduction

12. Java Script Syntax Issue JavaScript commands and names are case sensitive. JavaScript command lines end with a semicolon to separate it from the next command line in the program. in some situations, the semicolon is optional semicolons are useful to make your code easier to follow and interpret 12 JavaScript Introduction

13. Displaying some text on web Page You can write on page by using following statement of Java script- document.write(“message”) document.writeln(“message”) Example: document.write(“ My first message ” ) ; 13 JavaScript Introduction

14. JavaScript Display Possibilities JavaScript does NOT have any built-in print or display functions. JavaScript can "display" data in different ways: Writing into an alert box, using window.alert(). Writing into the HTML output using document.write(). Writing into an HTML element, using innerHTML. Writing into the browser console, using console.log(). 14 JavaScript Introduction

15. window.alert() My First Web Page My first paragraph. window.alert(5 + 6); 15 JavaScript Introduction

16. 16 JavaScript Introduction

17. document.write() My First Web Page My first paragraph. <button type="button" onclick="document.write(5 + 6)"> Try it 17 JavaScript Introduction

18. 18 JavaScript Introduction

19. innerHTML My First Web Page My First Paragraph. document.getElementById("demo").innerHTML = 5 + 6; 19 JavaScript Introduction

20. 20 JavaScript Introduction

21. console.log() My First Web Page My first paragraph. Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu. console.log(5 + 6); 21 JavaScript Introduction

22. 22 JavaScript Introduction

23. Working with Variables & Data A variable is a named element in a program that stores information. var var_name; The following restrictions apply to variable names: the first character must be either a letter or an underscore character ( _ ) the remaining characters can be letters, numbers, or underscore characters variable names cannot contain spaces Variable names are case-sensitive. 23 JavaScript Introduction

24. Types of Variables JavaScript supports four different types of variables Numeric variables can be a number, such as 13, 22.5, or -3.14159 string variables is any group of characters, such as “Hello” or “Happy Holidays!” Boolean variables are variables that accept one of two values, either true or false null variables is a variable that has no value at all 24 JavaScript Introduction

25. Declaring/Creating a Variable Before you can use a variable in your program, you need to declare a variable using the var command or by assigning the variable a value. Any of the following commands is a legitimate way of creating a variable named “Month”: var Month; Month = “December”; var Month = “December”; 25 JavaScript Introduction

26. Operators in JavaScript Following operators are used in JavaScript- 1.Arithmetic Operator 2.Comparison Operator 26 JavaScript Introduction

27. Operators in JavaScript Following operators are used in JavaScript- 1.Arithmetic Operator OperatorMeaningExample +Addition2 + 4 -Subtraction6 - 2 *Multiplication5 * 3 /Division15 / 3 %Modulus43 % 10 27 JavaScript Introduction

28. Example <!– var two = 2 var ten = 10 var linebreak = " " document.write("two plus ten = ") var result = two + ten document.write(result) document.write(linebreak) document.write("ten * ten = ") result = ten * ten document.write(result) document.write(linebreak) document.write("ten / two = ") result = ten / two document.write(result) //--> 28 JavaScript Introduction

29. Output two plus ten = 12 ten * ten = 100 ten / two = 5 29 JavaScript Introduction

30. Operators in JavaScript 2.Comparison Operator OperatorMeaningExampleResult ==Equal Tox == yfalse ===Equal value and equal type x===ytrue !=Not Equal Tox != ytrue !==not equal value or not equal type x!==false <Less Thanx < ytrue >Greater Thanx > yfalse <=Less Than or Equal Tox <= ytrue >=Greater Than or Equal Tox >= yfalse 30 JavaScript Introduction

31. Built-in JavaScript Functions Functions provided by the language and you cannot change them to suit your needs. Some of the built-in functions in JavaScript are shown here: eval - eval(expr) eval evaluates the expression or statements isFinite Determines if a number is finite isNaN Determines whether a value is “Not a Number” parseInt Converts string literals to integers, no number  NaN. parseFloat Finds a floating-point value at the beginning of a string. 31 JavaScript Introduction

32. JavaScript Functions A function is a block of organized reusable code (a set of statements) for performing a single or related action. Begins with keyword “function” and the function name and “( … )” Inside the parentheses We can pass parameters to the function E.g. function myfuc(arg1, arg2) {…} Built-in and user-defined functions 32 JavaScript Introduction

33. Creating JavaScript Functions Declaration Syntax Functions are declared using the function reserved word The return value is not declared, nor are the types of the arguments function function_name(parameters) { JavaScript commands } parameters are the values sent to the function (note: not all functions require parameters) { and } are used to mark the beginning and end of the commands in the function. 33 JavaScript Introduction

34. Creating JavaScript Functions: Eg <!- - function myMessage() { document.write(“ Hello World”); } // - -> 34 JavaScript Introduction

35. Event in JavaScript JavaScript is its ability to help you create dynamic web pages that increase user interaction The building blocks of an interactive web page is the JavaScript event system. An event in JavaScript is something that happens with or on the webpage. A few example of events: A mouse click The webpage loading Mousing over a hot spot on the webpage, also known as hovering Selecting an input box in an HTML form A keystroke 35 JavaScript Introduction

36. Event in JavaScript JS Event Handler Onclick onMouseOver onMouseOut onLoad onkeydown 36 JavaScript Introduction

37. JavaScript Object Object Number String Date Array Boolean Math, etc 37 JavaScript Introduction

38. What is the DOM? The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." The W3C DOM standard is separated into 3 different parts: Core DOM - standard model for all document types XML DOM - standard model for XML documents HTML DOM - standard model for HTML documents JavaScript Introduction 38

39. What is the HTML DOM? The HTML DOM is a standard object model and programming interface for HTML. It defines: The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements. JavaScript Introduction 39

40. When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is constructed as a tree of Objects: JavaScript Introduction 40 What is the HTML DOM?

41. With the object model, JavaScript gets all the power it needs to create dynamic HTML: JavaScript can change all the HTML elements in the page JavaScript can change all the HTML attributes in the page JavaScript can change all the CSS styles in the page JavaScript can remove existing HTML elements and attributes JavaScript can add new HTML elements and attributes JavaScript can react to all existing HTML events in the page JavaScript can create new HTML events in the page JavaScript Introduction 41

42. The HTML DOM Document HTML DOM object model, the document object represents your web page. The document object is the owner of all other objects in your web page. If you want to access objects in an HTML page, you always start with accessing the document object. JavaScript Introduction 42

43. Finding HTML Elements JavaScript Introduction 43 MethodDescription document.getElementById()Find an element by element id document.getElementsByTagName()Find elements by tag name document.getElementsByClassName( ) Find elements by class name

44. Changing HTML Elements JavaScript Introduction 44 MethodDescription element.innerHTML=Change the inner HTML of an element element.attribute=Change the attribute of an HTML element element.setAttribute(attribute, value) Change the attribute of an HTML element element.style.property=Change the style of an HTML element

45. Adding and Deleting Elements JavaScript Introduction 45 MethodDescription document.createElement()Create an HTML element document.removeChild()Remove an HTML element document.appendChild()Add an HTML element document.replaceChild()Replace an HTML element document.write(text)Write into the HTML output stream

46. Adding Events Handlers JavaScript Introduction 46 MethodDescription document.getElementById(id). onclick=function() {code} Adding event handler code to an onclick event

47. Document Object Java script enable browsers are capable of recognizing individual objects in a HTML page. Each HTML document loaded into a browser window becomes a Document object. The Document object provides access to all HTML elements in a page, from within a script. DOM has following properties- Anchor Applet Body Cookies Form Image Link Title URL, etc 47 JavaScript Introduction

48. Validation in JavaScript 48 JavaScript Introduction JavaScript Can Validate Input Please input a number between 1 and 10: Submit function myFunction() { var x, text; // Get the value of the input field with id="numb" x = document.getElementById("numb").value; // If x is Not a Number or less than one or greater than 10 if (isNaN(x) || x 10) { text = "Input not valid"; } else { text = "Input OK"; } document.getElementById("demo").innerHTML = text; }

49. JavaScript Introduction 49

50. JavaScript Introduction 50

51. Introduction Where to write script Syntax of JS How to write Comments How to define Variables and its scope Operators Data Types Function Objects String Methods Number Methods Math function Dates Methods Array Methods Conditions JavaScript Introduction 51