JavaScript is a client-side scripting language that can be inserted into HTML pages to make them interactive. It allows dynamic validation of forms, changing HTML element properties like visibility, and reacting to user events like clicks or form submissions. The Document Object Model (DOM) represents an HTML or XML document as a tree structure, allowing JavaScript to programmatically access and modify the content, structure, and styling of the document. Common built-in JavaScript objects include String, Date, Array, Math, and Boolean, which provide properties and methods for manipulating text, dates, lists of values, numbers, and true/false values.

1. JavaScript CCSS TEAM: Eng. Musavir Iftekhar Bhatti

4. Java VS JavaScript 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). Interpreted (not compiled) by client. Compiled on server before execution on client. Much smaller and simpler set of commands . Much larger and advanced set of commands. Netscape Sun Microsystems JavaScript Java

19. Object in JavaScript The concept of Object Hierarchy in JavaScript can be illustrated by the above diagram. The window itself is an object that have document in it. In document it has another object such as images and forms. Each of these objects have its own properties and methods.

22. The most commonly used JavaScript objects Focus, blur, select defaultValue, name, type, value Text Submit, reset Action, elements, encoding, FileUpload, method, name, target Form None Border, complete, heigth, hspace, lowwsrc, vspace, width Image Clear, close, open, write, writeln alinkColor, anchors, applets, ares, bgColor, cookie, fgColor, forms, images, lastModified, linkColor, links, location, referrer, title, vlinkColor Documents javaEnabled appCodeName, appName, appVersion, mimeTypes, plugins, userAgents Navigator Back Length, forward, go History Reload, replace Hash, host, hostname, href, pathname, por, protocol, search Location Alert, blur, close, confirm, focus, open, prompt, clearTimeout, setTimeout defaultStatus, frames, opener, parent, scroll, self, status, top, window Frame Alert, blur ,close, confirm, focus, open, prompt, clearTimeout, setTimeout defaultStatus, frames, opener, parent, scroll, self, status, top, window Window Methods Properties Object

23. The most commonly used Built-in JavaScript Objects Methods Properties Objects Anchor, big, blink, bold, charAt, fixed, fontColor, fontSize, indexOf, italics, lastIndexOf, link, small, split, strike, sub, substring, sup, toLowerCase,toUpperCase Length, Prototype String getDate, getDay, getHours, getMinutes, getMonth, getSeconds, getTime, getTimeZoneoffset, getYear, parse, prototype, setDate, setHours, setMinutes, setMonth, setSeconds, setTime, setYear, toGMTString, toLocaleString, UTC None Date Join, reverse, sort xx Length Array

36. Object A bird (object) Fly () name age EyeColor Eat() Drink() METHODS PROPERTIES

44. <invoice> <invoicepage form=&quot;00&quot; type=&quot;estimatedbill&quot;> <addressee> <addressdata> <name>Leila Laskuprintti</name> <address> <streetaddress>Pyynpolku 1 </streetaddress> <postoffice>70460 KUOPIO </postoffice> </address> </addressdata> </addressee> ... XML DOM structure model invoice invoicepage name addressee addressdata address form=&quot;00&quot; type=&quot;estimatedbill&quot; Leila Laskuprintti streetaddress postoffice 70460 KUOPIO Pyynpolku 1 Document Element NamedNodeMap Text

45. HTML DOM structure model The DOM presents an HTML document as a tree-structure (a node tree), with elements, attributes, and text.

50. Core Interfaces: Node & its variants Node Comment DocumentFragment Attr Text Element CDATASection ProcessingInstruction CharacterData Entity DocumentType Notation EntityReference “ Extended interfaces” Document

51. DOM interfaces: Node invoice invoicepage name addressee addressdata address form=&quot;00&quot; type=&quot;estimatedbill&quot; Leila Laskuprintti streetaddress postoffice 70460 KUOPIO Pyynpolku 1 Node getNodeType getNodeValue getOwnerDocument getParentNode hasChildNodes getChildNodes getFirstChild getLastChild getPreviousSibling getNextSibling hasAttributes getAttributes appendChild(newChild) insertBefore(newChild,refChild) replaceChild(newChild,oldChild) removeChild(oldChild) Document Element NamedNodeMap Text

52. invoice invoicepage name addressee addressdata address form=&quot;00&quot; type=&quot;estimatedbill&quot; Leila Laskuprintti streetaddress postoffice 70460 KUOPIO Pyynpolku 1 Document getDocumentElement createAttribute(name) createElement(tagName) createTextNode(data) getDocType() getElementById(IdVal) Node DOM interfaces: Document Document Element NamedNodeMap Text

53. DOM interfaces: Element invoice invoicepage name addressee addressdata address form=&quot;00&quot; type=&quot;estimatedbill&quot; Leila Laskuprintti streetaddress postoffice 70460 KUOPIO Pyynpolku 1 Element getTagName getAttributeNode(name) setAttributeNode(attr) removeAttribute(name) getElementsByTagName(name) hasAttribute(name) Node Document Element NamedNodeMap Text

60. HTML Node Hierarchy

61. How Javascript Interact With HTML DOM The primary use of JavaScript is to write functions that are embedded in or included from HTML pages and interact with the Document Object Model (DOM) of the page. Some simple examples of this usage are: A) Opening or popping up a new window with programmatic control over the size, position and 'look' of the new window (i.e. whether the menus, toolbars, etc. are visible). B) Validation of web form input values to make sure that they will be accepted before they are submitted to the server. C) Changing images as the mouse cursor moves over them: This effect is often used to draw the user's attention to important links displayed as graphical elements.

62. Javascript Objects Description Object Contains the visited URLs in the browser window History Contains information about the current URL Location Contains information about the client's display screen Screen Contains information about the client's browser Navigator Represents a browser window. A that is created automatically with every instance of a <body> or <frameset> tag Window

63. HTML DOM Objects Represent an <option> element / selection list in an HTML document. Option / Select Represents an <a> element Anchor Represents a <form> element Form Represents the state of an event Event Represents an <img> element Image Represents a <frame>/<frameset> element Frame / frameset Represent a <table>, <td> and <tr> element. Table, TableHeader, TableRow Represents the entire HTML document and can be used to access all elements in a page. Document Description Object