Započnite s upotrebom HTML5

Ovaj je vodič dostupan za preuzimanje kao besplatni PDF. Preuzmite odmah započnite s HTML5. Slobodno kopirajte i dijelite ovo sa svojim prijateljima i obitelji.

instagram viewer

i

oznake nisu previše zastrašujuće i ne bojite se zaprljati ruke nekim izvornim kodom.

Drugo, ovaj vodič pretpostavlja da znate što je CSS i kako radi. Ne očekujemo da ste genijalci dizajna, niti se očekuje da znate cijelu CSS specifikaciju sa stražnje strane ruke. Međutim, trebali biste biti u mogućnosti primijeniti styling na element na web stranici, moći se povezati na CSS datoteku i znati različite između ID-a i klase i kako primijeniti styling na svaki od njih.

Ako grebete po glavi, ne brinite se. Jedna od najboljih stvari o HTML-u i CSS-u je da je to stvarno, jako lako. U stvari, MakeUseOf ima nevjerojatan XHTML vodič Naučite govoriti "Internet": Vaš vodič za xHTMLDobrodošli u svijet XHTML - Extensible Hypertext Markup Language - označnog jezika koji svakome omogućuje izradu web stranica s mnogo različitih funkcija. To je primarni jezik Interneta. Čitaj više što će vas dovesti do brze brzine.

Nakon što pročitate ovaj vodič, možda biste trebali pogledati i sljedeće članke:

• 8 web-mjesta s primjerima kodiranja kvalitete 8 najboljih web stranica za primjere kvalitetnog HTML kodiranjaPostoje neke fantastične web stranice koje nude dobro dizajnirane i korisne primjere i upute za kodiranje HTML-a. Evo osam naših favorita. Čitaj više
• 6 blogova koje treba slijediti sjajne web dizajnere 6 najboljih blogova o web dizajnu koje treba slijediti Čitaj više

Trebat će vam i moderan uređivač teksta i preglednik. Bilo koja verzija Internet Explorera koja je starija od IE 9 i neke starije verzije Safarija, Chromea i Firefox će se boriti s mnogim značajkama koje su dio HTML5 i može vas spriječiti da to slijedite vodič.

Zbog toga vas ohrabruje preuzimanje modernog preglednika. Preporučujem Google Chrome i koristit ću ga u svakom primjeru.

Pored toga, sve što će vam trebati je spremnost za učenje. Oh, i urednik teksta.

1.2 Tekstori za uređivanje teksta za web razvoj

Vaš je uređivač teksta ono što ćete koristiti za pisanje koda. Možda se pitate što je uređivač teksta.

Pa, prvo to nije program za obradu teksta. Programi kao što su Microsoft Word i Appleove stranice potpuno nisu prikladni za web razvoj. To je zato što pridaju dodatne informacije vašim HTML, CSS i Javascript datotekama što otežava čitanje vašeg web preglednika.

Uređivač teksta otiskuje znakove u tekstualnu datoteku i ne mnogo drugo. Ovo vam omogućuje stvaranje datoteka bez dodatnog oblikovanja i možete ih spremiti s bilo kojim nastavkom koji odaberete.

Vaše računalo već dolazi s jednim. Ako koristite Windows PC, tada je Notepad uređivač teksta koji ste vjerojatno instalirali.

Na Macu je situacija nešto drugačija. U OS X dolazi četiri različita uređivača teksta. Nazivaju se Vim, Emacs, Pico i Nano. No, za razliku od Notepad-a, svi oni rade u terminalu.

Ovo je malo zastrašujuće za ljude koji su novi u web razvoju i ne bi ih trebali koristiti ljudi koji su novi u razvoju softvera. Nećemo ih koristiti u ovom vodiču. Međutim, kada se malo više uvjerite u razvoj softvera i web-mjesta, svakako je vrijedno pogledati to energija Prvih 7 razloga za pružanje šanse uredniku Vim tekstaGodinama pokušavam jedan uređivač teksta za drugim. Samo ime, pokušao sam. Svaki sam od tih uređivača koristio sam više od dva mjeseca kao svoj glavni svakodnevni urednik. Nekako, ja ... Čitaj više i Emacs. Oboje su moćni uređivači teksta, a kad ih savladate, možete vam uštedjeti jako puno vremena.

U Linuxu zadani uređivač teksta varira između distribucija. Na Ubuntuu je vjerojatno gedit gedit: Jedan od najpopularnijih uređivača jednostavnih tekstova [Linux i Windows]Kada razmišljate o uređivačima običnog teksta, prvo što vam se može javiti u glavi je Windows-ova aplikacija za bilježnicu. Čini upravo ono što navodi i njegov opis posla - obične značajke za običan tekst ... Čitaj više , što je prilično ugodan uređivač teksta koji se previše ne razlikuje od Notepad-a.

Međutim, u ovom tečaju pisat ćemo svoj kôd pomoću tri različita alata.

Prva je Uzvišeni tekst 2 Isprobajte uzvišeni tekst 2 za svoje potrebe za uređivanjem više platformiSublime Text 2 je cross-platformski uređivač koda za koji sam tek nedavno čuo i moram reći da sam zaista impresioniran unatoč beta naljepnici. Možete preuzeti cijelu aplikaciju bez plaćanja novčića ... Čitaj više . Iskreno, ne mogu vam preporučiti dovoljno. Dolazi sa svim stvarima koje početniku programeru olakšavaju život. Prvo, kôd ćete olakšati čitanje obojavanjem određenih dijelova. Drugo, omogućava vam jednostavno prebacivanje između datoteka i upravljanje cijelim projektima datoteka. Ovo je idealno za prebacivanje između datoteka i za uređivanje više bita koda u pokretu.

Treći je Javascript konzola Otkrijte probleme s web-lokacijama pomoću alata za razvojne programere Chrome ili FirebugaAko ste dosad pratili moje jQuery tutorijale, možda ste već naišli na neke probleme s kodom i ne znate kako ih riješiti. Kad se suočite s nefunkcionalnim bitnim kodom, vrlo je ... Čitaj više koja je ugrađena u Google Chrome. To nam omogućuje da napišemo Javascript i vidimo kako se odmah pokreće i koristit ćemo za objašnjenje osnovnih programskih koncepata.

Drugo je web mjesto pod nazivom Codepen.io. Ova nevjerojatna web stranica omogućuje vam kodiranje preglednika HTML, CSS i Javascript u pregledniku i besplatna je za upotrebu. Također će vam omogućiti da odmah vidite svoje promjene.

2. Semantička oznaka

U ovom ćete poglavlju saznati o Semantic Markup i kako organizirati kôd na temelju njegovog sadržaja.

Donedavno je HTML kôd uglavnom bio organiziran sa

To je uspjelo, ali bilo je prostora za napredak. Problem sa

Semantičko označavanje nova je značajka u HTML5. Donosi nove oznake, koje djeluju na isti način kao i oznaka 'div', ali označavaju zajedničke dijelove stranice.

Pa kako rade? Razmotrite sljedeći kôd.

U ovom dijelu koda imamo navigacijsku traku, naslov i popis. Ovo se previše ne razlikuje od većine web lokacija koje ćete vjerojatno ikada nastaviti razmišljati.

Pogledajmo članak o MakeUseOf-u. Primijetit ćete da postoji dio stranice koji je u potpunosti rezerviran za navigaciju do ostalih članaka. Također ćete primijetiti da postoji drugi dio stranice koji sadrži riječi koje čine članak. Na vrhu stranice vidjet ćete zaglavlje s logotipom MakeUseOf i nekim drugim vezama.

Kad razmislite, puno web stranica slijedi ove konvencije. Većina web stranica ima dio rezerviran za navigaciju. Obično imaju sadržaj. Više nego vjerojatno imaju zaglavlje.

Semantičke oznake su oznake koje vam omogućuju da definirate dijelove web stranice koji se obično nalaze na većini web stranica. Ne dodaju ništa stranici, ali vam omogućuju grupiranje oznaka na temelju njihovog sadržaja i primjenu stilova na te grupe.

Pa, sjećate se tog koda koji smo imali i prije? Pogledajmo to s dodanom semantičkom markupom.

Kao što vidite, kod je mnogo lakše čitati. Znate koji su to dijelovi, a nejasnoća nema. To je važno, jer olakšava pisanje dobrog i čistog koda. Ako se ikad odlučite za profesionalnog web dizajnera, ovo postaje najvažnije - nikad ne znate tko će čitati radove koje stvarate.

Dakle, pogledajmo neke više semantičke označne oznake.

2.1 Odjeljak

Odjeljak je stvarno korisna oznaka. Koristi se za prikupljanje ogromnih podataka i sadržaja koji su označeni naslovom ili naslovom. Mislite na to kao na poglavlje u knjizi. Poglavlje ima naslov, a može sadržavati slike, dijagrame, grafikone i riječi. Oznaka odjeljka bila bi korištena da bi sve to sadržavala.

2.2 Članak

Oznaka članka koristi se za ono što zvuči; Sadrži sadržaj kao što je blog blog ili vijest. Ovaj bi se sadržaj trebao moći odvojiti od ostatka bloga i još uvijek imati koherentan smisao.

2.3 u stranu

Ova oznaka rezervirana je za sadržaj koji je povezan, ali nije sastavni dio web stranice. Ovo bi mogla biti hrpa činjenica koje se odnose na vijest ili biografiju korisnika na blogu.

2.4 Zaglavlje

Mnogo web stranica ima traku na vrhu stranice koja sadrži logotip, neke informacije koje se odnose na web mjesto i možda neke veze. U semantičkom označavanju, upotrijebite oznaku Header da biste sve to sadržavali.

2,5 Nav

Ovaj je element rezerviran za navigacijski dio vaše web stranice. To bi sadržavalo poveznice na druge web stranice ili druge stranice na web mjestu. U kontekstu MakeUseOf, to bi mogao biti dio stranice ispod zaglavlja.

2.6 Podnožje |

Ova je oznaka rezervirana za donji dio stranice. Ovdje možete dodati neke podatke o kontaktima, podatke o autorskim pravima, kartu ili neke veze na svoju stranicu "o meni".

2.7 Testirajte sebe

• Što je Semantic Markup i za što se koristi?
• Izrađujem web stranicu i želim upotrijebiti semantičku oznaku da sadrži biografiju o meni. Koju koristim?

3. obrasci

Ako ste se ikad bavili web dizajnom, vjerojatno znate kako stvoriti jednostavan oblik u HTML-u. Ako ste stvarno pametni, vjerojatno znate kako informacije koje ste dobili iz obrasca i kako s njima nešto učiniti, pa ih stavite u bazu podataka.

Obrasci su masovno važni. Oni su osnova većine stvari koje radimo na Internetu. Svaki put kada stvorite ažuriranje statusa na svojoj omiljenoj društvenoj mreži, kupite nešto od Amazona ili pošaljete e-poštu, vjerojatno ste koristili HTML obrazac.

Ono što vjerojatno niste znali je da se način stvaranja obrazaca radikalno promijenio u HTML5. Također je značajno bolje. U ovom ćemo poglavlju pogledati neke od najboljih stvari koje sada možete učiniti, samo pomoću obične stare oznake.

Dakle, što je tako cool u novom načinu na koji možemo pisati obrasce u HTML5? Prvo, možete osigurati da neka polja moraju biti popunjena kako biste ih poslali, samo promjenom oznake samog obrasca. Pored toga, više ne morate pisati planine JavaScript ili PHP da biste to učinili. Trivijalno lako.

Drugo, možete osigurati da vaši korisnici mogu dostaviti samo određene vrste podataka u obrazac. Pretpostavimo da imate web stranicu za svoj popis e-pošte i samo želite da ljudi mogu slati stvarne adrese e-pošte? To možete učiniti samo pomoću HTML5. Doista je nevjerojatno moćan.

Treće, možete obrasce izgledati bolje tako da određenim poljima dodate rezervirano mjesto. Ovo će ih učiniti znatno intuitivnijim jer možete svojim korisnicima pokazati primjer onoga što očekujete od obrasca.

3.1 Poboljšanje obrasca

Dakle, pogledajmo obrazac i vidimo kako ga možemo poboljšati.

Ovaj je oblik prilično osnovni. Popisuje ime, e-poštu i omiljenu boju, a zatim dopušta korisniku da ga preda. Ne sadrži provjeru informacija koje se u njih ubacuju i ništa ne sprečava korisnike da predaju ovaj obrazac s praznim poljima. Promijenimo sve to.

Dakle, prvo što želimo učiniti je osigurati da polje e-pošte uzme samo e-poštu. To je doista bio prilično težak zadatak, jer biste morali stvoriti sve vrste tajnog Regex koda. Pa, ne više. Jednostavno morate promijeniti vrstu unosa iz 'teksta' u 'e-pošta'. Kada pokušate nesmetano poslati taj obrazac, žalit će se i inzistirati da pošaljete e-poštu.

3.2 Vrste i obrasci unosa

Postoje i druge vrste unosa koje možete zahtijevati. Oni uključuju telefonske brojeve, web adrese, obrasce za pretraživanje, pa čak i birače boja! Kako se HTML5 neprestano razvija, razlog je da ćemo uskoro moći odrediti više tipova unosa.

Nadalje, za stvari poput telefonskih brojeva koji se razlikuju ovisno o lokalitetu, možete odrediti obrasce za unose. Stvorene su korištenjem nečega što se naziva "regularni izrazi" i prilično su komplicirane, ali neizmjerno snažne.

Također ćemo htjeti pružiti primjer e-adrese u našem polju, tako da korisnik nema dvosmislenost što mora poslati. To je stvarno lako napraviti. Samo stvorite novi atribut "rezervirača mjesta" s primjerom adrese e-pošte.

Osigurat ćemo da je potrebno polje "Omiljena boja". U posljednjem uglatu zagradu (>) u oznaci za unos e-pošte samo napišite "potrebno". To je to. Kada pokušate poslati obrazac bez vrijednosti, pojavit će se poruka o pogrešci.

Zaista nevjerojatna stvar ovih poruka o pogrešci je da korisnik ne mora ih pisati ili pisati bilo kakav kôd da bi ih stvorio. Vi samo promijenite polje da biste ga učinili potrebnim, a ono jednostavno radi. S navedenim rečima moguće ih je prilagoditi, ako želite.

To je bio nevjerojatno kratak uvod o snazi ​​oblika u HTML5. Ako želite pročitati više, preporučujem vam da posjetite ove veze.

Daljnje čitanje:

• CSS trikovi - pišemo semantički markiranje
• HTML5 Doktor - Razgovarajmo o semantika

3.3 Testirajte sebe

Sljedeći vam je rođendan, a želite stvoriti registracijski obrazac kako biste znali koliko kolača trebate stvoriti. Otvorite uređivač teksta i stvorite obrazac sa sljedećim poljima.

• Ime
• Email adresa
• Broj telefona
• Alergije

Provjerite jesu li polja imena, e-pošte i telefonskog broja obvezna i da su polja e-pošte i telefonskog broja postavljena s vrstama unosa e-pošte i tel. Izradite rezervirano mjesto za alergijsko polje s vrijednošću „polen, jaja, quiche“.

Igrajte se s obrascem. Pokušajte predati obavezna polja kao prazna i pokušajte umetnuti ne numeričke znakove u polje telefonskog broja. U polje e-pošte umetnite nešto što nije adresa e-pošte. Što se događa?

4. media

Nekada je postojalo da jedini način na koji možete umetnuti neki video ili audio u web stranicu je bio koristeći nešto poput Flash, Shockwave ili SilverLight.

To nije bilo idealno. Prvo, nijedan od tih okvira nije dobro funkcionirao na mobilnim uređajima. Oni jednostavno nisu bili opremljeni za moderni svijet pametnih telefona i tableta.

Pored toga, bili su vlasnički formati. Kao rezultat toga, korisnici Linuxa i OS X mogli su steći prilično drugorazredno iskustvo ili su čak bili spriječeni u konzumiranju medijskih usluga, jer to nije bilo dostupno za njihovu platformu.

Napokon, imali su sklonost da budu spori. Da ste bili na računalu sa slabijim ili starijim računalima, ne biste imali dobro iskustvo gledanja videozapisa pomoću ovih okvira. Flash je bio posebno poznat po ovome.

4.1 Kako HTML5 čini video i audio fenomenalnim

HTML5 je to promijenio tako što je omogućio web programerima da na svoje web stranice uključe video i audio sa samo nekoliko redaka koda. Djeluje poslastica na mobilnim uređajima i djeluje na svaki moderni web preglednik.

Kao rezultat, velike tvrtke poput YouTubea, Vimeo i Netflix koriste prednost HTML5 revolucije. Zašto im se ne pridružite?

4.2 Sve o kodecima

U ovom ćete poglavlju naučiti kako koristiti moć HTML5 za uključivanje zvuka i videa u svoje web stranice.

Prvo, počet ću s upozorenjem. Iako možete koristiti HTML5 videozapis u svakom modernom web pregledniku, on ne funkcionira isto na svim web preglednicima. Kodeci koji se koriste u svakom pregledniku razlikuju se. U programu Internet Explorer ograničeni ste na korištenju MP4 videozapisa. Chrome je malo izdašniji i omogućuje vam upotrebu WebM, MP4 i Ogg Theora videozapisa. Opera je malo restriktivnija i omogućuje vam samo korištenje Theora i WebM videa.

Kao rezultat toga, morate biti malo pametniji u načinu umetanja videozapisa u svoju web stranicu. Dakle, pogledajmo kako to funkcionira.

4.3 Počevši od videa

Za početak, morat ćete stvoriti otvaranje i zatvaranje

Pa, kad čekate da se vaš video učita, osoba koja posjećuje vašu web lokaciju može vidjeti sliku koja se odnosi na videozapis. Da biste to učinili, samo dodajte svojim video oznakama atribut „postera“ s vrijednošću slike na koju želite povezati. To bi trebalo izgledati ovako.

Sljedeće što ćemo htjeti učiniti je stvaranje rezervnog dijela. Što to znači? Pretpostavimo da koristite neki od starijih, manje fantastičnih preglednika. Mnogi ovi stariji preglednici ne podržavaju HTML5 video zapise i zato ne mogu reproducirati HTML5 video. Ostavit ćete im poruku kojom ćete ih obavijestiti da će htjeti nadograditi svoj preglednik i da sve dok to ne učine, neće moći gledati vaš videozapis.

Da biste to učinili, samo napišite svoju poruku u svoje video oznake. Ništa drugo nije potrebno. Nakon što to učinite, ostat će vam kôd koji izgleda ovako.

Dodajmo još videozapisa. Testirat ću to na Google Chromeu, tako da ću se povezati u MP4 film. Da biste to učinili, stvorim oznaku Source i dodijelim joj atribut src koji ima vrijednost videozapisa koji želim uključiti.

Moja je stranica sada spremna za otvaranje u mom web pregledniku. Povezao sam se s filmom koji je stvarno, stvarno velik i kao rezultat toga se, kada se otvori, vidi samo poster.

4.4 Dodavanje zvuka

Audio se može umetnuti na vašu web stranicu na način koji vrlo podsjeća na način na koji smo umetnuli video na našu stranicu.

Prvo, jedan stvara audio oznake. Ove audio oznake sadrže atribut "kontrola". To korisniku koji posjećuje stranicu daje mogućnost pauziranja, reprodukcije unatrag i premotavanja unaprijed zvuka koji se reproducira.

Zatim uključujete oznaku izvora u MP3 datoteku na koju želite povezati. Ne morate se toliko brinuti kada je u pitanju kompatibilnost kodeka. Najnoviji web-preglednici imaju mogućnost reprodukcije MP3 audio zapisa, mada je dobra praksa da u obzir uključe i. .Gg i .wav datoteku.

Na kraju, možete stvoriti sigurnosnu priču za starije preglednike. To se radi na isti način na koji ste stvorili sigurnosnu kopiju za svoj video.

Krajnji rezultat izgleda nekako ovako.

Kada to otvorite u svom web pregledniku, trebalo bi izgledati nekako ovako.

4.5 Testirajte sebe

• Koja je svrha postera u vašim video oznakama?
• Koje kodeke ne možete koristiti u programu Internet Explorer?
• Ako bih želio mogućnost pauziranja nekog zvuka, koji biste atribut dodali svojoj "audio" oznaci?

Daljnje čitanje:

• HTML5 Stecks ​​Video

5. CSS3 Transformacije i animacije

CSS se tradicionalno koristio za obradu izgled i dizajn web stranice 5 bebi koraka za učenje CSS-a i postati Kick-Ass CSS čarobnjakCSS je najvažnija promjena web stranica u posljednjem desetljeću, a utro je put za razdvajanje stila i sadržaja. Na moderni način XHTML definira semantičku strukturu ... Čitaj više . To je još uvijek točno, ali u svojoj najnovijoj iteraciji stekla je sposobnost rukovanja animacijama i transformacijama elemenata i slika.

Ljudi su s CSS3 učinili nevjerojatne stvari, od stvaranja digitalnog sata do pisanja cijele igre Pong. Netko ga je čak upotrijebio za ponovno stvaranje uvodnih bodova Mad Men. To je uistinu moćna tehnologija i kad se svlada, možete koristiti za dodavanje zadivljujuće razine funkcionalnosti svojoj web stranici.

U ovom poglavlju ću vam ukratko predstaviti uvod u CSS3 Top 5 web mjesta za učenje CSS-a na mreži Čitaj više i pokazati vam kako dodati nevjerojatne efekte na svoju stranicu.

Prvo idite na codepen.io i stvorite novu olovku. Upotrijebit ćemo ovo kao svoj radni prostor za vrijeme trajanja ovog poglavlja.

Počet ćemo jednostavno i stvoriti ćemo jednostavnu transformaciju slike koja rotira sliku za 3 stupnja kada lebdi. Prije svega, stvorite div tag i dodijelite mu ID. U primjeru u nastavku dao sam mu ID "muo".

5.1 CSS efekti lebdjenja

U taj div uključite sliku po vašem izboru. Uključio sam kopiju logotipa za MakeUseOf.

Tada ćete trebati napisati pravila o tablici stilova. U primjeru u nastavku stvorio sam gornju i lijevu marginu kako bih slici dao malo prostora. Uključio sam i zanimljivo pravilo tablice stila koje počinje s "#muo: lebdi". Što je to?

Kada na pravilo tablice stilova dodate ": lebdi", bilo da je to element, ID ili klasa, učinkovito kažete pregledniku da primijeni taj stil kada miš upravlja elementom. Prilično cool, zar ne?

Unutar pravila "#muo: lebdi" imamo liniju koja kaže "-webkit-transformacija: rotiraj (3deg)". Kao što sam siguran, pretpostavljate, to je pregledniku da pregledniku rotira taj element za tri stupnja.

Ipak, vrijedno je napomenuti da ova oznaka djeluje samo u Chromeu i Safariju. Ako želite da vaš kôd radi u Firefoxu ili Internet Exploreru 9 i novijim verzijama, trebali biste promijeniti svoju CSS datoteku da uključuje sljedeće retke.

Kad miša miša pređete preko slike, to izgleda ovako:

5.2 Korištenje CSS3 za promjenu veličine slike

Pa, zašto se tu zaustaviti? Jeste li znali da metodu "transformiranje" možete koristiti i za povećanje ili smanjenje slike. Promijenimo našu CSS datoteku tako da sadrži sljedeće retke.

Kao što vidite, sada smo uključili novo pravilo transformacije, ali ovaj put to govorimo kako bismo napravili nešto što se naziva "razmjera". Ovo je zaista lijep način za povećanje veličine slike. Potrebna su dva parametra (oni brojevi koje vidite između tih zagrada) i predstavljaju iznos za koji povećavate visinu i širinu elementa.

Kao što vidite iz koda, povećaću veličinu logotipa MakeUseOf div za 50%. Ovo djelo možete testirati tako da pokažite pokazivač miša iznad njega. Vidjet ćete da je sada logotip 'MakeUseOf' znatno rastezljiviji.

Ovo je bio vrlo nježan uvod u CSS3 transformacije. Iako je CSS3 doista vrlo nov, sada možete vidjeti da s njim možete napraviti puno vrlo zanimljivih manipulacija.

5.3 Testirajte sebe

• Kako primijenimo styling na element prilikom lebdenja?
• Kako rotirate sliku pomoću CSS3?
• Kako skalirate sliku pomoću CSS3?
• Što se događa ako prođete način vaše transformacije 'prevedi (50px, 50px)'?

Daljnje čitanje:

HTML5 stijene - prezentacija

6. Dovoljno je Javascript

Ako želite koristiti skriptu u svom web pregledniku, morate je koristiti Javascript Što je JavaScript i kako to radi? [Objašnjena tehnologija] Čitaj više . Nema dva načina za to, nažalost. To je jezik koji ima mnogo obožavatelja 5 Opsežne mogućnosti biblioteke JavaScripta za programere Čitaj više , i mnogi prijevaraši. Kako jezici idu, ima mnogo bradavica. Iz toga je razloga što se najistaknutija knjiga o tom jeziku zove "Javascript: Dobri dijelovi".

Neće biti nemoguće naučiti vas kako koristiti Javascript u jednom poglavlju. To nije cilj ovdje. Cilj je naučiti vas dovoljno Javascripta kako biste mogli razumjeti sljedeće poglavlje, a to je korištenje tehnologije koja se zove Canvas za izradu crteža i animacija.

6.1 Pristupanje konzoli

Da bismo to učinili, koristit ćemo Javascript konzolu koja je ugrađena u svaku kopiju preglednika Google Chrome. Da biste pristupili tome, desnom tipkom miša kliknite bilo koju web stranicu, a zatim pritisnite "Ispitaj element". Zatim kliknite na "Konzola". Trebali biste ovo vidjeti.

Tradicionalno je da je prvi program koji svaki razvojni programer ikad napiše program "Hello World". Ovo je jednostavan program koji ispisuje frazu "Hello World", a ne mnogo drugo. U svoju konzolu upišite 'console.log ("Pozdrav svijetu!") ;.

6.2 Vaš prvi program

Dakle, što smo točno napravili? Prvo smo nazvali nešto što se zove "console.log". Ovo je malo koda ugrađenog u računalo koje jednostavno ispisuje sve što mu kažete. Potom smo dodali neke zagrade i uključili u dvostruke citate "Hello World". To se naziva 'prijenošenje argumenata', a vrsta argumenta koju smo proslijedili naziva se nizom. Kad god želite raditi nešto što uključuje slova i posebne znakove, jednostavno morate koristiti pojedinačne navodnike. Međutim, ako želite raditi bilo što pomoću brojeva, obično ne morate koristiti navodnike, kao što je prikazano u nastavku.

6.3 Varijable u JavaScript-u

Isto tako, varijable možete proslijediti i 'console.log'. Varijable zvuče komplicirano, ali sve što stvarno jesu prostor je za stavljanje komada informacija. To su često brojevi ili slova. Da biste to učinili, deklarirate varijablu pomoću ključne riječi 'var', dodijelite joj ime, a zatim znakom jednake vrijednosti date joj vrijednost. Napravit ću varijablu koja se zove "zdravo" i dodijeliti joj vrijednost "Pozdrav svijetu!" Zatim ću to proslijediti na console.log.

Napominjemo kako nisam citirao 'zdravo' na console.log koristeći navodnike. To je zato što sam htio ispisati na konzoli sadržaj 'zdravo', a ne 'zdravo'.

6.4 Koje funkcije rade?

Može biti pomalo zamorno prepisivanje istog komada koda iznova i iznova, pa zbog toga pišemo funkcije. Funkcije su lakše nego što mislite. Sve što oni jesu su komadići koda koje možemo ponovo upotrijebiti bez ponovnog prepisivanja istog koda. U nastavku smo stvorili funkciju koja se zove "sup" i prosljeđujemo je argumentom pomoću zagrada koji se zatim prijavljuju na zaslon. Nazivamo „sup“ slanjem na konzolu „sup („ Pozdrav svijetu! “);“.

6.5 Ponavljanje radnje petljom „For“

Pretpostavimo da ste htjeli iste radnje poduzeti već nekoliko puta. Iz tog razloga koristimo petlju "for". U početku izgledaju zastrašujuće, ali to je tako jednostavno učiniti nakon što ih razumijete. Započnite s pisanjem 'za ()'.

U tim zagradama želimo stvoriti varijablu koja se računa koliko smo puta izveli neku radnju. Dakle, dobivamo nešto ovako "for (var i = 0;)".

Tada želimo provjeriti jesam li ispunio neki uvjet. U ovom slučaju, želimo vidjeti da je manje od 10. Dakle, nakon zarezom pišemo „i <10“. Naša petlja sada izgleda ovako: 'for (var i = 0; i <10;).

Ako sam manji od 10, želimo ga dodati jednim, a onda nešto učiniti. Dakle, stavljamo 'i = i + 1'. Naša petlja je gotovo gotova: 'for (var i = 0; i <10; i = i + 1) '. Zapazite kako zadnji dio nema točku zarezom.

Nakon toga, htjet ćemo napraviti akciju. Dakle, nakon zadnjih zagrada pišemo neke kovrčave zagrade i između njih idemo utješiti.log vrijednosti i. Tako ćete stvoriti brojač koji broji i do devet.

Zadnje dvije programske konstrukcije koje ćemo gledati su izjave 'if' i 'while' petlje.

6.6 Ako izjave

Izjava 'ako' izvodi radnju ako su ispunjeni određeni kriteriji. Slične su petlje "for" u izradi i rade na sljedeći način. Pretpostavimo da imate varijablu koja se zove 'cheeseburgers' i želite vidjeti ima li vrijednost 'ukusno'. Ako to uspije, na ekranu želite prijaviti "yum, cheeseburgere". Da biste to postigli napisali biste nešto ovako.

Zapazite kako sam napisao "ako (cheeseburgers ==" ukusan ")". Za provjeru jednakosti koristite dvostruke ili trostruke jednake, a jednostruke jednake da dodijelite vrijednost.

6.7 Dok se petlje

I na kraju, petlja "dok" izvršava radnju dok je zadovoljen kriterij. Dakle, zamislite da želite prijaviti "yum, cheeseburgere" dok su cheeseburgeri jednako ukusni. Da biste to učinili, napišite sljedeće.

Vrijedi napomenuti da bi ovo ušlo u beskonačnu petlju, a trebali biste izbjegavati poduzimanje akcije na vrijednosti koja se vjerojatno neće promijeniti. To može uzrokovati da se vaš preglednik zaključa ili vaš kôd ne radi.

Kao što sam već spomenuo, ovo je bio vrlo kratak uvod u programske konstrukcije u Javascriptu. Potiče vas da pročitate više o ovoj fascinantnoj, iako ogromnoj temi.

6.8 Testirajte se

• Želim odbrojavati od 30. Napišite petu "for" koja bi to učinila.
• Želim stvoriti varijablu koja se zove "makeuseof" i dodijeliti joj vrijednost "super". Kako se to radi?
• Želim stvoriti funkciju koja prilikom poziva ispisuje "MakeUseOf Is Awesome". Napiši tu funkciju.

Daljnje čitanje:

• "Javascript: Dobri dijelovi" napisao Douglas Crockford
• Vodič za MDN JavaScript

7. Kreativno platno

Canvas je cool tehnologija koja omogućuje crtanje slika i stvaranje animacija, a da ne morate koristiti Flash ili Silverlight. Ljudi su ga koristili za stvaranje bizarnih i prekrasnih stvari, uključujući simulator za sušenje kose i razne video igre. To je prekrasan i neprimjereno velik dio tehnologije, u ovom ću vam uvodnom dijelu predstaviti kratki uvod.

Vrijedi napomenuti da Canvas djeluje samo na modernim web preglednicima. Ako koristite staru verziju IE, Chromea ili Firefoxa, možda nećete moći slijediti ovo poglavlje. Ako je to slučaj, razmislite o preuzimanju najnovije verzije preglednika Google Chrome, web preglednika u kojem sam stvorio ovaj vodič.

7.1 Početak rada s platnom

Prije svega, morat ćete otvoriti web preglednik i otvoriti codepen.io. Napravite novu olovku.

Sada ćemo morati proglasiti element platna. Napravite dvije oznake otvaranja i zatvaranja platna. U njima biste trebali prenijeti tri atributa. To su širina i visina elementa Canvas, zajedno s ID-om koji mu dajete. Kao i prije kad ste umetnuli neki videozapis, trebali biste uključiti i povratnu poruku.

Sada ćemo htjeti napisati Javascript kod koji će nešto privući na zaslon. Počet ćemo osnovno i stvoriti ćemo jednostavni crveni kvadrat.

Izradit ćemo varijablu (nazvao sam je „demo“), a zatim ćemo odabrati element platna i dodijeliti ga toj varijabli. Da biste to učinili, koristite document.getElementByID () i unesite ID elementa koji želite odabrati.

Drugi redak u našoj skripti stvara drugu varijablu koja se zove "kontekst" i na njoj poziva "demo.getContext (" 2d "). To je pregledniku navelo da radimo na 2d slici, a zatim je prenio potrebne funkcije koje bismo trebali da bismo prikazali na zaslonu.

Treći i četvrti redak su oni koji zapravo čine crtež na zaslonu. Treći redak ispunjava pravokutnik crvenom bojom, dok četvrti red naziva fillRect, koji ga postavlja i definira njegovu dužinu i širinu.

To ipak nije impresivno. Napravimo nešto malo naprednije i upotrijebite čari Javascripta i Canvas da stvorimo MakeUseOf potpuno novi logotip.

7.2 Oblici i tekst

Izbrišemo naš četvrti redak i zamijenimo ga onim koji naš pravokutnik postavi u gornji lijevi kut i ispruži ga dužinom našeg platna.

Prva dva argumenta definiraju mjesto na kojem želimo smjestiti osi x i y oblika. Za sada postavimo ovo dvoje na „0“. Treći argument odnosi se na širinu oblika. Postavimo to na „200“, a četvrti argument ostavimo na „50“. Sada bi trebao imati nešto što ovako nekako izgleda.

Ovo je sjajan početak, ali uopće ne spominje MakeUseOf. Dakle, dodaćemo neki tekst. Napravimo varijablu koja sadrži "makeuseof" i nazvat ćemo je tom varijablom "MakeUseOf".

Tada ćemo htjeti stvoriti još jednu varijablu konteksta. Nazovite ovaj „kontekst2“ i uvjerite se da je 2d. Upravo ćemo to koristiti za pisanje našeg teksta.

Želimo da naš tekst bude obojen plavo i da prekriva naš crveni kvadrat. Kao i prije, željet ćemo ga ispuniti kao „plavi“. Sada ćemo odabrati karakteristike našeg teksta. Želimo da bude 20 px velikog, podebljanog formata i da koristi Arial font. Nazovimo font na kontekstu2 i dodijelimo mu vrijednost "podebljani 20px arial".

Budući da želimo da ovaj tekst prekriva naš prethodni crveni okvir, moramo pozvati "textBaseLine" na kontekstu2 i dodijeliti mu vrijednost vrha. Nakon što je to dovršeno, nazivamo „fillText“ na kontekstu2 i prosljeđujemo mu varijablu koja sadrži naš tekst i x i y koordinate u koje namjeravamo smjestiti svoj tekst. Krajnji rezultat našeg koda je ovako nešto.

Slika koja nastaje kodom izgleda ovako.

7.3 Riječ na platnu

Iako je ovo bio nevjerojatno osnovni uvod na Canvas, trebali biste shvatiti da je u pitanju i nevjerojatno velika tehnologija i nevjerojatno moćna tehnologija za pokretanje. Ovaj je vodič jednostavno poslužio kao uvod u izradu grafike pomoću ove nove tehnologije.

7.4 Testirajte sebe

• Na sliku koju ste stvorili dodajte sljedeći slogan: "Najbolje tehnološko web mjesto ikad!"
• Stvorite petlju "for" koja se izvodi za deset iteracija. Pogledajte možete li premjestiti crtež dolje na platnu, u jednom pikselu.
• Omotajte crtež u funkciju. Što se događa ako je ne nazovete?

Daljnje čitanje:

• HTML5 Stijene - integriranje platna u svoje web aplikacije.
• Treehouse - Kako crtati platnom

8. Gdje dalje?

Hvala vam što ste pročitali moj nevjerojatno kratak vodič o novim tehnologijama koje se nalaze u HTML5. Neosporno je da je HTML5 tehnologija budućnosti. Usvaja ga većina tehnologije, jer je lako napisati i izvanredno učinkovito. Ljudi stalno rade nevjerojatne stvari s tim, i ne sumnjam da ćete u budućnosti biti jedan od tih ljudi. Počašćen sam što sam bio dio vašeg putovanja u divlji i prekrasan svijet HTML5.

Molim vas da nastavite učiti. Nastavite kodirati. Nastavite sa usavršavanjem i usavršavanjem, i ni u jednom trenutku nećete koristiti tehnologije koje su uvedene u ovaj kratki vodič za stvaranje prekrasnih proizvoda.