slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
DHTML PowerPoint Presentation
Download Presentation
DHTML

Loading in 2 Seconds...

play fullscreen
1 / 40

DHTML - PowerPoint PPT Presentation


  • 135 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'DHTML' - keenan


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

DHTML

17.02.2005

Konstantin Tretjakov

Webmedia AS

slide2
Kava
  • HTML
  • HTTP
  • CSS
  • Javascript
html hypertext markup lang
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.
htm l
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>

html markup
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”

html forms
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>

html forms1
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>

http get
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>…

http post
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>…

file upload
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

cookies
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”

css cascading style sheets
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;
css atribuutid
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.
css syntax teooria
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 { … }

css syntax teooria1
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”

css syntax
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
css atribuutid1
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.
n ide centering
Näide: Centering

<style type=“text/css”>

#content {

width: 500px;

left: 50%;

margin-left: -250px;

}

</style>

<body>

<div id=“content”>

.. .. .. Tekst .. .. ..

</div>

</body>

css a tribuutide valik
CSS atribuutide valik

Google: “CSS2 Reference”

javascript
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”

javascript syntax
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”;

functions
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 );

functions1
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”);

object
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) { … }

}

class es
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”
class es1
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

object prototype
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);

object prototype static fields
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“;

inheritance
Inheritance
  • By constructor:

function Subclass(param1, param2) {

this.inheritFrom = Superclass;

this.inheritFrom(param1);

...

}

  • By prototype

function Subclass(param1, param2) {

...

}

Subclass.prototype = new Superclass;

private members
Private members
  • Privaatsetele väljadele vastavad konstruktorfunktsiooni lokaalsed muutujad:

function MyClass(param1, param2) {

var privateField1 = 2;

function privateMethod(param) {

...;

}

this.publicMethod = function() {

...;

}

}

array string regexp
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”

javascript in html
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”
dom document object model
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(..) *
n ide
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”);

atribuutid
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/

n ide cookies
Näide: Cookies

// Set cookie:

document.cookie =

“cookie1Name=cookie1Value; cookie2Name=cookie2Value”;

// Get cookie:

alert(document.cookie);

n ide xmlhttprequest
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();

}

}

l pps nad
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