Kom igång med HTML5

Kom igång med HTML5
Den här guiden finns att ladda ner som en gratis PDF. Ladda ner den här filen nu . Kopiera gärna och dela detta med dina vänner och familj.

Innehållsförteckning

§1. Introduktion





§2 – Semantisk markering



§3 – Blanketter





§4 - Medium

§5 – CSS3 -transformationer och animationer



§6 – Bara nog med Javascript

§7 – Creative Canvas



§8 – Var nästa?

1. Introduktion

Du har hört talas om det: HTML5. Alla använder det. Det beskrevs som Internetets räddare, så att människor kan skapa rika, engagerande webbsidor utan att använda Flash och Shockwave.



Men vad är det egentligen?

Det är inte en lätt fråga att svara på. I denna HTML5 -handledning försöker vi ge några svar. HTML5 används för att beskriva en riktigt varierad grupp saker. Det är en standard för att skriva webbsidor. Det är en samling API: er. Det är ett nytt sätt att lägga till interaktivitet på webbsidor.

HTML5 är allt det och mer. Så vad handlar den här boken om?

I denna HTML5 -handledning kommer jag att anta att du någon gång har berört HTML och CSS. Kanske har du skapat ditt eget Wordpress -tema eller redigerat en MySpace -layout tidigare. Kanske har du läst MakeUseOfs egen XHTML -guide. Poängen är att jag antar att du känner dig på en webbsida och att det vi diskuterar i den här guiden inte kommer att vara alltför främmande för dig.

Syftet med den här guiden är inte att lära dig hela HTML5. Det skulle vara helt utanför ramen för denna bok. Syftet är att ge en skonsam introduktion till dessa fantastiska nya webbtekniker och visa dig några häftiga sätt att införliva dem på dina webbplatser.

Varför vill du lära dig HTML5?

Det är en rättvis fråga. I en värld av smartphones och appar, är det verkligen viktigt att lära sig att programmera webbsidor?

Tja, tro det eller ej, det är verkligen vanligt att skriva smartphone -applikationer med HTML5 -teknik. Fram till nyligen skrevs Facebook -appen för Android med HTML5, CSS och Javascript.

Blackberry är ett annat stort företag som är oerhört förtjust i HTML5. Detta är uppenbart i den senaste iterationen av deras mobila operativsystem, Blackberry OS 10, där de aktivt uppmuntrar utvecklare att utveckla applikationer för sina telefoner med hjälp av webbteknik.

De nya Firefox OS -smartphones körs också helt på HTML5 -appar. En fungerande kunskap om HTML5 är väsentlig i dagens smarttelefonklimat.

Dessutom är att lära sig HTML5 bra för din karriär. Tro mig inte? Enligt Indeed.com , den genomsnittliga årslönen för en HTML5-utvecklare är iögonfallande 89 000 dollar. Med fler och fler företag som byter sina webbplatser för att använda HTML5 -teknik, är utvecklare som känner HTML5 -stacken eftertraktade - nu mer än någonsin.

1.1 Förkunskaper

Denna HTML5 -handledning förutsätter ett par saker. För det första förutsätter det att du vet hur webben fungerar och att du vet hur du skapar en grundläggande webbsida. Du bör kunna koka ihop några HTML -element tillsammans och kunna presentera lite information i en webbläsare. Att se och

taggar är inte för skrämmande, och du är inte rädd för att smutsiga händerna i någon källkod.

För det andra förutsätter den här guiden att du vet vad CSS är och hur det fungerar. Vi förväntar oss inte att du är designgenier, och du förväntas inte heller känna till hela CSS -specifikationen från din hand. Du bör dock kunna tillämpa styling på ett element på en webbsida, kunna länka till en CSS -fil och känna skillnaden mellan ett ID och en klass och hur du applicerar styling på var och en av dem.

Om du kliar dig i 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 som tar dig riktigt snabbt.

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

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 hindra dig från att följa den här guiden.

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 för att lära dig. Åh, och en textredigerare.

1.2 Textredigerare för webbutveckling

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

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 låter dig skapa filer som inte har någon extra formatering och kan sparas med valfri förlängning.

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

På en Mac är situationen något annorlunda. OS X råkar komma med fyra olika textredigerare. Dessa kallas Vim, Emacs, Pico och Nano. Men till skillnad från Notepad, råkar de alla arbeta i terminalen.

Detta är lite skrämmande för människor som är nya inom webbutveckling och inte bör användas av personer som är nya inom mjukvaruutveckling. Vi kommer inte att använda dem i den här guiden. Men när du blir lite mer säker med programvara och webbutveckling är det definitivt värt att titta på Vim och Emacs. De är båda kraftfulla textredigerare, och när de behärskar kan du spara mycket tid.

På Linux varierar standardtextredigeraren mellan distributioner. På Ubuntu är det troligen Gedit, som är en ganska trevlig textredigerare som inte skiljer sig så mycket från Anteckningar.

Men i den här kursen ska vi skriva vår kod med tre olika verktyg.

Den första är Sublime Text 2. Jag kan ärligt talat inte rekommendera detta tillräckligt högt. Det kommer med alla de saker som gör livet enklare för en nybörjare. För det första kommer det att göra din kod lättare att läsa genom att färglägga vissa delar. För det andra kan du enkelt växla mellan filer och hantera hela filprojekt. Detta är idealiskt för att växla mellan filer och redigera flera kodbitar direkt.

Den tredje är Javascript -konsolen 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. Denna anmärkningsvärda webbplats låter dig koda HTML, CSS och Javascript i webbläsaren och är gratis att använda. Det låter dig också se dina ändringar direkt.

2. Semantisk markering

I det här kapitlet lär du dig mer om semantisk markering och hur du organiserar din kod utifrån dess innehåll.

Fram till nyligen var HTML -koden generellt organiserad med taggar. Dessa tillät dig att skapa en grupp element och sedan tillämpa styling på dessa element.

Detta fungerade, men det fanns utrymme för förbättringar. Problemet med taggar var att det inte var semantiskt. Div betyder faktiskt ingenting, egentligen.

Semantisk markup ä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 ett navigeringsfält, en titel och en lista. Det här är inte så olikt de flesta webbplatser som du troligen kommer att gå på när du tänker efter.

hur man har en animerad tapet

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. Överst på sidan ser du en rubrik som innehåller MakeUseOf -logotypen och några andra länkar.

När du tänker efter 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 header.

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 låter dig gruppera taggar baserat på deras innehåll och tillämpa stylingar på dessa grupper.

Så, kom ihåg den koden vi hade innan? Låt oss titta på det med någon semantisk markering tillagd.

Som du kan se är koden mycket lättare att läsa. Du vet vilka delar som är och det finns ingen oklarhet. Detta är viktigt, eftersom det gör det lättare att skriva bra, ren kod. Skulle du någonsin bestämma dig för att bli en professionell webbdesigner blir det här avgörande - du vet aldrig vem som kommer att läsa det arbete du producerar.

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

2.1 Avsnitt

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

2.2 Artikel

Artikeltaggen används för hur det låter; Innehåller innehåll som ett blogginlägg eller en nyhetsartikel. Det här innehållet bör kunna lösgöras från resten av bloggen och ändå vara konsekvent.

2.3 Bortsett från

Denna tagg är reserverad för innehåll som är relaterat till, men inte en integrerad del av webbsidan. Det här kan vara en massa fakta som relaterar till en nyhetsartikel eller biografi om en användare på en blogg.

2.4 Rubrik

Många webbsidor har en stapel högst upp på sidan som innehåller en logotyp, lite information om webbplatsen och kanske några länkar. I semantisk markering skulle du använda en rubriktagg för att innehålla allt detta.

2.5 Nav

Detta element är reserverat för navigationsdelen av 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.

Denna tagg ä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 gör en webbsida och jag vill använda en semantisk tagg för att innehålla en biografi om mig. Vilken använder jag?

3. Blanketter

Om du någonsin gjort lite webbdesign vet du förmodligen hur du skapar ett enkelt formulär 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 du gör något med det, så lägg det i en databas.

Formulär är oerhört viktiga. De är grunden för det mesta 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 förmodligen använt ett HTML -formulär.

Det du förmodligen 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 ska vi titta på några av de coola sakerna du kan göra nu, bara med vanlig gammal markering.

Så vad är det som är så coolt med det nya sättet att 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, bara genom att ändra märkningen av själva formuläret. Dessutom behöver du inte längre skriva berg med JavaScript eller PHP för att göra detta. Det är trivialt enkelt.

För det andra kan du se till att dina användare bara kan skicka vissa typer av information till ditt formulär. Så låt oss anta att du har en webbplats för din e -postlista och 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 tillåter sedan användaren att 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 detta formulär med några tomma fält. Låt oss ändra allt det.

Så det första vi vill göra är att se till att e -postfältet bara tar ett e -postmeddelande. Det här var faktiskt en ganska svår uppgift, eftersom du skulle behöva skapa alla slags arcane Regex -kod. Tja, inte längre. Du behöver bara ändra typ av inmatning från 'text' till 'e -post'. När du försöker skicka det formuläret med skräp kommer det att klaga och insistera på att du skickar ett e -postmeddelande.

3.2 Inmatningstyper 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ärgplockare! Eftersom HTML5 ständigt utvecklas är det givet att vi snart kan ange fler inmatningstyper inom en snar framtid.

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

Vi kommer också att vilja ge ett exempel på ett e -postmeddelande i vårt område, så att användaren inte har någon oklarhet om vad han eller hon måste skicka. Det är verkligen lätt att göra. Skapa bara ett nytt attribut för 'platshållare' med ett exempel e -postadress.

Vi kommer att se till att fältet 'Favoritfärg' krävs. I den sista vinkelparentesen (>) i e -postinmatningstaggen skriver du bara 'obligatoriskt'. Det är allt. Nu, när du försöker skicka in ditt formulär utan ett värde, kommer det att ge ett felmeddelande.

Det verkligen 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 obligatoriskt, 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 i formulär i HTML5. Om du vill läsa mer rekommenderar jag att du besöker dessa länkar.

Vidare läsning:

  • CSS -trick - Låt oss skriva semantisk markering
  • HTML5 Doctor - Let's Talk About Semantics

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 namn, e -post och telefonnummer är obligatoriska och att fälten E -post och telefonnummer är inställda med inmatningstyperna 'e -post' och 'tel'. Skapa en platshållare för allergifältet med värdet 'pollen, ägg, quiche'.

Lek med formuläret. Försök att skicka in obligatoriska fält som tomma och försök infoga icke-numeriska tecken i telefonnummerfältet. I e -postfältet, infoga något som inte är en e -postadress. Vad händer?

4. Genomsnitt

Det var en tid då det enda sättet att sätta in lite video eller ljud på en webbsida var genom 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.

hur vet du om du är blockerad på snapchat

Dessutom var de proprietära format. Som ett resultat kan användare av Linux och OS X få en ganska andra klassens upplevelse eller till och med förhindras att konsumera medietjänster, eftersom det inte var tillgängligt för deras plattform.

Slutligen hade de en benägenhet att vara långsamma. Om du använde en underdriven eller äldre dator skulle du inte ha någon bra upplevelse av att titta på video med dessa ramar. Flash var särskilt ökänt för detta.

4.1 Hur HTML5 gör video och ljud fantastiskt

HTML5 ändrade detta genom att tillåta webbutvecklare att inkludera video och ljud på sina webbsidor med bara några rader kod. Det fungerar bra på mobila enheter och fungerar på alla moderna webbläsare.

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

4.2 Allt om codecs

I det här kapitlet kommer du att lära dig hur du använder 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 samma sak 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 mer generöst och låter dig använda WebM, MP4 och Ogg Theora -video. Opera är lite mer restriktiv och låter dig bara använda Theora och WebM -video.

Som ett resultat måste du vara lite smart med hur 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 några öppnings- och stängningstaggar. Det är här du kommer att länka till dina videofiler. Men först kommer du att vilja sätta upp en affisch. Vad betyder det?

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

Nästa sak vi kommer att vilja göra är att skapa ett 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 ett meddelande till dem som informerar dem om att de kommer att vilja uppgradera sin webbläsare och att de inte kommer att kunna titta på din video tills de gör det.

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 få en kod som ser ut så här.

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

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

4.4 Lägga till ljud

Ljud kan sättas in på din webbsida på ett sätt som påminner mycket om hur vi lade 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 tillbaka och spola fram ljudet som spelas upp.

Sedan inkluderar du en källtagg till MP3 -filen du vill länka till. Du behöver egentligen 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 säkerhets skull.

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

Slutresultatet ser lite ut så här.

När du öppnar detta i din webbläsare ska det se ut ungefär 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 i din 'ljud' -tagg?

Vidare läsning:

5. CSS3 -transformationer och animationer

CSS användes traditionellt för att hantera layout och design av en webbsida. Detta är fortfarande sant, men i sin senaste iteration har det fått förmågan att hantera animationer och transformationer av element och bilder.

Människor har gjort fantastiska saker med CSS3, från att skapa en digital klocka till att skriva ett komplett Pong -spel. Någon använde den till och med för att återskapa introduktionskrediterna till Mad Men. Det är en verkligt kraftfull teknik och när den behärskar kan den användas för att lägga till en fantastisk funktionalitet på din webbsida.

I det här kapitlet ska jag ge dig en kort introduktion till CSS3 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år arbetsyta under det här kapitlet.

Vi ska börja enkelt och skapa en enkel bildomvandling som roterar en bild 3 grader när den svävar. 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 Hover -effekter

I den div, inkludera en bild av ditt val. Jag har inkluderat en kopia av logotypen för MakeUseOf.

Du måste då skriva några stilregler. I exemplet nedan har jag skapat en övre och vänster marginal för att ge bilden lite utrymme. Jag har också inkluderat en nyfiken stilregel som börjar med '#muo: sväva'. Vad är det där?

När du bifogar ': svävar' till en formatmallsregel, vare sig det gäller ett element, ett ID eller en klass, säger du effektivt till webbläsaren att tillämpa denna styling när musen styr elementet. Ganska coolt, eller hur?

Inne i '#muo: sväva' -regeln har vi en rad som säger '-webkit-transform: rotate (3deg)'. Som jag är säker på att du har gissat, säger detta till webbläsaren att rotera det div -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 vilja ändra din CSS -fil så att den innehåller följande rader.

När du håller muspekaren över bilden ser den 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 innehåller följande rader.

Som du kan se har vi nu inkluderat en ny transformeringsregel, men den här gången säger vi till den att göra något som kallas 'skala'. Detta är ett riktigt vackert sätt att öka storleken på en bild. Det krävs två parametrar (de siffror du ser mellan dessa parenteser), och de representerar mängden som du ökar elementets höjd och bredd.

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

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

5.3 Testa dig själv

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

Vidare läsning:

HTML5 Rocks - Presentation

6. Bara nog med Javascript

Om du vill använda skript i din webbläsare måste du använda Javascript. Det finns tyvärr inga två sätt om det. Det är ett språk som har många fans, och många motståndare också. Som 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 blir omöjligt att lära dig hur du använder Javascript i ett enda kapitel. Det är inte målet här. Syftet ä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 det här.

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

6.2 Ditt första program

Så vad gjorde vi exakt? För det första kallade vi något som kallas 'console.log'. Detta är en bit kod som är inbyggd i datorn som helt enkelt skriver ut vad du än säger till den. Vi fäst sedan några parenteser på den och inkluderade i dubbla citat 'Hello World'. Detta kallas 'passerar argument', och den typ av argument som vi skickade kallas en sträng. När du vill göra något med bokstäver och specialtecken måste du helt enkelt använda enkla citattecken. Men om du vill göra någonting med siffror behöver du vanligtvis inte använda citattecken, som visas nedan.

6.3 Variabler i JavaScript

Du kan också skicka variabler till 'console.log' också. Variabler låter komplicerade, men allt de egentligen är är ett utrymme för att lägga bitar av information. Dessa är ofta siffror eller bokstäver. För att göra det, deklarerar du en variabel med hjälp av 'var' -ordet, ger det ett namn och sedan med ett likhetstecken ger du det ett värde. Så jag ska skapa en variabel som heter 'hej' och sedan ge den ett värde av 'Hej världen!'. Jag ska sedan skicka det till console.log.

Notera hur jag inte skickade 'hej' till console.log med citat. Det är för att jag ville skriva ut innehållet i 'hej' till konsolen och inte 'hej' i sig.

6.4 Vilka funktioner gör

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

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

Antag 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 skrämmande ut först, men är så lätta att göra när du förstår dem. Du börjar med att skriva 'för ()'.

I dessa parenteser kommer vi att vilja 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å här 'för (var i = 0;)'.

Vi vill sedan kontrollera att jag inte har uppfyllt ett villkor. Så i det här fallet vill vi se att det är mindre än 10. Så efter semikolon skriver vi 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Om jag är mindre än 10 vill vi lägga till det en efter en och sedan göra något. Så vi sätter 'i = i + 1'. Vår slinga är nästan klar: 'för (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

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 ska vi konsolera. Logga värdet av i. Detta skapar en räknare som räknas upp till nio.

De två sista programmeringskonstruktionerna vi ska titta på är 'if' -uttalanden och 'while' -slingor.

6.6 If -uttalanden

En 'if' -sats utför en åtgärd om ett visst kriterium är uppfyllt. De liknar 'för' slingor i konstruktion och fungerar enligt följande. Anta att du har en variabel som heter 'cheeseburgers' och du vill se om den har värdet 'god'. Om det gör det, vill du logga 'yum, cheeseburgers' till skärmen. För att göra det skulle du skriva något liknande.

Lägg märke till hur jag skrev 'if (cheeseburgers ==' läckra ')'. Du använder dubbla eller tredubbla likvärden för att kontrollera jämlikhet och enstaka lika för att tilldela ett värde.

6.7 While Loops

Slutligen utför en 'while' -slinga en åtgärd medan ett kriterium är uppfyllt. Så tänk dig att du vill logga 'yum, cheeseburgers' medan cheeseburgare är lika goda. För att göra det skriver du följande.

Det är värt att notera att detta skulle komma in i en oändlig slinga, och du bör undvika att göra en åtgärd på ett värde som sannolikt inte kommer att förändras. Detta kan göra att din webbläsare låser sig 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' loop som skulle göra det.
  • Jag vill skapa en variabel som heter 'makeuseof' och ge den värdet 'awesome'. Hur gör man det?
  • Jag vill skapa en funktion som skriver ut 'MakeUseOf Is Awesome' när den kallas. Skriv den funktionen.

Vidare läsning:

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 det för att skapa bisarra och underbara saker, inklusive en hårtorkssimulator och olika videospel. Det är en underbar och ofattbart stor teknik, i den här självstudien kommer jag att 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 detta kapitel. 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 självstudien.

7.1 Komma igång med Canvas

Först och främst måste du öppna din webbläsare och navigera till codepen.io. Skapa en ny penna.

Nu måste vi deklarera ett dukelement. Skapa två öppna och stängande Canvas -taggar. I dem bör du skicka det tre attribut. Dessa är Canvas -elementets bredd och höjd, tillsammans med ID: t du ger det. Som tidigare när du satte in en video, bör du inkludera ett reservmeddelande.

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

Vi ska skapa en variabel (jag kallade den 'demo') och sedan välja canvaselementet och tilldela den variabeln. För att göra det använder du document.getElementByID () och skickar in ID för det element du vill välja.

Den andra raden i vårt manus skapar en annan variabel som kallas 'kontext' 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 passerade sedan de nödvändiga funktionerna vi skulle behöva för att dra till skärmen.

Den tredje och fjärde raden är de som faktiskt gör ritningen till 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 lite mer avancerat och använda magin i Javascript och Canvas för att skapa MakeUseOf 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 ut den under längden på vår duk.

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

Detta är en bra start, men det nämner inte MakeUseOf alls. Så vi kommer att lägga till lite text. Låt oss skapa en variabel som innehåller 'makeuseof', och vi kallar 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 som vi kommer att använda för att skriva vår text i.

Vi kommer att vilja att vår text ska vara blå och överlagra vår röda ruta. Så, precis som tidigare, kommer vi att vilja ge den en fyllstil av 'blå'. Nu ska vi välja egenskaper hos vår text. Vi vill att den ska vara 20 px stor, fet formaterad och använda ett Arial -teckensnitt. Vi kallar font på context2 och tilldelar värdet 'fet 20px arial'.

Eftersom vi vill att den här texten ska överlagra vår tidigare röda ruta, måste vi kalla 'textBaseLine' på context2 och ge den ett värde av topp. När det har slutförts kallar vi 'fillText' på context2 och skickar 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 ungefär så här.

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 otroligt stor teknik och en otroligt kraftfull att starta. Denna guide fungerade helt enkelt som en introduktion till att göra grafik med denna nya teknik.

lämnar den bärbara datorn ansluten hela tiden

7.4 Testa dig själv

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

Vidare läsning:

8. Var nästa?

Tack för att du läser min otroligt korta guide till den nya tekniken som finns i HTML5. Det är obestridligt att HTML5 är framtidens teknik. Det antas av de flesta teknologier, eftersom det är lätt att skriva och kraftfullt utan mått. 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 över att ha varit en del av din resa in i den vilda och underbara världen av HTML5.

Jag ber dig att fortsätta lära dig. Fortsätt koda. Fortsätt att nivå upp och förbättra, och på nolltid kommer du att använda den teknik som har introducerats i denna korta guide för att skapa underbara produkter.

Dela med sig Dela med sig Tweet E-post Är det värt att uppgradera till Windows 11?

Windows har gjorts om. Men är det tillräckligt för att övertyga dig om att byta från Windows 10 till Windows 11?

Läs Nästa Relaterade ämnen
  • Wordpress och webbutveckling
  • HTML5
  • Lång form
  • Longform Guide
Om författaren Matthew Hughes(386 artiklar publicerade)

Matthew Hughes är en mjukvaruutvecklare och författare från Liverpool, England. Han hittas sällan utan en kopp starkt svart kaffe i handen och älskar absolut sin Macbook Pro och sin kamera. Du kan läsa hans blogg på http://www.matthewhughes.co.uk och följa honom på twitter på @matthewhughes.

Mer från Matthew Hughes

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera