Kom igång med HTML5

Den här guiden kan laddas ner som en gratis PDF. Ladda ner Komma igång med HTML5 nu. Kopiera och dela detta med dina vänner och familj.

instagram viewer

och

taggarna är inte för skrämmande, och du är inte rädd för att göra dina händer smutsiga i någon källkod.

För det andra antar den här guiden att du vet vad CSS är och hur det fungerar. Vi förväntar oss inte att du ska vara designgenier, och vi förväntas inte heller veta hela CSS-specifikationen utanför handen. Du bör dock kunna tillämpa styling på ett element på en webbsida, kunna koppla till en CSS-fil och veta olika mellan ett ID och en klass och hur man använder styling på var och en av dem.

Om du kliar på huvudet ovan, oroa dig inte. En av de bästa sakerna med HTML och CSS är att det är riktigt, riktigt enkelt. Faktum är att MakeUseOf har en otrolig XHTML-guide Lär dig att tala "Internet": din guide till xHTMLVälkommen till XHTML: s värld - Extensible Hypertext Markup Language - ett markeringsspråk som gör att alla kan konstruera webbsidor med många olika funktioner. Det är det primära språket på Internet. Läs mer som kommer att få dig snabbt snabbt.

Efter att ha läst den guiden kanske du också vill titta på följande artiklar:

• 8 webbplatser med exempel på kvalitetskodning 8 bästa webbplatser för exempel på HTML-kodningDet finns några fantastiska webbplatser som erbjuder väl utformade och användbara HTML-kodningsexempel och handledning. Här är åtta av våra favoriter. Läs mer
• 6 bloggar att följa fantastiska webbdesigners 6 bästa bloggar för webbdesign att följa Läs mer

Du kommer också att behöva en modern textredigerare och webbläsare. Varje version av Internet Explorer som är äldre än IE 9 och några äldre versioner av Safari, Chrome och Firefox kommer att kämpa med många funktioner som ingår i HTML5 och kan förhindra att du följer detta guide.

Som ett resultat uppmuntras du att ladda ner en modern webbläsare. Jag rekommenderar Google Chrome, och jag kommer att använda det i varje exempel.

Utöver det är allt du behöver behöva lära sig. Åh, och en textredigerare.

1.2 Textredigerare för webbutveckling

Din textredigerare är det du ska använda för att skriva din kod. Du undrar kanske vad en textredigerare är.

Tja, för det första är det inte en ordbehandlare. Program som Microsoft Word och Apples sidor är helt olämpliga för webbutveckling. Det beror på att de bifogar ytterligare information till dina HTML-, CSS- och Javascript-filer som gör det svårt för din webbläsare att läsa.

En textredigerare skjuter ut tecken i en textfil och inte mycket annat. Detta gör att du kan skapa filer som inte har någon extra formatering, och kan sparas med valfri utvidgning.

Din dator levereras redan med en. Om du använder en Windows-dator är Notepad den textredigerare som du troligen har installerat.

På en Mac är situationen något annorlunda. OS X kommer med fyra olika textredigerare. Dessa kallas Vim, Emacs, Pico och Nano. Till skillnad från Notepad fungerar emellertid alla i terminalen.

Detta är lite skrämmande för människor som är nya för webbutveckling och bör inte användas av personer som är nya för programvaruutveckling. Vi kommer inte att använda dem i den här guiden. Men när du blir lite mer säker på programvara och webbutveckling är det definitivt värt att titta på vim De 7 främsta orsakerna till att ge Vim Text Editor en chansI flera år har jag provat den ena textredigeraren efter den andra. Namnlösa, jag försökte det. Jag använde var och en av dessa redaktörer i över två månader som min primära dagliga redaktör. På något sätt ... Läs mer och Emacs. De är båda kraftfulla textredigerare, och när du behärskar kan du spara mycket tid.

I Linux varierar standardtextredigeraren mellan distributioner. På Ubuntu är det troligt gedit gedit: En av de mest funktionsfyllda vanliga textredigerarna [Linux & Windows]När du tänker på vanliga textredigerare, är det första som kan komma in i ditt huvud Windows Notepad-applikation. Det gör exakt vad det står i arbetsbeskrivningen - vanliga funktioner för en vanlig text ... Läs mer , som är en ganska trevlig textredigerare som inte är alltför olika från Notepad.

Men i denna kurs ska vi skriva vår kod med tre olika verktyg.

Den första är Sublim text 2 Testa sublim text 2 för dina behov av redigering av kodkodSublime Text 2 är en koderedigerare som jag nyligen har hört talas om, och jag måste säga att jag är riktigt imponerad trots beta-etiketten. Du kan ladda ner hela appen utan att betala ett öre ... Läs mer . Jag kan ärligt talat inte rekommendera detta tillräckligt högt. Det kommer med alla saker som gör livet lättare för en början utvecklare. För det första kommer det att göra din kod lättare att läsa genom att färga vissa delar. För det andra kan du enkelt växla mellan filer och hantera hela filprojekt. Det här är idealiskt för att växla mellan filer och redigera flera kodkod.

Den tredje är Javascript-konsol Ta reda på problem med webbplatsen med Chrome Developer Tools or FirebugOm du har följt mina jQuery-tutorials hittills har du kanske redan stött på några kodproblem och inte vetat hur du fixar dem. När du står inför en icke-funktionell kodkod, är det mycket ... Läs mer som är inbyggd i Google Chrome. Detta gör att vi kan skriva Javascript och se att det körs omedelbart och kommer att användas för att förklara grundläggande programmeringskoncept.

Den andra är en webbplats som heter Codepen.io. Den här anmärkningsvärda webbplatsen låter dig koda HTML, CSS och Javascript i webbläsaren och är gratis att använda. Det låter dig också se dina förändringar direkt.

2. Semantisk markering

I det här kapitlet kommer du att lära dig om Semantic Markup och hur du organiserar din kod baserat på dess innehåll.

Fram till nyligen organiserades HTML-kod i allmänhet med

Detta fungerade, men det fanns utrymme för förbättringar. Problemet med

Semantisk markering är en ny funktion i HTML5. Det tar in nya taggar, som fungerar på samma sätt som en "div" -tagg, men är för att märka vanliga delar av en sida.

Så, hur fungerar de? Tänk på följande kod.

I denna kod har vi en navigeringsfält, en titel och en lista. Detta är inte alltför annorlunda för de flesta webbplatser du troligtvis kommer att gå på när du tänker på det.

Låt oss titta på en artikel om MakeUseOf. Du kommer att märka att det finns en del av sidan som är reserverad helt för att navigera till andra artiklar. Du kommer också att märka att det finns en annan del av sidan som innehåller orden som utgör en artikel. Mot toppen av sidan ser du en rubrik som innehåller MakeUseOf-logotypen och några andra länkar.

När du tänker på det följer många webbplatser dessa konventioner. De flesta webbplatser har en del som är reserverad för navigering. De har vanligtvis en mängd innehåll. De har mer än troligt en rubrik.

Semantiska taggar är taggar som låter dig definiera delar av en webbplats som vanligtvis finns på de flesta webbplatser. De lägger inte till något på sidan, men tillåter dig att gruppera taggar baserat på deras innehåll och tillämpa stylings på dessa grupper.

Så kommer du ihåg den kod vi hade tidigare? Låt oss titta på det med någon semantisk markering tillagd.

Som ni ser är koden mycket lättare att läsa. Du vet vilka delar som är vilka och det finns ingen tvetydighet. Detta är viktigt eftersom det gör det lättare att skriva bra, ren kod. Om du någonsin bestämmer dig för att bli en professionell webbdesigner blir detta viktigast - du vet aldrig vem som ska läsa det arbete du producerar.

Så låt oss titta på några mer semantiska markeringstaggar.

2.1 Avsnitt

Avsnitt är en riktigt användbar tagg. Det används för att ta tag i enorma delar av information och innehåll som är markerade med en rubrik eller en titel. Tänk på detta som ett kapitel i en bok. Ett kapitel har en titel och kan också innehålla bilder, diagram, grafer och ord. En sektionstagg skulle användas för att innehålla allt detta.

2.2 Artikel

Artikelmärket används för hur det låter som; Innehåller innehåll som ett blogginlägg eller en nyhet. Detta innehåll bör kunna lossas från resten av bloggen och fortfarande vara enhetligt.

2.3 Bortsett

Den här taggen är reserverad för innehåll som är relaterat till, men inte en integrerad del av webbsidan. Detta kan vara ett gäng fakta som hänför sig till en nyhetshistoria eller biografin för en användare på en blogg.

2.4 Header

Många webbsidor har en stapel överst på sidan som innehåller en logotyp, lite information som hänför sig till webbplatsen och kanske några länkar. I semantisk markering skulle du använda en Header-tagg för att innehålla allt detta.

2.5 Nav

Detta element är reserverat för navigationsdelen på din webbplats. Detta skulle innehålla länkar till andra webbplatser eller till andra sidor på webbplatsen. Inom ramen för MakeUseOf kan detta vara den del av sidan som ligger under rubriken.

2.6 Fotfot

Den här taggen är reserverad för den nedre delen av sidan. Här kan du lägga till några kontaktuppgifter, upphovsrättsinformation, en karta eller några länkar till din "om mig" -sida.

2.7 Testa dig själv

• Vad är Semantic Markup, och vad används det för?
• Jag skapar en webbsida och vill använda en semantisk tagg för att innehålla en biografi om mig. Vilken använder jag?

3. formulär

Om du någonsin har gjort lite webbdesign vet du förmodligen hur du skapar en enkel form i HTML. Om du är riktigt smart vet du förmodligen hur du tar informationen du får från ditt formulär och hur man gör något med det, sådant lägger det i en databas.

Former är enormt viktiga. De är grunden för de flesta saker vi gör på Internet. Varje gång du skapar en statusuppdatering på ditt favorit sociala nätverk, köper något från Amazon eller skickar ett e-postmeddelande har du antagligen använt ett HTML-formulär.

Vad du antagligen inte visste är att sättet vi skapar formulär har radikalt förändrats i HTML5. Det är också betydligt bättre. I det här kapitlet kommer vi att titta på några av de coola saker du nu kan göra, bara med vanlig gammal markering.

Så vad är så coolt med det nya sättet vi kan skriva formulär i HTML5? För det första kan du se till att vissa fält måste fyllas i för att skicka in det, bara genom att ändra markeringen av formuläret själv. Dessutom behöver du inte längre skriva bergen av JavaScript eller PHP för att göra detta. Det trivialt enkelt.

För det andra kan du se till att dina användare bara kan skicka in vissa typer av information till ditt formulär. Så låt oss anta att du har en webbplats för din e-postlista och att du bara vill att folk ska kunna skicka faktiska e-postadresser? Du kan göra det bara genom att använda HTML5. Det är verkligen otroligt kraftfullt.

För det tredje kan du få dina formulär att se bättre ut genom att ge vissa fält en platshållare. Detta kommer att göra dem betydligt mer intuitiva, eftersom du kan visa dina användare ett exempel på vad du förväntar dig för ett formulär.

3.1 Förbättra ett formulär

Så låt oss titta på ett formulär och se hur vi kan göra det bättre.

Denna form är ganska grundläggande. Den tar in ett namn, ett e-postmeddelande och en favoritfärg och låter sedan användaren skicka in det. Den innehåller ingen validering av vilken information som placeras i den, och det finns inget som hindrar användare från att skicka in detta formulär med några tomma fält. Låt oss ändra allt detta.

Så det första vi vill göra är att se till att e-postfältet bara tar ett e-postmeddelande. Det brukade vara en ganska svår uppgift, eftersom du måste skapa alla slags arcane Regex-kod. Tja, inte längre. Du måste bara ändra typen av inmatning från 'text' till 'e-post'. När du försöker skicka in det formuläret med gibberish klagar det och insisterar på att du skickar ett e-postmeddelande.

3.2 Ingångstyper och mönster

Det finns andra ingångstyper som du kan kräva. Dessa inkluderar telefonnummer, webbadresser, sökformulär och till och med färgväljare! Eftersom HTML5 ständigt utvecklas är det anledning att snart vi kommer att kunna specificera fler ingångstyper inom en snar framtid.

För saker som t.ex. telefonnummer som varierar beroende på plats, kan du också ange mönster för ingångar. Dessa skapas med hjälp av något som kallas 'Regular Expressions' och är ganska komplicerade, men oerhört kraftfulla.

Vi kommer också att vilja ge ett exempel på ett e-postmeddelande i vårt fält, så användaren har ingen tvetydighet om vad han eller hon måste skicka in. Det är verkligen lätt att göra. Skapa bara ett nytt attribut för "platshållare" med en exempel e-postadress.

Vi kommer att se till att vårt "Favoritfärg" -fält krävs. Skriv den "obligatoriska" i den sista vinkelfästet (>) i e-postinmatningstaggen. Det är allt. När du försöker skicka in ditt formulär utan ett värde kommer det att ge ett felmeddelande.

Det riktigt otroliga med dessa felmeddelanden är att användaren inte behöver skriva dem eller skriva någon kod för att skapa dem. Du ändrar bara ett fält för att göra det krävs, och det fungerar bara. Med det sagt är det möjligt att anpassa dem om du vill.

Det var en otroligt kort introduktion till kraften hos formulär i HTML5. Om du vill läsa mer rekommenderar jag att du besöker dessa länkar.

Vidare läsning:

• CSS-tricks - Låt oss skriva semantisk markering
• HTML5 Doctor - Låt oss prata om semantik

3.3 Testa dig själv

Det är din födelsedag nästa vecka, och du vill skapa ett registreringsformulär så att du vet hur mycket tårta du behöver skapa. Öppna din textredigerare och skapa ett formulär med följande fält.

• namn
• E-postadress
• Telefonnummer
• allergier

Se till att fälten för namn, e-post och telefonnummer är obligatoriska och att fälten E-post och telefonnummer är inställda på inmatningstyperna e-post och tel. Skapa en platshållare för allergifältet med värdet "pollen, ägg, quiche".

Leka med formen. Försök att skicka in obligatoriska fält som tomma och försök infoga icke-numeriska tecken i fältet för telefonnummer. Lägg till något som inte är en e-postadress i e-postfältet. Vad händer?

4. Media

Det brukade vara en tid då det enda sättet att infoga lite video eller ljud på en webbsida var att använda något som Flash, Shockwave eller SilverLight.

Det här var inte idealiskt. För det första fungerade ingen av dessa ramar så bra på mobila enheter. De var bara inte utrustade för den moderna världen av smartphones och surfplattor.

Dessutom var de egna format. Som ett resultat kunde användare av Linux och OS X få en ganska andraklassig upplevelse eller till och med hindras från att konsumera medietjänster, eftersom det inte var tillgängligt för deras plattform.

Slutligen hade de en benägenhet att vara långsam. Om du befann dig på en underpowered eller äldre dator, skulle du inte ha en bra upplevelse att titta på video med dessa ramverk. Flash var särskilt ökänt för detta.

4.1 Hur HTML5 gör video och ljud fantastiskt

HTML5 ändrade detta genom att låta webbutvecklare inkludera video och ljud på sina webbsidor med bara några koder. Det fungerar en behandling på mobila enheter och fungerar på alla moderna webbläsare.

Som ett resultat drar stora företag som YouTube, Vimeo och Netflix fördel av HTML5-revolutionen. Varför går du inte med dem?

4.2 Allt om kodek

I det här kapitlet kommer du att lära dig att använda kraften i HTML5 för att inkludera ljud och video på dina webbsidor.

För det första måste jag börja med en varning. Även om du kan använda HTML5-video i alla moderna webbläsare fungerar det inte på samma sätt i varje webbläsare. De codecs som används av varje webbläsare varierar. I Internet Explorer är du begränsad till att använda MP4-video. Chrome är lite generös och låter dig använda WebM, MP4 och Ogg Theora-video. Opera är lite mer restriktivt och låter dig bara använda Theora och WebM-video.

Som ett resultat måste du vara lite smart när du sätter in video på din webbsida. Så låt oss se hur det fungerar.

4.3 Börja med video

Till att börja med måste du skapa lite öppning och stängning

När du väntar på att din video laddas kan personen som besöker din webbplats se en bild som hänför sig till videon. För att göra det, ge bara dina videotaggar ett attribut för 'affisch' med ett värde på den bild som du vill länka till. Det borde se ut så här.

Nästa sak vi vill göra är att skapa en fallback. Vad betyder det här? Så antar att du använder en av de äldre, mindre fantastiska webbläsarna där ute. Många av dessa äldre webbläsare stöder inte HTML5-video och kan därför inte spela HTML5-video. Du kommer att vilja lämna dem ett meddelande som informerar dem om att de kommer att vilja uppgradera sin webbläsare och att tills de gör det kommer de inte att kunna se din video.

För att göra det skriver du bara ditt meddelande inuti dina videotaggar. Inget annat krävs. När du har gjort det kommer du att ha kvar någon kod som ser ut så här.

Nu ska vi lägga till lite video. Jag kommer att testa detta på Google Chrome, så jag kommer att länka till en MP4-film. För att göra det skapar jag en källtagg och ger den ett attribut för src som har ett värde på den video jag vill inkludera.

Min sida är nu redo att öppnas i min webbläsare. Jag har länktat till en film som är riktigt, riktigt stor och som ett resultat, när man öppnar kan man bara se affischen.

4.4 Lägga till ljud

Ljud kan sättas in på din webbsida på ett sätt som mycket påminner om hur vi satte in video på vår sida.

För det första skapar man några ljudtaggar. Dessa ljudtaggar innehåller ett attribut för "kontroller". Detta ger användaren som besöker sidan möjlighet att pausa, spela bakspolning och spola fram ljudet som spelas upp snabbt.

Sedan inkluderar du en källtagg till MP3-filen du vill länka till. Du behöver inte oroa dig så mycket när det gäller codec-kompatibilitet. De senaste webbläsarna har möjlighet att spela MP3-ljud, även om det är bra att även inkludera en '.ogg' och en '.wav' -fil - för fall.

Slutligen kan du skapa en fallback för äldre webbläsare. Detta görs på samma sätt som du skapade fallbacken för din video.

Slutresultatet ser lite ut så här.

När du öppnar det i din webbläsare ska det se ut så här.

4.5 Testa dig själv

• Vad är syftet med att ha en affisch i dina videotaggar?
• Vilka codecs kan du inte använda i Internet Explorer?
• Om jag ville ha möjlighet att pausa lite ljud, vilket attribut skulle du lägga till din "ljud" -tagg?

Vidare läsning:

• HTML5 Rocks Video

5. CSS3 Transformationer Och Animationer

CSS användes traditionellt för att hantera layout och design av en webbsida 5 Babysteg för att lära sig CSS och bli en kick-ass CSS trollkarlCSS är de enskilt viktigaste förändringswebbsidor som har sett under det senaste decenniet, och det banade vägen för separationen av stil och innehåll. På det moderna sättet definierar XHTML den semantiska strukturen ... Läs mer . Detta är fortfarande sant, men i sin senaste iteration har den fått förmågan att hantera animationer och transformationer av element och bilder.

Människor har gjort några fantastiska saker med CSS3, från att skapa en digital klocka till att skriva ett fullständigt Pong-spel. Någon använde det till och med för att skapa de inledande krediterna till Mad Men. Det är en verkligt kraftfull teknik och när den behärskas kan den användas för att lägga till en fantastisk nivå av funktionalitet på din webbsida.

I det här kapitlet ska jag ge dig en kortfattad beskrivning introduktion till CSS3 Topp 5 webbplatser för att lära sig CSS online Läs mer , och visa dig hur du lägger till några fantastiska effekter på din sida.

Navigera först till codepen.io och skapa en ny penna. Vi kommer att använda detta som vårt arbetsområde under hela detta kapitel.

Vi kommer att börja enkelt och skapa en enkel bildomvandling som roterar en bild 3 grader när du håller muspekaren. Skapa först en div-tagg och ge den ett ID. I exemplet nedan har jag gett det ett ID för 'muo'.

5.1 CSS-muspekareeffekter

I den avdelningen, inkludera en bild som du väljer. Jag har inkluderat en kopia av logotypen för MakeUseOf.

Då måste du skriva några stilsidaregler. I exemplet nedan har jag skapat en övre och vänstra marginal för att ge bilden lite utrymme. Jag har också inkluderat en nyfiken stilmallregel som börjar med '#muo: hover'. Vad är det där?

När du knyter ': sväva' till en stilarkregel, vare sig det är till ett element, ett ID eller en klass, berättar du webbläsaren effektivt att använda den här stylingen när musen styr elementet. Ganska cool, eller hur?

Inom regeln #muo: hover har vi en linje som säger "-webkit-transform: rotate (3deg)". Som jag är säker på att du har gissat berättar det för webbläsaren att rotera det delade elementet med tre grader.

Det är dock värt att notera att den här taggen bara fungerar i Chrome och Safari. Om du vill att din kod ska fungera i Firefox eller Internet Explorer 9 och senare kommer du att ändra din CSS-fil så att den inkluderar följande rader.

När du håller muspekaren över bilden ser det ut så här:

5.2 Använda CSS3 för att ändra storlek på bilder

Så varför stanna där? Visste du att du också kan använda 'transform' -metoden för att förstora eller krympa en bild. Låt oss ändra vår CSS-fil så att den inkluderar följande rader.

Som ni ser har vi nu inkluderat en ny transformregel, men den här gången säger vi att den ska göra något som heter 'skala'. Detta är ett riktigt vackert sätt att öka storleken på en bild. Det tar två parametrar (de siffrorna du ser mellan dessa parenteser), och de representerar mängden som du ökar höjden och bredden på elementet.

Som du kan se från koden kommer jag att öka storleken på MakeUseOf div-logotypen med 50%. Du kan testa detta genom att sväva över det. Du kommer att se att nu "MakeUseOf" -logotypen nu är betydligt mer utsträckt.

Detta var en mycket mild introduktion till CSS3-transformationer. Trots att CSS3 verkligen är väldigt nytt kan du nu se att du kan göra många mycket intressanta manipulationer med det.

5.3 Testa dig själv

• Hur tillämpar vi en styling på ett element när du svävar?
• Hur roterar du en bild med CSS3?
• Hur skalar du en bild med CSS3?
• Vad händer om du klarar din transformmetod 'translate (50px, 50px)'?

Vidare läsning:

HTML5 Rocks - presentation

6. Bara nog Javascript

Om du vill använda skript i din webbläsare måste du använda det Javascript Vad är JavaScript och hur fungerar det? [Teknisk förklaring] Läs mer . Det finns inga sätt på det, tyvärr. Det är en språk som har många fans 5 Omfattande alternativ för JavaScript-kodbibliotek för utvecklare Läs mer och många avskräckare också. När språk går har det många vårtor. Det finns en anledning till att den mest anmärkningsvärda boken om språket kallas 'Javascript: The Good Parts'.

Det kommer att vara omöjligt att lära dig hur du använder Javascript i ett enda kapitel. Det är inte målet här. Målet är att lära dig tillräckligt med Javascript så att du kan förstå nästa kapitel, som handlar om att använda en teknik som heter Canvas för att göra teckningar och animationer.

6.1 Åtkomst till konsolen

För att göra detta kommer vi att använda Javascript-konsolen som är inbyggd i varje kopia av Google Chrome. För att komma åt detta kan du högerklicka på vilken webbsida som helst och sedan trycka på 'Inspektera element'. Klicka sedan på 'Konsol'. Du borde se detta.

Det är traditionellt att det första programmet som en spirande utvecklare någonsin skriver är ”Hello World” -programmet. Detta är ett enkelt program som skriver ut frasen "Hello World", och inte mycket annat. Skriv "console.log (" Hej världen! ") I din konsol;

6.2 Ditt första program

Så, vad gjorde vi exakt? Till att börja med kallade vi något som heter 'konsol.log'. Det här är en bit kod som är inbyggd i datorn som helt enkelt skriver ut vad du berättar för det. Vi fästade sedan några parenteser till den och inkluderade i dubbla citat "Hello World". Detta kallas "vidarebefordra argument", och den typ av argument vi gick kallas en sträng. När du vill göra något med bokstäver och specialtecken måste du helt enkelt använda enstaka citat. Men om du vill göra någonting med siffror behöver du vanligtvis inte använda citat, som visas nedan.

6.3 Variabler i JavaScript

Du kan också skicka variabler till 'konsol.log' också. Variabler låter komplicerat, men allt de egentligen är är ett utrymme att sätta bitar av information. Dessa är ofta siffror eller bokstäver. För att göra det, förklarar du en variabel med nyckelordet 'var', ger det ett namn och sedan med ett lika tecken ger du det ett värde. Så jag kommer att skapa en variabel som heter "hej" och sedan ge den ett värde "Hello World!". Jag kommer sedan att skicka det till console.log.

Lägg märke till hur jag inte skickade "hej" till console.log med citat. Det beror på att jag ville skriva ut till konsolen innehållet i "hej" och inte "hej" själv.

6.4 Vad funktioner gör

Det kan vara lite tråkigt att skriva om samma bit av kod om och om igen, så det är av den anledningen vi skriver funktioner. Funktioner är lättare än du tror. Allt de är är kodbitar som vi kan återanvända utan att skriva om samma kod igen. Nedan har vi skapat en funktion som heter 'sup' och överför den till ett argument med parenteser som sedan loggas till skärmen. Vi kallar 'sup' genom att skicka till konsolen 'sup (' Hej värld! ');'.

6.5 Upprepa en åtgärd med en 'för' slinga

Anta att du ville göra samma åtgärd ett visst antal gånger. Det är av den anledningen varför vi skulle använda en 'för' slinga. De ser i första hand läskiga ut, men är så enkla att göra när du förstod dem. Du börjar med att skriva "för ()".

I dessa parenteser vill vi skapa en variabel som räknar hur många gånger vi har utfört en åtgärd. Så vi får något som ser ut så "för (var i = 0;)".

Vi vill då kontrollera att jag inte har uppfyllt ett villkor. Så i det här fallet vill vi se att det är mindre än tio. Så efter semikolonet skriver vi 'i <10'. Vår slinga ser nu ut så här: ‘för (var i = 0; i <10;).

Om jag är mindre än 10, vill vi lägga till den med en och sedan göra något. Så vi sätter "i = i + 1". Vår slinga är nästan färdig: ‘för (var i = 0; i <10; i = i + 1) '. Lägg märke till hur den sista delen inte har en semikolon.

Efter det kommer vi att vilja göra en åtgärd. Så efter de sista parenteserna skriver vi några lockiga hängslen och mellan dem kommer vi att konsolera.logg värdet på i. Detta skapar en räknare som räknar upp till nio.

De två sista programmeringskonstruktionerna som vi kommer att titta på är ”if” uttalanden och ”medan” slingor.

6.6 Om uttalanden

Ett "if" -förklaring utför en åtgärd om vissa kriterier är uppfyllda. De liknar 'för' öglor i konstruktionen och fungerar enligt följande. Anta att du har en variabel som heter 'cheeseburgers' och du vill se om den har ett värde på 'smakrik'. Om det gör det, vill du logga 'yum, cheeseburgers' på skärmen. För att göra det skulle du skriva något liknande.

Lägg märke till hur jag skrev "if (cheeseburgers ==" smaklig ")". Du använder dubbla eller tredubbla lika för att kontrollera jämlikhet och en enda lika för att tilldela ett värde.

6.7 medan slingor

Slutligen utför en "medan"-loop en åtgärd medan kriterierna är uppfyllda. Så föreställ dig att du vill logga 'yum, cheeseburgers' medan cheeseburgers lika smakrik. För att göra det skulle du skriva följande.

Det är värt att notera att detta skulle gå in i en oändlig slinga, och du bör undvika att göra en åtgärd på ett värde som troligen inte kommer att förändras. Detta kan göra att din webbläsare låses fast eller att din kod inte fungerar.

Som jag nämnde tidigare var detta en mycket kort introduktion till programmeringskonstruktioner i Javascript. Du uppmuntras att läsa mer om detta fascinerande, om än enorma ämne.

6.8 Testa dig själv

• Jag vill räkna ner från 30. Skriv en "för" -slinga som skulle göra det.
• Jag vill skapa en variabel som heter 'makeuseof' och ge den ett värde av 'awesome'. Hur görs det?
• Jag vill skapa en funktion som skriver ut 'MakeUseOf Is Awesome' när den kallas. Skriv den funktionen.

Vidare läsning:

• “Javascript: The Good Parts” av Douglas Crockford
• MDN Javascript Guide

7. Kreativ duk

Canvas är en cool teknik som låter dig rita bilder och skapa animationer utan att behöva använda Flash eller Silverlight. Människor har använt den för att skapa bisarra och underbara saker, inklusive en hårtorksimulator och olika videospel. Det är en underbar och ofattbar stor teknik, i den här tutorialen ska jag ge dig en kort introduktion till den.

Det är värt att notera att Canvas bara fungerar på moderna webbläsare. Om du använder en gammal version av IE, Chrome eller Firefox kanske du inte kan följa det här kapitlet. Om så är fallet bör du överväga att ladda ner den senaste versionen av Google Chrome, som var webbläsaren där jag skapade den här tutorialen.

7.1 Komma igång med duk

Först av allt kommer du att behöva öppna din webbläsare och navigera till codepen.io. Skapa en ny penna.

Nu måste vi förklara ett kanfaselement. Skapa två öppnings- och stängningsduktaggar. I dem ska du skicka det tre attribut. Dessa är bredden och höjden på Canvas-elementet, tillsammans med det ID du ger det. Som tidigare när du satte in en video, bör du ta med ett fallback-meddelande.

Nu kommer vi att vilja skriva någon Javascript-kod som drar något till skärmen. Vi kommer att börja grundläggande och skapa en enkel röd fyrkant.

Vi kommer att skapa en variabel (jag kallade den "demo") och sedan välja dukelementet och tilldela den variabeln. För att göra det använder du document.getElementByID () och anger ID för det element du vill välja.

Den andra raden i vårt skript skapar en annan variabel som kallas 'context' och kallar sedan 'demo.getContext (' 2d ')' på den. Detta berättade för webbläsaren att vi kommer att arbeta med en 2d-bild och sedan passerade de nödvändiga funktionerna vi behöver för att rita till skärmen.

Den tredje och fjärde raden är de som faktiskt gör ritningen på skärmen. Den tredje raden fyller en rektangel med färgen röd, medan den fjärde raden kallar fillRect, som placerar den och definierar dess längd och bredd.

Det är dock inte imponerande. Låt oss göra något mer avancerat och använd magin med Javascript och Canvas för att skapa MakeUseOf till en helt ny logotyp.

7.2 Former och text

Låt oss ta bort vår fjärde rad och ersätta den med en som placerar vår rektangel i det övre vänstra hörnet och sträcker den ut längs vår duk.

De två första argumenten definierar var vi vill placera formens x- och y-axel. Låt oss ställa in dessa två till '0' för tillfället. Det tredje argumentet hänvisar till formens bredd. Låt oss ställa in det till '200' och lämna sedan det fjärde argumentet till '50'. Du borde nu ha något som ser lite ut så här.

Det här är en bra start, men det nämns inte alls MakeUseOf. Så vi kommer att lägga till lite text. Låt oss skapa en variabel som innehåller 'makeuseof' och vi kallar den variabeln 'MakeUseOf'.

Vi kommer då att vilja skapa en annan kontextvariabel. Kalla den här 'context2' och se till att den är 2d. Det är detta vi kommer att använda för att skriva vår text i.

Vi kommer att vilja att vår text ska färgas blå och överlägga vår röda fyrkant. Så, precis som tidigare, kommer vi att vilja ge det en fyllning av "blå". Nu ska vi välja egenskaperna hos vår text. Vi vill att den ska vara 20px stor, djärv formaterad och använda ett Arial-teckensnitt. Vi kallar teckensnitt på context2 och tilldelar det värdet "fet 20px arial".

Eftersom vi vill att den här texten ska lägga över vår tidigare röda ruta måste vi kalla 'textBaseLine' på context2 och ge den ett värde på toppen. När detta har slutförts, kallar vi 'fillText' på context2 och skickar den variabeln som innehåller vår text och x- och y-koordinaterna där vi tänker placera vår text. Slutresultatet av vår kod är något liknande.

Bilden som produceras av koden ser ut så här.

7.3 Ett ord på duk

Även om detta var en otroligt grundläggande introduktion till Canvas, bör du förstå att det också är en oerhört stor teknik och en otroligt kraftfull att starta. Den här guiden fungerade helt enkelt som en introduktion till grafik med denna nya teknik.

7.4 Testa dig själv

• Lägg till följande slogan till bilden du skapade: "Den bästa tekniska sajten någonsin!"
• Skapa en "för" -slinga som kör för tio iterationer. Se om du kan flytta din ritning ner på duken, en pixel åt gången.
• Packa in din ritning i en funktion. Vad händer om du inte kallar det?

Vidare läsning:

• HTML5 Rocks - Integrera duk i dina webbappar.
• Treehouse - Hur man tecknar med duk

8. Där nästa?

Tack för att du läste min otroligt korta guide till den nya tekniken som finns i HTML5. Det är obestridligt att HTML5 är framtidens teknik. Det adopteras av de flesta tekniker, eftersom det är lätt att skriva och kraftfullt överallt. Människor gör otroliga saker med det hela tiden, och jag tvivlar inte på att du i framtiden kommer att vara en av dessa människor. Jag är hedrad att ha varit en del av din resa till den vilda och underbara världen av HTML5.

Jag ber dig att fortsätta lära dig. Fortsätt kodningen. Fortsätt att planera och förbättra, och på kort tid kommer du att använda den teknik som har introducerats i den här korta guiden för att skapa underbara produkter.