Fejlett Programozási Technikák 2.

Fejlett Programozási Technikák 2.
14/3

A mai előadás tartalma:
Dinamikus Tartalom Kliens oldali Programozás JavaScript VBScript Szerver Oldali Programozás SSI CGI NSAPI/ISAPI FastCGI

Dinamikus Tartalom Komolyabb feladatokhoz nem elegendő a statikus weboldal Cégek adatbázisokban tárolják adataikat Portál építés adatbázisban van a tartalom Felhasználói műveletek lekezelése Teljesítményelosztás

Technikák Kliens oldali Szerver oldali JavaScript VBScript Java Applet
CGI (C, C++, Perl, Python …) Java Servlet, ActiveX ASP,PHP,XSP,JSP

Kliens Oldali Programozás
Feladata a webszerver tehermentesítése A felhasználói akciók lekezelése A helyszínen ellenőrizni a bevitelt Szervert nem igénylő megoldások (pl.: számológép) Design eszköz Dinamikus weboldal (pl.: óra az oldalon) JavaScript VBScript Java Applet

JavaScript A Netscape és a SUN fejlesztette ki
Java-nál egyszerűbb, Netscape böngésző használja Közös tulajdonság a Java-val 4 betű Szintakszisát a C nyelvtől örökölte A kis és a nagy betűket megkülönbözteti A sorok végére pontosvesszőt kell írni Objektum alapú -> lehetőség van objektumok létrehozására de osztályokat típusokat nem definiálhatunk A program szövege kerül interpretálásra (lassú, a kódot nem lehet elrejteni) A váltózók típusa változó Integráns része a HTML lapnak A leggyakrabban használt kliens oldali szkriptnyelv

JavaScript és a HTML A JavaScript kód helye:
HTML törzs HTML fejléc Külső fájl A kódban vegyesen szerepelhet függvény definíció és egyszerű utasítás Célszerű a függvényeket a HTML fejrészébe definiálni Futása: Eseményre, függvényhívás (függvények esetén) Betöltéskor (ha nem függvényt írtunk)

JavaScript a HTML-ben <SCRIPT LANGUAGE="JavaScript” type="text/javascript">  </SCRIPT> <script language="JavaScript" src="kulso.js" type="text/javascript"> </script> Célszerű a HTML megjegyzés elemeket használni ( ) Több helyen is szerepelhet a <script> </script> elempár

Változók Típusok: Var valtozo = érték Típusa változhat
Szám Szöveg Objektum Logikai Var valtozo = érték Típusa változhat Lehet lokális, globális

Operátorok

Feltételes utasítások

Függvények Definiálás: function fnév(argumentumok) { utasítások
return visszatérési érték } Hívás: fnev(arguentumok);

Példa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Példa</title> </head> <body> <script language="JavaScript" type="text/javascript">  </script> </body> </html>

Objektumok A JavaScript objektum <tulajdonság, érték> párok halmaza object.property hivatkozás function person (first, last, age) { this.first_name = first; this.last_name = last; this.age = age; } Dezso = new person("Dezsô", "Nagy", 23); Dezso.age = 24; Asszociatív tömbként működhet Dezso["age"] = 24;

Objektumok 2. Az egyes objektumokhoz függvényeket is rendelhetünk:
function sayYourName () { document.write("<B>Szia, " + this.last_name + " " + this.first_name + " vagyok.</B><P>"); } function person (first, last, age) { this.first_name = first; this.last_name = last; this.age = age; this.introduce = sayYourName; Dezso = new person("Dezsô", "Nagy", 23); Dezso.introduce();

Objektumok 3. Egy objektum tulajdonságain a for in ciklussal tudunk végigmenni function dump_props(obj, obj_name) { var result = "" for (var i in obj) result += obj_name + "." + i + " = " + obj[i] + "<BR>" } result += "<HR>" return result

Beépített objektumok

Hivatkozások objektumnév1. objektumnév2.tulajdonság
objektumnév1. objektumtípus[név].tulajdonság objektumnév1. objektumtípus[sorszám].tulajdonság

Eseménykezelés: onLoad betöltünk egy oldalt a böngészôbe
onUnload kilépünk egy betöltött oldalról onFocusaz ûrlap valamelyik eleme a fókuszba kerül, azaz a billentyûzetrôl érkezô karaktereket fogadja onBlura fókusz elmozdul az ûrlap valamelyik elemérôl onSelect az ûrlap valamelyik bemeneti mezôjét kiválasztották onChange az ûrlap valamelyik elemének (szöveg, választás) értékét megváltoztatták onClickrákattintottak egy ûrlap elemre (pl. nyomógombra), vagy hivatkozásra onSubmitelküldenek egy ûrlapot a szerver felé (a submit gombra kattintottak) onMouseOver az egér egy hivatkozás, vagy dokumentum címke fölé kerül

String objektum Fontosabb tulajdonságai: Fontosabb metódusai: length
indexOf() replace() toLowerCase() toUpperCase() concat()

Példa <html><head><title>Teszt</title></head> <body> <script language="JavaScript"> mondat = "Kerekecske gombocska, itt szalad a nyulacska"; kezd = mondat.indexOf("szalad”,0); alert("A szó kezdő poziciója : " + kezd); mondat = mondat.concat(" ezt is tegyük hozzá") ; kisbetus = mondat.toLowerCase(); csere = mondat.replace("itt","ott"); </script> </body></html>

Array objektum Fontosabb tulajdonsága: Fontosabb metódusai: length
pop() - utolsó tömbelem törlése (csak Netscape) push() - új tömbelem hozzáfűzése (csak Netscape) sort() – az angol abc szerint rendez, összehasonlító függvény join() - tömbelemek összefűzése sztringgé

Példa1 <html><head><title>Teszt</title> </head><body> <script language="JavaScript"> Napok=new Array ("Vasárnap","Hétfő","Kedd","Szerda","Csütörtök","Péntek"); Napok = Napok.push(”Szombat”) ; document.write("<table border bgcolor=#CCFFFF><b>"); for (i=0; i < Napok.length; ++i) { document.write("<tr><td>"+ Napok[i]+"</td><tr>"); } document.write("</td></table>"); </script> </body></html>

Példa2 <html><head><title>Teszt</title> </head> <body> <script language="JavaScript"> lanyok = new Array("Ivett","Éva","Kati","Vera","Juli","Berta","Magdi"); document.write("Tánckar tagjai : " + lanyok.join(", ")+ "<br>"); lanyok.sort(); fellepnek = lanyok.join(", "); document.write("Fellépnek : " + fellepnek + "<br>"); function Rendez(a,b) { return a-b; } szamok = new Array(43,37,86,55,72); szamok.sort(Rendez); Lotto = szamok.join(","); document.write("A lottó nyertes számai a következők: " + Lotto); </script> </body></html>

Többdimeziós tömbök <html><head><title>Teszt</title> <script language="JavaScript"> a = new Array(3); for (i=0; i < a.length; ++i) { a[i] = new Array(5); for (j=0; j<a[i].length; ++j) { a[i][j]="Ez a " + i + ". tömb " + j + " . eleme"; } } { document.write( a[i][j] + "<br>"); } </script> </head><body> </body></html>

Date objektum Fontosabb metódusok: Ugyanezek léteznek setXXX-el is
getTime() január 1-től eltelt idő (numerikus érték) getYear() getMonth() – január 0. getDate() getDay() - vasárnap 0. getHours() getMinutes() getSeconds() Ugyanezek léteznek setXXX-el is

Példa <head><title>Teszt</title> <script language="JavaScript"> function Ev2003() { most = new Date(); var x = most.getTime() / 1000; k = new Date(2000,0,1,0,0,0); k.setYear(2003) ; var y = k.getTime() / 1000; var z = Math.floor(y - x); alert("Még " + z + " másodperc a év beköszöntéig"); } </script> </head><body> <form> <input type=button value="Nyomd meg" onClick="Ev2003()"> </form> </body></html>

Math objektum Fontosabb Tulajdonságok: Fontosabb Metódusok:
E - Euler konstans PI - PI Fontosabb Metódusok: floor() - Legközelebbi egész szám (lefele kerekít) random() - Véletlenszám generálás abs() - Abszolut érték round() - Kerekítés (kereskedelmi)

Példa <html><head><title>P</title>
</head><body> <form name=”b”> <input type=button value="Button" onClick="alert(Math.random())"> <input name="be"> <input name="ki"> <input type=button value="=” onClick=”b.ki.value=Math.abs(b.be.value)"> </form> </body></html>

Window Objektum Fontosabb metódusok:
alert() - Az üzenőablakban megjelenít egy szöveget promt() - Adatbevitel számára megnyit egy üzenőablakot confirm() - Megjelenít egy megerősítést kérő üzenőablakot Igen / Nem választási lehetőséggel. close() – Bezárja az ablakot open(url,név,opciók) – Megnyit egy ablakot setInterval() - Egy bizonyos JavaScript tevékenység ciklikus végrehajtása, pl.: függvényhívás focus() - Az ablakot aktívvá teszi blur() - Az ablakot inaktívvá teszi

Új ablak <html><head><title>Teszt</title>
<script language="JavaScript"> function Hivlak() { Ujablak = window.open("fájl2.htm","masik","width=300,height=200,scrollbars"); this.blur(); Ujablak.focus(); } </script> </head><body> <a href="javascript:Hivlak()">Új ablak</a> </body></html>

Időzítés Példa <html><head><title>Teszt</title> </head><body> <script language="JavaScript"> aktiv = window.setInterval("ido()",100); function ido() { t = new Date(); h = t.getHours(); m = t.getMinutes(); s = t.getSeconds(); a.ido.value=h+":"+m+":"+s; } </script> <form name="a"> <input type="text" name="ido" size="8"> </form> </body></html>

Document objektum Fontosabb tulajdonságok: Fontosabb metódusok:
charset - A böngésző által alkalmazott karakterkészlet megadása lastModified - Az utolsó módosítás dátuma, ideje URL - A betöltött dokumentum teljes URL címét adja vissza Fontosabb metódusok: close() - Lezárja a szöveg értelmezését, a bufferban lévő adatokat kiírja és minden grafikát kirajzol write(sztring,[sztring]) - Kiír egy vagy több HTML kifejezést a dokumentumba writeln()(sztring,[sztring]) - Kiír egy vagy több HTML kifejezést a dokumentumba, melyeket soremelés követ

Példa <html> <head> <title>Teszt</title>
<body> <script language="JavaScript"> document.open(); document.write(document.URL); document.write(document.lastModified); document.close(); </script> </body> </html>

Frame Objektum A frame objektum segítségével elérhetjük az ablakokat parent vagy top névvel. A frame objektum a window objektum leszármazottja A framek alárendelt objektumjai is ugyanúgy viselkednek, mint a window objektumnál. Ezért, ha egy űrlap egyik mezejének tartalmára így hivatkoztunk : window.document.forms[0].elements[0].value = "János Vitéz" akkor, ha ugyanez az űrlap egy frame-ben kerül megjelenítésre, így hivatkozhatunk rá : parent.frames[1].document.forms[0].elements[0].value = "János Vitéz"

Form Objektum Fontosabb metódusok: Fontosabb tulajdonságok:
submit() - Űrlap adatok elküldése reset() - Űrlap adatok törlése Fontosabb tulajdonságok: name – a neve target – a feldolgozó címe

Példa <html><head><title>Teszt</title><script language="JavaScript"> function ellenor() { if (Math.abs(a.szam.value) < 10) alert(A számnak 10-nél kisebbnek kell lennie!); a.reset(); return false; } else return true; </script> </head><body> <form name="a" target="javascript-3.html" onSubmit="return ellenor();"> <input type="text" name="szam" size="3"> <input type="submit" value="Elküld"> </form></body></html>

History objektum Fontosabb metódusok:
back() - Visszaugrik az előző oldalra forward() - Előreugrik a következő oldalra go() - Egy bizonyos oldalra ugrik

Példa history.back(); window.history.go(-3);
masikablak.history.forward(); parent.frames[2].history.back();

Trükkök Magyarázó szöveg
<html><head><title>Teszt</title> </head><body> <A HREF="URL" onMouseOver="window.status = 'magyarázó szöveg'; return true">kapcsolat</A> </body></html>

VBScript A Visual Basic család tagja
Sokoldalú (Exchange, Outlook, Word, Access , Excel, …) Biztonságos(elvileg) Nem tudunk a fájlrendszerhez hozzáférni Nem tudunk közvetlenül hozzáférni a DLL-ekhez ActiveX komponenseket tudunk használni Szükség esetén letöltődik az ActiveX komponens amit akár digitálisan is alá tudunk írni Csak IE környezetben fut Ott ajánlott ahol főleg Microsoft alkalmazásokat használnak és integrálni szeretnék őket

Adattípusok skalárok tömbök egy adatípus – Variant statikus Dim
láthatósága: public private élettartama: static tömbök statikus Dim dinamikus ReDim

Példa <script language="VBScript"> Dim strNev ="Bilicki Vilmos"
Dim intEletkor=27 Dim nevekTomb(20) ReDim VnevekTomb(20) ReDim VnevekTomb(25) </script>

Operátorok

Feltételes utasítások

Függvények Sub – visszatérési érték nélküli
Function - visszatérési értékkel Hívás: kiir(”valami”) Call kiir ”valami” Call kiir (”valami”)

Beépített függvények Egyéb függvények:
Inputbox() – felhasználói bevitel MsgBox() - kommunikáció VarType() – lekérdezhetjük a változó típusát c=InputBox("Írd be a neved") MsgBox("Biztos törölni szeretnéd ?",1) tipus=VarType(változó)

Karakterlánc függvények
Trim() - A karaterlánc elejéről és végéről törli a szóközöket InStr() - Szövegkereső függvény mely egy karaterláncot keres egy másik karakterláncban. Left(),Mid(),Right() - A szöveg megfelelő részét adják vissza. UCase(), LCase() - A karakterléncot kicsi vagy nagy betűssé alakítják. a=Trim(str) pozició=Instr(0,"Ezt","Itt szerpel az Ezt szó",1) bal3=Left("123eddig tart",3) kicsi=LCase("NaGY")

Konvertáló függvények
CByte(kif), CInt(kif), CDbl(), CLng(kif), CStr(kif) - A megfelelő altípussá alakítják az adatot. szam=CInt("12,3")

Idő, Dátum függvények Date - A rendszer időt adja vissza.
DateValue - A bementeként kapott karaterláncot próbálja értelmezni mint dátumot. Day, Hour, Year, WeekDay, Minute, Month, Hour, Second - A dátum adott részét adják vissza. (Vasárnap=1) Time - A rendszeridőt adja vissza TimeValue - karakterlánc a bemenete melyet megpróbál időpontlént értelmezni datum=Date() datum=DateValue("2002. január 1") datum=DateValue("2002/január/1") nap = WeekDay(datum) ido=Time() ido=TimeValue("17:01:10") ora = Hour(ido)

Objektumok használni tudja a JavaScript-ben megismert objektumok többségét window.frames(0).document.bgcolor = "#ff00ff„ Az eseménykezelésre a VBScript belső eseménykezelőjét is használhatjuk. A függvény nevében szerepelnie kell az esemény nevének és a hozzá tartozó objektum nevének. Sub gomb1_OnClick msgbox "Az egyes gomb lett lenyomva" End Sub

ActiveX A dll utódja előre elkészített elemek egyedi azonosító CLSID
használat előtt regisztrálni kell

Beillesztés <OBJECT ID="Label1" WIDTH=104 HEIGHT=27
CLASSID="CLSID:99B EC7-11CF-A6C7-00AA00A47DD2"> <PARAM NAME="_ExtentX" VALUE="2752"> <PARAM NAME="_ExtentY" VALUE="714"> <PARAM NAME="Caption" VALUE="Label Control"> </OBJECT>

Hivatkozás Sub Label1_Click() Dim a a = Label1.Caption
If a = "Start" Then a = "Stop" Else a = "Start" End If Label1.Caption = a End Sub

A mai előadás tartalma:
Perl Python

Szerver oldali Programozás
Adatbázisok integrálása (JTS, JDBC, ODBC, EJavaBeans) Transaction Processing monitor Háttérrendszerek integrálása (LDAP, NDS, …) Elosztott, hibatűrő rendszerek (RMI, JMS, Servlet) Skálázhatóság (Többszálú, komponensekből áll, RMI, JMS,) A munkafolyamatok leképezése (EJavaBeans) Csoportmunka támogatás (struktúrálatlan adat, hosszú folyamatok, szabályok, utak, feladatok) Adatbányászat

Szerver oldali Programozás I
Szkript nyelvek: Python Perl Web orientált szkript nyelvek: PHP ASP XSP JSP

Szerver oldali Programozás II.
Előre fordított nyelvek: C C++ Java VisualBasic

SSI (Server Side Includes)
A webszerver értelmezi a HTML fájlt .shtml kiterjesztés Egyszerű megvalósítani Erőforrásigényes Biztonsági problémákat vet fel

SSI példa <HTML> <HEAD> <TITLE>Hali!</TITLE>
<BODY> <H1>A szerver neve: ...</H1> <HR> A te géped címe , A dátum: </BODY></HTML>

SSI parancsok sizefmt echo var config include errmsg File virtual
fsize file flastmod exec cmd Cgi config errmsg sizefmt timefmt

CGI (Common Gateway Interface)
HTTP (GET/POST) 1 HTTP (GET/POST) Új process 2 Új process CGI 1 CGI 1 Szabványos bemenet Szabványos bemenet Feldolgozás Feldolgozás Szabványos kimenet Szabványos kimenet

CGI Szabványos felület
Gyakorlatilag bármely programozási nyelvet használhatjuk Minden szkript saját környezeti változókkal rendelkezik A környezeti változókon keresztül történik a kommunikáció Érdemes a webszerverek nyújtotta lehetőségeket kihasználni : mod_perl

Szerver specifikus változók
GATEWAY_INTERFACE - a CGI verziója SERVER_NAME - a szerver IP címe vagy neve SERVER_PORT - az a port amelyen a szerver a HTTP kérést kapta. (álatlában 80-as) SERVER_PROTOCOL - a kérés kezelő protokoll neve és verziója (pl.: HTTP 1.1) SERVER_SOFTWARE - A szerver szoftver neve és verziója

Kérés specifikus környezeti változók
AUTH_TYPE - az azonosítás típus ha nincs azonosítás akkor a NULL értéket veszi fel. CONTENT_FILE - az adatkat tároló fájl neve, elérési útvonala CONTENT_LENGTH - az STDIN bemenetre érkező adat hossza CONTENT_TYPE - az adat típusa OUTPUT_FILE - a kimenetet fogadó fájl (csak windows estében) PATH_INFO - relatív útvonal melyet a kérés karakterlánc elé kell illeszteni PATH_TRANSLATED - ugyanaz mint az előző csak a relatív útvonal helyett itt abszolút útvonalat használunk. QUERY_STRING - az adat mely az URL-ben a '?' karakter után következett REMOTE_ADDR - a felhasználó IP címe REMOTE_USER - a felhasználó neve ha volt azonosítás REQUEST_LINE} - a teljes HTTP kérés REQUEST_METHOD - a HTTP kérés típusa SCRIPT_NAME - a CGI neve

CGI előnyei/hátrányai
egyszerű nyelv független a process-ek izolálva vannak nyitott szabvány architektúra független Hátrányai: erőforrás igény nagy állapotmentes

ISAPI/NSAPI Microsoft/Netscape dll
új szálakat indít a web szerver process-en belül ISAPI szűrők alkalmazása globális változókat kerülni kell ha egy szál behal az egész web szervert újra kell indítani

Internet Information Server
Az ISAPI felépítése Internet database connector perl.dll ActiveX Server applications Application APIs Perl scripts Internet Information Server CGI Simple applications Filter APIs ActiveX Server filters Web browser

ISAPI hátrányai komplex nyelvfüggő nincs process elkülönítés
hozzá van kötve a web szerverhez (többszálú vagy sem)

FastCGI a process-ek állandóak egy vagy több process, több szál
socket-en keresztül kommunikál a web szerverrel egyedi azonosítók az egyes kéréseknek

Fast CGI csomagok FCGI_PARAMS A név/érték párok elküldésére használják (CGI állapot változók) a web szervertől az alkalmazás felé. FCGI_STDIN A szabványos bementet küldi el a web szerver. FCGI_DATA A szűrő adatokat küldi el. FCGI_STDOUT Szabványos kimenet a webszerverhez. FCGI_STDERR Hibajelentés. FCGI_END_REQUEST Befejzés.

Fejlett Programozási Technikák 2.

Hasonló előadás

Az előadások a következő témára: "Fejlett Programozási Technikák 2."— Előadás másolata:

Hasonló előadás

Projectumról

Visszajelzés

Bejelentkezés

A társadalmi hálózaton keresztül belépni:

Fejlett Programozási Technikák 2.

Hasonló előadás

Az előadások a következő témára: "Fejlett Programozási Technikák 2."— Előadás másolata:

Hasonló előadás

Projectumról

Visszajelzés