1 Szabadkai Műszaki Szakfőiskola Web programozás dr Zlatko Čović 12 CLIENT-SERVER 23 Internet technológiák Kliens oldali: -(x)html -CSS -JavaScript -X...
Internet technológiák Kliens oldali: -(x)HTML -CSS -JavaScript -XML …
Szerver oldali: -PHP -ASP -JSP … -Node.js
JavaScript XML
AJAX
PHP … 3
JavaScript A JavaScript programozási nyelv egy objektumalapú szkriptnyelv. 1995-ben a Netscape cég az internet böngészőjének egy újabb változatával jelent meg. Ez az áttérés az 1.1 változatról a 2.0 változatra alapvető, mondhatjuk forradalmi változást hozott a böngésző szolgáltatásaiban. Az új változat tartalmazott egy LiveScript nevű beépített nyelvet (kifejlesztője Brendan Eich), amellyel a HTML oldalak a letöltés után is manipulálhatókká váltak a kliens oldalon. Ennek a nyelvnek a szintaxisa nagyon hasonlított a Java nyelv szintaxisához, ezért piaci szempontok miatt nevét hamarosan JavaScript-re változtatták. ECMAScript ECMA-262 4
JavaScript Java
JavaScript
Objektum orientált nyelv. Létezik támogatás az objektumokra, osztályokra, öröklődésre...
Objektalapú. Léteznek beépített objektumok.
A programot le kell fordítani a végrehajtás előtt.
Az appletek külön állnak az (x)HTML dokumentumtól, ahonnan meghívjuk őket.
A programok az (x)HTML dokumentumba integráltak.
A változókat deklarálni kell (erős tipizáció).
A változókat nem kell deklarálni (gyönge tipizáció).
Statikus összekapcsolás: az objektumreferenciának léteznie kell a fordítás ideje alatt.
Dinamikus összekapcsolás: az objektum-referenciát a futatás közben ellenőrzi.
5
JavaScript A JavaScript használata: • a weboldal elemei kinézetének beállítása és módosítása • interaktivitás • dátum és idő megjelenítése különböző formátumokban • különböző számítások elvégzése • az űrlapokon keresztül bevitt adat ellenőrzése • “sütik” létrehozása (Cookies) • a felhasználói web böngészőjének detektálása • dinamikus (x)HTML • mobil alkalmazások készítése • windows 8 alkalmazások készítése • játekok készítése …
6
JavaScript A JavaScript használata az (x)HTML oldalon: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> JavaScript
<script type="text/javascript"> var city = "Subotica"; var school = "Subotica Tech"; document.write(school);
vagy <script>
7
JavaScript A JavaScript használata az (x)HTML oldalon: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> JavaScript
<script type="text/javascript"> var city = "Subotica"; document.write(city);
Hello WORLD!
<script type="text/javascript"> var school = "Subotica Tech"; document.write(school); 8
JavaScript A JavaScript használata az (x)HTML oldalon: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> JavaScript
<script type="text/javascript" src="1.js">
9
JavaScript A JavaScript használata az (x)HTML oldalon: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> JavaScript
<script type="text/javascript" src="1.js">
10
JavaScript A JavaScript használata az (x)HTML oldalon: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> JavaScript
<script type="text/javascript" src="1.js">
<script type="text/javascript" src="2.js">
11
JavaScript A JavaScript használata az (x)HTML oldalon: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> JavaScript
<script type="text/javascript"> var city = "Subotica"; document.write(city); <noscript>
Your browser doesn't support JavaScript
12
JavaScript A JavaScript használata az (x)HTML oldalon: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> JavaScript
13
Általános szintaktikai szabályok • Nagy- és kisbetűk A JavaScript megkülönbözteti a nagy- és kisbetűket.
• Szóközök, tabulátorok és sorvégjelek A JavaScript figyelmen kívül hagyja a szóközöket, tabulátorokat és sorvégjeleket.
14
Általános szintaktikai szabályok • Opcionális pontosvessző A JavaScriptben az utasításokat opcionális pontosvesszők zárják le. Ha elhagyjuk a pontosvesszőt, akkor a JavaScript megpróbálja automatikusan beszúrni azt a megfelelő helyre. a = 3; b = 4; a =3 ; b = 4;
a = 3; b = 4
- Általában minden utasítást külön sorba helyezzünk el. - Minden utasítást explicit pontosvesszővel fejezzünk be.
15
Általános szintaktikai szabályok • Megjegyzések // megjegyzés /* több soros megjegyzés, 1. sor több soros megjegyzés, 2. sor */
16
Általános szintaktikai szabályok • Literálok A literálok a JavaScriptben fix értékeket reprezentálnak. 14 1.4 "Subotica Tech" 'Subotica' true false null
17
Általános szintaktikai szabályok • Azonosítók (identifikátorok) Az azonosító egy név. A JavaScriptben az azonosítókat változók, függvények és címkék (label) elnevezésére használjuk. Szabályok: - Az azonosítóknak betűvel, aláhúzással (_) vagy dollár ($) jellel kell kezdődniük, az ezt követő karakter azonban már szám (0 .. 9) is lehet. - Az azonosító neve nem lehet ugyanaz, mint bármely foglalt szó, amelyet más célokra használnak a JavaScriptben.
18
Általános szintaktikai szabályok • Foglalt szavak break
do
if
switch
typeof
case
else
in
this
var
catch
false
instanceof
throw
void
continue
finally
new
true
while
default
for
null
try
with
delete
function
return
• Foglalt szavak az ECMA bővítések számára abstract
double
goto
native
static
boolean
enum
implements
package
super
byte
export
import
private
synchronized
char
extends
int
protected
throws
class
final
interface
public
transient
const
float
long
short
volatile
debugger 19
Általános szintaktikai szabályok • Foglalt szavak arguments
• Date típusú objektum • Reguláris kifejezések • Objektumok, amelyek hibákat reprezentálnak
21
Speciális numerikus értékek Konstans
Jelentés
Infinity
speciális érték a végtelen jelölésére
NaN (Not-a-Number)
speciális “nem szám” érték
Number.MAX_VALUE
legnagyobb szám a JavaScriptben
Number.MIN_VALUE
legkisebb szám a JavaScriptben
Number.NaN
speciális “nem szám” érték
Number.POSITIVE_INFINITY
speciális érték a végtelen jelölésére
Number.NEGATIVE_INFINITY
speciális érték a negatív végtelen jelölésére
var x = 1000 / "Alma"; // NaN isNaN(x); // returns true var y = 100 / "1000"; // number isNaN(y); // returns false
22
Speciális numerikus értékek isFinite()
- ellenőrzi, hogy a szám korlátos-e,
szabályszerű-e. false értéket ad vissza, ha az érték +Infinity, -Infinity vagy NaN, egyébként true a visszatérő értéke. var z1 = 3/0; var z2 = -3/0; var z3 = 0/0; document.write(z1+" "); // Infinity document.write(z2+" "); // -Infinity document.write(z3); // NaN
23
Számok Egész szám literálok: 0 4 10000 Hexadecimális és oktális literálok: 0xff // decimális értéke: 15*16 + 15 = 255 0377 // decimális értéke: 3*64 + 7*8 + 7 = 255 Lebegőpontos literálok: 3.14 2345.789 6.02e23
24
Karakterláncok (sztringek) Sztring literálok "" // üres sztring 'Subotica' "3.14" "JavaScript is \n script language" 'name="myform"' Speciális karaktereket az escape karakterrel (backslash \) együtt szerepeltethetünk egy sztring literálban. Karakter
Jelentés
\b
Visszalépés (Backspace)
\t
Tabulátor (Tab)
\n
Új sor (New line)
\v
Vertikális tabulátor (Vertical tab)
\f
Lapdobás (Form feed)
\r
Kocsi vissza (Carriage return)
\”
Idézőjel (Double quote)
\’
Aposztróf (Apostrophe vagy single quote)
\\
Fordított törtvonal (Backslash karakter \ )
25
Logikai értékek true false
26
Függvények Függvény típusú literálok: function square(x) { return x*x;} var square = function(x) { return x*x}
27
Objektumok 1. Logikai értékek lehetnek objektumok vagy primitív adatok, amelyek objektumként kezelhetők. 2. Szám értékek lehetnek objektumok vagy primitív adatok, amelyek objektumként kezelhetők. 3. Szöveg értékek lehetnek objektumok vagy primitív adatok, amelyek objektumként kezelhetők. 4. A tömbök mindig objektumok. 5. A függvények mindig objektumok. Az objektum egy adat, amelynek tulajdonságai (jellemzői) és tagfüggvényei (metódusai) vannak. 28
Objektumok A kijelölt értékek gyűjteménye egy objektum. Ezeket a kijelölt értékeket általában az objektum tulajdonságainak nevezik (properties). kep.width kep.height
Objektumok Objektum típusú literálok var point = {x:2.3, y:-1.2}; var kep= {width:150, height:250}; var student={ name: "John", lastname: "Malkovich", numberOfIndex: "122039014" }; var student2={name:"Peter",lastname:"Brown", numberOfIndex:"122049014"};
30
Objektumok A JavaScriptben egy adott objektumnak (string, szám) az összes módszerei és tulajdonságai rendelkezésre állnak a primitív értékek számára is, mert a JavaScript átmenetileg a primitív értékek objektumaira alakítja a módszerek és a tulajdonságok végrehajtása előtt.
31
Tömbök A tömb egy objektum, amely több értéket memorizál és amelynek több tulajdonsága (properties) van. var myArray = new Array(10); myArray[0] = 16; myArray[1] = 21; myArray[6] = 78; myArray[9] = 87; var a = new Array(); // vagy var a = []; a[0] = 1.2; a[1] = "JavaScript"; a[2] = true; a[3] = {x:1, y:3}; var autok = new Array("Fiat","Opel","BMW"); 32
Tömbök Tömb típusú literálok var a = [1.2, "JavaScript", true, {x:1, y:3}]; var autok = ["Fiat","Opel","BMW"];
33
null A null kulcsszó különleges érték, amely arra utal, hogy nincs semmilyen konkrét érték. A null értéket általában különleges objektum értékként tartják számon – ez az az érték, amely nem jelöl semmilyen objektumot. Amikor a változó null értéket tartalmaz, az azt jelenti, hogy nem tartalmaz semmilyen használható objektumot, tömböt, számot, sztringet vagy logikai értéket. Ha a null érték logikai értékként értékelődik ki, false értékre konvertálódik. Amikor numerikus környezetben szerepel, 0 értékre konvertálódik. Ha karaktertömbként használják, "null" sztringre konvertálódik. 34
null, undefined Ha egy változóhoz vagy egy tömbelemhez még nem lett hozzárendelve valamilyen érték, akkor annak értéke undefined. undefined – nem létezik null – speciális kulcsszó, amely jelzi, hogy hiányzik az értéke
35
Változók Változók deklarálása var myschool; Változók inicializálása var myschool = "VTŠ Subotica"; var myschool; myschool = "VTŠ Subotica"; var home = "c:\\temp"
36
Változók var name = new String("Hello World!"); var x = new Number(123); var y = new Boolean(true); Minden változó a JavaScriptben lehet objektum! Változó típusát a typeof függvényel tudjuk megszerezni. var k = typeof("123"); var x; // undefined document.write(u); // error, u is undefined u=3;
37
Konstansok const school = 'Subotica Tech';
38
Aritmetikai operátorok Operátor
Leírás
Példa
+
összeadás
x=y+2
-
kivonás
x=y-2
*
szorzás
x=y*2
/
osztás
x=y/2
%
maradékos osztás (moduló képzés)
x=y%2
++
változó értékének növelése eggyel (inkrementálás)
x=y++ x=++y
--
változó értékének csökkentése eggyel (dekrementálás)
x=y-x=--y
39
Aritmetikai operátorok A + műveletjel szolgálhat sztring típusú változók vagy szöveges értékek összefűzésére is. txt1="My school"; txt2=" is Subotica Tech"; txt3=txt1+txt2; // My school is Subotica Tech txt4="2"+"2"; // "22" A- műveletjel szolgálhat az előjel megadására is negatív értékeknél. myNumber = -15;
40
Logikai operátorok x=5 és y=6 Operátor
Leírás
Példa
&&
Logikai és művelet
(x<10 && y>5) igaz (x<10 && y<6) hamis
||
Logikai vagy művelet
(x<10 || y==7) igaz (x>10 || y>7) hamis
!
Negáció
!(x==y) igaz !(x
Feltételes operátor (feltételes hármas) változó=(feltétel)?érték1:érték2 var a = 5; var b = 6; var uzenet = (a
41
Számok átalakítása szöveggé var n = 50; var s = n+" hallgató letette a vizsgát."; // "50 hallgató letette a vizsgát." var n_s = n+""; // "50" var str_value1 = String(n); // függvény var str_value2 = n.toString(); // metódus (a primitív szám típus Number típusú objektummá konvertálódik, hogy ezt a metódust meg lehessen hívni) var k = typeof(str_value2); document.write(str_value2+" tipusa "+k+" "); document.write(str_value2+" tipusa "+typeof(str_value2)+" "); 45
document.write(num1+" "+typeof(num1)+" "); document.write(num2+" "+typeof(num2)+" "); document.write(num3+" "+typeof(num3)+" "); document.write(num4+" "+typeof(num4)+" "); document.write(number+" "+typeof(number)); 42 number 4 number 55 number 55.56545 number 55 number
Feltételes utasítások if (feltétel1) ... else if (feltétel2) ... else if (feltétel3) ... else …
52
Feltételes utasítások var ev=2013; if(ev%2==0) document.write("páros év"); if(ev>2014) { document.write("nagyobb év"); } else if (ev==2014) { document.write("2014"); } else if (ev%2!=0) { document.write("páratlan év"); } else { document.write("ismeretlen év"); }
53
Switch-case elágazás switch (tesztkifejezés) { case érték1: [utasítás 1] //ez az utasítás végrehajtódik, ha a tesztkifejezés értéke érték1. break; case érték2: [utasítás 2] //ez az utasítás végrehajtódik, ha a tesztkifejezés értéke érték2. break; ..... default: [utasítás n] //ez az utasítás végrehajtódik, ha a tesztkifejezés értéke egyik felsorolt értékkel sem egyezett meg. break; } 54
