XML extensible Markup Language. część 6

Wielkość: px
Rozpocząć pokaz od strony:

Download "XML extensible Markup Language. część 6"

Transkrypt

1 XML extensible Markup Language część 6

2 HTML DOM Zgodnie z modelem DOM wszystko w dokumencie HTML jest węzłem (ang. node). Cały dokument jest węzłem dokumentu (ang. document node) Każdy element HTML jest węzłem elementu (ang. element node) Tekst w elementach HTML to węzły tekstu (ang. text node) Każdy atrybut HTML jest węzłem atrybutu (ang. attribute node) Komentarze są węzłami komentarzy (ang. comment nodes)

3 HTML DOM Przykład <head> <title>my title</title> </head> <body> <a href="">my link</a> <h1>my header</h1> <body> Drzewo węzłów

4 HTML DOM Według modelu DOM dokument HTML to zbiór węzłów. Do węzłów mamy dostęp przy pomocy języka JavaScript (w czasie zajęć będziemy wykorzystywać język JavaScript). Model DOM daje nam do dyspozycji właściwości oraz metody. Właściwość węzła to pewna jego cecha np. nazwa. Metoda węzła to operacja która może być wykonana na węźle np. usunięcie węzła.

5 HTML DOM Wybrane właściwości DOM: x.innerhtml zawartość elementu x x.nodename nazwa elementu x x.nodevalue wartość x x.parentnode rodzic elementu x x.childnodes dzieci elementu x x.attributes - atrybuty elementu x gdzie x to węzeł.

6 HTML DOM Wybrane metody DOM: x.getelementbyid(id) - element z określonym id x.getelementsbytagname(name) elementy z określoną nazwą x.appendchild(node) do węzła x dodaj dziecko o nazwie node x.removechild(node) usuń dziecko węzła x o nazwie node gdzie x to nazwa węzła (element HTML).

7 innerhtml Właściwość ta umożliwia nam w prosty sposób modyfikację zawartości dowolnego elementu HTML. Właściwości innerhtml nie należy do specyfikacji HTML DOM, ale jest wspierana przez większość przeglądarek. Właściwość innerhtml jest przydatna w przypadku pobrania bądź zamiany zawartości elementu HTML (w tym i <body>). Może być także użyta do podejrzenia zawartości strony, która została dynamicznie zmodyfikowana.

8 Pobieranie informacji Metoda Właściwość <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt=document.getelementbyid("intro").innerhtml; document.write("<p>tekst: " + txt + "</p>");

9 Pobieranie informacji <body> <a name="wp" href=" 1</a><br/> <a href=" 2</a><br/> <a name="o2" href=" 3</a><br/> <p> <script type="text/javascript"> for(var i=0;i<document.links.length;i++) document.write(document.links[i].innerhtml+"<br/>"); </p>

10 Pobieranie informacji <body> <a name="wp" href=" 1</a><br/> <a href=" 2</a><br/> <a name="o2" href=" 3</a><br/> <p> <script type="text/javascript"> Nazwa document.write(document.links.wp.innerhtml+"<br/>"); document.write(document.links[1].innerhtml+"<br/>"); document.write(document.links.o2.innerhtml); </p>

11 Pobieranie informacji <head> <script> function nodeinfo() { alert(document.getelementbyid('1').innerhtml); } </head> <body onload="nodeinfo()"> <div id="1"> Abcd... </div>

12 Pobieranie informacji <head> <script> function nodeinfo() { alert(document.getelementbyid('1').nodename); } </head> <body onload="nodeinfo()"> <div id="1"> Abcd... </div>

13 Pobieranie informacji <head> <script> function nodeinfo() { alert(document.getelementbyid('1').childnodes[0]. nodevalue); } </head> <body onload="nodeinfo()"> <div id="1"> Abcd... </div>

14 Pobieranie informacji <head> <script> function nodeinfo() { alert(document.getelementbyid('1').parentnode. attributes[0].name); } </head> <body onload="nodeinfo()"> <div id="1"> Abcd... </div>

15 Pobieranie informacji <head> <script> function nodeinfo() { alert(document.getelementbyid('1').parentnode. attributes[0].value); } </head> <body onload="nodeinfo()"> <div id="1"> Abcd... </div>

16 Pobieranie informacji <head> <script> function nodeinfo() { alert(document.getelementbyid('1').parentnode. attributes.length); } </head> <body onload="nodeinfo()" class="a1"> <div id="1"> Abcd... </div>

17 Pobieranie informacji <head> <script> function nodeinfo() { e = document.getelementsbytagname('div'); alert(e[0].innerhtml+" "+e[1].innerhtml); } </head> <body onload="nodeinfo()"> <div>a</div> <div>b</div>

18 Pobieranie informacji <head> <script> function nodeinfo() { e = document.getelementsbytagname('div'); e[0].innerhtml = "C"; alert(e[0].innerhtml+" "+e[1].innerhtml); } </head> <body onload="nodeinfo()"> <div>a</div> <div>b</div>

19 Modyfikacja Wybrane metody DOM: x.appendchild(node) do węzła x dodaj dziecko o nazwie node x.removechild(node) usuń dziecko węzła x o nazwie node x.replacechild(new_node,old_node) na miejsce old_node wstaw new_node. gdzie x to nazwa węzła (element XML).

20 Modyfikacja <head> <script> function dodaj() { newnode = document.createtextnode("a"); document.getelementbyid("1").appendchild(newnode); } </head> <body> <div id="1"></div> <input type="button" value="+node" onclick="dodaj()">

21 Modyfikacja <head> <script> i=1; function dodaj(){ newnode = document.createtextnode(i); i++; document.getelementbyid("1").appendchild(newnode); } </head> <body> <div id="1"></div> <input type="button" value="+node" onclick="dodaj()">

22 Modyfikacja <head> <script> function dodaj(){ newnode1 = document.createtextnode("a"); newnode2 = document.createelement("p"); newnode2.appendchild(newnode1); document.getelementbyid("1").appendchild(newnode2); } </head> <body> <div id="1"></div> <input type="button" value="+node" onclick="dodaj()">

23 Modyfikacja <body> <div id="div1"> <p id="p1">this is a paragraph.</p> <p id="p2">this is another paragraph.</p> </div> <script> var para = document.createelement("p"); var node = document.createtextnode("this is new."); para.appendchild(node); var element = document.getelementbyid("div1"); var child = document.getelementbyid("p1"); element.insertbefore(para,child);

24 Modyfikacja <div id="div1"> <p id="p1">this is a paragraph.</p> <p id="p2">this is another paragraph.</p> </div> <script> var parent = document.getelementbyid("div1"); var child = document.getelementbyid("p1"); parent.removechild(child);

25 Pobieranie informacji Metoda Właściwość <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt=document.getelementbyid("intro").nodename; document.write("<p>tekst: " + txt + "</p>");

26 Pobieranie informacji Metoda Właściwość <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt=document.getelementbyid("intro").parentnode.nodename; document.write("<p>tekst: " + txt + "</p>");

27 Pobieranie informacji Metoda Właściwości <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt=document.getelementbyid("intro").childnodes[0]. nodevalue; document.write("<p>tekst: " + txt + "</p>");

28 Dostęp do węzłów Dostęp do węzłów można uzyskać na trzy sposoby: przez użycie metody getelementbyid() przez użycie metody getelementsbytagname() przez nawigację po drzewie węzłów wykorzystując zależności między węzłami

29 getelementbyid Metoda getelementbyid zwraca element z określonym ID. Składnia: node.getelementbyid("id")

30 getelementbyid <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt=document.getelementbyid("intro").innerhtml; document.write("<p>tekst: " + txt + "</p>");

31 getelementbyid <head> <script type="text/javascript"> //patrz następny slajd </head> <body> <div id="wr1" style="position:absolute;left:10px;top:100px;visibility: visible;"> <img width="200" id="rys1" src="auto.jpg" onmouseover="move()"> </div> <input type="button" value="move" onclick="move()">

32 getelementbyid Java Script: function move() { var selector =document.getelementbyid('wr1').style; var oldleft = parseint(selector.left); var newleft = (oldleft + 20); selector.left = newleft + "px"; }

33 getelementbyid <head> <script type="text/javascript"> //patrz dwa slajdy dalej </head> <body> <div id="wr1" style="position:absolute;left:10px;top:200px;visibility:hidden;"> <img width="200" id="rys1" src="sanfra.jpg" onclick="change('wr1')"> </div> <div id="wr2" style="position:absolute;left:280px;top:170px;visibility:hidden;"> <img width="200" id="rys1" src="auto.jpg" onclick="change('wr2')"> </div> //patrz następny slajd

34 getelementbyid <div style="position:absolute;top:55px;"> <div style="position:absolute;left:20px;"> <img width="80" id="r1" src="sanfra.jpg"><br> <form> <input style="position:absolute;left:30px;" type="checkbox" name="wr1" onclick="show(this.form.wr1)"/> </form> </div> <div style="position:absolute;left:160px;"> <img width="80" id="r2" src="auto.jpg"><br> <form> <input style="position:absolute;left:30px;" type="checkbox" name="wr2" onclick="show(this.form.wr2)"/> </form> </div> </div>

35 getelementbyid Java Script: function show(f) { if (f.checked) document.getelementbyid(f.name).style. visibility="visible"; else document.getelementbyid(f.name).style. visibility="hidden"; }

36 getelementbyid Rezultat:

37 getelementbyid Rezultat:

38 getelementbyid Rezultat:

39 getelementbytagname Metoda getelementsbytagname zwraca listę elementów (ang. nodelist) o określonej nazwie. Składnia: node.getelementsbytagname("name") Do poszczególnych elementów listy odwołujemy się za pomocą indeksu przy czym pierwszy element posiada indeks = 0.

40 getelementbytagname <body> <p>hello World!</p> <script type="text/javascript"> x=document.getelementsbytagname("p"); document.write("tekst: " + x[0].innerhtml);

41 getelementbytagname <body> <p>hello World!</p> <div id="main"> <p>niedziela</p> </div> <script type="text/javascript"> x=document.getelementbyid("main").getelementsbytagn ame("p"); document.write("pierwszy akapit w div: " + x[0].innerhtml);

42 getelementbytagname <body> <p>hello World!</p> <p>niedziela</p> <script type="text/javascript"> x=document.getelementsbytagname("p"); document.write("tekst: "+x[0].innerhtml + "<br>"); document.write("tekst: "+x[1].innerhtml);

43 getelementbytagname <body> <p>hello World!</p> <p>model DOM</p> <p>wlasciwosc length</p> <script type="text/javascript"> x=document.getelementsbytagname("p"); for (i=0;i<x.length;i++) { document.write(x[i].innerhtml); document.write("<br/>"); }

44 Przechodzenie drzewa węzłów Następujące właściwości: parentnode węzeł będący rodzicem firstchild pierwsze dziecko lastchild ostatnie dziecko umożliwiają przechodzenie drzewa węzłów.

45 Przechodzenie drzewa węzłów parentnode elementów p i div firstchild elementu body <body> <p>hello World!</p> <div> <p>model DOM!</p> <p>zaleznosci miedzy wezlami</p> </div> lastchild elementu body i parentnode elementów p

46 Przechodzenie drzewa węzłów <body> <p id="intro">hello World!</p> <script type="text/javascript"> x=document.getelementbyid("intro"); document.write(x.firstchild.nodevalue);

47 Przechodzenie drzewa węzłów Istnieją dwie szczególne właściwości dokumentu: document.documentelement węzeł będący rodzicem document.body dostęp do znacznika body

48 Przechodzenie drzewa węzłów <body> <p>hello World!</p> <div> <p>model DOM</p> </div> <script type="text/javascript"> x=document.body; alert(x.innerhtml);

49 Właściwości węzłów W modelu DOM każdy węzeł jest obiektem. Obiekty posiadają właściwości i metody umożliwiające manipulowanie obiektami. Ważne właściwości węzłów: nodename nodevalue nodetype

50 nodename Właściwość określająca nazwę węzła. nodename jest typu read-only nodename dowolnego węzła będącego znacznikiem to nazwa znacznika nodename dowolnego węzła będącego atrybutem to nazwa atrybutu nodename dowolnego węzła będącego tekstem (tekst) to #tekst nodename węzła dokumentu to #dokument

51 nodevalue Właściwość określająca wartość węzła. nodevalue dla dowolnego węzła będącego znacznikiem brak nodevalue dowolnego węzła będącego atrybutem to wartość atrybutu nodevalue dowolnego węzła będącego tekstem to sam tekst

52 nodevalue <body> <p id="intro">hello World!</p> <script type="text/javascript"> x=document.getelementbyid("intro"); document.write(x.firstchild.nodevalue);

53 nodetype Właściwość zwraca typ węzła. Typ elementu Typ węzła Element 1 Atrybut 2 Tekst 3 Komentarz 8 document 9

54 Obiekt XML DOM Przykład: if(window.xmlhttprequest) { xhttp=new XMLHttpRequest(); } else // IE 5/6 { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("get","books.xml",false); xhttp.send(); xmldoc=xhttp.responsexml;

55 Obiekt XML DOM Przykład: if (window.domparser) { parser=new DOMParser(); xmldoc=parser.parsefromstring(text,"text/xml"); } else // Internet Explorer { xmldoc=new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async=false; xmldoc.loadxml(text); }

56 Obiekt XML DOM Przykład: function loadxmldoc(dname) { if (window.xmlhttprequest) { xhttp=new XMLHttpRequest(); } else { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("get",dname,false); xhttp.send(); return xhttp.responsexml; }

57 Obiekt XML DOM Przykład: function loadxmlstring(txt) { if (window.domparser) { parser=new DOMParser(); xmldoc=parser.parsefromstring(txt,"text/xml"); } else // Internet Explorer { xmldoc=new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async=false; xmldoc.loadxml(txt); } return xmldoc; }

58 XML DOM Znamy już następujące właściwości DOM: x.nodename nazwa elementu x x.nodevalue wartość x x.parentnode rodzic elementu x x.childnodes dzieci elementu x x.attributes - atrybuty x gdzie x to nazwa węzła (element XML).

59 Dokument XML <?xml version="1.0"?> <?xml-stylesheet type="application/xml"?> <people> <person born="1912" died="1954"> <name> <first_name>alan</first_name> <last_name>turing</last_name> </name> <profession>computer scientist</profession> <profession>mathematician</profession> <publications>45</publications> </person> <person born="1918" died="1988"> <name> <first_name>richard</first_name> <last_name>feynman</last_name> </name> <profession>physicist</profession> <publications>120</publications> </person> </people>

60 nodename <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("profession"); document.write(x[1].nodename);

61 nodevalue <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("profession"); document.write(x[1].nodevalue);

62 parentnode <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("profession"); document.write(x[1].parentnode.nodename);

63 childnodes <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("person"); document.write(x[0].childnodes[3].nodename);

64 attributes <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("person"); document.write(x[0].attributes[0].nodename);

65 attributes <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("person"); document.write(x[0].attributes[0].nodevalue);

66 Właściwość nodetype

67 nodetype Typ elementu <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("profession"); document.write(x[1].nodetype); Typ Element 1 Atrybut 2 Tekst 3 Komentarz 8 Dokument 9

68 nodetype Typ elementu <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); Tekst Komentarz Dokument x=xmldoc.getelementsbytagname("profession"); document.write(x[1].parentnode.parentnode.parentnod e.nodetype); Typ Element 1 Atrybut 2

69 nodetype Typ elementu <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("person"); document.write(x[0].attributes[0].nodetype); Typ Element 1 Atrybut 2 Tekst 3 Komentarz 8 Dokument 9

70 XML DOM Wybrane metody DOM: x.getelementsbytagname(name) element z określoną nazwą x.appendchild(node) do węzła x dodaj dziecko o nazwie node x.removechild(node) usuń dziecko węzła x o nazwie node x.replacechild(new_node,old_node) na miejsce old_node wstaw new_node. gdzie x to nazwa węzła (element XML).

71 appendchild <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); new_elem=xmldoc.createelement("hobby"); x=xmldoc.getelementsbytagname("person")[0]; x.appendchild(new_elem); document.write(x.getelementsbytagname("hobby")[0].node Name);

72 Dokument XML <?xml version="1.0"?> <?xml-stylesheet type="application/xml"?> <people> <person born="1912" died="1954"> <name> <first_name>alan</first_name> <last_name>turing</last_name> </name> <profession>computer scientist</profession> <profession>mathematician</profession> <publications>45</publications> </person> <hobby></hobby> <person born="1918" died="1988"> <name> <first_name>richard</first_name> <last_name>feynman</last_name> </name> <profession>physicist</profession> <publications>120</publications> </person> </people>

73 romovechild <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); y=xmldoc.getelementsbytagname("person")[0]; x=xmldoc.documentelement.removechild(y); document.write("removed node: " + x.nodename);

74 Dokument XML <?xml version="1.0"?> <?xml-stylesheet type="application/xml"?> <people> <person born="1912" died="1954"> <name> <first_name>alan</first_name> <last_name>turing</last_name> </name> <profession>computer scientist</profession> <profession>mathematician</profession> <publications>45</publications> </person> <person born="1918" died="1988"> <name> <first_name>richard</first_name> <last_name>feynman</last_name> </name> <profession>physicist</profession> <publications>120</publications> </person> </people>

75 replacechild <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.documentelement; new_node=xmldoc.createelement("hobby"); y=xmldoc.getelementsbytagname("profession")[0] x.replacechild(new_node,y);

76 Dokument XML?xml version="1.0"?>?xml-stylesheet type="application/xml"?> <people> <person born="1912" died="1954"> <name> <first_name>alan</first_name> <last_name>turing</last_name> </name> <profession>computer scientist</profession> <profession>mathematician</profession> <publications>45</publications> </person> <person born="1918" died="1988"> <name> <first_name>richard</first_name> <last_name>feynman</last_name> </name> <profession>physicist</profession> <publications>120</publications> </person> </people> <hobby></hobby>

77 Przykład <head> <script type="text/javascript" src="loadxmldoc.js"/> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("profession"); for (i=0;i<x.length;i++){ document.write(x[i].childnodes[0].nodevalue); document.write("<br/>"); }

78 Przykład <head> <script type="text/javascript" src="loadxmldoc.js"/> </head><body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.documentelement.childnodes; for (i=0;i<x.length;i++) { if (x[i].nodetype==1) { document.write(x[i].nodename); document.write("<br />"); } }

79 Przykład <head> <script type="text/javascript" src="loadxmldoc.js"/> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("person")[0]. childnodes; for (i=0;i<x.length;i++) { document.write(x[i].nodename); document.write("<br />"); }

80 Przykład Kod strony WWW: <head> <script type="text/javascript" src="loadxmldoc.js"/> </head><body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("person")[0].firstchild; x=x.nextsibling; document.write(x.nodename + "<br/>"); x=x.nextsibling; document.write(x.nodename + "<br/>"); x=x.nextsibling; document.write(x.nodename + "<br/>"); x=x.nextsibling; document.write(x.nodename + "<br/>");

81 Kompletny opis obiektów JavaScript i XML DOM można znaleźć na stronie:

XML extensible Markup Language 6

XML extensible Markup Language 6 XML extensible Markup Language 6 XML DOM XML DOM zawiera metody (funkcje) pozwalające przeglądać drzewo XML: pobierać, wstawiać oraz usuwać jego węzły. Aby móc manipulować dokumentem XML musi on być załadowany

Bardziej szczegółowo

XML extensible Markup Language. część 6

XML extensible Markup Language. część 6 XML extensible Markup Language część 6 Obiekt XML DOM Przykład: if(window.xmlhttprequest) { xhttp=new XMLHttpRequest(); } else // IE 5/6 { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("get","books.xml",false);

Bardziej szczegółowo

XML extensible Markup Language. część 5

XML extensible Markup Language. część 5 XML extensible Markup Language część 5 JavaScript Co to jest JavaScript? JavaScript był zaprojektowany w celu dodania interaktywności do stron HTML JavaScript jest językiem skryptowym JavaScript jest zwykle

Bardziej szczegółowo

WYKŁAD 3 XML DOM XML DOCUMENT OBJECT MODEL CZĘŚĆ 1

WYKŁAD 3 XML DOM XML DOCUMENT OBJECT MODEL CZĘŚĆ 1 WYKŁAD 3 XML DOM XML DOCUMENT OBJECT MODEL CZĘŚĆ 1 XML DOM (ang. XML Document Object Model Obiektowy Model Dokumentu XML) Inaczej drzewo DOM to hierarchiczny, obiektowy model dokumentu XML. DOM to platforma

Bardziej szczegółowo

HTML DOM, XHTML cel, charakterystyka

HTML DOM, XHTML cel, charakterystyka HTML DOM, XHTML cel, charakterystyka Mariusz Kacała Łukasz Przywarty Grzegorz Trawiński HTML DOM XHTML Ramowy plan prezentacji Wstęp HTML DOM - Założenia - Model i struktura - Właściwości - Metody i zastosowania

Bardziej szczegółowo

XML extensible Markup Language. część 5

XML extensible Markup Language. część 5 XML extensible Markup Language część 5 XML ważne zastosowanie Jak często pracujemy z plikami XML? Wróćmy jeszcze do wykładu poprzedniego. A dokładnie do pliku zawierającego ten wykład. xml_2017_wyklad_4.pptx

Bardziej szczegółowo

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 6 JavaScript w przeglądarce Agenda Skrypty na stronie internetowej Model DOM AJAX Skrypty na stronie

Bardziej szczegółowo

Kurs języka Python Wykład 8. Przetwarzanie tekstu Wyrażenia regularne Biblioteka urllib Parsowanie html'a XML

Kurs języka Python Wykład 8. Przetwarzanie tekstu Wyrażenia regularne Biblioteka urllib Parsowanie html'a XML Kurs języka Python Wykład 8. Przetwarzanie tekstu Wyrażenia regularne Biblioteka urllib Parsowanie html'a XML Wyrażenia regularne c:\> dir *.exe $ rm *.tmp Wyrażenia regularne 'alamakota' '(hop!)*' { '',

Bardziej szczegółowo

Podstawy programowania w języku JavaScript

Podstawy programowania w języku JavaScript Podstawy programowania w języku JavaScript Część trzecia DOM Document Object Model Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie zawiera skrót treści

Bardziej szczegółowo

Ajax. Æwiczenia IDZ DO KATALOG KSI EK TWÓJ KOSZYK CENNIK I INFORMACJE CZYTELNIA PRZYK ADOWY ROZDZIA. SPIS TREœCI KATALOG ONLINE

Ajax. Æwiczenia IDZ DO KATALOG KSI EK TWÓJ KOSZYK CENNIK I INFORMACJE CZYTELNIA PRZYK ADOWY ROZDZIA. SPIS TREœCI KATALOG ONLINE IDZ DO PRZYK ADOWY ROZDZIA SPIS TREœCI KATALOG KSI EK KATALOG ONLINE Ajax. Æwiczenia Autor: Marcin Lis ISBN: 83-246-0686-6 Format: A5, stron: 168 Przyk³ady na ftp: 32 kb ZAMÓW DRUKOWANY KATALOG TWÓJ KOSZYK

Bardziej szczegółowo

Przetwarzanie dokumentów XML i zaawansowane techniki WWW Wykład 05

Przetwarzanie dokumentów XML i zaawansowane techniki WWW Wykład 05 Plan Przetwarzanie dokumentów XML i zaawansowane techniki WWW Wykład 05 T. Romańczukiewicz Jagiellonian University 2009/2010 Plan Plan 1 DOM 2 DOM w innych językach 3 Podsumowanie Plan DOM DOM w innych

Bardziej szczegółowo

Rys.2.1. Drzewo modelu DOM [1]

Rys.2.1. Drzewo modelu DOM [1] 1. CEL ĆWICZENIA Celem ćwiczenia jest przedstawienie możliwości wykorzystania języka JavaScript do tworzenia interaktywnych aplikacji działających po stronie klienta. 2. MATERIAŁ NAUCZANIA 2.1. DOM model

Bardziej szczegółowo

Pozycjonowanie i poruszanie warstw

Pozycjonowanie i poruszanie warstw Pozycja warstwy na ekranie może być zmieniana poprzez modyfikację właściwości top i left obiektu style. Odpowiadają one za położenie lewego górnego rogu; pierwsza za współrzędną x, druga y. Umiejscowienie

Bardziej szczegółowo

XML extensible Markup Language. część 1

XML extensible Markup Language. część 1 XML extensible Markup Language część 1 Historia Czym jest język XML? Język XML to uniwersalny język formalny przeznaczony do reprezentowania różnych danych w ustrukturalizowany sposób. XML jest metajęzykiem

Bardziej szczegółowo

Zaawansowane aplikacje internetowe

Zaawansowane aplikacje internetowe Zaawansowane aplikacje internetowe AJAX 1 Celem tego laboratorium jest pokazanie moŝliwości technologii AJAX. W ramach ćwiczeń zostanie zbudowana prosta aplikacja, przechwytująca kliknięcia uŝytkownika

Bardziej szczegółowo

Tablica zawierająca odniesienia do znajdujących się w dokumencie obiektów typu Anchor.

Tablica zawierająca odniesienia do znajdujących się w dokumencie obiektów typu Anchor. Obiekt document służy do reprezentacji wczytanego do przeglądarki dokumentu HTML oraz zawiera szereg właściwości i metod pozwalających na jego modyfikację. Poprzez ten obiekt można otrzymać dostęp praktycznie

Bardziej szczegółowo

XML extensible Markup Language 3

XML extensible Markup Language 3 XML extensible Markup Language 3 XSL transformations (XSLT) XSLT (ang. extensible Stylesheet Language Transformations) jest opartym na XML językiem transformacji dokumentów XML XSLT umożliwia przetłumaczenie

Bardziej szczegółowo

Zajęcia 4 - Wprowadzenie do Javascript

Zajęcia 4 - Wprowadzenie do Javascript Zajęcia 4 - Wprowadzenie do Javascript Co to jest Javascript Javascript jest językiem skryptowym pozwalającym na dołączanie dodatkowej funkcjonalności do stron WWW. Jest ona najczęściej związana z modyfikacją

Bardziej szczegółowo

Style CSS definicja i wykorzystanie klasy

Style CSS definicja i wykorzystanie klasy ICT Wykład 2 Style CSS definicja i wykorzystanie klasy Plik style.css p {font-size: 44px;}.czerwony {background-color:#ff0000;} Plik index.html Indeks: elementy

Bardziej szczegółowo

Drzewa DOM. Maciej Zakrzewicz. mzakrz@cs.put.poznan.pl http://www.cs.put.poznan.pl/~mzakrz/

Drzewa DOM. Maciej Zakrzewicz. mzakrz@cs.put.poznan.pl http://www.cs.put.poznan.pl/~mzakrz/ Drzewa DOM Maciej Zakrzewicz mzakrz@cs.put.poznan.pl http://www.cs.put.poznan.pl/~mzakrz/ Document Object Model (DOM) Document Object Model jest standardem modelowania dokumentów XML przy użyciu struktury

Bardziej szczegółowo

Podstawy programowania w języku JavaScript

Podstawy programowania w języku JavaScript Podstawy programowania w języku JavaScript Część piąta AJAX Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.siminskionline.pl Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych

Bardziej szczegółowo

TECHNOLOGIE SIECI WEB

TECHNOLOGIE SIECI WEB TECHNOLOGIE SIECI WEB Prowadzący: dr inż. Jan Prokop, e-mail: jprokop@prz.edu.pl, Politechnika Rzeszowska, Wydział Elektrotechniki i Informatyki LABORATORIUM ĆWICZENIE nr 8 Temat: Podstawy technologii

Bardziej szczegółowo

Aplikacje internetowe laboratorium JavaScript

Aplikacje internetowe laboratorium JavaScript Celem ćwiczenia jest przygotowanie formularza HTML z wykorzystaniem języka. Formularz ten będzie sprawdzany pod względem zawartości przed wysłaniem do serwera. Formularz będzie miał charakter dynamiczny,

Bardziej szczegółowo

Wykład 03 JavaScript. Michał Drabik

Wykład 03 JavaScript. Michał Drabik Wykład 03 JavaScript Michał Drabik Język programowania wykorzystywany na stronach internetowych głównie w celu umożliwienia interakcji z użytkownikiem. Kod JavaScript może być umieszczany w kodzie XHTML

Bardziej szczegółowo

DOM (Document Object Model)

DOM (Document Object Model) DOM (Document Object Model) Czym jest DOM? Platforma, która pozwala skryptom na dynamiczny dostęp do zawartości strony i jej aktualizację. Elementy można dodawać, zmieniać lub usuwać. Specyfikacje Poziomy

Bardziej szczegółowo

Aplikacje internetowe - laboratorium

Aplikacje internetowe - laboratorium Aplikacje internetowe - laboratorium Język JavaScript Celem ćwiczenia jest przygotowanie formularza HTML z wykorzystaniem języka JavaScript. Formularz ten będzie sprawdzany pod względem zawartości przed

Bardziej szczegółowo

JavaScript obiektowość

JavaScript obiektowość JavaScript obiektowość WWW 27 kwietnia 2017 Od funkcyjności do obiektowości Wyrażenie regularne DOM Zdarzenia Obiekty w JS Intuicja Obiekty nie maja przypisanych klas, natomiast maja przypisane konstruktory.

Bardziej szczegółowo

Aplikacje internetowe laboratorium JavaScript

Aplikacje internetowe laboratorium JavaScript Celem ćwiczenia jest przygotowanie formularza HTML z wykorzystaniem języka. Formularz ten będzie sprawdzany pod względem zawartości przed wysłaniem do serwera. Formularz będzie miał charakter dynamiczny,

Bardziej szczegółowo

XPath XML Path Language. XPath. XSLT część 1. XPath data model. Wyrażenia XPath. Location paths. Osie (axes)

XPath XML Path Language. XPath. XSLT część 1. XPath data model. Wyrażenia XPath. Location paths. Osie (axes) XPath XML Path Language XPath. XSLT część 1. Problem: jednoznaczne adresowanie fragmentów struktury dokumentu XML. Rozwiązanie: drzewiasty model struktury dokumentu, normalizacja zawartości dokumentu (ten

Bardziej szczegółowo

JAVAScript tablice, przekazanie danych do funkcji, obiekty Date i window

JAVAScript tablice, przekazanie danych do funkcji, obiekty Date i window Programowanie obiektowe ćw.2 JAVAScript tablice, przekazanie danych do funkcji, obiekty Date i window Tablice w JavaScript Przykład zastosowania tablicy dla przekazania rezultatów funkcji do miejsca wywołania

Bardziej szczegółowo

Czym jest AJAX. AJAX wprowadzenie. Obiekt XMLHttpRequest (XHR) Niezbędne narzędzia. Standardowy XHR. XHR z obsługą baz danych

Czym jest AJAX. AJAX wprowadzenie. Obiekt XMLHttpRequest (XHR) Niezbędne narzędzia. Standardowy XHR. XHR z obsługą baz danych Czym jest AJAX AJAX wprowadzenie Beata Pańczyk na podstawie: 1. Lis Marcin, Ajax, Helion, 2007 2. Hadlock Kris, Ajax dla twórców aplikacji internetowych, Helion, 2007 AJAX (Asynchronous JavaScript and

Bardziej szczegółowo

Aplikacje internetowe

Aplikacje internetowe Aplikacje internetowe Podstawy programowania w języku JavaScript Roman Simiński roman.siminski@us.edu.pl www.siminskionline.pl Tworzenie prostych programów w środowisku przeglądarki W jaki sposób umieszczany

Bardziej szczegółowo

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński PROGRAMOWANIE HTML W składni języka HTML wykorzystuje się charakterystyczne znaczniki. Każdy z nich zaczyna się i kończy ostrokątnym nawiasem a pomiędzy nimi znajduje się wyrażenie html. Rozróżniamy znaczniki

Bardziej szczegółowo

Podstawy (X)HTML i CSS

Podstawy (X)HTML i CSS Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z

Bardziej szczegółowo

Funkcje i instrukcje języka JavaScript

Funkcje i instrukcje języka JavaScript Funkcje i instrukcje języka JavaScript 1. Cele lekcji a) Wiadomości Uczeń : zna operatory i typy danych języka JavaScript, zna konstrukcję definicji funkcji, zna pętlę If i For, Do i While oraz podaje

Bardziej szczegółowo

XML Path Language (XPath)

XML Path Language (XPath) XML Path Language (XPath) 1 Cel adresowanie elementów /częś ci dokumentu XML składnia podobna do URI wyszukiwanie elementów bądź grup elementów dokument jako drzewo typy węzłów: element, attribute, text

Bardziej szczegółowo

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 7 jquery Agenda Czym jest jquery? Podstawowe zasady jquery Selektory jquery Model DOM i jquery Zdarzenia

Bardziej szczegółowo

Materiały dla studentów Informatyki WSZiB w Krakowie

Materiały dla studentów Informatyki WSZiB w Krakowie Projektowanie i implementacja aplikacji internetowych Dr inż. Stanisław Polak 1 Akademia Górniczo - Hutnicza w Krakowie, Katedra Informatyki 2 Wyższa Szkoła Zarządzania i Bankowości w Krakowie http://artemis.wszib.edu.pl/~polak/

Bardziej szczegółowo

Podstawy JavaScript ćwiczenia

Podstawy JavaScript ćwiczenia Podstawy JavaScript ćwiczenia Kontekst:

Bardziej szczegółowo

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. Reformuje on znane zasady języka HTML 4 w taki sposób, aby były zgodne z XML (HTML przetłumaczony na XML).

Bardziej szczegółowo

Programowanie obiektowe. Wykład 3

Programowanie obiektowe. Wykład 3 Programowanie obiektowe Wykład 3 DOM model dokumentu HTML Dokument HTML składa się z obiektów (standardowych i utworzonych przez użytkownika). Głównym obiektem jest document, posiada strukturę drzewiastą

Bardziej szczegółowo

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language

Bardziej szczegółowo

SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania. Wykład 2. dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania,

SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania. Wykład 2. dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania Wykład 2 1 SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania Przekierowania 2 Przekierowanie za pomocą skryptu Przykład

Bardziej szczegółowo

JavaScript - wykład 4. Zdarzenia i formularze. Obsługa zdarzeń. Zdarzenia. Mysz. Logiczne. Klawiatura. Beata Pańczyk

JavaScript - wykład 4. Zdarzenia i formularze. Obsługa zdarzeń. Zdarzenia. Mysz. Logiczne. Klawiatura. Beata Pańczyk Obsługa zdarzeń JavaScript - wykład 4 Zdarzenia i formularze Beata Pańczyk zdarzenia - wszystko co zachodzi w związku z obiektami JavaScript (np. window) i elementami XHTML przeglądarka moŝe wywołać funkcję

Bardziej szczegółowo

Ilość cyfr liczby naturalnej

Ilość cyfr liczby naturalnej Ilość cyfr liczby naturalnej Użytkownik wprowadza liczbę naturalną n. Podaj algorytm znajdowania ilości cyfr liczby n. (Np.: po wprowadzeniu liczby 2453, jako wynik powinna zostać podana liczba 4). Specyfikacja

Bardziej szczegółowo

TECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty

TECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty 1. Co to jest funkcja? Funkcja jest oddzielnym blokiem kodu, który może być wielokrotnie wykonywany w danym programie, poprzez jej wielokrotne wywoływanie. Do funkcji przekazujemy przeważnie jakieś argumenty,

Bardziej szczegółowo

WYKŁAD 5 BIBLIOTEKA JQUERY CZĘŚĆ 1

WYKŁAD 5 BIBLIOTEKA JQUERY CZĘŚĆ 1 WYKŁAD 5 BIBLIOTEKA JQUERY CZĘŚĆ 1 CZYM JEST JQUERY? Biblioteka napisana w języku JavaScript, oparta na zasadzie write less, do more. Celem jej powstania było uproszczenie stosowania JavaScript na stronach.

Bardziej szczegółowo

Zdarzenia Zdarzenia onload i onunload

Zdarzenia Zdarzenia onload i onunload Zdarzenia Zdarzenia onload i onunload Ćwiczenie 1. Rysunek 1. Okno powitalne wykorzystujące zdarzenie onload Na stronie mogą zachodzić różne zdarzenia, np. użytkownik kliknie myszą lub zacznie wprowadzać

Bardziej szczegółowo

Zaawansowane aplikacje WWW - laboratorium

Zaawansowane aplikacje WWW - laboratorium Zaawansowane aplikacje WWW - laboratorium Przetwarzanie XML (część 2) Celem ćwiczenia jest przygotowanie aplikacji, która umożliwi odczyt i przetwarzanie pliku z zawartością XML. Aplikacja, napisana w

Bardziej szczegółowo

Podstawy programowania w języku JavaScript

Podstawy programowania w języku JavaScript Podstawy programowania w języku JavaScript Część piąta BootStrap Autorzy Roman Simiński Tomasz Xięski Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych materiałów nie zastąpi uważnego w

Bardziej szczegółowo

Extensible Markup Language (XML) Wrocław, Java - technologie zaawansowane

Extensible Markup Language (XML) Wrocław, Java - technologie zaawansowane Extensible Markup Language (XML) Wrocław, 15.03.2019 - Java - technologie zaawansowane Wprowadzenie XML jest językiem znaczników (ang. markup language) używanym do definiowania zbioru zasad rozmieszczenia

Bardziej szczegółowo

XML extensible Markup Language 1

XML extensible Markup Language 1 XML extensible Markup Language 1 Czym jest język XML? Język XML to uniwersalny język formalny przeznaczony do reprezentowania różnych danych w ustrukturalizowany sposób. XML jest metajęzykiem tzn. przy

Bardziej szczegółowo

Przetwarzanie dokumentów XML i zaawansowane techniki WWW Wykład 03

Przetwarzanie dokumentów XML i zaawansowane techniki WWW Wykład 03 Plan Przetwarzanie dokumentów XML i zaawansowane techniki WWW Wykład 03 T. Romańczukiewicz Jagiellonian University 2009/2010 Plan Plan 1 XPath 2 XQuery 3 Podsumowanie Plan XPath XQuery Podsumowanie Wstęp

Bardziej szczegółowo

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

Krótki kurs JavaScript

Krótki kurs JavaScript Krótki kurs JavaScript Java Script jest językiem wbudowanym w przeglądarkę. Gdy ma się podstawy nabyte w innych językach programowania jest dość łatwy do opanowania. JavaScript jest stosowany do powiększania

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 10

Tworzenie Stron Internetowych. odcinek 10 Tworzenie Stron Internetowych odcinek 10 JavaScript JavaScript (ECMAScript) skryptowy język programowania powszechnie używany w Internecie. Skrypty JS dodają do stron www interaktywność i funkcjonalności,

Bardziej szczegółowo

HTML. Tim Berners-Lee

HTML. Tim Berners-Lee HTML5 - początek HTML 1991 pojawia się pierwsza publicznie dostępna publikacja HTML Tags. 1993 - publikacja pierwszej propozycji specyfikacji języka"hypertext Markup Language (HTML)" Internet-Draft. 1995

Bardziej szczegółowo

Przykład integracji kalkulatora mbank RATY na platformie IAI

Przykład integracji kalkulatora mbank RATY na platformie IAI Przykład integracji kalkulatora mbank RATY na platformie IAI 1. Moderacja - > Dodatki HTML i JavaScript 1.1 Klikamy na przycisk nowy dodatek Wpisujemy w pole Tytuł dodatku nazwę CSS_mRaty. Następnie ustawiamy

Bardziej szczegółowo

Bazy Danych i Usługi Sieciowe

Bazy Danych i Usługi Sieciowe Bazy Danych i Usługi Sieciowe Ćwiczenia X Paweł Daniluk Wydział Fizyki Jesień 2012 P. Daniluk (Wydział Fizyki) BDiUS ćw. X Jesień 2012 1 / 12 Strona wykładu http://bioexploratorium.pl/wiki/ Bazy_Danych_i_Usługi_Sieciowe_-_2012z

Bardziej szczegółowo

Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania na nich skryptów w języku JavaScript.

Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania na nich skryptów w języku JavaScript. Instrukcja laboratoryjna do ćwiczenia: 1. Cel ćwiczenia Strona internetowa w systemach unix-owych Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania

Bardziej szczegółowo

JavaScript. Wstęp do podstaw elementów. dr inż. Paweł Boiński, Politechnika Poznańska

JavaScript. Wstęp do podstaw elementów. dr inż. Paweł Boiński, Politechnika Poznańska JavaScript Wstęp do podstaw elementów dr inż. Paweł Boiński, Politechnika Poznańska Wprowadzenie Historia Maj 1995-10 dni, Mocha, Netscape Wrzesień 1995 - Mocha -> LiveScript Grudzień 1995 - LiveScript

Bardziej szczegółowo

JAVAScript w dokumentach HTML - przypomnienie

JAVAScript w dokumentach HTML - przypomnienie Programowanie obiektowe ćw.1 JAVAScript w dokumentach HTML - przypomnienie JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. Skrypty JavaScript są zagnieżdżane w

Bardziej szczegółowo

Wykorzystywanie parsera DOM w programach Java i PL/SQL

Wykorzystywanie parsera DOM w programach Java i PL/SQL Wykorzystywanie parsera DOM w programach Java i PL/SQL Maciej Zakrzewicz mzakrz@cs.put.poznan.pl http://www.cs.put.poznan.pl/~mzakrz/ Parser DOM Aplikacja DOM API Parser DOM Dokument XML Drzewo DOM Parser

Bardziej szczegółowo

Przetwarzanie dokumentów XML i zaawansowane techniki WWW Zdarzenia w JavaScript (Zajęcia r.)

Przetwarzanie dokumentów XML i zaawansowane techniki WWW Zdarzenia w JavaScript (Zajęcia r.) Przetwarzanie dokumentów XML i zaawansowane techniki WWW Zdarzenia w JavaScript (Zajęcia 08 25.04.2016 r.) 1) Zdarzenia w JavaScript Zdarzenia są sygnałami generowanymi w chwili wykonywania ściśle określonych

Bardziej szczegółowo

Kurs JavaScript TI 312[01]

Kurs JavaScript TI 312[01] TI 312[01] Spis treści 1. Wiadomości ogólne... 3 2. Wstawianie skryptów do dokumentów HTML... 3 Przykład 2.1 Przykładowa implementacja skryptu JavaScript w dokumencie HTML... 3 3. Data i godzina... 3 Przykład

Bardziej szczegółowo

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385.

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385. Źródła CSS: http://www.csszengarden.com/ XHTML: http://www.xhtml.org/ XML: http://www.w3.org/xml/ PHP: http://www.php.net/ JavaScript: http://devedgetemp.mozilla.org/library/manuals/2000/javas cript/1.5/reference/

Bardziej szczegółowo

1. Otwórz app_advanced.html i skopiuj i wklej następujący kod bezpośrednio w tagach <head>:

1. Otwórz app_advanced.html i skopiuj i wklej następujący kod bezpośrednio w tagach <head>: Rozszerzanie WordPressa do mobilnego świata W ostatniej części dowiedzieliśmy się, w jaki sposób możemy tworzyć aplikacje mobilne za pomocą PhoneGap. Teraz będziemy kontynuować budowanie aplikacji mobilnych

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium Język JavaScript Celem ćwiczenia jest przygotowanie formularza HTML z wykorzystaniem języka JavaScript. Formularz ten będzie sprawdzany pod względem zawartości przed wysłaniem

Bardziej szczegółowo

O stronach www, html itp..

O stronach www, html itp.. O stronach www, html itp.. Prosty wstęp do podstawowych technik spotykanych w internecie 09.01.2015 M. Rad Plan wykładu Html Przykład Strona www Xhtml Css Php Js HTML HTML - (ang. HyperText Markup Language)

Bardziej szczegółowo

XML extensible Markup Language. część 3

XML extensible Markup Language. część 3 XML extensible Markup Language część 3 Definicja Typu Dokumentu - DTD DTD (ang. Document Type Definition) rodzaj dokumentu definiujący formalną strukturę dokumentów XML. DTD określa składnię konkretnej

Bardziej szczegółowo

CZYM JEST JAVASCRIPT?

CZYM JEST JAVASCRIPT? JAVASCRIPT JAVASCRIPT - CECHY Język skryptowy stosowany w sieci WWW Stosowany przez autorów witryn WWW głównie w celu: poprawy wyglądu stron walidacji danych z formularzy wykrywania typu przeglądarki tworzenia

Bardziej szczegółowo

plansoft.org Zmiany w Plansoft.org

plansoft.org   Zmiany w Plansoft.org Zmiany w Plansoft.org Mapy Google... 1 Tworzenie mapy... 2 Wprowadzanie szerokości i długości geograficznej... 2 Tworzenie mapy... 2 Dostosowanie wyglądu mapy... 3 Ograniczanie liczby zasobów do wyświetlenia

Bardziej szczegółowo

JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.

JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. IŚ ćw.8 JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. Skrypty JavaScript są zagnieżdżane w dokumentach HTML. Skrypt JavaScript

Bardziej szczegółowo

Pakiet XML Czym jest i z czym się je?

Pakiet XML Czym jest i z czym się je? Pakiet XML Czym jest i z czym się je? mgr Maciej Beręsewicz Katedra Statystyki, UE w Poznaniu Spis treści 1. Web scraping 2. XML 3. XPath 4. Pakiet XML 4.1 Allegro.pl 4.2 Last.fm 4.3 Poznan.gumtree.pl

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium Język JavaScript Celem ćwiczenia jest przygotowanie formularza na stronie WWW z wykorzystaniem języka JavaScript. Formularz ten będzie sprawdzany pod względem zawartości przed

Bardziej szczegółowo

XML extensible Markup Language 7

XML extensible Markup Language 7 XML extensible Markup Language 7 XQuery Co to jest XQuery? XQuery to język zapytań dla XML. XQuery jest dla XML tym czym SQL dla baz danych, a SPARQL dla RDF. XQuery wykorzystuje wyrażenia XPath. XQuery

Bardziej szczegółowo

METAJĘZYKI. Politechnika Koszalińska Wydział Elektroniki i Informatyki Katedra Inżynierii Komputerowej

METAJĘZYKI. Politechnika Koszalińska Wydział Elektroniki i Informatyki Katedra Inżynierii Komputerowej 4 dr inż. Robert Berezowski e-mail: beny@ie.tu.koszalin.pl Ul. Śniadeckich 2 Pokój 223A Politechnika Koszalińska Wydział Elektroniki i Informatyki Katedra Inżynierii Komputerowej 1 XPath nawigacja i wyszukiwanie

Bardziej szczegółowo

Wyszukiwanie największej spośród czterech liczb. Przykładowe rozwiązanie

Wyszukiwanie największej spośród czterech liczb. Przykładowe rozwiązanie Wyszukiwanie największej spośród czterech liczb Użytkownik podaje cztery liczby rzeczywiste. Podaj algorytm znajdowania największej spośród nich. (Np.: po wprowadzeniu liczb: 12 7 18.5 9 program powinien

Bardziej szczegółowo

Kurs WWW Język XML, część II

Kurs WWW Język XML, część II Język XML, część II Paweł Rajba pawel@ii.uni.wroc.pl http://pawel.ii.uni.wroc.pl/ Zawartość modułu Wprowadzenie do XSL XPath XSLT XSL-FO Na podstawie kursów ze stron: http://www.w3schools.com/xpath/default.asp

Bardziej szczegółowo

NoSQL Not Only SQL: CouchDB. I.Wojnicki, NoSQL. Apache CouchDB has started. Time to relax. Przetwarzanie dokumentów i widoków.

NoSQL Not Only SQL: CouchDB. I.Wojnicki, NoSQL. Apache CouchDB has started. Time to relax. Przetwarzanie dokumentów i widoków. Igor Wojnicki (AGH, KIS) PHP 23 października 2016 1 / 29 NoSQL Not Only SQL: CouchDB Apache CouchDB has started. Time to relax. Przetwarzanie dokumentów i widoków. Igor Wojnicki Katedra Informatyki Stosowanej,

Bardziej szczegółowo

HTML (HyperText Markup Language)

HTML (HyperText Markup Language) HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy

Bardziej szczegółowo

DOM i JavaScript DOM W3C

DOM i JavaScript DOM W3C DOM W3C DOM (ang. Document Object Model, obiektowy model dokumentu) to API dla dokumentów HTML i XML. Wprowadza strukturalne odwzorowanie dokumentu, pozwalając modyfikować jego zawartość i warstwę prezentacji

Bardziej szczegółowo

Programowanie Multimediów. Programowanie Multimediów JAVA. wprowadzenie do programowania (3/3) [1]

Programowanie Multimediów. Programowanie Multimediów JAVA. wprowadzenie do programowania (3/3) [1] JAVA wprowadzenie do programowania (3/3) [1] Czym jest aplikacja Java Web Start? Aplikacje JAWS są formą pośrednią pomiędzy apletami a aplikacjami Javy. Nie wymagają do pracy przeglądarki WWW, jednak mogą

Bardziej szczegółowo

Historia kodowania i format plików XML. Jolanta Bachan

Historia kodowania i format plików XML. Jolanta Bachan Historia kodowania i format plików XML Jolanta Bachan Co to jest format? Format to, w ogólnym znaczeniu, reguły określające strukturę fizyczną, sposób rozmieszczenia, zapisu informacji danego typu. Inaczej:

Bardziej szczegółowo

Wprowadzenie do arkuszy stylistycznych XSL i transformacji XSLT

Wprowadzenie do arkuszy stylistycznych XSL i transformacji XSLT Wprowadzenie do arkuszy stylistycznych XSL i transformacji XSLT Marek Wojciechowski marek@cs.put.poznan.pl http://www.cs.put.poznan.pl/~marek/ Formatowanie dokumentów XML Język XML opisuje strukturę i

Bardziej szczegółowo

WYKŁAD 4 JĘZYK JAVASCRIPT CZĘŚĆ 1

WYKŁAD 4 JĘZYK JAVASCRIPT CZĘŚĆ 1 WYKŁAD 4 JĘZYK JAVASCRIPT CZĘŚĆ 1 DEFINICJA JAVASCRIPT (oficjalna nazwa ECMA-262, ECMAScript 6 czerwiec 2015r.) Skryptowy język programowania, którego celem jest dodanie dynamiki do możliwości HTML'a.

Bardziej szczegółowo

Plan prezentacji. Krótko o XML Arkusze stylów XSLT XSL XSL Path Przegląd konstrukcji języka i przykłady Narzędzia Podsumowanie Literatura

Plan prezentacji. Krótko o XML Arkusze stylów XSLT XSL XSL Path Przegląd konstrukcji języka i przykłady Narzędzia Podsumowanie Literatura XSLT Dariusz Dudek Plan prezentacji Krótko o XML Arkusze stylów XSLT XSL XSL Path Przegląd konstrukcji języka i przykłady Narzędzia Podsumowanie Literatura Cechy XML a Rozszerzalny język znaczników Stworzony

Bardziej szczegółowo

JavaScript funkcyjność

JavaScript funkcyjność JavaScript funkcyjność WWW 9 kwietnia 2014 Możliwości tworzenia dynamicznych stron WWW HTML i CSS. Skrypty CGI (Perl, PHP). Serwery (django, java). Plug-iny. Ksiażka Większość przykładów pochodzi z ksiażki:

Bardziej szczegółowo

Programowanie internetowe

Programowanie internetowe Programowanie internetowe Wykład 1 HTML mgr inż. Michał Wojtera email: mwojtera@dmcs.pl Plan wykładu Organizacja zajęć Zakres przedmiotu Literatura Zawartość wykładu Wprowadzenie AMP / LAMP Podstawy HTML

Bardziej szczegółowo

Obiektowe bazy danych

Obiektowe bazy danych Obiektowe bazy danych Wykład 7 Paweł Gmys Interfejs uŝytkownika C++ JAVA PERL PHP 2006-05-14 Paweł Gmys wykład 8 2 Czym są skrypty PHP? Programy umieszczane w treści stron WWW. Wykonywane przez serwer

Bardziej szczegółowo

Podstawy JavaScript. <script type="text/javascript"> kod skryptu </script>

Podstawy JavaScript. <script type=text/javascript> kod skryptu </script> Podstawy JavaScript Jest to język skryptowy stworzony przez firmę Netscape jako LiveScript, którego celem było rozszerzenie możliwości HTMLa w taki sposób, aby strony stały się bardziej atrakcyjne pod

Bardziej szczegółowo

WITRYNY I APLIKACJE INTERNETOWE

WITRYNY I APLIKACJE INTERNETOWE WITRYNY I APLIKACJE INTERNETOWE TECHNIKUM INFORMATYCZNE wg programu 351203 KLASA II 3 godz. tygodniowo 90 godziny Liczba godzin w cyklu kształcenia 180 rok szkolny 2013/2014 Sylwia Płonka 2. W 1980 fizyk

Bardziej szczegółowo

Elementarz HTML i CSS

Elementarz HTML i CSS Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych 1 Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych Treść, korekta, skład i oprawa graficzna

Bardziej szczegółowo

Wykład 6 Skrypty typu JavaScript. Technologie internetowe Zofia Kruczkiewicz

Wykład 6 Skrypty typu JavaScript. Technologie internetowe Zofia Kruczkiewicz Wykład 6 Skrypty typu JavaScript Technologie internetowe Zofia Kruczkiewicz 1 Umieszczanie kodu JavaScript w plikach XHTML http://www.w3schools.com/js/default.asp 1.1. W przypadku XHTML 1.x nie występuje

Bardziej szczegółowo

Kompresja stron internetowych

Kompresja stron internetowych Kompresja stron internetowych Patryk Jar Tech 3 Camp, 18 czerwca 2013 r. O mnie Patryk Jar Webdeveloper Nor-sta (nor-sta.eu) yarpo.pl 2 3 Agenda Lepszy kod w przeglądarce Mniej żądań HTTP Mniej danych

Bardziej szczegółowo

Współdziałanie przeglądarki i skryptów w pliku HTML (lub XML), oraz współdziałanie przeglądarki i ekranu ilustruje niżej położony rysunek.

Współdziałanie przeglądarki i skryptów w pliku HTML (lub XML), oraz współdziałanie przeglądarki i ekranu ilustruje niżej położony rysunek. Obiektowy model przeglądarki (BOM, Browser Object Model) Współdziałanie przeglądarki i skryptów w pliku HTML (lub XML), oraz współdziałanie przeglądarki i ekranu ilustruje niżej położony rysunek. Plik

Bardziej szczegółowo

Ćwiczenia laboratoryjne nr 8 Podstawy języka XML.

Ćwiczenia laboratoryjne nr 8 Podstawy języka XML. Prezentacja Danych i Multimedia II r Socjologia Ćwiczenia laboratoryjne nr 8 Podstawy języka XML. Celem ćwiczeń jest poznanie zasad tworzenia dokumentów w oparciu o język XML oraz metod modyfikacji ich

Bardziej szczegółowo

za pomocą: definiujemy:

za pomocą: definiujemy: HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony

Bardziej szczegółowo

Dokumentacja Skryptu Mapy ver.1.1

Dokumentacja Skryptu Mapy ver.1.1 Dokumentacja Skryptu Mapy ver.1.1 2 Dokumentacja Skryptu Mapy ver.1.1 Spis treści Dokumentacja skryptu... 3 Dodatkowe informacje i kontakt... 7 3 Dokumentacja Skryptu Mapy ver.1.1 Dokumentacja skryptu

Bardziej szczegółowo