1 WEB TECHNOLÓGIÁK A JavaScript. 2 Bevezetés HTML dokumentumba beágyazott végrehajtható programok készítésére Kliens oldali, (JavaScript kompatibilis)

Slides:



Advertisements
Hasonló előadás
Szerver oldali programozás
Advertisements

C# nyelvi áttekintő A „Programozás C# nyelven (Illés Zoltán)”
„Esélyteremtés és értékalakulás” Konferencia Megyeháza Kaposvár, 2009
Weblap szerkesztés HTML oldal felépítése Nyitó tag Záró tag Nyitó tag Záró tag oldalfej tözs.
Erőállóképesség mérése Találjanak teszteket az irodalomban
3. előadás (2005. március 1.) Utasítások, tömbök
JavaScript.
© Kozsik Tamás Tömbök, kollekciók és egyéb alaposztályok.
Mérés és adatgyűjtés laboratóriumi gyakorlat Karakterisztikák mérése 1 Makan Gergely, Mingesz Róbert, Nagy Tamás V
Mérés és adatgyűjtés laboratóriumi gyakorlat Makan Gergely, Mingesz Róbert, Nagy Tamás 2. óra szeptember 9., 10. v
A CLIPS keretrendszer CLIPS "C" Language Integration Production System.
Java programozási nyelv 2. rész – Vezérlő szerkezetek
Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem
WEB Technológiák Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem.
JSP és JavaBean JavaServer Pages és Java Beans Fabók Zsolt Általános Informatikai Tanszék Miskolci Egyetem.
PHP Webprogramozás alapjai
C++ Alapok, első óra Elemi típusok Vezérlési szerkezetek
Kliensoldali Programozás
Szombathely Dinamikus WEB programozás: PHP és JSP.
Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Előadás JavaScript Tananyag: W eb - programozás.
Vizuális és web programozás II.
A JAVA TECHNOLÓGIA LÉNYEGE Többlépcsős fordítás A JAVA TECHNOLÓGIA LÉNYEGE Platformfüggetlenség.
Webszerkesztés Űrlapok a HTML-ben. Űrlap létrehozása Űrlapunk tartalma a … elemek között fog helyetfoglalni Egy lapon több űrlap is elhelyezhető Több.
WEB Technológiák WEB-DB és XML ME Általános Informatikai Tsz. dr. Kovács László.
Ficsor Lajos Miskolci Egyetem Általános Informatikai Tanszék
JavaScript a gyakorlatban. 7. Gyakorlat DHTML  Fa-struktúrájú menük létrehozása  Legördülő menük létrehozása.
JavaScript a gyakorlatban
PHP I. Alapok. Mi a PHP? PHP Hypertext Preprocessor Szkriptnyelv –Egyszerű, gyors fejlesztés –Nincs fordítás (csak értelmező) Alkalmazási lehetőségek:
C nyelv utasításai.
A PHP (PHP: Hypertext Preprocessor) nyílt forráskódú, számítógépes szkriptnyelv, legfőbb felhasználási területe a dinamikus weboldalak készítése. Emiatt.
A LabVIEW használata az oktatásban
A JavaScript bemutatása
szakmérnök hallgatók számára
Szoftvertechnológia alapjai Java előadások Förhécz András, doktorandusz tárgy honlap:
Ismétlés A pascal program szerkezete: program programnev; Programfej
Klasszikus Programozás a FoxPro-ban
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.
PHP nyelv. PHP Interpreteres nyelv → parancsértelmező szükséges hozzá Rasmus Lerdorf 1995 → személyes felhasználás (internetes önéletrajzának megtekintésének.
1. Gyakorlat - Alapok 1. Írjon konzolprogramot, amely kiírja a “Hello ELTE” üzenetet! Használja a System.out.println() -t! 2. Írjon konzolprogramot, amely.
Készítette: Csíki Gyula
Hernyák Zoltán Programozási Nyelvek II.
1 Hernyák Zoltán Web: Magasszintű Programozási Nyelvek I. Eszterházy.
1 Hernyák Zoltán Web: Magasszintű Programozási Nyelvek I. Eszterházy.
Készítette: Lipp Marcell
Script nyelvek alkalmazása a webkartográfiában 1/14 Script nyelvek alkalmazása a webkartográfiában Gede Mátyás MFTTT, március 22.
Java programozási nyelv Vezérlési szerkezetek
Web fejlesztés V. Illés Zoltán ELTE Informatikai Kar
HTML 2. Űrlapok
Illés Zoltán ELTE Informatikai Kar
További lehetőségek Weblapok programozása. Nyelvek csoportosítása Leíró nyelv (HTML, XML, …) Programozási nyelv  Szerver oldali (PHP, ASP, …)  Kliens.
Webprogramozó tanfolyam
Objektum orientált programozás
A Visual Basic nyelvi elemei
Illés Zoltán ELTE Informatikai Kar
Web fejlesztés II. Illés Zoltán ELTE Informatikai Kar
Török Katalin és Marosi Nóra 11/c. Pascal: Az es években megjelent magas szintű programozási nyelv, közel áll az emberi gondolkodáshoz. Nevét.
Algoritmizálás, adatmodellezés
1 Mivel foglalkoz(t)unk a laborokon? 1.Labor: Word alapok Excel alapok: Excel alapok: Cellahivatkozás, munkalapfüggvény, diagram varázsló, trendvonal 2.
Excel programozás (makró)
UNIVERSITY OF SZEGED D epartment of Software Engineering UNIVERSITAS SCIENTIARUM SZEGEDIENSIS Programozás I. 3. gyakorlat.
Weboldalba ágyazott interaktív feladatok GeoGebra módra Papp-Varga Zsuzsanna ELTE IK Média- és Oktatásinformatika Tanszék
TÁMOP /1-2F JAVA programozási nyelv NetBeans fejlesztőkörnyezetben I/13. évfolyam Utasítás és blokk. Elágazás típusai, alkalmazása Kovács.
Gépészeti informatika (BMEGEMIBXGI)
Excel programozás (makró)
A CLIPS keretrendszer
JAVA programozási nyelv NetBeans fejlesztőkörnyezetben I/13. évfolyam
JavaScript a böngészőben
JAVA programozási nyelv NetBeans fejlesztőkörnyezetben I/13. évfolyam
Informatikai gyakorlatok 11. évfolyam
Függvénysablonok használata
Előadás másolata:

1 WEB TECHNOLÓGIÁK A JavaScript

2 Bevezetés HTML dokumentumba beágyazott végrehajtható programok készítésére Kliens oldali, (JavaScript kompatibilis) böngésző értelmezi soronként Kliens oldali események (helyi) feldolgozására (futás időben) Dinamikus HTML lapokat tud generálni

3 A JavaScript nyelv Egyszerűsített Java programozási nyelv Objektum-alapú C-szerű (C++) szintaktika Futási idejű rendszer Gyengén típusos nyelv Kis- és nagybetű érzékeny Megjegyzés: //, /* … */

4 JavaScript beágyazása HTML-be … window.alert(”Üdvözöllek”); … …

5 A JavaScript nyelv elemei Változók JavaScript kulcsszavak, objektumok, elemfüggvények Az objektumok elemváltozókat és elemfüggvényeket tartalmaznak. Kifejezések és operátorok

6 Változók Fajtái: Sztringek Numerikus értékek (egész és valós számok) Boolean értékek Létrehozása:var valtozo; var szam = 12;

7 Tömbök Tömbindexelés 0-tól kezdődik Megadás: tomb[index]=ertek, tomb=[e1, e2, …] JavaScript objektum elemváltozóinak elérése: objektumnev.elemvaltozonev objektum ~ asszociatív tömb barat.nev = ”Peter”barat[”nev”] = ”Peter” barat.kor = 25;barat[”kor”] = 25; Asszoc. tömb megadása: tomb={elem:ertek, …}

8 Kifejezések, operátorok Feltételes kifejezés (feltetel) ? haTeljesul : haNemTeljesul Operátorok értékadás: = aritmetikai: +, +=, -, -=, *, *=, /, /=, %, %= biteltolás: >, >=, >>>, >>>= bitenkénti logikai: &, &=, ^, ^=, |, |= növelő, csökkentő: ++, -- összehasonlító: ==, !=, >=, logikai: &&, ||

9 Függvények Definíciója: function nev(parameterek, …) { … } Visszatérési értéke: return ertek; (nem kötelező megadni) Argumentum tömb: fv-nek átadott paraméterek fvnev.arguments[i]

10 Objektumok Hivatkozások: this, parent Objektum létrehozása, példányosítás: function bongeszo (nev, OS) { this.nev = nev; this.OS = OS; } … ujbongeszo = new bongeszo(”Netscape”, ”Win98”); Elemfüggvényt definiálás után hozzá kell rendelni az objektumhoz: obj.elemfv = fv

11 Vezérlési szerkezetek - elágazások Feltételes utasítás: if (feltetel) utasitasok [else utasitasok] Többszörös elágazás: switch (kif) { case cimke1 : ut1; break; case cimke2 : ut2; break; default : utasitas; }

12 Vezérlési szerkezetek - ciklusok for ( [inic.kif.]; [feltetel]; [leptetes]) {…} do { … } while (feltetel) while (feltetel) { … } Kilépéshez használt utasítások: break continue [cimke]

13 Objektumok vezérlési szerkezetei Objektum elemváltozóin végiglépked for (indexvaltozo in objektum) {…} Objektumot alapértelmezettként kijelöl (elemváltozói és elemfüggvényei önállóan elérhetők) with (objektum) utasitas

14 JavaScript beépített objektumok

15 A dátum objektum Beépített elemfüggvényei: getDate(), getMonth(), getYear() getDay() : adott dátum napjának sorszáma (vasárnap=0, …) getHours(), getMinutes(), getSeconds() getTime() : adott dátum unix időben setDate(), set…, stb.

16 Matematikai objektum Objektum neve: Math Elemváltozók: PI, LN2, LN10, LOG2E, SQRT2, … Elemfüggvények: abs(), ceil(), floor(), max(), min(), round(), sin(), cos(), log(), pow(), exp(), sqrt(), …

17 Sztring objektumok Elemváltozók: length Elemfüggvények: blink(), bold(), big(), fontcolor(), fontsize(), italics(), small(), strike(), sub(), sup(), concat(), link(), substr(), substring(), toLowerCase(), toUpperCase()

18 Window objektum Elemváltozók: closed, frames, innerHeight, innerWidth, location, name, opener, outerHeight, outerWidth, parent, self, status, top, window, toolbar, … Elemfüggvények: alert(), back(), close(), confirm(), forward(), home(), open(), print(), prompt(), stop(), … Eseménykezelők: onError, onFocus, onResize, …

19 Link objektum Elemváltozók: host, port, target, protocol, … Eseménykezelők: onClick, onMouseDown, …

20 Űrlap objektum Elemváltozók: action, elements, encoding, length, method, name, … Elemfüggvények: reset(), submit() Eseménykezelők: onReset, onSubmit

21 Input, Password és FileUpload objektumok Elemváltozók: form, name, type, value, … Elemfüggvények: focus(), blur(), … Eseménykezelők: onBlur, onChange, onFocus, onKeyPress, … Hidden objektumnál csak elemváltozók vannak, elemfüggvények, eseménykezelők nem használhatók.

22 Submit-gomb és Reset objektumok Elemváltozók: form, name, value, type Elemfüggvények: blur(), click(), focus(), … Eseménykezelők: onBlur, onClick, onFocus

23 Radio button és Checkbox objektumok Elemváltozók: checked, form, name, type, value, … Elemfüggvények: blur(), focus(), click(), … Eseménykezelők: onBlur, onFocus, onClick

24 Button objektum Elemváltozók: form, name, type, value Elemfüggvények: blur(), focus(), click(), … Eseménykezelők: onBlur, onFocus, onClick, onMouseDown, onMouseUp

25 Választólistás (Select) objektum Elemváltozók: form, length, name, options, value, type Elemfüggvények: blur(), focus(), … Eseménykezelők: onBlur, onChange, onFocus

26 Példa function AGomb() { alert(”Az A gombra kattintott”); } function BGomb() { alert(”A B gombra kattintott”); }

27 Példa folytatása <input type=”button” value=”A” onClick=”AGomb()”> <input type=”button” value=”B” onClick=”BGomb()”>

28 Másik példa Ido = new Date(); Ora = Ido.getHours(); if (Ora>6 && Ora<18) document.write(” ”); else document.write(” ”); …

29 Utolsó példa1 kesleltetes = 100; kepszam = 1; Kepek = new Array(); for (i=1; i < 11; i++) { Kepek[i] = new Image(); Kepek[i].src = ”kep” + i + ”.gif”; }

30 Utolsó példa2 function animacio() { document.kepem.src = Kepek[kepszam].src kepszam++; if (kepszam > 10) { kepszam = 1; } } function lassabban() { … } function gyorsabban() { … }

31 Utolsó példa3

32 Online Reference tutorial.html manual/javastart.html

33 Játékprogram 3/1 var szam = Math.floor(Math.random() * 100) + 1; var szamlalo = 0; function Tipp() { var g = document.form1.tipp1.value; szamlalo++; status = szamlalo + ". tippelés.";

34 Játékprogram 3/2 if (g < szam) document.form1.hint.value = "Nem jó! A tipp túl kevés."; if (g > szam) document.form1.hint.value = "Nem jó! A tipp túl sok."; if (g == szam) { window.alert("Helyes!") location.reload(); } if (szamlalo == 10) { window.alert("Sajnálom, a " + szamlalo + ". tipp sem jó!"); location.reload(); } }

35 Játékprogram 3/3 Gondoltam egy számra! Gondoltam egy számra 1 és 100 között. Próbálja meg legfeljebb 10 lépésben kitalálni! Tipp: onKeyDown="IsEnter(event);"

36 Játékprogram módosítás function IsEnter(E) { if (E.keyCode == 13) { Tipp(); } } var szam = Math.floor(Math.random() * 100) + 1; var szamlalo = 0; function Tipp() { var g = document.form1.tipp1.value; szamlalo++; status = szamlalo + ". tippelés.";

37 Adatlap adatainak ellenőrzése 1/3 Adatlap regisztrációhoz Töltse ki az adatlap mezőit, majd nyomja meg az "elküld" gombot! Név: Telefonszám: Levelezési cím: Irányítószám: