ugrás a tartalomhoz

HTML5 es Javascript tutorial

mahoo · 2018. Jan. 23. (K), 11.09
Sokat latott/olvasott forumtarsak velemenyet szeretnem kerni a temaval kapcsolatban.

Kismillio anyag letezik a neten... Jelen pillanatban en is azon gondolkozom, hogy egy blog formajaban magyarul leirom az altalam fontosnak velt informaciokat, nekem is jol jon, ha rendszerezem a dolgokat es lehet hogy meg masnak is. De nem is ez a lenyeg most.

Hanem, hogy keresek egy tenyleg reszletes, pontos de emesztheto angol nyelvu anyagot HTML5 temaban. Es igen, google a baratom, de annyira talan megsem.

Csak hogy en is mondjak valami hasznosat, ha valaki JS tutorialt keres, akkor javascript.info. Jelenlegi ismereteim szerint, szamomra ez a legjobb online anyag.
Nagyon jo az MDN-es javascript anyag is, megis az elobbit sokkal szivesebben olvasom es jobban meg is ertem. Na meg persze ott van pl. a W3School is, ami arra jo szerintem, hogy gyorsan megtalalj valamit, de a mukodes lenyeget nem biztos, hogy megtalalod itt.
Tehat, ha JS-t akarsz tanulni, akkor nyugodt szivvel ajanlom a javascript.info-t.

Es ha HTML5-ot szeretnek tanulni, Ti mit ajanlotok?
Meg nem kerestem sokat a temaban, de ez szimpatikus: diveintohtml5.info
‹ PHP, MySQL, JavaScript & HTML5 konyv Google Maps JavaScript API Markersben fotó elhelyezés ›
 ■
1

Linkek

Pepita · 2018. Jan. 23. (K), 18.56
Ha blogot írsz, szerintem figyelj arra, hogy a magyar nyelvben ékezetes betűk is vannak, valamint célszerű az olvashatóság érdekében formázni a szöveget, a használhatóság miatt pedig linkként megadni a hivatkozásokat. Itt, egy fórumtémában is van erre lehetőség.

HTML5 tanulásához én ezt javaslom. Tudom, kicsit száraz és nem tutorial, viszont az egyetlen hivatalos specifikáció, ezeknek a szabályoknak kell megfelelni, ez a szabvány.
A tutoriáloknak meg van az a hátránya, hogy bár lehet, hogy könnyebben érthető, de nem biztos, hogy mindenben megfelel a szabványnak - és ezt senki nem is garantálja.

Ha erről írsz egy (több) blogot, akkor az arra biztosan jó, hogy rendszerezd a "Te fejedben a tag-eket", hogy mások számára mennyire hasznos, azt pedig utólag, az esetleges visszajelzések fogják megmutatni. Emiatt érdemes erre már az elején készülni, hogy legyen lehetőség "commentelni".

Önmagában véve pedig hajrá, csináld meg, ha szebben lesz szerkesztve, mint ez a fórumtéma, akkor el fogom olvasni. :)
2

Sejtettem, hogy megkapom a

mahoo · 2018. Jan. 23. (K), 22.46
Sejtettem, hogy megkapom a W3-at ... hát tényleg nagyon száraz :)

Jogos amit írsz, és igyekszem szem előtt tartani majd.

Önmagában véve pedig hajrá, csináld meg, ha szebben lesz szerkesztve, mint ez a fórumtéma, akkor el fogom olvasni. :)

Úgy legyen! :)

Köszi!
6

Akkor mi a gond?

Pepita · 2018. Jan. 24. (Sze), 13.08
Sejtettem, hogy megkapom a W3-at

Akkor a téma már felesleges is, magadtól is megtalálod. :-D

Ha hasznos is számodra, akkor szívesen. :)
3

Szabvány

Hidvégi Gábor · 2018. Jan. 24. (Sze), 10.18
az egyetlen hivatalos specifikáció, ezeknek a szabályoknak kell megfelelni, ez a szabvány
Amit az egyik böngésző így, a másik meg úgy értelmez : ) Mert a szabvány tele van "should"-okkal.
4

Ez is igaz (sajnos)!

mahoo · 2018. Jan. 24. (Sze), 11.18
Ez is igaz (sajnos)!
5

Valóban

Pepita · 2018. Jan. 24. (Sze), 13.06
Azonban maradjunk a Mahoo kérdésénél, ennek a scope-ja az volt, hogy mit hol érdemes tanulni.
De a legtöbb tutorial hibája is épp az, hogy ki hogy értelmezi a "should"-okat.
Tehát még mindig ott érdemes maradni, ahol pontosabban van leírva, és nincs helyettünk "értelmezve".
7

Ezért tanácsos nézegetni az

Endyl · 2018. Jan. 24. (Sze), 19.51
Ezért tanácsos nézegetni az MDN compatibility táblázatait (vagy persze a caniuse-t), főleg most, hogy elvileg a nagyok összefogva frissítgetik az ottani doksikat.

Hasznos a szabványok ismerete, de még hasznosabb azt is tudni, hogy valójában mi/hogyan van implementálva a piacon.
8

Ha engem kérdezel, js-t

inf · 2018. Jan. 26. (P), 04.11
Ha engem kérdezel, js-t sokkal jobban meg tudod tanulni nodejs-el, mint bármelyik böngészős változattal.
9

Igen, kérdeznélek. Még nem

mahoo · 2018. Jan. 26. (P), 12.15
Igen, kérdeznélek.
Még nem volt szerencsém hozzám, így nem érted, hogy hogy érted :).
10

Szerintem így érti

Pepita · 2018. Jan. 26. (P), 13.58
Szerintem így érti.
Vagyis nem "sima javascript".
11

Kezdek

mahoo · 2018. Jan. 26. (P), 19.54
Kezdek osszezavarodni...
Talan a TypeScriptet is tanulhatnam. Miert lennek elobbre ha a Node-ot tanulom?
A Node is JS alapu, es szerintem amig a JS "alapjaival" nem vagyok tisztaban, addig nem erdemes tovabb lepnem.

Vagy nem jol gondolom?
12

Szerintem a JS alapjainak

Endyl · 2018. Jan. 26. (P), 22.08
Szerintem a JS alapjainak megtanulásához bőven elég a böngészős bütykölés. Ha már viszonylag jól kiigazodsz a JS lelkivilágán, utána érdemes fejest ugrani a nodejs segítségével a JS végeláthatatlan ökoszisztémájába :)
13

Ja bocs, benéztem, azt hittem

inf · 2018. Jan. 28. (V), 17.26
Ja bocs, benéztem, azt hittem a cím alapján, hogy a js a fő kérdés, de ahogy látom inkább a html. Nem tudok segíteni benne, nekem nem igazán válnak be a tutorial-ok, mert általában csak felületes tudást adnak vagy olyan feature-öket mutatnak be, amire azt mondom, hogy oké, tök jó, hogy ilyen is van, de 99%, hogy sosem fogom használni. Én inkább példa projekteken szoktam megtanulni dolgokat, és ha valamit meg akarok csinálni, és nem tudom hogy kell, akkor angolul annak a konkrét dolognak keresek utána.

Egyébként js-el kapcsolatban igazából csak néhány nagyobb témakör van, amikbe érdemes beleásnod magad:
- event loop, callback hell, promises, generators, async-await
- scope, context, closure, function.bind, arrow function
- prototype, inheritance, ES6 classes
- event listener, Object.observe, data binding

Erre szerintem jóval alkalmasabb a node, mert az egyféleképpen működik, szemben a böngésző specifikus js-el, ami annyi féleképpen működik, ahány böngésző van, plusz a gyakorlatban úgysem natív js-t meg HTML-t fogsz használni, hanem úgyis valami divatos keretrendszert pl angulart, vagy nem tudom most éppen mi az amit hype-olnak, szóval ha tutorial kell, akkor a keretrendszer oldalán biztosan találsz.
14

Köszönöm a válaszokat! Ha a

mahoo · 2018. Jan. 29. (H), 08.55
Köszönöm a válaszokat!
Ha a HTML-es dologban nem is lettem sokkal okosabb, JS-kapcsolatban kaptam hasznos tanácsokat!!
15

Fölösleges

Hidvégi Gábor · 2018. Jan. 29. (H), 10.47
Böngészős fejlesztésben a felsoroltakból a scope, a context, a closure, az eseménykezelés és esetleg az OOP rész bőven elég bármilyen működés elkészítéséhez.

A promicokat és társait azért vezették be, mert rájöttek, hogy a javascript egyszálú működésre lett kitalálva. Böngészőben indifferens ezek megléte.

Az Object.observe és társai azért lettek bevezetve, mert nem ismernek beépített sablonozórendszert.
16

Az Object.observe és társai

Poetro · 2018. Jan. 31. (Sze), 16.16
Az Object.observe és társai azért lettek bevezetve, mert nem ismernek beépített sablonozórendszert.

Az Object.observe-et nem vezették be, használata Obsolete, azaz kerülni kell. Ráadásul a JavaScript tartalmaz beépített sablonozórendszert a String Template literals és HTML template elem formájában.
24

Template

Hidvégi Gábor · 2018. Feb. 1. (Cs), 14.57
Az egész egy vicc, és a kutya sem használja.
17

Amennyire én tudom az

inf · 2018. Jan. 31. (Sze), 16.51
Amennyire én tudom az Object.observe data binding-ot segítő ES7 feature lett volna. Helyette ES6 Proxy-t találták ki, hogy az jobb lesz. Van polyfill is az Object.observe-re, ha esetleg valaki azt szokta meg. link
18

Elnézést, ha nem lesz túl

mahoo · 2018. Jan. 31. (Sze), 23.07
Elnézést, ha nem lesz túl precíz szakmailag a kérdésem, de kicsit bajban vagyok az objektumok létrehozásával. Úgy értem, hogy az elmúlt 2 hétben jó pár mintát láttam objektumok létrehozására. Az ES6 pedig már bevezette class-t is.

A kérdésem, hogy Ti melyik patternt használjátok objektumok létrehozására? Vagy feladattól függően ez is változik (mert erre is találtam utalást)?
19

környezetfüggő

Pepita · 2018. Feb. 1. (Cs), 13.35
let obj1 = {};
var obj2 = {};
const obj3 = new obj2();
21

:)

Endyl · 2018. Feb. 1. (Cs), 14.41
let obj1 = {};  
var obj2 = {};  
const obj3 = new obj2();
TypeError: obj2 is not a constructor
30

jogos

Pepita · 2018. Feb. 1. (Cs), 17.21
:)
22

Igen, ez ez object literal

mahoo · 2018. Feb. 1. (Cs), 14.45
Igen, ez ez object literal minta.
De ezen kívül én többféléről olvastam, pl.: ES6 class, factory function, prototype chain, stb. Mindnek van előnye és hátránya egyaránt.

Ezért szeretném tudni, hogy melyik az az 1 (- 2) preferált minta, amit manapság illik ismerni/használni?
20

Feladatfüggő

Endyl · 2018. Feb. 1. (Cs), 14.37
Attól függ, milyen mintákat láttál :)

Mindenesetre objektumok létrehozásánál két dolog fontos:
  1. mi lesz az új objektum prototype-ja
  2. a külvilág mit lát abból, amihez az objektum hozzáfér

Az elsőhöz meg kell érteni a prototype chain-t. Pédául:

const a = {};
// vs
const b = Object.create(null);
A másodikhoz meg a closure-ok működését érdemes átlátni.

Az összes minta ezeknek a használatával/manipulálásával áll elő, és az alapján választasz mintát, hogy ezeknek a tulajdonságaiból mire van szükséged a kérdéses objektumnál.

A class kulcsszó meg csak szintaktikai egyszerűsítés a prototípusos öröklődés felett, nem a klasszikus értelemben vett osztályokról szól (tehát működés szempontjából nem jelent újat).
23

Igen, ettől féltem :). Úgy

mahoo · 2018. Feb. 1. (Cs), 14.51
Igen, ettől féltem :).

Úgy gondolom, hogy egyre átfogóbb képet sikerül magamban kialakítani a JS objektumok lelkiválágról, így a closure-rel, prototype chain-nel és egyéb JS sajátságokkal már egész jól képbe kerültem, értem is őket.

De szeretném az elméletet most már gyakorlatban hasznosítani, ezért is tettem fel ezt a kérdést.

Egyébként meg ugyanezen információhoz jutottam, amit Te is írtál:

Az összes minta ezeknek a használatával/manipulálásával áll elő, és az alapján választasz mintát, hogy ezeknek a tulajdonságaiból mire van szükséged a kérdéses objektumnál.

A class kulcsszó meg csak szintaktikai egyszerűsítés a prototípusos öröklődés felett, nem a klasszikus értelemben vett osztályokról szól (tehát működés szempontjából nem jelent újat).


Csak szomorú vagyok, hogy ezt megerősítetted :).
25

Nem olyan vészes :)

Endyl · 2018. Feb. 1. (Cs), 15.12
Én pont ezt szeretem a JS-ben. Vannak (némi ismerkedés után) viszonylag egyszerű eszközeid, amikből igényeid szerint építkezhetsz. (Persze más nyelveknél is nyilván így van ez, csak legfeljebb más szemlélet kell az alap eszközökhöz.)

De első körben szerintem simán el lehet boldogulni object literal-ok és egyszerű osztályok használatával (hogy a régi vagy az új class szintaxist használod az ízlés vagy projekt konvenció függő; az utóbbi esetben viszont környezettől függően szükség lehet egy transpilerre). Ha valami pluszra lesz szükséged, úgyis észreveszed, és akkor utánanézel, hogy milyen mintával a legpraktikusabb megvalósítani.
26

Legtöbbször di container

inf · 2018. Feb. 1. (Cs), 15.34
Legtöbbször di container és/vagy factory pattern-t ES6 class-ekkel new kulcsszóval példányosítva. Ha config object kell, akkor meg object literal-t. Ha prototypal inheritance kell, akkor az ES6 class-nél az extends kulcsszó azt csinálja.
29

Ez nekem logikusnak tűnik,

mahoo · 2018. Feb. 1. (Cs), 17.17
Ez nekem logikusnak tűnik, köszi!
27

Cikk

Poetro · 2018. Feb. 1. (Cs), 16.12
Pár évvel ezelőtt írtam egy cikket a témában - még ES2015 nélkül -, hátha segít feldolgozni a témát.
28

Igen, ismerem. Kb. egy

mahoo · 2018. Feb. 1. (Cs), 17.16
Igen, ismerem.
Kb. egy hónapja olvastam és alig értettem valamit belőle.
Közben elolvastam sok mindent és ezt most mégegyszer. Tök jó, értem :) köszönöm!

Úgy gondolom, hogy jelenleg meg van a képességem, hogy JS-es objektumokkal dolgozzak. De nagyon jó lenne ezt a készség szintjére fejleszteni... nagyon megtetszett a JS.

Szerintem a jövő programozási nyelve :).
31

JS

Hidvégi Gábor · 2018. Feb. 2. (P), 09.36
A javascript a kedvenc nyelvem, sok helyen kényelmesebb, mint a PHP. Ettől függetlenül úgy gondolom, hogy nem a jövő, hanem a múlt programozási nyelve, ráadásul használata meghaladja a legtöbb ember képességeit. Ezért minél kevesebb van belőle, annál jobb.
32

Akkor nagyon máshogy

mahoo · 2018. Feb. 2. (P), 09.48
Akkor nagyon máshogy gondonlkodunk róla.
De ettől szép az élet :).
33

Valóban

Hidvégi Gábor · 2018. Feb. 2. (P), 14.28
Más kérdés, hogy én már tizenkilenc éve foglalkozom webfejlesztéssel, abból tizenhatban professzionálisan, míg te most ismerkedsz a javascripttel.

Persze nem irigylem a mai kezdőket, mert egy (viszonylag) hatalmas információmennyiséget kell abszolválniuk, nekem pedig szép lassan csöpögött le az egész, így volt idő átgondolni, tanulni, kísérletezgetni.

Nem segíti a megértést, hogy az anyag szétszórva, különböző minőségben van fenn a neten, ráadásul rengeteg problémára egynél több megoldás is létezik, amiket viszont a különböző böngészők nem feltétlenül azonos módon értelmeznek.
34

Persze, nem ugyanazok az

mahoo · 2018. Feb. 2. (P), 14.43
Persze, nem ugyanazok az alapjaink, de ettől függetlenül nekem nagyon tetszik és látok benne jövőt, fantáziát...

A leveled többi részével pedig tökéletesen egyetértek.
Viszont ebben a szakmában, területtől függetlenül, tanulás nélkül az ember előbb vagy útobb, de elbukik.
41

Igaz

Pepita · 2018. Feb. 4. (V), 18.54
látok benne jövőt, fantáziát
Gábornak is van annyi igaza a dologban, hogy sok fejlesztő nem tud eleget, de a jövőt tekintve szerintem neked van igazad: a nyelv nem hibás és belátható ideig ez marad a fő kliensoldali nyelv.

tanulás nélkül az ember előbb vagy útobb, de elbukik
Pontosan, a jó pap holtig tanul, a webfejlsztő azután is. :)
35

Ettől függetlenül úgy

Poetro · 2018. Feb. 2. (P), 15.28
Ettől függetlenül úgy gondolom, hogy nem a jövő, hanem a múlt programozási nyelve

Mitől gondolod így? Szinte minden platformon bevezetik a JavaScript / Node.js támogatását, a nyelv folyamatosan fejlődik, sőt, ma már több tucat nyelv létezik, ami JavaScript-re fordít.
Ha szerinted nem a JavaScript a jövő nyelve, akkor mi?

ráadásul használata meghaladja a legtöbb ember képességeit

Valószínűleg minden általános programozási nyelv meghaladja a legtöbb ember képességeit, legyen az Basic, C, Java vagy PHP.

Ezért minél kevesebb van belőle, annál jobb.

Minél van kevesebb belőle? Nyelvből, képességből, emberből, JavaScript-ből?
36

Méret

Hidvégi Gábor · 2018. Feb. 2. (P), 18.53
Nemsokára el kell mennem, úgyhogy csak röviden tudok válaszolni, mondok egy példát.

Elöljáróban annyit, hogy szabadidőmben kis fejlesztőeszközökkel játszom, ezekhez az operációs rendszert a Google Drive-on szokták megosztani a csóró gyártók. A számítógépem egy 1,3 gigahertzes Atom, aminek a teljesítménye nagyjából egy középkategóriás telefonéval egyezik meg.

Namost, ennek az url-nek a megnyitása Chrome böngészőben, ami ma gyorsnak számít, körülbelül nyolc másodperc, az Inspector szerint a DOMContentLoaded 14 másodperc.

Van egy olyan rossz tulajdonságom, hogy sajnos nem tudok elvonatkoztatni attól, amit látok. A képernyőn van kilenc darab egyedi kép (ikonok, tizenegy kilobájtnyi gif) és nagy ráhagyással kb. kétszáz bájtnyi szöveg (linkek feliratai).

Kérdem én, hogy az összesen kirajzolt nettó tíz kilobájtnyi tartalom a valóságban miért 1,3 megabájt? Ebből egy megabájt script. 2x7 ikon kirajzolásán mi kerül ennyibe?

És ha nyomok egy frissítést, akkor 55 kilobájtnyi adatot tölt újra, a többi marad a gyorsítótárban, de ugyanilyen sokáig tart. Miért?
37

Nem tudom ez hogyan válasz a

inf · 2018. Feb. 2. (P), 20.04
Nem tudom ez hogyan válasz a kérdésre. :D
38

Képességek

Hidvégi Gábor · 2018. Feb. 4. (V), 12.23
Tettem egy olyan kijelentést, hogy a JS meghaladja a legtöbb ember képességeit, és erre hoztam példát. A Google Drive itt egy véletlenszerűen kiválasztott szolgáltatás volt, lehetett volna Microsoft is vagy bármi más.

Fontos viszont, hogy mivel – ész hiányában – mindenki a legnagyobbakat másolja, óriási a felelősségük, mert ha valamit elrontanak, akkor mindenki más rosszul fogja azt csinálni.
40

Nem értem ez hogy a js

inf · 2018. Feb. 4. (V), 16.38
Nem értem ez hogy a js hibája. Jobb lett volna java applettel megvalósítani?
42

Az egész

Hidvégi Gábor · 2018. Feb. 5. (H), 10.04
Ez az ökoszisztéma hibája. A Google világos bizonyságát adta, hogy az alkalmazottai nem értik a web működését. A Google egy internetes cég, ebből él. Ha mindenhol így dolgoznak, elképesztő mennyiségű pénzt öntenek ki az ablakon így, hogy dilettáns programozókat foglalkoztatnak.

A web túl komplikált.

Világszinten programozóhiány van. Ha mindenki a nagyokat másolja, és úgy dolgoznak, mint a Google-nél, akkor mekkora pazarlás megy így? Ha értenék a web működését, akkor hanyadennyi fejlesztőre lenne szükség?
43

Fától az erdőt...

Pepita · 2018. Feb. 5. (H), 11.15
A Google világos bizonyságát adta, hogy az alkalmazottai nem értik a web működését.

Esetleg Te nem érted a Google-ét...

Attól, hogy kiragadsz egy-egy oldalt és / vagy feature-t, amit önmagában jóval kevesebb kóddal (látszólag) meg tudnál valósítani, még távolról sem jelenti azt, hogy jól látod át a helyzetet.
Rengeteg újrafelhasználható kódjuk van, amit elég hatékonyan használnak is - ez csak egy indok arra a sok közül, hogy miért nem 10-20 kB js-t, css-t látsz egy oldalon. Másik (nem éppen elhanyagolható) kérdés, hogy mennyi jön cache-ből, mikor mondjuk az összes szolgáltatásuknak kb 50%-át használod...
És igen:
A Google egy internetes cég, ebből él.
, ezért aszerint optimalizál, hogy mi a jobb megoldás a lehető legtöbb felhasználója számára, és nagy ívben tesz rá, hogy Magyarországon van egyetlen Hídvégi Gábor, aki ezt nem érti és ezért fikázza őket is és a fejlesztőit is.

Ha akkora "pazarlás" lenne, akkor biztosan nem így csinálnák, elhiszed? Csak azért, mert már rég csődbe mentek volna, viszont úgy tűnik, ez a veszély nem áll fenn... :)
44

Meglátjuk

Hidvégi Gábor · 2018. Feb. 5. (H), 14.01
Ez kezd egyre izgalmasabb lenni.

Kíváncsi vagyok, mit tudunk ebből kihozni.

Utóirat: az évek során nem tűnt fel, hogy rövid i-vel írom a nevem?
46

Bocsi

Pepita · 2018. Feb. 6. (K), 11.24
az évek során nem tűnt fel, hogy rövid i-vel írom a nevem?
Elnézést kérek, valamiért nekem a híd mindig hosszú, "be van égetve". Igyekszem rá odafigyelni.
45

Szvsz. valami hasonló lehet a

inf · 2018. Feb. 5. (H), 16.16
Szvsz. valami hasonló lehet a háttérben, mint amit Pepita is írt, hogy van egy csomó újra felhasználható könyvtáruk, és abból szórják össze, ami éppen kell ahelyett, hogy nulláról indulnának. Így bár egy csomó nem használt feature is benne lesz a kódban, de cserébe gyorsabb a fejlesztési idő, és arra számítanak, hogy a libek nagy részét cache-ből majd lekéri a böngésző, ezért sebességben sem lesz akkora probléma a többségnek feltéve, hogy nem régi géppel, vagy valami gyengébb arm/atom-al böngésznek. Ha szempont lenne náluk, hogy ezeken a gyengébb gépeken is gyorsan fusson a kód, akkor valószínűleg tennének érte, de valószínűleg akkor sem a te módszereddel nulláról állnának neki és szórnának ki minden nem használt dolgot a kódból, hanem inkább bottleneck-eket keresnének.
39

»Ettől függetlenül úgy

Hidvégi Gábor · 2018. Feb. 4. (V), 12.28
»Ettől függetlenül úgy gondolom, hogy nem a jövő, hanem a múlt programozási nyelve«

Mitől gondolod így? Szinte minden platformon bevezetik a JavaScript / Node.js támogatását, a nyelv folyamatosan fejlődik, sőt, ma már több tucat nyelv létezik, ami JavaScript-re fordít.
Igazából meg is válaszoltad magadnak a kérdést.

Ha tényleg annyira jó nyelv lenne a JS, akkor nem jött volna létre az a több tucat másik, amiről JS-re kéne fordítani.

»Ezért minél kevesebb van belőle, annál jobb.«

Minél van kevesebb belőle? Nyelvből, képességből, emberből, JavaScript-ből?


Egészen nyilvánvalóan a JS-ről, hisz a hozzászólásomnak az volt a kontextusa.