DHTML

1. DHTML Last Lesson before Midterms Exam JavaScript Lesson 1

2. DHTML • DHTML simply means dynamic HTML. • It is not a language, in the sense that HTML is a language that creates Web pages or that JavaScript create codes that add interactivity to HTML documents. • DHTML is a collection of technologies that support HTML and extend the interactive capabilities of browsers.

3. Remember, that HTML is static and is mainly a language for structuring and presenting Web page content. • Web pages can only acquire interactivity when JavaScript codes are introduced, Some of the most commonly used technologies include JavaScript, CSS, Document Object Model (DOM), and XHTML.

4. Therefore, DHTML does the following: • Works with JavaScript • Works with Data Object Model (DOM) • Works with CSS • Combines HTML with JavaScript

5. Document Object Model (DOM) • Provides a way to treat individual elements in HTML as objects. • Think of DOM as a map of your HTML document, with each element acting as a marker. • Once that marker Is set into place, it becomes easy for JavaScript to work on this marker, communicate with it, and get feedback from it.

6. HTML provides structures for elements in your Web page, DOM also recognizes the structure of an HTML document. As HTML elements may be placed within other elements, DOM reads the HTML structure as a map. • It sees the map as composed of sections, and within each sections are subsections and their elements.

7. How to Set Up a Document Object • Consider each element in your HTML as an Object. • DOM reads each HTML element as a unique object and as a node within your structure. • To set up an element as a document object, you must give its unique identity by using ID attribute. HOW? It can be done in TWO ways

8. IDs are mainly used in HTML for layout purposes and to identify the unique elements in your HTML code. • It is a unique identifier, each ID can be used only once in the page in defining a specific element in the code.

9. Setting Up an element ID is done in CSS Script • Add the hash or number sign (#) to the name of the element. For Example: #paragraph, #heading1 • Assign attributes to your ID. Remember that in CSS, attributes are written in the property:value; format. For example: #paragraph1 { font-color: #cc0000; font-size: 2pt; }

10. 3. Apply the ID to the HTM tag. An ID will not take effect unless it is applied to an HTML element. To apply the ID, take the following example: <div id=“paragraph1”> Content Here </div> all elements within the <div> and </div> tags become part of the object.

11. Working with Elements and Event Handlers • Now that you have set elements as object IDs, you can start working with them using the two most commonly used ways to work with element IDs: • getElementByID() • getElementByTagName() • Working with elements requires event handlers. • Events refers to the actions done by site visitors, and event handlers are events prefixed by the word on. For example: onmouseover, onload • Elements have their corresponding event handlers, and when events occur, your can set up actions that will follow using JavaScript codes.

12. JavaScript and DHTML • The “Dynamic” in Dynamic HTML happens through various scripts, primarily those in JavaScript. • JavaScript is an easy-to-use coding language that adds functionalities by directly communicating with Web browsers.

13. Background of JavaScript • Before JavaScript became an almost official scripting language for extending the capabilities of Web browsers, many scripts, such as CGI scripts, had to be run from servers. • Web developers needed advanced knowledge in server management and various third-party applications to run server-side scripts. • In contrast, JavaScript scripts are either embedded or linked in the HTML codes, and are supported by most popular Web browsers.

14. JavaScript traces its roots to Livescript, which was released to complement the discontinued Web browser Netscape Navigator. It is currently on eight version, which was released in 1996. • Although there has not been any clear idea of a new version release since then, it does not mean that engineers are not updating the scripting language. • So far, much of the updates are said to be being spearheaded by the coding community that supports the open-source browser Firefox.

15. Livescript evolved into JavaScript as a result of the competition between Netscape and Internet Explorer, which relied on VBScript to extend its interactive capabilities. • By the time Internet Explorer captured a large majority of the browser market, VBScript had already evolved intojscript. • Even if the “j” in jscript only barely resembled the programming language Java, the end-result of Livescript and jscript was JavaScript. • JavaScript was not a standard set by the W3C. Instead, it was adopted as a coding standard by European Computer Manufacturers Union.

16. Guidelines for Writing JavaScript ScriptsBasic Rules of JavaScript Syntax • JavaScript is case-sensitive - write your syntax or code according to the letter cases that they are presented in the reference, as well as according to the way you write your rules, variables, objects, and other syntaxes in your code. For Example: onload is different from onLoad

17. 2. Each time you insert a JavaScript code in your HTML code, always start with the opening <script type=“text/JavaScript”> tag, and then enclose the script with the closing </script> tag.

18. 3. JavaScript can be inserted in the head of your HTML structure, between the <head> and </head> tags. It can also be inserted in the body of your HTML structure. For example: <html> <body> <script type=“text/javascript”> document.write(“<h1> JavaScript </h1>”); </script> </body> </html>

19. 4. Use curly brackets { and } to enclose statements. A sequence of statements inside curly brackets is called a compound and is executed together. 5. JavaScript ignores white space. Spaces, tabs, and new lines are called newlines, and newlines could cause issues in some Web browsers if your next statement starts in a new line.

20. 6. To break a line of code, use backslash (\). This is equivalent to inserting the <br /> tag in your HTML code. 7. To add comments to JavaScript code, type your comments between the <!– and //--> For example: <--This is a comment //--> Adding comments is useful on certain rare occasions when the Web browser that you are using does not recognize JavaScript.

21. About 99.99% of today’s browsers read JavaScript, but depending on the version that you are using, JavaScript may sometimes not be recognized by the browser. • Use comment code <-- and //--> if you are hiding a single comment, and the comment code /* and */ if you are hiding comments with multiple lines.

22. For Example <-- This is a comment with a single line //--> OR /* This is a comment Programmer Name Date Published */

23. Note • JavaScript scripts can be saved as separate files and then inserted as links within your HTML document. • First, save your JavaScript script with a .js file extension using any text formatting application, such as notepad. • Next, use the SRC attribute, and then add in the opening <script> tag.

24. For Example <script language=“JavaScript” SRC=“http://www.website.com/script.js> OR <script type=“text/javascript” src=“script.js”>

25. Structure • STATEMENTS • JavaScript Statements are formed by commands that tell the browser what to do. • For example, the most commonly used command is document.write(“text”), which writers text or a string of text as an output when the command is executed by the Web browser. • For example: <script type=“text/javascript”> { document.write(“<p>Hi</p>”); - STATEMENT document.write(“<p>Hello</p>”); document.write(“<p>Goodbye</p>”); } </script>

26. BLOCKS or COMPOUND STATEMENTS • A block is a series or statements placed within the curly brackets { and } and is executed together by Web browsers. • For example: <script type=“text/javascript”> { document.write(“<p>Hi</p>”); document.write(“<p>Hello</p>”); ---- BLOCK document.write(“<p>Goodbye</p>”); } </script>

27. VARIABLES • Are declared as var statements and accessed anywhere inside the functions where they are declared. However, they can also be declared outside functions as globalvariables. x = a; // A global variable var b = ‘Global Variable’; function f() { var c = ‘local variable’; //local variable d = not local; //Global because keyword var is not used return e; // You can use x here because it is global }

28. BOOLEAN • The Boolean logic has two values: TRUE and FALSE. • Each of these values can be mapped to corresponding numerical values. • And to be complete or to display its role in a JavaScript code, it often works with if() statements • For Example: take step 1 (x == 1) //step 1 is TRUE take step 2 (x == 2) // step 2 is FALSE OR if (x==1 || y==2) { No Step is Taken }

29. OPERATORS • Are used to combine (or concatenate) functions and strings, perform arithmetic, or combine values to other values.

30. <script type=“text/javascript”> var a = “Apples” var b = “Oranges” alert(a+b); var a = 5; var b = 10; alert(a+b); alert(a+’2’); var a = ‘1’; var b = ‘2’; alert(a + b); alert(+a + +b); </script>