1 / 63

D HTML

Lecture. Client-side Programming. D HTML. Dynamic Hypertext Markup Language. What is DHTML?. CSS. Topics for Discussion. Javascript. DOM, Examples. Dynamic HTML. Cascading style sheets, HTML, DOM and Javascript. DHTML. Collection of technologies forming dynamic clients

kimn
Télécharger la présentation

D HTML

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. Lecture Client-side Programming DHTML Dynamic Hypertext Markup Language

  2. What is DHTML? CSS Topics for Discussion Javascript DOM, Examples

  3. Dynamic HTML Cascading style sheets, HTML, DOM and Javascript

  4. DHTML • Collection of technologies forming dynamic clients • HTML (content) • DOM (data structure) • JavaScript (behaviour) • Cascading Style Sheets (presentation)

  5. HTML Element

  6. HTML ELEMENT Standard PROPERTIES Standard METHODS Standard EVENTS This is not the complete listing. Standard COLLECTIONS

  7. CSS

  8. Cascading Style Sheets • Method for specifying properties for HTML elements • default and specific fonts, colours etc. • Allows easy modification of page styles • Style sheet can be modified rather than editing the html • Style sheet can be embedded in HTML or linked via an external file

  9. CSS Structure and Syntax • General syntax: Selector{ property:value; property:value;} • The selector is normally the HTML element you want to style. • Each declaration consists of a property and a value.

  10. CSS Structure & Syntax • CSS declarations always ends with a semicolon, and declaration groups are surrounded by curly brackets • The comment syntax is just like in C-programming: • /* this is a comment */ • You can specify and apply CSS-style formatting to an HTML element either by using an ID selectoror a Class selector.

  11. Incorporating CSS There are three ways of inserting a style sheet: • External style sheet • Internal style sheet • Inline style

  12. 1. Incorporating CSS • External style sheet • An external style sheet is ideal when the style is applied to many pages. • With an external style sheet, you can change the look of an entire Web site by changing one file. • The file should not contain any html tags. • Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

  13. 1. Incorporating CSS • Example: External style sheet mystyle.css • hr {color:sienna;} • p {margin-left:20px;} • body {background-image:url("images/back40.gif");} myHTML.htm • <head><link rel="stylesheet" type="text/css" href="mystyle.css“ ></head>

  14. 2. Incorporating CSS • Internal style sheet • Suitable when a single document has a unique style. • You define internal styles in the head section of an HTML page, by using the <style> tag, like this: • <head> • <style type="text/css"> • hr {color:sienna;} • p {margin-left:20px;} • body {background-image:url("images/back40.gif");} • </style> • </head>

  15. 3. Incorporating CSS • Inline style sheet (Inside an HTML element) • An inline style loses many of the advantages of style sheets by mixing content with presentation. • To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. • The example shows how to change the color and the left margin of a paragraph: <p style="color:rgb(255,0,0);margin-left:20px"> Hello! </p> Avoid using the inline style!

  16. Cascading Order of Styles • Cascading multiple styles (the list is in increasing order of priority) • 1. Browser default • 2. External style sheet • 3. Internal style sheet (in the head section) • 4. Inline style (inside an HTML element) Note: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet! #4 has the highest priority.

  17. 1. Applying CSS to an HTML element • You can apply CSS-style formatting to an HTML element either by using an ID selectoror a Class selector. • ID SELECTOR • The id selector is used to specify a style for a single, unique element. • The id selector uses the id attribute of the HTML element, and is defined with a "#". • The style rule below will be applied to the element with id="para1": • Do NOT start an ID name with a number! It will not work in Mozilla/Firefox. • General Syntax: #ID-name { Property:value; Property:value; /*... and so on.. */ } ID selector application: <h1 id=”ID-name”> Internet programming </h1>

  18. 2a. Applying CSS to an HTML element • You can apply CSS-style formatting to an HTML element either by using an ID selectoror a Class selector. • class SELECTOR • The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. • This allows you to set a particular style for any HTML elements with the same class. • The class selector uses the HTML class attribute, and is defined with a "." • General Syntax: • .class-name • { • Property:value; • Property:value; • /*... and so on.. */ • } class selector application: • <h1 class=”class-name”> Internet programming </h1> • <p class=”class-name”> Dynamic HTML: CSS, HTML, DOM, Javascript </p>

  19. 2b. Applying CSS to an HTML element • You can apply CSS-style formatting to an HTML element either by using an ID selectoror a Class selector. • class SELECTOR • You can also specify that only specific HTML elements should be affected by a • class. • General Syntax: /* this class selector is only applicable to paragraphs*/ p.class-name { Property:value; Property:value; /*... and so on.. */ } class selector application: <p class=”class-name”> Dynamic HTML: CSS, HTML, DOM, Javascript </p>

  20. CSS Properties Index A continuously updated list of CSS properties can be found here: http://meiert.com/en/indices/css-properties/ CSS Text: http://www.w3schools.com/css/css_text.asp CSS Demo: http://www.w3schools.com/css/demo_default.htm CSS Tables: http://www.w3schools.com/css/css_table.asp

  21. CSS Examples • body { • font-family: Georgia, "Times New Roman", Times, serif; • color: blue; • background-color: #FFFF00 } • Similarly any property can be specified and modified • You can define your own selectors • .myStyle {color: blue} • Use with a class=“myStyle” attribute in the element you want to modify You will find more examples in our website

  22. Center a Table with CSS CSS definitions: Centered, Fixed-width table • div.container { • width:98%; • margin:1%; • } • table.table1 { • text-align:center; • margin-left:auto; • margin-right:auto; • width:100px; • } • tr, td { • text-align:left; • } Applying your CSS styles in a table <div class="container"> <table class="table1"> ... </table> </div> http://www.granneman.com/webdev/coding/css/centertables/

  23. Javascript

  24. JavaScipt • A client-side scripting language • Allows building dynamic user interfaces • Dynamic HTML elements • Client side animation • Modify client view based on user input • Ability to check user input before forwarding to the server • NOTE: JavaScipt and Java are different • JavaScript is based on a standard ECMA scripting language, JavaScipt name adopted for marketing reasons (Java was starting to get hot at the time)

  25. JavaScript Basic Concepts • JavaScript is an interpreted language • No need to compile the code • The language is dynamically-typed • No need to declare the type of a variable • The type of a variable can change over time • Need to be careful that the type is not changed accidentally by a programming mistake • Structured Programming constructs • Similar to C • Case-sensitive like C

  26. Incorporating JavaScipt • • JavaScripts can be put in the <body> and in the <head> sections of an HTML page. • • To insert a JavaScript into an HTML page, we use the <script> tag. • • Inside the <script> tag we use the type attribute to define the scripting language. <html><body><script type="text/javascript"> /*...and so on.. */ </script></body></html>

  27. Incorporating JavaScipt • Handling browsers that do not support Javascript <html> <body> <script type="text/javascript"> <!-- document.write("Hello World!"); //--> </script> <noscript> <h2>Your Browser doesn’t support JavaScript! </h2> </noscript> </body> </html> • use HTML comments so that browsers that do not support JavaScript do not display your code

  28. Incorporating JavaScipt into an HTML • Javascript in the <head> section • By default, javascripts in a page is executed automatically when a page loads into the browser. • However, we want to have control over when our scripts will be executed. • Usually, we want them to be called when an eventis triggered. In order to do this, we can write our scripts inside a function.

  29. Incorporating JavaScipt into an HTML • Javascript in the <head> section <html><head><script type="text/javascript"> function message(){ alert("This alert box was invoked by an onload event."); }</script></head><body onload="message()"></body></html> Put your functionsin the <head> section. In this way, they are all written in one place, and they do not interfere with page content.

  30. Incorporating JavaScipt into an HTML • Javascript in the <body> section • <html> • <head> • </head> • <body> • <script type="text/javascript"> • document.write("My first JavaScript"); • </script> • </body> • </html> • If you don't want your script to be placed inside a function, or if your script should write page content, it should be placed in the body section.

  31. Incorporating JavaScipt into an HTML • Javascript in the <head> and <body> sections • You can place an unlimited number of scripts in your document, so you can have scripts in both the <body> and the <head> sections.

  32. External Javascript file • If you want to run the same JavaScript on several pages, without having to write the same script on every page, you can write a JavaScript in an external file. • Save the external JavaScript file with a .jsfile extension. • Note: The external script cannot contain the <script></script> tags! • To use the external script, point to the .jsfile in the "src" attribute of the <script> tag: <html><head><script type="text/javascript" src=“filename.js"></script></head><body></body></html>

  33. JavaScript Programming Constructs • All standard C operators can be used in JavaScript • +, -, *, /, +=, -=, ==, !=, <, >, >=, <=, %, &&, ||, ! • Also can add strings (concatenate) • Str3= Str1+ Str2; • if, if … else, switch… case…, for …, while …, do … while • Can all be used as in C • The semicolon is optional (according to the JavaScript standard). It allows you to write multiple statements in one line.

  34. Variables • JavaScript variables are used to hold values or expressions. • A variable can have a short name, like x, or a more descriptive name, like carName. • Rules for JavaScript variable names: • Variable names are case sensitive (y and Y are two different variables) • Variable names must begin with a letter or the underscore character • Note: Because JavaScript is case-sensitive, variable names are case-sensitive.

  35. Variables •  If you declare a variable within a function, the variable can only be accessed within that function. When you exit the function, the variable is destroyed. These variables are called local variables. You can have local variables with the same name in different functions, because each is recognized only by the function in which it is declared. •  If you declare a variable outside a function, all the functions on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed.

  36. Variables • A variable's value can change during the execution of a script. You can refer to a variable by its name to display or change its value. • You can declare JavaScript variables with the var statement: • var x; • varuserName=”Napoleon”; //use double quotes to assign a text value • If you assign values to variables that have not yet been declared, the variables will automatically be declared. • If you redeclare a JavaScript variable, it will not lose its original value. • var z=100; • var z; • If you add a number and a string, the result will be a string!

  37. Comparison Operators • greeting=(visitor=="PRES")?"Dear President ":"Dear ";

  38. JavaScript Functions • Functions declared as in C • But no data types • E.g. myfun(){ document.write(“myfunction”);} • Functions can take parameters • E.g. myfun(X){ document.write(“Value:”+X);} • Functions can return values • E.g. myfun(X,Y){ return X+Y;}

  39. Popup Boxes • Alert Box • An alert box is often used if you want to make sure information comes through to the user. • When an alert box pops up, the user will have to click "OK" to proceed. • Confirm Box • A confirm box is often used if you want the user to verify or accept something. • When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. • If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false. • Prompt Box • A prompt box is often used if you want the user to input a value before entering a page. • When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. • If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

  40. JavaScript Arrays • Zero-indexed arrays • myArray = new Array(4); • Create and array of 4 elements • myList = new Array(“one”, “two”, “three”); • first = myArray[0]; • myArray.length • Returns length of array (number of elements) • pop() : Removes last element of array • push(“item1”, “item2”) : Adds items to the end of the array • shift(): Removes an item from the front of the array • unshift(“item1”): Adds items to the beginning of the array • concat(): Joins two or more arrays, returning a new array • join(delimiter): Joins the elements of an array into a string using the delimiter

  41. Catching Errors • The try...catch statement allows you to test a block of code for errors. • We would want to test our codes properly before making it publicly accessible. • We can test our codes for any error by using the try and catch clauses. try{//Run some code here}catch(err){//Handle errors here}

  42. Catching Errors • Throw statement • The exception can be a string, integer, Boolean or an object. • Note that throw is written in lowercase letters. Using uppercase letters will generate a JavaScript error! • The throw statement allows you to create an exception. If you use this statement together with the try...catch statement, you can control program flow and generate accurate error messages. Syntax: throw(exception)

  43. Catching Errors • <html> • <body> • <script type="text/javascript"> • var x=prompt("Enter a number between 0 and 10:",""); • try • { • if(x>10){ • throw "Err1"; • } • else if(x<0){ • throw "Err2"; • } • else if(isNaN(x)) { • throw "Err3"; • } • } • catch(er) • { • if(er=="Err1“) { • alert("Error! The value is too high"); • } • if(er=="Err2“) { • alert("Error! The value is too low"); • } • if(er=="Err3“) { • alert("Error! The value is not a number"); • } • } • </script> • </body> • </html>

  44. HTML Document Object Model • The HTML document is available to your javaScript code as an object tree. • The root of this tree is the documentobject. • All the elements in the document are built under this tree • You can refer to each element using its element ID or Name • specify a unique name or id for each element • We shall return to the Document Object Model later on when we look at XML.

  45. Examples HTML DROP-DOWN LIST <select name="drink"> <option value="2.50"> Coffee <option value="2.25"> Hot Cocoa <option value="1.00"> Chai </select> drop-down list: name:drink property:selectedindex property:value

  46. Examples HTML Submit button <input type=submit value="Order">

  47. Examples HTML RADIO BUTTONS <input type="radio" name="sizef" value="1">Tall <input type="radio" name="sizef" value="1.5">Grand <input type="radio" name="sizef" value="2"> Super radio-buttons: name:sizef property:value property:checked property:length

  48. Examples HTML TEXT FIELDS <input type="text" name="label" value=""> <input type=text name="totalf" value="">

  49. Examples <body> <h2> Coffee shop </h2> <p> <form name="orderf" onsubmit="return addup(this);" action=""> <select name="drink"> <option value="2.50">Coffee <option value="2.25">Hot Cocoa <option value="1.00">Chai </select> <br> <input type="radio" name="sizef" value="1">Tall <input type="radio" name="sizef" value="1.5">Grand <input type="radio" name="sizef" value="2"> Super <input type=submit value="Order"> <br> <br><input type="text" name="label" value=""> <input type=text name="totalf" value=""> </form> </body>

  50. javascript <script type="text/javascript"> function addup(f) { var total; vartaxrate = .08 ; vardrinkbase; var opts; opts=f.drink; drinkbase = f.drink[opts.selectedIndex].value; varsizefactor; vari; var totals; vardp; for (i=0;i<f.sizef.length;i++) { if (f.sizef[i].checked) { sizefactor = f.sizef[i].value; } } total = sizefactor * drinkbase; total = total*(1 + taxrate); f.label.value="Total with tax"; f.totalf.value=total; totals = f.totalf.value + "00"; dp = totals.indexOf("."); if (dp<0) { f.totalf.value = "$" + f.totalf.value + ".00"; return false; } else { totals = "$" + totals.substr(0,dp+3); //control the number of decimal places f.totalf.value = totals; return false; } } </script> HTML elements Form: name:orderf drop-down list: name:drink property:selectedindex property:value radio-buttons: name:sizef property:value property:checked property:length text fields: name:label name:totalf property:value • string.indexOf(searchstring, start) • The indexOf() method returns the position of the first occurrence of a specified value in a string. • This method returns -1 if the value to search for never occurs.

More Related