1 Programozás JavaScript nyelven )Ębb témakörök • A JavaScript nyelv szerepe • A JavaScript nyújtotta lehet Ęségek • A JavaScript beillesztése a weboldalakra A JavaScript szerepe • weblapok dinamikus kezelhet Ęsége érdekében fejlesztették ki • legnépszerĦbb szkriptnyelv • C-típusú nyelv, nem módosított Java • kliens-oldali JavaScript: – böngészĘ kezelése – kommunikáció a felhasználóval • objektum alapú nyelv A JavaScript nyújtotta lehet Ęségek • kész kódrészletek állnak rendelkezésre • segítségével dinamikusan felépíthet Ęk a weboldal egyes részei • HTML/XHTML objektumokhoz kapcsolható eseményekre reagálni tudunk • HTML/XHTML DOM elemei olvashatók és írhatók Ħrlap mezĘit elküldés el Ętt ellenĘrizhetjük • böngészĘ specifikus megoldások JavaScript a weboldalon • beillesztése a <script> tag segítségével • <head> elemen belül – függvények, változók deklarációja – látható kimenete itt ne legyen – az itt lévĘ kódot meg kell hívni • <body> elemen belül – végrehajtás a feldolgozás során – függvényeket itt is meg kell hívni • JavaScript kód külsĘ fájlban is elhelyezhetĘ <script type="text/javascript" src="szkript.js"> Kliensoldali szkript alkalmazása • HTML komment technikát kell használni <SCRIPT Language=JavaScript> <!-- Function Valami() …….. End --> </SCRIPT> – Ha a böngészĘ nem ért JavaScript-ül, akkor, ignorálja, mert komment-nek tekinti.
30
Embed
) bb témakörök Programozás JavaScript nyelvenusers.iit.uni-miskolc.hu/~szucs/inftech/anyag/javascript.pdf• Java önálló programozási nyelv, szükség van fordító programra,
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
Programozás JavaScriptnyelven
bb témakörök
• A JavaScript nyelv szerepe• A JavaScript nyújtotta lehet ségek• A JavaScript beillesztése a weboldalakra
A JavaScript szerepe
• weblapok dinamikus kezelhet ségeérdekében fejlesztették ki
• Java önálló programozási nyelv, szükségvan fordító programra, amivel aforráslistából bájtkódot készíthetünk
• A JavaScript pedig parancsnyelv,futtatásához nem kell más, mint egyböngészõ, amely kezelni képes aJavaScriptet
JavaScript beágyazása HTMLdokumentumba
• Készítsük el a következ Weblapot!
<HTML><BODY>Ez itt egy hagyományos HTML
dokumentum.<BR><SCRIPT LANGUAGE="JavaScript">
document.write("Ez már JavaScriptbeníródott!!!<BR>")
</SCRIPT>Ez a sor újra HTML!<BR></BODY></HTML>
Események
• A programoknak gyakran kell reagálniaolyan eseményekre, mint billentylenyomása, vagy az egér mozgatása
• Készítsük el a következ weblapot!
<BODY><FORM><INPUT TYPE="button" VALUE="Kattints
rám!" onClick="alert('Hello!')"></FORM></BODY>
5
onClick
• ha a felhasználó megnyomja a gombot• végrehajtja az alert('Hello!') JavaScript
kódot• Ez egy függvény, amely létrehoz egy
üzenetablakot, melyben a zárójelen belülidéz jelek közé írt szöveget jeleníti meg
• Figyeljük meg azt is, hogy lehet idéz jelenbelül idéz jelet használni!
Függvények
• a JavaScript-ben is rendkívül fontosszerepet kapnak a függvények
• Mi magunk is írhatunk függvényeket, hogya nagyobb, összetettebb feladatokatkisebb, jobban kezelhet bb részekrebontsuk
• Készítsünk olyan programot, amely bekéregy nevet, majd egy alert ablakban kiírja:Szia <NÉV>!
BODY rész• <BODY>• <FORM NAME="urlap1">• Add meg a neved:<BR>• <INPUT TYPE="text" NAME="nev"><BR>• <INPUT TYPE="button" VALUE="Köszönés"
onClick="koszon()">• </FORM>• </BODY>• </HTML>
HEAD rész• <HTML>• <HEAD>• <SCRIPT LANGUAGE="JavaScript">• function koszon(){• var x = document.urlap1.nev.value;• alert("Szia "+x+" !");• }• </SCRIPT>• </HEAD>
6
function
• A function kulcsszót közvetlenül afüggvény neve követi, majd zárójelekben aparamétereket adjuk meg
• A függvény törzse kapcsos zárójelekközött van, és ide helyezzük el afüggvényhez tartozó utasításokat
• A JavaScript programok változókbantárolják az információkat, adatokat
Változók
• a JavaScript-ben nem kell definiálnunk aváltozók típusát– Ebb l lesz is majd néha bonyodalom
• azt a programot végrehajtó böngészôállapítja meg a változók használataalapján
• a változók neve bet vel, vagy aláhúzással(_) kezd dhet
• különbség van kis- és nagybet k között
Változódeklaráció
• 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ünka változókhoz
• A függvényeket a nevükkel hívjuk meg, éshíváskor adjuk át a paraméterek aktuálisértékét
Feladat
• Készítsünk olyan programot, amely bekérkét egész számot, és kiírja az összegüket!
• <SCRIPT LANGUAGE="JavaScript">• function osszeg(){• var x = document.urlap1.szam1.value;• var y = document.urlap1.szam2.value;• var eredmeny = x + y;• alert("Az összeg: "+eredmeny);• }• </SCRIPT>
7
Egy kis probléma
• Nem számként adja össze az értékeket,hanem szövegként!
Javítás
• Nem hivatalos megoldás:– var x = document.urlap1.szam1.value*1;– var y = document.urlap1.szam2.value*1;
• Hivatalos megoldás:– var x =
parseInt(document.urlap1.szam1.value);– var y =– parseInt(document.urlap1.szam2.value);
Feladat
• Kérjük be egy henger sugarát ésmagasságát, majd írjuk ki a térfogatát!
• <SCRIPT LANGUAGE="JavaScript">• function osztalyzat(){• var pont = document.urlap1.pontszam.value*1;• if (pont<0) alert("Hibás adat!")• else if (pont<=13) alert("elégtelen")• else if (pont<=17) alert("elégséges")• else if (pont<=23) alert("közepes")• else if (pont<=30) alert("jó")• else if (pont<=34) alert("jeles")• else alert("Hibás adat");• }• </SCRIPT>
10
Feladat
• Készítsünk olyan weblapot, amely bekéregy egész számot, majd kiír annyi darab *-ot!
• Van egy kis megtakarított pénzem. Arravagyok kíváncsi, hány hónap múlva éri elaz összeg a bankban a 100 000 Ft-ot, hahavi 2%-os kamattal számolhatok?
• Készítsünk olyan weblapot, ahol az egyikkeret szövegbeviteli mez ibe beírt kétszámot összeadjuk, és egy másik keretszövegbeviteli mez jébe írjuk ki azösszeget!
Jobb oldali keret<HTML><HEAD></HEAD><BODY><FORM NAME="urlap2"><INPUT TYPE="text" NAME="osszeg">
• Készítsünk olyan weblapot, amelyen egynyomógomb megnyit egy másik ablakot,egy weblappal, és az els weblapon vanolyan nyomógomb, amely utólag tudjamódosítani a másik ablak háttérszínét!
Uj.html
<HTML><HEAD></HEAD><BODY>Ez egy új ablak.</BODY></HTML>
• <SCRIPT LANGUAGE="JavaScript">• function ossze(){• var x = document.szamolo.a.value*1;• var y = document.szamolo.b.value*1;• var z = x + y;• window.status = z;• }• </SCRIPT>
26
rlapok elküldése levélben
• Valójában ez nem igényel egyetlenJavaScript utasítást sem
• tisztán megoldható HTML segítségével• <FORM METHOD="post"
ACTION="mailto:e-mail@cim"ENCTYPE="text/plain">
• ... Itt az rlap mez inek definiálásakövetkezik ...
• </FORM>
Feladat
• Készítsünk olyan rlapot, amelynektartalma e-mailben elküldhet !
• Készítsünk olyan nyomógombot, amelyabban az esetben, ha az egeret fölévisszük, megváltozik! A nyomógomblegyen olyan hivatkozás, amelyik az iskolahonlapjára mutat!
Sütik• cookies• a HyperText Transfer Protocoll-t (HTTP) nem
alkalmas arra, hogy kapcsolatot teremtsen kétfelhasználói (kliens) kérés között
• Tegyük fel például, hogy egy olyan oldaltszeretnénk készíteni, amely felismeri azt, hogyha valaki már nem az els alkalommal látogatjameg, és ismerve azt, hogy el leg milyentémákat tartalmazó oldalakat járt be az illet ,most máshová küldi
Sütik
• A sütik segítségével adatokat tárolhatunka felhasználó gépén
var user = getCookie("azEnSutim");if (user == null){user = prompt("Köszöntelek ezen az oldalon! Kérlek írd be a neved!","");if (user == null){
alert("Nem írtad be a neved ezért a továbbiakban \"Fantomnak\"nevezlek!");user = "Fantom";
}expDate = new Date();expDate.setTime(expDate.getTime() + (365*24*60*60*1000));setCookie(‘azEnSutim',user,expDate);document.write("Ha legközelebb visszatérsz, már megismerlek!");
} else{document.write("Üdvözöllek ismét ezen az oldalon "+user+"! Látom
visszatértél."); }</SCRIPT></BODY></HTML>
Befejezés
• Sajnos a JavaScript is küszködik egybetegséggel, azzal, hogy az egyesböngész k nem teljesen egyformánkezelik a nyelvet.
• több böngész ben is teszteljük le azoldalainkat és az azokba ágyazottprogramokat!
• Sajnos amíg a legelterjedtebb böngész kegymással csatáznak, addig csak újabb ésújabb eltérések várhatók