Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

JavaScript a gyakorlatban. 1.Gyakorlat Mi a JavaScript?  A JavaScript nem Java! JavaScript futtatása JavaScript beillesztése XHTML-be Változók kezelése.

Hasonló előadás


Az előadások a következő témára: "JavaScript a gyakorlatban. 1.Gyakorlat Mi a JavaScript?  A JavaScript nem Java! JavaScript futtatása JavaScript beillesztése XHTML-be Változók kezelése."— Előadás másolata:

1 JavaScript a gyakorlatban

2 1.Gyakorlat Mi a JavaScript?  A JavaScript nem Java! JavaScript futtatása JavaScript beillesztése XHTML-be Változók kezelése

3 Mi a JavaScript? A JavaScriptet a Netscape fejlesztette ki. (Eredeti neve LiveScript.) Ez egy olyan parancsnyelv, amely segítségével létrehozhatunk interaktív Web-oldalakat.

4 A JavaScript nem Java! A JavaScript nem tévesztendő össze a Java- val! A hasonló név ellenére a Java önálló programozási nyelv, szükség van fordító programra, amivel a forráslistából bájtkódot készíthetünk. A JavaScript pedig parancsnyelv, futtatásához nem kell más, mint egy böngésző, amely kezelni képes a JavaScriptet. Hasonlóság azonban nem csak a névben van, ugyanis a két nyelv szintaxisa a C(++) nyelvhez hasonlatos, a manapság divatos objektumorientáltságot pedig egyikük sem kerülhette el.

5 JavaScript futtatása Egy JavaScriptet "értő" böngészőre van szükségünk. Ez lehet akár a Netscape Navigator, amely a 2.0-as verzió óta ismeri a JavaScriptet, vagy a Microsoft Internet Explorer (3.0 vagy magasabb verzió). A böngészők általában „ismerik” a JavaScriptet és képesek azt futtatni.

6 JS0101.html JavaScript beillesztése XHTML-be 1.1 feladat 1.1 feladat Légy üdvözölve! A honlap fejlesztés alatt! 1.1 feladat 1.1 feladat Légy üdvözölve! A honlap fejlesztés alatt!

7 JS0102.html JavaScript beillesztése XHTML-be 1.2 feladat 1.2 feladat Légy üdvözölve! A honlap fejlesztés alatt! Legutóbbi módosítás: 1.2 feladat 1.2 feladat Légy üdvözölve! A honlap fejlesztés alatt! Legutóbbi módosítás: XHTML 1.0 Strict-ben nincs: LANGUAGE=”JavaScript” A régi böngészők elől elrejtjük a JS-kódot! Objektumorientált felépítés, ahol a document jelzi az adott honlapot.

8 JS0103.js JS0103.js JS0103.html JS0103.html JavaScript beillesztése XHTML-be 1.3 feladat 1.3 feladat Légy üdvözölve! A honlap fejlesztés alatt! Legutóbbi módosítás: 1.3 feladat

1.3 feladat

Légy üdvözölve! A honlap fejlesztés alatt! Legutóbbi módosítás:

// JavaScript document.write(document.lastModified); // JavaScript document.write(document.lastModified);

9 JS0106.js JS0104.js JS0105.js JavaScript – változók kezelése // JavaScript now = new Date(); localtime = now.toString(); utctime = now.toGMTString(); document.write(" Helyi ido: " + localtime + " "); document.write(" UTC ido: "+ utctime); // JavaScript now = new Date(); localtime = now.toString(); utctime = now.toGMTString(); document.write(" Helyi ido: " + localtime + " "); document.write(" UTC ido: "+ utctime); document.write(" UTC ido: "+ utctime + " "); hours = now.getHours(); mins = now.getMinutes(); secs = now.getSeconds(); document.write(" "); document.write(hours + " : " + mins + " : " + secs); document.write(" "); document.write(" UTC ido: "+ utctime + " "); hours = now.getHours(); mins = now.getMinutes(); secs = now.getSeconds(); document.write(" "); document.write(hours + " : " + mins + " : " + secs); document.write(" "); // JavaScript text=prompt("Írjunk be valamit!"); // JavaScript text=prompt("Írjunk be valamit!");

10 JS0107.js JavaScript – változók kezelése // JavaScript for (i=1;i<5;i++){ alert("Még "+(5-i)+" alkalommal írom ki ezt az üzenetet!"); if (i==4) alert("Most azt hiszed, vége? Az Enter után nyomd meg az F5-öt!"); } // JavaScript for (i=1;i<5;i++){ alert("Még "+(5-i)+" alkalommal írom ki ezt az üzenetet!"); if (i==4) alert("Most azt hiszed, vége? Az Enter után nyomd meg az F5-öt!"); }

11 2. Gyakorlat Függvények Array (tömb) objektum String objektum Elágazások Ciklusok Math és Date objektumok

12 JavaScript - függvények Minden programozási nyelvben, így a JavaScript-ben is rendkívül fontos szerepet kapnak a függvények. A nyelv számos függvényt tartalmaz, például a korábban megismert alert() függvény is ezek közül való. A függvényeknek adhatunk át paramétereket, amelyekkel dolgozni fognak (az alert() függvény paramétere az idézőjelek között átadott szöveg volt, amit a függvény egy üzenetablakban jelenített meg). Mi magunk is írhatunk függvényeket, hogy a nagyobb, összetettebb feladatokat kisebb, jobban kezelhetőbb részekre bontsuk. Ezek a függvények szintén átvehetnek paramétereket, sőt értéket is adhatnak vissza, csakúgy, mint más programozási nyelvekben.

13 JavaScript - függvények A function kulcsszót közvetlenül a függvény neve követi, majd zárójelekben a paramétereket adjuk meg. A függvény törzse kapcsos zárójelek között van, és ide helyezzük el a függvényhez tartozó utasításokat. function FuggvenyNeve(parameter1, parameter2, …) { …utasítások… }

14 JavaScript - függvények JavaScript-ben a változók neve betűvel, vagy aláhúzással (_) kezdődhet, és a függvénynevekhez hasonlóan szintén különbség van kis- és nagybetűk között. Változót a var kulcsszóval, majd a változó nevének megadásával deklarálhatunk. Deklaráláskor az értékadó operátor (=) segítségével kezdőértéket is rendelhetünk a változókhoz.

15 JS0202.js JS0201.js JavaScript - függvények // JavaScript function Greet(who){ alert("Hello! "+who+"!"); } Greet("Rita"); // JavaScript function Greet(who){ alert("Hello! "+who+"!"); } Greet("Rita"); Függvény Függvény neve Függvény paramétere Függvény törzse A függvény meghívása // JavaScript vnev=prompt("Vezetéknév megadása:"); knev=prompt("Keresztnév megadása:"); hcim=prompt("A lap címe:"); document.write(" "+hcim+" "); document.write(" Készítette: "+vnev+" "+knev+" "); // JavaScript vnev=prompt("Vezetéknév megadása:"); knev=prompt("Keresztnév megadása:"); hcim=prompt("A lap címe:"); document.write(" "+hcim+" "); document.write(" Készítette: "+vnev+" "+knev+" "); Beépített függvények használata

16 JavaScript - tömbök A tömbök rendkívül fontosak a programozásban. Gyakran van szükségünk nagy mennyiségű adat kényelmes tárolására úgy, hogy bármelyikhez könnyen hozzáférjünk. A tömbök sok változóból felépülő összetett adattípusok. Az egyes adatokhoz egy név (a tömb neve) és egy szám segítségével férhetünk hozzá.

17 JavaScript - tömbök Tömböket igen egyszerűen hozhatunk létre: tomb = new Array(), azaz létrehozzuk az Array objektum egy új példányát. A tomb nevű új tömbünkhöz rögtön értékeket is rendelhetünk. tomb[0] = "JavaScript"; tomb[1] = "2000"; tomb[2] = "Aurum";

18 JavaScript - tömbök tombnev = new Array([a_tomb_hossza]) tombnev = new Array([1.elem, 2.elem, 3.elem,...,n.elem]) Az első esetben csak annyi a különbség, hogy adtunk a tömbnek egy kezdeti hossz értéket. Ez a hossz a későbbiek során lekérdezhető az Array objektum length adatmezőjéből. A második esetben zárójeleken belül felsoroltuk a tömb induló értékeit. Ezek később persze szabadon bővíthetők. A szögletes zárójelek ( [ ] ) azt jelentik, hogy a közöttük lévő részek nyugodtan elhagyhatók.

19 JavaScript – tömbök használata // JavaScript nnev=prompt("Bekérendő szavak száma:"); n=parseInt(nnev); szavak = new Array(n); for (i=0;i

20 Array (tömb) objektum – legfontosabb metódusok AutoTipusok = new Array("Honda","Mercedes","BMW"); Az Array objektum legfontosabb metódusai a következők:  a join metódus összefűzi a tömb elemeit egyetlen sztringgé  a reverse megfordítja (transzponálja) a tömb elemeit, az utolsóból lesz az első, az elsőből az utolsó  a sort rendezi a tömb elemeit Az előző példánál maradva vizsgáljuk meg ezeket a metódusokat:  AutoTipusok.join() a "Honda,Mercedes,BMW" sztringet adja vissza  AutoTipusok.reverse() megfordítja a sorrendet (AutoTipusok[0] a BMW lesz, AutoTipusok[1] a Mercedes. míg AutoTipusok[2] a Honda)  Autotipusok.sort() rendezi a tömböt, igy a tömbünk a következő módon változik meg: AutoTipusok[0] a BMW lesz, AutoTipusok[1] a Honda, a Mercedes pedig az AutoTipusok[2]

21 String objektum JavaScript-ben nem létezik sztring adattípus. Helyette viszont létezik a String objektum, melynek számos hasznos metódusa is van. Ezekkel könnyedén manipulálhatjuk a sztringünket. String objektumot a következő módon hozhatunk létre: String_objektum_neve = new String(sztring); A zárójelben tetszőleges sztring állhat, ez lesz tulajdonképpen az új String objektum. szoveg = new String("JavaScript"); A String objektumnak van egy length nevű adatmezője, amelyből kiolvashatjuk a tárolt sztring hosszát. A String objektum metódusai két típusba sorolhatók. Az egyik típus a sztring egy módosított változatát adja vissza. Ide tartozik például a subString és a toLowerCase metódusok. Az előbbi a sztring egy részét adja vissza, míg az utóbbi kisbetűsre alakítja azt. A másik típushoz olyan metódusok tartoznak, amelyek HTML formátumúra hozzák a sztringet. Ilyen például a bold, ill. a link függvény.

22 String objektum

23 Az eredeti sztring: JavaScript szoveg.length = 10 szoveg.substring(3,8) = aScri szoveg.toUpperCase() = JAVASCRIPT szoveg.toLowerCase() = javascript szoveg.charAt(0) = J szoveg.charAt(4) = S szoveg.indexOf('S') = 4 szoveg.indexOf('s') = -1 szoveg.lastIndexOf('S') = 4 szoveg.lastIndexOf('s') = -1

24 String objektum szoveg.link('http://www.netscape.com') = JavaScript szoveg.big() = JavaScript szoveg.blink() = JavaScript szoveg.bold() = JavaScript szoveg.fixed() = JavaScript szoveg.italics() = JavaScript szoveg.small() = JavaScript szoveg.strike() = JavaScript szoveg.sub() = JavaScript szoveg.sup() = JavaScript JavaScript

25 JS0204.js JavaScript – stringkezelés // JavaScript msg=prompt("Görgetendő szöveg"); msg="......"+msg; pos=0; function ScrollMessage(){ window.status = msg.substring(pos,msg.length) + msg.substring(0,pos); pos++; if (pos>msg.length) pos = 0; window.setTimeout("ScrollMessage()",200); } ScrollMessage(); // JavaScript msg=prompt("Görgetendő szöveg"); msg="......"+msg; pos=0; function ScrollMessage(){ window.status = msg.substring(pos,msg.length) + msg.substring(0,pos); pos++; if (pos>msg.length) pos = 0; window.setTimeout("ScrollMessage()",200); } ScrollMessage();

27 JavaScript - ciklusok // JavaScript names=new Array(); i=0; do { next=window.prompt("Következő név bekérése:",""); if (next>" ") names[i]=next; i++; } while (next > " "); document.write(" "+(names.length)+" nevet írtunk be. "); document.write(" "); for (i in names) { document.write(" "+names[i]+" "); } document.write(" "); // JavaScript names=new Array(); i=0; do { next=window.prompt("Következő név bekérése:",""); if (next>" ") names[i]=next; i++; } while (next > " "); document.write(" "+(names.length)+" nevet írtunk be. "); document.write(" "); for (i in names) { document.write(" "+names[i]+" "); } document.write(" "); JS0206.js

28 A Date (dátum) objektum Nagyon hasznos előre definiált objektum. Segítségével olyan alkalmazásokat írhatunk, amelyek idő- vagy dátumértékeket kezelnek. Bizonyára mindenki találkozott már olyan oldallal, amely mutatta a pontos időt, illetve a dátumot. Ezeket is JavaScript programok számolják ki és jelenítik meg. Az alábbi módon hozhatjuk létre a Date objektum új példányait: dátum_objektum_neve = new Date( [paraméterek] );

29 A Date (dátum) objektum A paraméter a következő variációk bármelyike lehet: Nem adunk meg paraméterként semmit. Ekkor az aktuális dátum és idő értékeket használjuk fel. Például: ma = new Date(); A paraméter egy sztring, ami egy dátumot reprezentál a következő formában: "Hónap Nap, Év óra:perc:másodperc". Páldául: 07karacsony = new Date("December 25, :30:30"); Ha elhagyjuk az óra:perc:másodperc részt, akkor ez automatikusan a 0 értéket veszi fel. Számokkal adjuk meg a dátumot. Például: 07karacsony = new Date(2007, 11, 24, 12, 30, 30); a set metódus segítségével beállíthatjuk a dátum és idő értékét (setYear, setMonth, setDate, setMinutes, setSeconds) a get metódussal kiolvashatjuk ezeket az értékeket (getYear, getMonth, getDate, getMinutes, getSeconds)

30 A Math (matematikai) objektum A legtöbb trigonometrikus, exponenciális és logaritmikus függvényt is tartalmazza ez az objektum. Így például egy X szög szinuszát így kaphatjuk meg: Math.sin(X);

31 A Math (matematikai) objektum Előfordulhat, hogy véletlenszámra van szükségünk a programunk során. Erre is ad megoldást a Math objektum, mégpedig a random() metódussal. A Math.Random() egy véletlenszámot ad vissza, amely 0 és 1 közé esik. Célszerű alkalmazni a with utasítást olyan esetekben, amikor a Math objektumra gyakran kell hivatkozni: with (Math){ kor_terulet = PI * r * r; x = r * sin(beta); c = sqrt(a*a + b*b);} Látható, hogy így nem kellett minden Math objektumbeli metódus és konstans elé odaírni a "Math" hivatkozást. Ezzel a kódunk is átláthatóbbá vált.

32 JS0207.js A Math objektum // JavaScript total = 0; for (i=1; i<=5000; i++) { num = Math.random(); total += num; window.status = i + " szám generálása";} average = total / 5000; average = Math.round(average * 1000) / 1000; document.write(" 5000 szám átlaga: " + average + " "); // JavaScript total = 0; for (i=1; i<=5000; i++) { num = Math.random(); total += num; window.status = i + " szám generálása";} average = total / 5000; average = Math.round(average * 1000) / 1000; document.write(" 5000 szám átlaga: " + average + " ");


Letölteni ppt "JavaScript a gyakorlatban. 1.Gyakorlat Mi a JavaScript?  A JavaScript nem Java! JavaScript futtatása JavaScript beillesztése XHTML-be Változók kezelése."