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