Upload
kovaron80
View
28
Download
4
Embed Size (px)
DESCRIPTION
JavaScript alapjai
Citation preview
NONPROFIT RDEKVDELMI SZERVEZETEK FEJLESZTSE
(PL.3346)
Java-script nyelv programozs alapjai
Haramia Lszl
JavaScript szerepe
Netscape fejlesztette ki LiveScript
Interaktv weboldalak dinamikus kezelhetsge rdekben fejlesztettk ki
kommunikci a felhasznlval
legnpszerbb szkript-nyelv
C-tpus nyelv, nem mdostott Java
JavaScript futtatshoz csak egy bngsz kell
objektum alap nyelvMegj: a bngszk ltalban ismerik a JavaScriptet s kpesek azt futtatni
JavaScript nyjtotta lehetsgek
ksz kdrszletek llnak rendelkezsre
dinamikusan felpthetk a weboldal egyes rszei
HTML/XHTML objektumokhoz kapcsolhat esemnyekre reaglni tudunk
HTML/XHTML DOM elemei olvashatk/rhatk
rlap mezit elklds eltt ellenrizhetjk
szablyok
pontosvessz az utastsok vgn - nem ktelez
kommentjelek ( //, illetve /*..*/ )
Megklnbzteti a kis/nagybetket
JavaScript a weboldalon
Html oldalra a taggal
elemen bellfggvnyek, vltozk deklarcija
lthat kimenete itt nem lehet
az itt elhelyezked kdot kell meghvni
elemen bellvgrehajts a feldolgozs sorn
fggvnyeket itt is meg kell hvni
JavaScript kd kls fjlban
JavaScript begyazsa HTML dokumentumba
Ez itt egy hagyomnyos HTML dokumentum.
document.write("Ez mr JavaScriptben rdott!")
Ez a sor jra HTML!
JavaScript - fggvnyek A function kulcsszt kzvetlenl a fggvny neve kveti,
majd zrjelekben a paramtereket adjuk meg
A fggvny trzse kapcsos zrjelek kztt van, s ide helyezzk el a fggvnyhez tartoz utastsokat
function FuggvenyNeve(parameter1, parameter2, ) { utastsok }
A nyelv szmos fggvnyt tartalmaz, pl. alert() fggvny Mi is rhatunk fggvnyeket, hogy nagyobb, sszetett
feladatokat kisebb, jobban kezelhetbb rszekre bontsuk A fggvnyeknek adhatunk t paramtereket, amelyekkel
dolgozni fognak, rtket is visszaadhatnak, csakgy, mint ms programozsi nyelvekben
JavaScript - fggvnyek
// JavaScript
function Udv(who){
alert("Hello! "+who+"!");
}
Udv(Csaba");
Fggvny Fggvny neve
Fggvny paramtere
Fggvny trzse
A fggvny meghvsa // JavaScript
vnev=prompt("Vezetknv megadsa:");knev=prompt("Keresztnv megadsa:");hcim=prompt("A lap cme:");document.write(""+hcim+"");
document.write("Ksztette: "+vnev+" "+knev+"");
Beptett fggvnyek hasznlata
Nyelvi elemek
vltozknem tpusos nyelv
rvnyessgi kre a deklarci helytl fgg
eljrsok, fggvnyekalert("Figyelmeztets");
confirm("Valban?"); OK: true, Mgsem: false
prompt("valtozo_nev", "kezdeti_ertek");
vezrlszerkezetekfeltteles szerkezetek (ifelse, switch)
itercik (for, while, do...while)
Esemnykezels
esemnykezelk segtsgvel dinamikus weboldalak hozhatk ltre
tipikus esemnyek egrkattints
egr mozgatsa valamely pont fltt
rlapbeviteli mez kivlasztsa vagy elhagysa
rlap elkldse vagy alaphelyzetbe lltsa
weblap vagy kp betltdse
JavaScript - vltozk - vezrlszerkezetek JavaScript-ben a vltozk neve
betvel, vagy alhzssal (_) kezddhet
klnbsg van kis- s nagybetk kztt
Vltozt a var kulcsszval, majd a vltoz nevnek megadsval deklarlhatunk
Deklarlskor az rtkad opertor (=) segtsgvel kezdrtket is rendelhetnk a vltozkhoz
// JavaScript
text=prompt("rjunk be valamit!");document.write(text);
Vezrl szerkezetek itercik (for, while, do...while)feltteles szerkezetek (ifelse, switch)
// JavaScript
for (i=1;i
Dokumentum Objektum Modell
szabvnyos, platform s nyelv-fggetlen modell
interfszeket definil HTML dokumentumok s alkalmazsok kztt
objektumokat, metdusokat s tulajdonsgokat definil, melyek lekrdezhetk s mdosthatk
Fontosabb JavaScript Objektumok
Array
concat(), sort(), push(), pop(),
String
length(), toUpperCase(), match(), indexOf(), replace()
Date
getTime()
getFullYear(), getMonth(), getDate(), getDay()
Math
random(), max(), min(), round()
JavaScript - tmbk nagy mennyisg adat knyelmes trolst s gyors
hozzfrst biztost
tmb sok vltozbl felpl sszetett adattpus
adatokhoz hozzfrs:egy nv (a tmb neve) s egy szm
definils: tombnev = new Array([a_tomb_hossza])
tombnev = new Array([1.elem, 2.elem, 3.elem, ... ,n.elem]) .
A tomb nev j tmbnkhz rtk rendelse
tomb[0] = "JavaScript";
tomb[1] = "2011";
tomb[2] = szvegesadat";
Array objektum legfontosabb metdusokPl. AutoTipusok =
new Array("Honda",Skoda","BMW"); legfontosabb metdusai
join metdus sszefzi a tmb elemeit egyetlen sztringg reverse megfordtja (transzponlja) a tmb elemeit, az utolsbl lesz
az els, az elsbl az utols sort rendezi a tmb elemeit
Metdusok vizsglata AutoTipusok.join() a Honda,Skoda,BMW " sztringet adja vissza AutoTipusok.reverse() megfordtja a sorrendetAutotipusok.sort() rendezi a tmbt
AutoTipusok[0] BMW ,AutoTipusok[1] Honda, AutoTipusok[2] Skoda
String objektum
Nincs sztring adattpus, de van a String objektum String objektum ltrehozsa
String_objektum_neve = new String(sztring);A zrjelben tetszleges sztring llhat, ez lesz a String objektum
pl. szoveg = new String("JavaScript"); Adatmezje:
length(szoveg); - kiolvassa a trolt sztring hosszt A String objektum metdusai kt tpusba sorolhatk.
1) sztring egy mdostott vltozatt adja vissza subString metdus a sztring egy rszt adja vissza, t0oLowerCase metdus kisbetsre alaktja a stinget
2)HTML formtumra alakt metdusok bold fggvnylink fggvny
String objektum
Metdus Lers
anchor HTML hivatkozst kszt a sztringbl
big, blink, bold, fixed, italics,
small, strike, sub, sup HTML-knt formzott sztringet hoz ltre
chartAt a paramterknt tadott pozciban lv karakterrel tr vissza
indexOf, lastIndexOf
A paramterben meghatrozott rszsztring els vagy utols pozcijval
tr vissza. Ha ilyen nem szerepel benne, akkor -1 a visszaadott rtk
link HTML linket kszt a sztringbl
split
felosztja a sztringet rszsztringekre egy elvlaszt karakter mentn,
majd ezeket egy tmbbe teszi
substring a sztring egy meghatrozott rszvel tr vissza
toLowerCase, toUpperCase csupa kisbetss ill. nagybetss alaktja a sztringet
Date objektum hasznos elre definilt objektum
Id- vagy dtumrtkeket kezel alkalmazsok...
Pl. weboldalon pontos id, dtum megjentse
Date objektum ltrehozsa
dtum_objektum_neve = new Date([paramterek]);
paramterek ma = new Date(); nincs ->aktulis dtum, id
sztring "Hnap Nap, v ra:perc:msodperc;april1= new Date(prilis 1, 2011");april1= new Date(2011, 04, 01");
set metdus belltja dtum, id rtkt(setYear, setMonth, setDate, setMinutes, setSeconds)
get metdus kiolvassa dtum, id rtkt(getYear, getMonth, getDate, getMinutes, getSeconds)
Math objektumTartalmazza a legtbb trigonometrikus, exponencilis s
logaritmikus fggvnyt Pl.l egy X szg szinusza Math.sin(X);
Fggvny Lers
abs abszolt rtk
sin, cos, tan trigonometrikus fggvnyek; az argumentum radinban
acos, asin, atan az elbbi fggvnyek inverze; argumentum radinban
exp, log exponencilis fggvny, termszetes alap logaritmus
ceil fels egszrsz
floor als egszrsz
min, max
az argumentumknt megadott kt rtk kzl a kisebbet, ill.
a nagyobbat adjk vissza
pow
exponencilis fggvny; els argumentuma az alap, a
msodik a kitev
round kerekts a legkzelebbi egszre
sqrt ngyzetgyk fggvny
Math objektum
random() metdus vletlenszm generls
Math.Random() - 0 s 1 kz es vletlenszmot ad
with (Math){ kor_terulet = PI * r * r; x = r * sin(beta); c = sqrt(a*a + b*b);}
A with utasts hasznlhat, ha a Math objektumra gyakran kell hivatkozni , mert gy nem kell minden Math objektumbeli metdus s konstans el odarni a "Math" hivatkozst. Ezzel a kdunk is tlthatbb vlt.
Esemnykezels
interaktvv teszik a weboldalakat, esemnyeket szlelhetnek, billenty lenyomsra, egrmozgatsra s vlaszolhatnak is azokra.
minden esemny egy objektumhoz tartozik minden esemnynek van neve
pl. onMouseOver (ehhez nem kell a elemprt hasznlni)
pl. Kattints ide!
ha tbb utastsra van szksgnk, megadhatunk fggvnyt is az esemnykezelnek, amit a fejlcben deklarlunk
gy is megadhatunk egy esemnykezelt: document.onMouseDown = mousealert();
Gyakran hasznlt esemnykezelk weboldal betltsekor, elhagysakor
onLoad, - bngsz tpusnak lekrdezse onUnload, - kilps kezelse
rlap kezels onFocus belps egy rlap elembe onBlur rlap elem elhagysa onChange rlap elem tartalma megvltozik onSubmit rlap elkldse
egrmozgs onMouseOver egr fl kerl egy elemnek onMouseOut egr elhagyja az elemet
idzt esemnyek getHours(), getMinutes(), getSeconds() setTimeout
EsemnyekProgram:
reagls az egr kattintsra
a felhasznl megnyomja a gombot, Vgrehajtdik az alert('Hello!') JavaScript kdEz a fggvny ltrehoz egy zenetablakot, melyben a zrjelen bell idzjelek kz rt szveget jelenti meg.Idzjelen bell aposztrf az idzjel.
Esemnyek
Esemnyek
FggvnyekProgram: Nv bekrs, alert
ablakba rja ki: pl. Szia !
add meg a neved:
function koszon(){
var x = document.urlap1.nev.value;alert("Szia "+x+" !");}
HTML dokumentum
A JavaScript egy HTML oldal minden elemt, s a bngsz ablakt is objektumknt kezeli
Rendelkezik tulajdonsgokkal (adatmezkkel) s megfelel fggvnyekkel, amelyeken keresztl az oldal szinte minden tulajdonsgt megvltoztathatjuk
A bngsz ablaka a JavaScript szemszgbl egy n. window objektum
Az ablak belsejbe HTML oldalt tlthetnk, amit a JavaScript a document objektumon keresztl kezel
Bngsz objektumok
window a hierarchia cscsn ll bngszablakot kpvisel
navigator a bngszrl trol informcit
screen a kliens gp kpernyjrl rendelkezik informcikkal
history korbban megltogatott web oldalak cmt trolja
location az ppen aktulis oldal cmt tartalmazza reload() vagy replace() fggvnyei segtsgvel j oldal tlthet be
Window objektum
Metdusok
open, showModelDialog, showModelessDialog, close, navigate
Tulajdonsgok
document, event, history, location, navigator
Esemnyek
onload, onbeforeunload, onunload, onfocus, onblur
Kollekci
frames
Dokument objektum
Metdusok open, write, close, createElement,
insertAdjacentElement, insertBefore
Tulajdonsgok body, cookie, title
Esemnyek onclick, onpropertychange, onmousexxx, onkeyxxx,
ondragxxx
Kollekcik all, frames, forms
HTML dokumentumProgram: weblap
httrsznnek vltoztatsa nyomgombokkal
function piros(){document.bgColor = "red";
}function sarga(){document.bgColor = "yellow";
}function kek(){document.bgColor = "blue";
}
Ksznm a figyelmet!
31
Ajnlott olvasmny:
http://zeus.nyf.hu/~akos/javascript/javascript.html
http://javascript.lap.hu/
http://weblabor.hu/cikkek/javascript-fuggvenyek