1 / 40

DHTML

DHTML. 17 .02.2005 Konstantin Tretjakov Webmedia AS. Kava. HTML HTTP CSS Javascript. HTML (HyperText Markup Lang.). Algselt mõeldud kui lihtne teksti m ärgistuskeel. Nüüd kasutatakse peamiselt client-side kasutajaliidese kirjeldamiskeelena

keenan
Télécharger la présentation

DHTML

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. DHTML 17.02.2005 Konstantin Tretjakov Webmedia AS

  2. Kava • HTML • HTTP • CSS • Javascript

  3. HTML (HyperText Markup Lang.) • Algselt mõeldud kui lihtne teksti märgistuskeel. • Nüüd kasutatakse peamiselt client-side kasutajaliidese kirjeldamiskeelena • HTML-i poeg, XML – on “üldine” andmete esitamiskeel. • Pika ajaloo tõttu ei ole ta alati kõige mugavam vahend.

  4. HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="style.css" media="screen"> <link rel="home" title="Home" href="prevpage.html"> <title>Page Title</title> <script type="text/javascript"> … </script> <style type="text/css”> … </style> </head> <body> … </body> </html>

  5. HTML Markup <b>Bold</b> <u>Underline</u> <i>Italic</i> <h1>Header1</h1> <h2>Header2</h2> <p>Paragraph</p> <table><thead><tr><td></td></tr></thead></table> <span>Universal inline element</span> <div>Universal block element</div> <hr> <br> <img src=…> <object …> Google: “HTML 4 elements”

  6. HTML Forms <form action="form.html" method="get" onsubmit="alert('ha'); onreset="alert('ho');"> <input type="hidden" name="hidden_input“ value="1"> </input><br> <input type="text" name="text_input" value="31337"> </input><br> <input type="submit" value="Submit"></input> <input type="reset"></input> </form>

  7. HTML Forms <form action="form.html" method="get" onsubmit="alert('ha'); onreset="alert('ho');"> <label for="check">Checkbox</label> <input id="check" type="checkbox" name="check_input" value="on" checked="checked"> </input><br> </form>

  8. HTTP GET <form action=“http://localhost:2000/url" method="get"> <input type=“hidden” name=“h_input” value=“1”></input> <input type=“submit”></input> </form> GET /url?h_input=1 HTTP/1.1Host: localhost:2000 200 OK, here is your pr0nContent-Type: text/html; charset=UTF-8Content-Length: 1200<html>…

  9. HTTP POST <form action=“http://localhost:2000/url" method=“post"> POST /url HTTP/1.1Host: localhost:2000Content-Type: application/x-www-form-urlencodedContent-Length: 9 h_input=1 200 OK, here is your pr0nContent-Type: text/htmlContent-Length: 1200<html>…

  10. File Upload <form action=“http://localhost:2000/url" method=“post“ enctype=“multipart/form-data”> <input type="file" name="file_input"></input> <input type="submit" value="Submit"></input> </form> POST /url HTTP/1.1Host: localhost:2000Content-Type: multipart/form-data; boundary=-----123asdfContent-Length: 1024 =-----123asdfContent-Disposition: form-data; name=“file_input”; filename=“c:\file.txt”Content-Type: text/html<Here goes file contents> =-----123asdf

  11. Cookies GET /url HTTP/1.1Host: www.host.com 200 OK, here is your pr0nSet-Cookie: SessionId=“123”; Path=“/url”; Expires=“… <date> …” … GET /url/other HTTP/1.1Host: www.host.comCookie: SessionId=“123” Google: “RFC 2109”

  12. CSS (Cascading Style Sheets) • Algselt HTML pidi kirjeldama teksti “väljanägemist”. • Nüüd kirjeldatakse HTMLiga teksti “struktuuri”. • Väljanägemist spetsifitseeritakse CSS abil. • Iga tag-iga on seotud CSS atribuutide komplekt, mis kirjeldavad kuidas see tag välja näeb. • Atribuutide näited:color=black; border-width: 1px; font-face: Arial;

  13. CSS Atribuutid • Atribuutid on olemas igal tagil, kui nad on spetsifitseerimata, siis paneb brauser vaikimisi väärtusi. • Tagi CSS atrubuute saab määrata: • Tag-i juures style atribuutiga:<b style=“text-decoration: underline; color: red”>…</b> • või class atribuutiga:<b class=“special”>…</b> • HTML koodis kasutades <style> või <link> tag-e. • Brauseris saab [teoreetiliselt] määrata enda stylesheet-i.

  14. CSS Syntax (teooria) BODY { font-face: Arial, Verdana, sans-serif; } B, U, I { color: red; } UL LI B { text-align: center; } UL > B { … } * { … } B:first-child { … } INPUT[type=“submit”] { … } HR + P { … }

  15. CSS Syntax (teooria) HR + P { … } .centered { text-align: center; } DIV.warning { background-color: #999999; } #checkBox1 { … } A:link, A:hover, A:active, A:focus { … } P:first-letter, P:first-line { … } Praktikas ükski brauser kõiki neid variante ei toeta Google: “CSS Pattern Matching”

  16. CSS Syntax • Import clause: @import “mystyle.css”; @import url(“printstyle.css”) print; @import url(“slidestyle.css”) projection, tv; • !important clause: SPAN.red { color: red; !important } • Cascade order: • Author stylesheet • User stylesheet (v.a. !important) • User agent defaults

  17. CSS Atribuutid • Iga atribuuti jaoks on algselt paika pandud vaikimisi väärtus. Paljudel juhtumitel (kuid mitte alati) on vaikeväärtus “inherit”, s.t. kasutatakse sama väärtus mis ülemtagis: <body style=“font-face: Arial”> <p style=“font-face: inherit”> … • Päritakse tavaliselt “computed value”, mitte “specified value”. • Näiteks specified value võib olla “100%” kuid computed value on “10cm” jne.

  18. CSS Box Model

  19. Näide: Centering … <style type=“text/css”> #content { width: 500px; left: 50%; margin-left: -250px; } </style> … <body> <div id=“content”> .. .. .. Tekst .. .. .. </div> </body> …

  20. CSS atribuutide valik Google: “CSS2 Reference”

  21. Javascript • Javascript (a.k.a. ECMAScript) on lihtne skriptimiskeel, mis on muuhulgas kasutatav koos HTML-iga. • HTML lehes kirjutatud Javascript saab: • Muuta HTML struktuuri • Kasutada brauseri objekte (luua aknaid näiteks) • Kommunikeerida lehel olevate asjadega (näit ActiveX objektidega) Google: “Core Javascript Reference”

  22. Javascript Syntax • Süntaks on Java/C-sarnane: function doWork(param) { for (var i = 1; i < 10; i++) { if (i == param) alert(‘This is ‘ + i); } } • Muutujate tüüpe deklareerida pole vaja, vajalikud tüübikonversioonid toimuvad automaatselt: var a = 2; a = (a + 1.1) + “ two”;

  23. Functions • Funktsioonid on “first-class”: function invoke(f, param) { return f(param); } invoke(alert, “Wassup!”); var a = function(x) { alert(x + “!”); }; invoke(a, “Wassup”); invoke( function(x) { alert(x + “!”); } , “Wassup” ); function adder(x) { return (function(y) { return (x + y); }); } var five = invoke( adder(2), 3 );

  24. Functions • Funktsioonide parameetrite arvu ei pea deklareerima function f() { for (var i = 0; i < arguments.length(); i++) { alert(arguments[i]); } } f(1, 2, 3, 4, 5); • Iga funktsioon on klassi “Function” instants: multiply = new Function(“x”, “y”, “return x * y”);

  25. Object • Object on sisuliselt Map<String → Object> o = new Object(); o.newField = “new field value”; o[“newField”] = “another way to assign fields”; o[“field name with spaces”] = “value”; o.newMethod = function(param) { … }; for (prop in o) { alert(prop + “: ” + o[prop]); } o2 = { field1: “value1”, field2: 2, method1: function(val) { … } }

  26. Classes • Uue klassi loomiseks tuleb luua selle klassi konstruktor-funktsiooni: function Programmer(height, weight) { this.height = height; this.weight = weight; this.doWork = function() { alert(“That’s already on my task list”); return null; } } • “objekti klass” = “objekti konstruktor funktsioon”

  27. Classes • Klassi instantsi loomiseks: var p = new Programmer(180, 180); • Sisuliselt see loob uue Object instantsi, ning kutsub välja vastava konstruktor-funktsiooni loodud objektiga this parameetri rollis. • Iga klass on seega Object alamklass, mille täpne tüüp on määratud konstruktor-funktsiooniga. Konstruktor-funktsioonile saab ligi “constructor” välja kaudu: alert(p.constructor == Programmer); // true

  28. Object.prototype • Klassi Object väli prototype mängib erilist rolli. Sellele väljale lisatud propertyd lisatakse automaatselt kõikide objektidele: var a = function() { … }; Object.prototype.yay = “yoy”; alert(a.yay);

  29. Object.prototype, static fields • Enda loodud klassi “prototype” väli lubab lisada asju kõikidele enda klassi instantsidele. Seega need on ekvivalentsed: • Klassi “staatilistele väljadele” ja meetoditele vastab aga konstruktsioon: function MyClass() { this.field1 = “value“;} function MyClass() {}MyClass.prototype.field1 = “value“; function MyClass() { this.field1 = “value“;}MyClass.staticField = “value“;

  30. Inheritance • By constructor: function Subclass(param1, param2) { this.inheritFrom = Superclass; this.inheritFrom(param1); ... } • By prototype function Subclass(param1, param2) { ... } Subclass.prototype = new Superclass;

  31. Private members • Privaatsetele väljadele vastavad konstruktorfunktsiooni lokaalsed muutujad: function MyClass(param1, param2) { var privateField1 = 2; function privateMethod(param) { ...; } this.publicMethod = function() { ...; } }

  32. Array, String, RegExp var a = new Array(“a”, “b”, “c”); a[a.length] = “d”; var a = [“a”, “b”, “c”, “d”]; var s = new String(“a b c d”); s.split(“ “); //  [“a”, “b”, “c”, “d”] s.replace(“b”, “e”); //  “a e c d” var r = /A (.) C/i; var result = r.exec(s); alert(result[1]) //  “b”

  33. Javascript in HTML • Javascripti saab integreerida HTML-i • <script type=“text/javascript” src=“file.js”></script> • <script type=“text/javascript”> … skript … </script> • <button onclick=“javascript:doWork();”></button> • Brauseris on Javascript-il ligipääs brauseri objektidele: document,window • http://www.dannyg.com/ref/jsquickref.html • Google: “Javascript and browser objects”

  34. DOM (Document Object Model) • DOM on XML-tüüpi puu struktuuride läbimise interfeis. Selle abil saab javascriptiga pääseda ligi suvalisele HTML tagile. • Kogu HTML dokument on tagide puu, iga tag selles puus implementib interfeisi Element: • nodeName, nodeType, prefix, tagName, firstChild, lastChild, previousSibling, nextSibling, parentNode • attributes[], childNodes[], getAttribute(name) • appendChild(elem), removeChild(elem), replaceChild(new, old), insertBefore(elem, ref) • addEventListener(..), removeEventListener(..) *

  35. Näide var newPar = document.createElement('p'); newPar.style.fontWeight = "bold"; newPar.appendChild( document.createTextNode("Text in theparagraph")); document.body.insertBefore(newPar, document.body.firstChild); document.getElementById(“myElement”).style.visibility = “hidden” var inputs = document.getElementsByTagName(“INPUT”);

  36. Atribuutid • Igal elemendil on lisaks DOM atribuutidele on olemas • Üldised HTML spetsiifilised atribuutid (style, className) • Konkreetse elemendi spetsiifilised atribuutid (name, value INPUT elementidel; action, enctype FORM elemendil; src IMG elemendil, jne) • Nende muutmisega saab teha kõike. • http://www.dannyg.com/ref/jsquickref.html http://www.quirksmode.org/

  37. Näide: Cookies // Set cookie: document.cookie = “cookie1Name=cookie1Value; cookie2Name=cookie2Value”; // Get cookie: alert(document.cookie);

  38. Näide: XMLHttpRequest var isWorking = false; var http = new ActiveXObject("Microsoft.XMLHTTP"); // Variant: "Msxml2.XMLHTTP" // Mozillas: new XMLHttpRequest(); function handleResponse() { if (http.readyState == 4) { isWorking = false; alert(http.responseText); } } function doRequest() { if (!isWorking) { http.open("GET", "http://www.google.com", true); // Mozilla all nii lihtsalt ei tööta isWorking = true; http.onreadystatechange = handleResponse; http.send(); } }

  39. Lõppsõnad • Javascripti oskus tuleb kogemusega • Javascriptis tehakse: • Mänge (Google: “Wolfenstein 5k”, “Javascript Chess”, jne) • Vingeid kasutajaliideseid (menüüd ja puha) • WM projektides on javascript • Formide valideerimises • Sisestusväljades: HTML editor, calendar, tooltips • Igasugustes häkkides

  40. Küsimused?

More Related