Kliensoldali Programoz

1
Kliensoldali Programozás

• Javascript példák

2
Üzeno doboz

• A beviteli mezoben beírt szöveggel megjelenít egy
  üzenetet.
• ltHTMLgt
• ltHEADgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!-- Beginning of JavaScript -
• function MsgBox (textstring)
• alert (textstring)
• // - End of JavaScript - --gt
• lt/SCRIPTgt
• lt/HEADgt
• ltBODYgt
• ltFORMgt
• ltINPUT NAME"text1" TYPETextgt
• ltINPUT NAME"submit" TYPEButton VALUE"Show Me"
  onClick"MsgBox(form.text1.value)"gt
• lt/FORMgt
• lt/BODYgt
• lt/HTMLgt

3
Az oldal háttér színének megváltoztatása

1. ltHTMLgt
2. ltHEADgt
3. ltSCRIPT LANGUAGE"JavaScript"gt
4. lt!-- Beginning of JavaScript -
5. function changecolor(code)
6. document.bgColorcode
8. // - End of JavaScript - --gt
9. lt/SCRIPTgt
10. lt/HEADgt
11. ltBODYgt
12. ltformgt
13. ltinput type"button" name"Button1" value"RED"
    onclick"changecolor('red')"gt
14. ltinput type"button" name"Button2" value"GREEN"
    onclick"changecolor('green')"gt
15. ltinput type"button" name"Button3" value"BLUE"
    onclick"changecolor('blue')"gt
16. ltinput type"button" name"Button4" value"WHITE"
    onclick"changecolor('white')"gt
17. lt/formgt
18. lt/BODYgt
19. lt/HTMLgt

4
Az If THEN használata

• ltHTMLgt
• ltHEADgt
• ltTITLEgt példa 3lt/TITLEgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!-- Beginning of JavaScript -
• function password()
• Ret prompt(Ird be hogy jelszo',"")
• if(Retjelszo")
• location 'ch03_1.htm'
• else
• alert(Próbáld újra!")
• // - End of JavaScript - --gt
• lt/SCRIPTgt
• lt/HEADgt
• ltBODYgt
• ltA HREF"javascriptpassword()"gt
• ltIMG SRC"pict1.gif" NAME"pic1" ALT"about us!"
  BORDER"0" align"left"gtlt/Agt

5

• IF (logikai kifejezés) igaz ág ELSE
  különben ág

6
Ciklus használata

• ltHTMLgt
• ltHEADgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!-- Beginning of JavaScript -
• function encode(text) Ref"0123456789abcdefghijk
  lmnopqrstuvwxyz.-ABCDEFGHIJKLMNOPQRSTUVWXYZ"
• Result""
• for (Count0 Countlttext.length Count)
• Chartext.substring (Count, Count1)
• NumRef.indexOf (Char)
• EncodeCharRef.substring(Num1, Num2)
• Result EncodeChar
• document.form1.result.valueResult
• // - End of JavaScript - --gt
• lt/SCRIPTgt
• lt/HEADgt
• ltBODY bgcolor"beige"gt

7
Metódusok használata

• Date Methods idopont beállítása
• Window Methods új ablak megnyitása és bezárása
• Document Methods Új dokumentum létrehozása
  menet közben
• Form Methods webes urlapok vezérlése.
• History Methods A böngészo vissza gombjának
  használata
• Text Methods szövegek megjelenésének
  beállítása.
• Math Methods - sin, cos, round, random, absolute
  value, stb.
• MessageBox Methods - Alert, Prompt, and Confirm

8

1. ltHTMLgt
2. ltHEADgt
3. ltSCRIPT LANGUAGE"JavaScript"gt
4. lt!-- Beginning of JavaScript -
5. function MyWindow(message)
6. //Define Date to display in local syntax
7. now new Date()
8. LocalTime now.toLocaleString()
9. //Define contents of page
10. contents
11. 'ltbody bgcolor"beige"gt'
12. 'lth2gtHellolt/h2gt'
13. 'Click on the message below to close this
    windowltbrgt'
14. 'ltA HREF"javascriptwindow.close()" gt'
15. message
16. 'lt/Agt'

9
Felhasználás

• ltBODY bgcolor"white" onLoad"this.form1.text1.foc
  us()"gt
• ltTABLE BORDER1 bgcolor"beige"gtlttrgtlttdgtltBgtType a
  message in the box, ltbrgtit will become a link to
  close the new window.lt/Bgt
• ltFORM NAME"form1"gt
• ltINPUT NAME"text1" TYPEText SIZE"50"
  MAXLENGTH"50"gtltbrgt
• ltINPUT TYPEButton VALUE"Create my window"
  onClick"MyWindow(form.text1.value)"gt
• lt/FORMgtlt/TABLEgt
• lt/BODYgt
• lt/HTMLgt

10
Dátum eljárások
11
window.open metódus
opció érték leírás
toolbar yes/no vagy 1/0 eszköztár
status yes/no vagy 1/0 státuszsor
menubar yes/no vagy 1/0 menusor
scrollbars yes/no vagy 1/0 csuszka
resizeable yes/no vagy 1/0 Átméretezheto-e
location yes/no vagy 1/0
directories yes/no vagy 1/0
width képpont szélesség
height képpont magasság
12
Élo oldal generálás document.write használata
13
A kód

1. ltBRgtltH3gtWriting to a documentlt/H3gtltPgt
2. With just a little creativity, you can have
   JavaScript create fully formatted web pages on
   the fly.ltPgt
3. lttable bgcolor"beige" border1gtltformgtlttrgtlttdgt
4. Please enter your first name ltinput typetext
   name"fname" size20gtltbrgt
5. What city/town do you live in? ltinput typetext
   name"town" size20gtltbrgt
6. How old are you? ltinput typetext name"age"
   size4gtltbrgt
7. Name another person in your house ltinput
   typetext name"roommate" size20gtltbrgt
8. ltinput typebutton value"Create my Home Page"
9. onClick"MakePage(this.form.fname.value,this.form.
   town.value,this.form.roommate.value,this.form.age.
   value)"gt
10. lt/formgtlt/tdgtlt/trgtlt/tablegtltPgt

14
A kód

1. function MakePage(name,town,roommate,age)
2. var content 'ltHTMLgtltHEADgtltTITLEgt'name'\'s
   Pagelt/titlegt' 'lt/headgtltbody background"images/s
   pace.gif" text"yellow" link"FFBBBB"
   vlink"FFBBBB"gt' 'ltFONT COLOR"4EEA6C"gtltcentergt
   lth1gt' name '\'s Pagelt/h1gtlt/centergtlt/FONTgt'
   'ltIMG ALIGNLeft SRC"http//images.webteacher.c
   om/javascript/images/heart.gif" WIDTH"72"
   HEIGHT"72"gtHello, and welcome to my page. I live
   in ' town ' and I am ' age ' years old.'
   'ltpgt' town ' isn\'t a bad place to live, if
   you can stand ' roommate '\'s cooking ltPgt'
   'Some people think they\'re so cool just
   because they created a home page. ltbrgt ' 'They
   have fancy backgrounds and colors, but they just
   go on and on with nothing to say. ltbrgt ' 'ltA
   HREF"http//www.yahoo.com/"gtClick Here to search
   Yahoolt/Agtlt--Boy, there\'s a link I never' '
   would have found on my own. Some people\'s pages
   are so boring I think my computer could do' ' a
   better job with a 10 line program.'
3. document.open()document.write(content)document.c
   lose()

15
események
Esemény hatókor bekövetkezés kezelo
abort Imagek Kép betöltésének megszakítása onAbort
blur Ablak,keret és minden urlap elem Fókusz megszüntetése onBlur
click Gombok,linkek kattintás onClick
change Szövegmezok, listák Elemek megváltoztatása onChange
error Imagek,ablakok Dokumentumok betöltésekor onError
focus Ablak,keret és minden urlap elem Fókusz megadása onFocus
load Dokumentum törzs Oldal betöltése onLoad
mouseout Területek, linkek Egérmutató elhagyja a területet onMouseout
mouseover linkek Egérmutató áthalad a területen onMouseover
reset urlapok Urlap alaphelyzetbe állításakor onReset
select szövegmezok Elem kiválasztásakor onSelect
submit Submit gomb Urlap feldolgozása onSubmit
unload Dokumentum törzs Kilépés az oldalról onUnload
16
SetTimeout() metódus

• Automatikus idozítésre lehet használni
• setTimeout(" your function ", delay in
  milliseconds)
• function MsgBox() alert("Hello There")
• ltFORMgtltINPUT typebutton value"try
  it"onClick"setTimeout('MsgBox()',5000)"gtlt/Formgt

17
Slideshow

• var slidesmax55
• var slidehely'http//www.honlapom/galeria/' //a
  végén kell a /
• function runSlideShow()
• var slimMath.round(Math.random()(slidesmax-1))
• if (document.all)
• document.images.SlideShow.style.filter"blendTrans
  (duration3)"
• document.images.SlideShow.style.filter"blendTrans
  (duration5)"
• document.images.SlideShow.filters.blendTrans.Apply
  ()
• document.images.SlideShow.srcslidehelyslim".j
  pg"
• if (document.all)
• document.images.SlideShow.filters.blendTrans.Play(
  )
• tsetTimeout('runSlideShow()', 9000)

18

• Ha a ltheadgt részbe kerül akkor kell a ltscript
  type"text/javascript" gt lt/scriptgt páros
• Ha külso fájlba rakjuk akkor ltscript
  srcútvonal/fájl.js" type"text/javascript"gtlt/scr
  iptgt
• A html body részébe a kívánt helyen a képnek így
  kell kinéznieltimg src"honlap/galeria/0.jpg"
  alt"Véletlen képek a galériából"
  name"SlideShow"/gt
• És nem árt a body onLoadrunSlideShow() sem

19

• slidesmax képek száma (0 tól indítva kell
  számozni a képeket, és ha pl. 11 képünk van, az
  utolsó lesz a 10, ez a slidesmax értéke is)
• slideshely képek helye, itt a mappát kell
  megadni. Csak azért van itt külön, hogy
  változtatáskor ne kelljen keresgélni. Minden
  kisbetu, ékezetek nélkül, így biztosan muködni
  fog. Fontos a mappa megadása után a / jel!
• slideshow funkciónk generál egy véletlen számot,
  majd a html-ben lévo képen alkalmazza az
  áttunést.
• az elso duration a megjelent kép eltunésének
  idejét, a második a következo kép megjelenítési
  idejét jelenti.

20

• Ezután megadjuk, hogy pontosan hol is vannak a
  képek a slideshow.src sorral.A slidehely
  változóban megadott helyrol a generált számú
  (slim kódnevu) számhoz biggyeszt egy .jpg
  kiterjesztést, és már indul is a blendtrans
• Fontos az elérési út, és a kis/nagybetu is ugye
  pl. a kiterjesztésnél.
• A következo a timeout, vagyis idozítünk.
  Millisecundumot kell megadni, a 9000 érték 9
  másodpercet jelent. Túl alacsony értéknél levágja
  az effektet

21
Véletlen helyett fix sorrend

• A fenti kódot módosítjuk, a véletlen helyett
  sorba olvassa be a képeket.
• az elso sor után új sorba megadjuk a változót
  var slim -1
• az 5. sort a következokre cseréljükslimif(sli
  mgtslidesmax)slim0
• ezzel a fenti változó értékét egyel növeljük (a
  -1 miatt a 0. képpel kezdi), ha a változó értéke
  nagyobb lenne, mint a maximum képek száma, akkor
  újra a 0. képet teszi ki.