Feladatokat ezen a linken találjátok: http://history.itwebguide.nhely.hu/tori_teszt.html
az eredményről a képernyőképet kérem :D
2024. április 16., kedd
2024. április 2., kedd
Weboldal Téma: Barcelona Látnivalói
Fejléc:
·
A fejlécben szerepeljen a weboldal címe, például
"Barcelona Látnivalói".
·
Készíts egy navigációs menüt a fejlécbe, ami
tartalmazza az alábbiakat: "Kezdőlap", "Látnivalók",
"Galéria", "Kapcsolat".
Tartalom:
·
Használj CSS Grid-et a tartalom elrendezéséhez.
·
Hozz létre egy kártya elrendezést, ahol minden
kártya egy-egy Barcelona látnivalót reprezentál.
·
Minden kártyának tartalmazzon egy képet és egy
rövid leírást a látnivalóról.
·
Az oldalon jelenjen meg egyszerre csak 3 kártya.
A kártyák között legyen lehetőség lapozásra.
Footer:
·
Készíts egy láblécet, ami tartalmazza a
következőket:
·
Social media ikonok (pl. Facebook, Instagram,
Twitter).
·
Kapcsolat információk (pl. cím, email, telefon).
Egyéb követelmények:
·
Használj reszponzív mértékegységeket (pl. %, em,
rem) az elrendezéshez és méretezéshez.
·
Minden kártya és a tartalom egésze legyen reszponzív,
azaz jól jelenjen meg különböző képernyőméretek esetén.
·
Készíts lapozót az oldal alján, ami lehetővé
teszi a felhasználó számára az oldalak közötti navigálást.
2024. március 19., kedd
2024. március 17., vasárnap
Hajó menetrend megoldása
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta
charset="UTF-8">
<title>Menetrend Táblázat</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<label
for="fromSelect">Honnan:</label>
<select id="fromSelect"
ng-model="fromFilter">
<option
value="">Összes indulási állomás</option>
<option
ng-repeat="location in locations"
value="{{location}}">{{location}}</option>
</select>
<label for="toSelect">Hova:</label>
<select id="toSelect"
ng-model="toFilter">
<option
value="">Összes érkezési állomás</option>
<option
ng-repeat="location in locations"
value="{{location}}">{{location}}</option>
</select>
<input type="text" ng-model="searchText"
placeholder="Keresés...">
<br>
<table border="1">
<thead>
<tr>
<th
ng-click="sortBy('azon')">Azon</th>
<th
ng-click="sortBy('jarat')">Járat</th>
<th
ng-click="sortBy('honnan')">Honnan</th>
<th ng-click="sortBy('hova')">Hova</th>
<th
ng-click="sortBy('indul')">Indul</th>
<th
ng-click="sortBy('erkezik')">Érkezik</th>
</tr>
</thead>
<tbody>
<!-- A ng-repeat attribútum értéke az a kifejezés, amely
leírja, hogy milyen adatok alapján kell a sorokat generálni.
menet in filteredMenetrend:menet a jelenlegi iterációban
használt változó neve. Minden iteráció során ez a változó egy-egy elemre mutat
majd a menetrend tömbből.
filteredMenetrend -> a szűrt menetrend adatait tartalmazó
változó. Ezt a változót létrehozza az AngularJS, és a ng-repeat során
használható.
(menetrend | filter:{'honnan': fromFilter, 'hova': toFilter}
| orderBy:orderByField:reverseSort | filter:searchText):
Ez a rész a szűrők és rendezés alkalmazását írja le a
menetrend tömbre.
Az első filter szűri az elemeket a 'honnan' és 'hova'
tulajdonságok alapján a fromFilter és toFilter változók értékei szerint.
Az orderBy a rendezést végzi el az adott mező alapján
(orderByField).
A reverseSort változó határozza meg, hogy a sorrend növekvő
vagy csökkenő legyen.
A második filter szűri az elemeket a searchText változó
alapján.-->
<tr
ng-repeat="menet in filteredMenetrend = (menetrend | filter:{'honnan':
fromFilter, 'hova': toFilter} | orderBy:orderByField:reverseSort |
filter:searchText)">
<!--Így a teljes kifejezés azt az utasítást adja, hogy
hozzon létre egy sorral, minden menet elemet a filteredMenetrend változóból,
amely a megfelelően szűrt, rendezett és keresett adatokat tartalmazza a
menetrend tömb alapján.
Ez a sor az AngularJS kifejezéseinek összefonódásából
adódik, ahol minden egyes művelet eredménye továbbítódik a következő művelet
bemeneteként.-->
<td>{{ menet.azon }}</td>
<td>{{ menet.jarat }}</td>
<td>{{ menet.honnan }}</td>
<td>{{ menet.hova }}</td>
<td>{{ menet.indul }}</td>
<td>{{ menet.erkezik }}</td>
</tr>
</tbody>
</table>
<script>
var app =
angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http.get('menetrend.json').then(function (response) {
$scope.menetrend = response.data;
/*new Set(...):A Set egy olyan adatstruktúra, amely csak
egyedi elemeket tartalmaz. Itt egy Set-et hozunk létre a fenti egyesített
tömbből. Ezzel biztosítjuk, hogy minden helyszín csak egyszer szerepeljen a
Set-ben.
[...Set]:
A Set objektum tartalmát egy spread operátorral (...)
alakítjuk át egy tömbbé. Így a $scope.locations változó egy olyan tömb lesz,
amely csak az egyedi 'honnan' és 'hova' értékeket tartalmazza.*/
$scope.locations = [...new Set(response.data.map(item =>
item.honnan).concat(response.data.map(item => item.hova)))];
/*response.data.map(item =>
item.honnan):
Az response.data egy tömb, ami a szerver válaszának adatait
tartalmazza (a menetrend adatait).
A map metódus segítségével az összes item elemet leképezzük
a hozzájuk tartozó 'honnan' tulajdonságra.
response.data.map(item => item.hova):
Hasonlóan, ebben a részben a 'hova' tulajdonságot map-eljük.
.concat(...): A concat metódus segítségével a két fenti
lépés eredményét egyesítjük egyetlen tömbben. Tehát létrehozunk egy olyan
tömböt, amely tartalmazza az összes 'honnan' és 'hova' értéket.
Ez a kód tehát egy olyan helyszín tömböt hoz létre, amely
tartalmazza az összes egyedi 'honnan' és 'hova' helyszínt a menetrend
adataiból. Ez a tömb később használható a szűrési opciók kialakításához a
felhasználói felületen.*/
//
Initialize filter variables
$scope.fromFilter = "";
$scope.toFilter = "";
// Default
sort
$scope.orderByField = 'erkezik';
$scope.reverseSort = false;
});
$scope.sortBy
= function (field) {
$scope.reverseSort = ($scope.orderByField === field) ?
!$scope.reverseSort : false;
$scope.orderByField = field;
/*$scope.sortBy = function (field) { ... }:
Ez egy függvény definíciója, amelyet a táblázat fejlécében
lévő kattintható fejléc mezőkhöz kötnek. Amikor a felhasználó a táblázat egy
fejléc mezőjére kattint, a sortBy függvény fut le, és rendezni fogja az
adatokat az adott mező alapján.
$scope.reverseSort = ($scope.orderByField === field) ?
!$scope.reverseSort : false;:
Ez a sor megállapítja, hogy a rendezési sorrend növekvő vagy
csökkenő legyen.
Az ($scope.orderByField === field) rész azt ellenőrzi, hogy
a jelenlegi rendezési mező egyezik-e az újonnan kiválasztott mezővel.
A ? utáni rész egy feltételes (ternary) operátor, amely
megváltoztatja a reverseSort értékét attól függően, hogy a jelenlegi rendezési
mező megegyezik-e az újonnan kiválasztott mezővel. Ha igen, akkor a
!$scope.reverseSort inverzezi a jelenlegi értéket (azaz ha true, akkor false,
és fordítva), ha nem, akkor false.
Tehát ez a rész megoldja azt a feladatot, hogy
megváltoztassa a rendezési sorrendet, ha a felhasználó ugyanarra a mezőre
kattint, különben állítsa be a rendezési sorrendet a kiválasztott mező alapján.
$scope.orderByField = field;:
Ez a sor beállítja a $scope.orderByField változót a
kiválasztott mező nevére, amely szerint rendezni kell az adatokat.
Összességében a $scope.sortBy függvény felelős a táblázat
rendezéséért. Ha a felhasználó ugyanarra a mezőre kattint, akkor megfordítja a
rendezési sorrendet, különben beállítja a rendezési mezőt az újonnan
kiválasztott mezőre. Ez lehetővé teszi a táblázat interaktív és dinamikus
rendezését a felhasználó számára.
*/
};
});
</script>
</body>
</html>
2024. március 12., kedd
Kutyatár
Kedves Diákok!
A feladat leírását, a mintát, és a json fájlt itt találjátok https://github.com/latiza/kutyatar
2024. március 3., vasárnap
Technológiák
Készítsd el az alábbi weboldalt:
Az oldal tetején első szintű címsorba angularban létrehozott változóból olvasd be a címet.
Alatta helyezz el egy kereső mezőt, amelybe ha beírjuk valamelyik tech. szövegét, csak az fog megjelenni.
Az oldal elkészítéséhez olvasd be a json fájlból az adatokat angularJs segítségével a tanult módon.A logók fotóit innen le tudod tölteni: https://github.com/latiza/technologiak_img
A képek szélessége : 100px; az alt szöveg az adott tech. neve legyen.
Boostrappel egymás mellé helyezheted őket kártyákon. (row, col, card)
A kártyákon a tartalom kerüljön középre.
A név 2-es szintű címsorba kerüljön.
A felhasználási terület (usage) a legkisebb szintű címsorba kerüljön.
A fájl kiterjesztése paragrafusba.
A tutorial szövegre kattintva nyissa meg a lineket új oldalon.
Készíts egy tech.json fájlt az alábbi adatokból:
[
{
name: "HTML",
logo: "html.png",
usage: "Webfejlesztés",
extension: "html",
url: "https://hu.wikipedia.org/wiki/HTML",
tutorial: "https://www.w3schools.com/html/default.asp",
},
{
name: "CSS",
logo: "css.png",
usage: "Webfejlesztés",
extension: "css",
url: "https://en.wikipedia.org/wiki/CSS",
tutorial: "https://www.w3schools.com/css/default.asp",
},
{
name: "JavaScript",
logo: "js.png",
usage: "Webfejlesztés",
extension: "js",
url: "https://en.wikipedia.org/wiki/JavaScript",
tutorial: "https://www.w3schools.com/js/default.asp",
},
{
name: "Java",
logo: "java.png",
usage: "Mobil alkalmazás, asztali alkalmazás",
extension: "java",
url: "https://en.wikipedia.org/wiki/Java_(programming_language)",
tutorial: "https://www.w3schools.com/java/default.asp",
},
{
name: "Python",
logo: "py.png",
usage: "Webfejlesztés, adatvizualizáció, adatanalízis, automatizálás",
extension: "py",
url: "https://en.wikipedia.org/wiki/Python_(programming_language)",
tutorial: "https://www.w3schools.com/python/default.asp",
},
{
name: "Ruby",
logo: "rb.png",
usage: "Webfejlesztés, meta programozás, automatizálás",
extension: "rb",
url: "https://en.wikipedia.org/wiki/Ruby_(programming_language)",
tutorial: "https://www.ruby-lang.org/en/documentation/quickstart/",
},
{
name: "C#",
logo: "csharp.png",
usage: "Webfejlesztés, mobil alkalmazás, asztali alkalmazás, Unity",
extension: "cs",
url: "https://hu.wikipedia.org/wiki/C_Sharp",
tutorial: "https://www.w3schools.com/cs/index.php",
},
{
name: "C++",
logo: "cpp.png",
usage: "Automatizálás, mobil alkalmazás, asztali alkalmazás, Unreal Engine",
extension: "cpp",
url: "https://hu.wikipedia.org/wiki/C%2B%2B",
tutorial: "https://www.w3schools.com/cpp/",
},
{
name: "Kotlin",
logo: "kt.png",
usage: "Android fejlesztés",
extension: "kt",
url: "https://en.wikipedia.org/wiki/Kotlin_(programming_language)",
tutorial: "https://www.w3schools.com/KOTLIN/index.php",
},
];
2024. február 28., szerda
Read művelet PHP-vel
Olvasd be az alábbi adatbázist:
CREATE DATABASE IF NOT EXISTS mydatabase;
USE mydatabase;
CREATE TABLE IF NOT EXISTS users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL
);
INSERT INTO users (name, email) VALUES
('John Doe', 'john.doe@example.com'),
('Jane Smith', 'jane.smith@example.com'),
('Alice Johnson', 'alice.johnson@example.com');
Készíts egy users.php fájlt.
Hozd létre a kapcsolatot az adatbázissal,
ellenőrizd is le, hogy a kapcsolat létrejött e. (Nem szükséges külön fájlba
létrehozni, a users.php fájlban is megírhatod).
Állítsd
be a PHP kódban a szükséges adatbázis kapcsolati információkat (servername,
username, password, dbname).
Hozz létre egy SQL
lekérdezést, amely lekéri az összes felhasználó adatait a "users"
táblából.
Ha van eredmény, hozz
létre egy HTML táblázatot, és írd ki a felhasználók adatait, ha nincs eredmény írd
ki, hogy "Nincsenek adatok az adatbázisban."
Nem szükséges semmilyen formázás.
Megjelenés:
Készíts egy api.php fájlt is, hozzd létre a következő végpontot:/api
Grid feladat
Készítsd el az alábbi elrendezést egy weboldalon:
Háttér színe: állapítsd meg, vegyél belőle mintát.
A D betű erre a képre csúszik rá, innen kifotózhatod:
Szövegek:
Delightful
Experiences Shared
by Our Guests
Exquisite flavors, impeccable service, and a memorable ambiance DineEase made our celebration truly special!"
Robert & Emily
With DineEase, we've uncovered culinary treasures right in our city. Every dining recommendation feels like an exclusive invitation to a world of flavors. We thought we knew our local dining scene, but DineEase introduced us to so much
Emma & Jacob
DineEase guided us to hidden gems we never knew existed! We've become food adventurers, thanks to this platform.
Lisa & Mark
Angular TODO
Hozz létre egy Angular alkalmazást, ami lehetővé teszi egy egyszerű teendőlista kezelését.
Készíts egy todo.html fájlt, és hozz létre benne egy Angular
alkalmazást nevű "todoApp".
Adj hozzá egy TodoController-t a todoApp alkalmazáshoz.
A TodoController-ben hozz létre egy tömböt, amely
tartalmazza az alapvető teendőket, például:
"Bevásárlás"
"Sportolás"
"Olvasás"
Az oldalon jeleníts meg egy címet, például
"Teendőlista".
Alatta egy rendezett listában listázd ki a teendők nevét.
Formázd meg a rendezetlen listát úgy, hogy a lista jelek ne jelenjenek meg,
helyette, mindegyik teendő világosszürke hátteret kapjon.
Adj hozzá egy űrlapot a teendők hozzáadásához. Az űrlap
tartalmazzon egy szövegmezőt és egy "Hozzáadás" gombot.
Ha a felhasználó rákattint a "Hozzáadás" gombra,
akkor az új teendőt adja hozzá a listához.
Adj hozzá a todo.html fájlhoz stílusokat a listaelemekhez és
az űrlaphoz.
Osztálytársak feladat
Készíts egy JSON fájlt, classmates.json néven, és vidd fel az osztálytársaid nevét, lakhelyét, és hobbiját. Figyelj az idézőjelekre és a zárójelekre, hogy szabályos json fájlt hozz létre.
Hozz létre egy classmates.html fájlt. Classmates alkalmazás
legyen a neve, és add hozzá a ClassmatesController-t.
Az alkalmazásodban hozz létre egy title nevű változót,
melynek értéke „Osztálytársak” legyen. Olvasd be a változó értékét első szintű
címsorba.
Következőként adj hozzá egy search mezőt, amelybe ha beírjuk
valamelyikük nevét, vagy a név részletét, csak azokat a neveket fogja
megjeleníteni. (ng-model; filter)
Hozz létre egy táblázatot, amelybe a minta szerint beolvasod
az adatokat a json fájlból. (liveserveren futtasd, csak akkor olvassa be) A
hibakezelést a konzolba írasd ki (console.error)
A táblázat létrehozásánál adj hozzá szemantikus elemeket, pl
a fejléc sora, és az adatok csoportosítása. A táblázat első sorát válaszd ki,
mint első gyermek elemet, és a háttér színe szürke, betű fehér, és félkövér
legyen.
Minden második sora a táblázatnak világos szürke legyen.
(pszeudó classt használj). A táblázat szegélye 1px-es egyenes fekete vonal,
figyelj arra, hogy ne dupla vonalak fussanak körbe. A táblázatban 10px-es belső
margót állíts be. Az oldalon 20px-es belső margót állíts be.
Szállodai szobafoglalás
Hozz létre hotel.html fájlt, amely egy angular alkalmazás legyen, adj hozzá az oldaladhoz egy HotelController-t.
A kontrolleren belül hozz létre egy változót, amelyben
eltárolod a következő adatokat kulcs értékpáronként, az első szám a szoba
száma, a második a szoba típusa:
-
101 , single,
-
102, double,
- 103, kingsize;
A weboldalon eső szintű címsorban
jelenjen meg a cím: „Kiválasztott szoba foglalása”;
Alatta rendezetlen listában jelenjen meg a 3 szoba száma, és
típusa.
Válaszd el a következő szakaszt egy egyenes vonallal.
Kettes szintű címsorban adj hozzá egy új címet: „Kiválasztott
szoba foglalása:”
Ha valamelyik szobára rákattintunk, akkor az az adott szoba
száma és típusa jelenjen meg a címsor alatt. (ng-click, ng-if)
A html-be írd a js-t is, ne készíts külön fájlt.
2024. február 27., kedd
REST API
A mai globális világban olyan online kapcsolatokban vagyunk, mint még soha. A legjobb módszer az adatok megosztására egy API használata. Az alkalmazásprogramozási interfészek lehetővé teszik a különböző eszközök számára, hogy egyszerű parancskészlet segítségével kommunikáljanak egymással és adatokat cseréljenek . A RESTful API a REST architektúra stílusát követi, amely meghatározza az API megjelenését.
A PHP és
különösen a Laravel rendkívül népszerű, valamint a RESTful API-k fontosságát
mutatja, hogy a mai világban, a RESTful API-k létrehozásának megtanulása a
Laravelben olyan nagyon keresett készségeket biztosít, amelyek segítik
karriered kezdetét.
Az
alkalmazásprogramozási felület vagy API egy olyan interfész, amely lehetőséget
biztosít számunkra, hogy kommunikáljunk egy objektummal. Függetlenül attól,
hogy ez az objektum fizikai-e, például egy TV távirányítója, vagy egy szoftver,
például egy gomb megnyomása egy dal lejátszásához. Az alkalmazásprogramozási
felület definíciók és protokollok halmaza, amelyek segítségével az alkalmazások
vagy szolgáltatások kommunikálhatnak egymással. Hídként működik közöttük. Azt
is tartalmazza, hogyan működik valami. Nem kell tudnunk a mögöttes kódot és
logikát. Csak tudnunk kell, mit kell tennünk, milyen metódust kell meghívnunk a
kívánt funkcionalitás megvalósításához.
API-k
segítségével bővíthetjük alkalmazásunk funkcionalitását, hogy ne kelljen
mindent magunknak kódolnunk. Az API-k egyik jellemzője, hogy szabványosítottak.
Egy közös irányelvet követnek, hogy megbizonyosodjanak arról, hogy tervezésük
és megvalósításuk következetes.
Különféle
szabványkészletek léteznek, mint például a SOAP vagy a GraphQL, vagy REST. A
REST a Representational State Transfer rövidítése. Ez egy szoftverarchitektúra,
amelyet webes API-k létrehozására használnak.
A REST API
segítségével két szoftverrendszer online kommunikál egymással. Azért különbözik
a többi API-tól, mert a REST architektúrát követi. Ez az állapotmentes
kommunikációra összpontosít, amely olyan szabványos HTTP-módszereket használ,
mint a GET, POST, PUT és DELETE.
Ezek a módszerek
különböző feladatokat kezelnek:
1.
GET
adatok lekérése
2.
A
POST erőforrásokat hoz létre
3.
A
PUT frissíti az erőforrásokat
4.
A
DELETE eltávolítja az erőforrásokat
A REST olyan
kulcsfontosságú elveken alapul, mint az ügyfél-kiszolgáló architektúra, az
állapotmentes kommunikáció, a gyorsítótárak, az egységes interfész és a
többszintű rendszerek. Ezek az elvek alakítják a RESTful API-k tervezésének és
használatának módját. Segítenek abban, hogy az API-k skálázhatóvá, megbízhatóvá
és hatékonnyá váljanak a szoftverfejlesztésben.
A webes API-k
leggyakrabban használt esete az adatvisszakereső, amely lehet szolgáltatás vagy
alkalmazás, ami kérést küld az API szolgáltató webszerveréhez. Például Twitter.
A webszerver hozzáférése a Twitter adatbázis, és válaszként visszaadja a kért
adatokat. Ez nagyon hasonlíthat a szabványos weboldal és a szerver közötti
kérésválasz ciklushoz. A fő különbség az, hogy a weboldalkérés HTML-t, CSS-t és
JavaScriptet ad vissza. Míg az API-kérés leggyakrabban JSON-objektumokat ad
vissza. A JSON, amely a JavaScript Object Notation rövidítése, arra szolgál,
hogy egy számítógépes program adja át, nem pedig egy személy.
API-k
mindenhol megtalálhatók körülöttünk. Akár észreveszed, akár nem, a mindennapi
életünket az API-k határozzák meg. Valójában nehéz lehet olyan nagy
szolgáltatást találni, amely nem biztosít API-t. Szeretnéd ellenőrizni az
időjárást a Föld bármely pontján? Az adatokat egy harmadik fél időjárási API-tól
kapjuk. Az Android telefonok a Weather Channel API-t használják. Más telefonok
vagy szolgáltatások használhatják az AccuWeather API-t.
Az API-k
különféle okokból használhatók. Az adatok eléréséhez, hogy több szolgáltatás
együtt tudjon működni, információkat kereshetsz a receptekről, zenéről,
ünnepekről, fitneszről stb.
API-t is
használhatsz a bonyolultság elrejtésére és a szolgáltatás funkcionalitásának
kiterjesztésére. Felmerülhet a kérdés: "Miért biztosítják a szolgáltatások
így az API-jukat? Ingyen adnak adatot?" Ennek egyik oka az lehet, hogy
minél többen használják az API-t, annál ismertebbé és népszerűbbé válik az
adott cég szolgáltatása. Jó reklám a cégnek, ha jó minőségű, biztonságos API-ja
van. Egy másik ok lehet, hogy az API kiterjesztheti a vállalat elérhetőségét
azáltal, hogy adataikat a felhasználók rendelkezésére bocsátja, és lehetővé
teszi a fejlesztők számára, hogy olyan termékeket készítsenek, amelyek a
szolgáltatásukra támaszkodnak, és így a vevők folyamatosan visszatérnek.
A vállalatok
létrehozhatnak egy API-t, hogy újra és újra felhasználhassák ugyanazt a
funkciót, és ne kelljen újra és újra feltalálniuk a „meleg vizet”. Egyes
vállalatok ingyenesen adják ki az API-jukat, míg mások az API-jukat prémium
hozzáférésként biztosítják a hozzáférést.
2024. január 28., vasárnap
2024. január 15., hétfő
2024. január 7., vasárnap
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.
Tehát – js library – úgy kell érteni, hogy meg van benne írva nagyon sok dolog előre, lényegében kényelmesebbé teszi a munkánkat. jquery.com
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.
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).
Cache: Mi az a böngésző gyorsítótár és mire való?
A gyorsítótár azért létezik, mert az internet lassú. Pontosabban az internetkapcsolat lassabb, mint a számítógép. A fájlok merevlemezről történő lekérése mindig gyorsabb, mint a távoli kiszolgálóról történő lekérés, függetlenül attól, hogy milyen gyors a Neted. Ezért amikor a felhasználó meglátogat egy webhelyet, a böngésző az oldal egyes részeit átmásolja és eltárolja a számítógépe merevlemezén. Majd a következő látogatáskor nem a szerverről, hanem a merevlemezről tölti azt be. Ez a gyorsítótár.
A böngészők jellemzően a webhely statikus elemeit gyorsítótárazzák, amelyek nem változnak látogatásról látogatásra.
• Képek, logók, hátterek
• Videók, hangfájlok
• HTML
• CSS
• JavaScript
Az oldal HTML részének letöltése az első. Ahogy a böngésző olvassa a HTML kódot, szép sorban kéréseket küld a kiszolgálónak, hogy letöltse a fent említett statikus elemeket. Ez a folyamat zabálja a sávszélességet, ami főleg mobilos böngészésnél gond. Ezért a gyorsítótárazás a felhasználók szempontjából hasznos dolog, mert javítja és felgyorsítja a böngészést.
A gyors és akadálymentes böngészés alapvető fontosságú a felhasználói élményhez, és az optimális konverziós arányokhoz.
Nem örökre maradnak a gépeden a tárolt fájlok, gyorsítótárazott elemeknek van egy lejárati ideje. Ez böngészőtől és személyes beállításoktól függ. A böngésző általában bizonyos mennyiségű lemezterületet, fenntart erre a célra. Ha az betelik a gyorsítótár magától is kiürül.
Ha weboldalt készítesz, akkor nagyon macerás úgy dolgozni, ha nem ürül elég gyorsan a gyorsítótár és nem látod azonnal a változásokat (feltéve, hogy helyesek a módosításaid). Ezért a gyorsítótárat rendszeresen üríteni kell.
Gyorsítótár manuális törlése: Törölheted kézzel a gyorsítótárat a Beállítások / További eszközök / Böngésző adatok törlése gombbal.
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.
Feliratkozás:
Bejegyzések (Atom)