Kom i gang med HTML5

Kom i gang med HTML5
Denne guiden er tilgjengelig for nedlasting som en gratis PDF. Last ned denne filen nå . Kopier og del dette gjerne med venner og familie.

Innholdsfortegnelse

§1. Introduksjon





§2 - Semantisk markering



§3 – Skjemaer





§4 - Middels

§5 – CSS3 transformasjoner og animasjoner



§6 - Bare nok Javascript

§7 - Kreativt lerret



§8 - Hvor neste?

1. Introduksjon

Du har hørt om det: HTML5. Alle bruker det. Det blir kjent som internettets frelser, slik at folk kan lage rike, engasjerende nettsider uten å bruke Flash og Shockwave.



Men hva er det egentlig?

Vel, det er ikke et lett spørsmål å svare på. I denne HTML5 -opplæringen prøver vi å gi noen svar. HTML5 brukes til å beskrive en veldig mangfoldig gruppe ting. Det er en standard for å skrive nettsider. Det er en samling av APIer. Det er en ny måte å legge til interaktivitet på nettsider.

HTML5 er alt det og mer. Så hva handler denne boken om?

I denne HTML5 -opplæringen vil jeg anta at du på et tidspunkt har berørt HTML og CSS. Kanskje du har opprettet ditt eget Wordpress -tema, eller redigert et MySpace -oppsett tidligere. Kanskje du har lest MakeUseOfs egen XHTML -guide. Poenget er at jeg antar at du kjenner deg rundt en nettside og at det vi diskuterer i denne veiledningen ikke vil være for fremmed for deg.

Målet med denne guiden er ikke å lære deg hele HTML5. Det ville være helt utenfor omfanget av denne boken. Målet er å gi en skånsom introduksjon til disse fantastiske nye webteknologiene, og å vise deg noen kule måter å integrere dem på nettstedene dine.

Hvorfor vil du lære HTML5?

Det er et rettferdig spørsmål. I en verden av smarttelefoner og apper, er det virkelig viktig å lære å programmere nettsider?

Tro det eller ei, det er veldig vanlig å skrive smarttelefonprogrammer ved hjelp av HTML5 -teknologier. Inntil nylig ble Facebook -appen for Android skrevet ved hjelp av HTML5, CSS og Javascript.

Blackberry er et annet stort selskap som er ekstremt opptatt av HTML5. Dette er åpenbart i den siste iterasjonen av deres mobile operativsystem, Blackberry OS 10, der de aktivt oppfordrer utviklere til å utvikle applikasjoner for telefonene sine ved hjelp av webteknologi.

De nye Firefox OS -smarttelefonene kjører også helt på HTML5 -apper. En arbeidskunnskap om HTML5 er avgjørende i dagens smarttelefonklima.

I tillegg er det bra for din karriere å lære HTML5. Ikke tro meg? Ifølge Indeed.com , gjennomsnittlig årslønn for en HTML5-utvikler er iøynefallende 89 000 dollar. Med flere og flere selskaper som endrer nettstedene sine for å bruke HTML5 -teknologier, er utviklere som kjenner HTML5 -stakken ettertraktet - nå mer enn noen gang.

1.1 Forutsetninger

Denne HTML5 -opplæringen forutsetter et par ting. For det første forutsetter det at du vet hvordan nettet fungerer, og at du vet hvordan du lager en grunnleggende webside. Du bør være i stand til å brette noen HTML -elementer sammen og kunne presentere litt informasjon i en nettleser. Å se og

tagger er ikke så skremmende, og du er ikke redd for å skitne hendene i noen kildekode.

For det andre antar denne guiden at du vet hva CSS er og hvordan det fungerer. Vi forventer ikke at du skal være designgenier, og det forventes heller ikke at du kjenner hele CSS -spesifikasjonen på baksiden av hånden. Du bør imidlertid kunne bruke styling på et element på en webside, kunne koble til en CSS -fil og kjenne forskjellen mellom en ID og en klasse og hvordan du bruker styling på hver av dem.

Hvis du klør deg i hodet ovenfor, ikke bekymre deg. En av de beste tingene med HTML og CSS er at det er veldig, veldig enkelt. Faktisk har MakeUseOf en utrolig XHTML -guide som vil bringe deg raskt opp i fart.

Etter å ha lest denne guiden, vil du kanskje også se på følgende artikler:

Du trenger også en moderne tekstredigerer og nettleser. Enhver versjon av Internet Explorer som er eldre enn IE 9 og noen eldre versjoner av Safari, Chrome og Firefox vil slite med mange funksjoner som er en del av HTML5 og kan forhindre deg i å følge denne veiledningen.

Som et resultat oppfordres du til å laste ned en moderne nettleser. Jeg anbefaler Google Chrome, og jeg kommer til å bruke det i hvert eksempel.

Utover det er alt du trenger er en vilje til å lære. Oh, og en tekstredigerer.

1.2 Tekstredigerere for webutvikling

Teksteditoren din er det du skal bruke til å skrive koden din. Du lurer kanskje på hva en tekstredigerer er.

Vel, for det første er det ikke et tekstbehandlingsprogram. Programmer som Microsoft Word og Apples Pages er totalt uegnet for webutvikling. Det er fordi de legger ved tilleggsinformasjon til HTML-, CSS- og Javascript -filene dine som gjør det vanskelig for nettleseren din å lese.

En tekstredigerer skyter ut tegn i en tekstfil, og ikke mye annet. Dette lar deg lage filer som ikke har ekstra formatering, og kan lagres med hvilken som helst utvidelse du velger.

Datamaskinen din kommer allerede med en. Hvis du bruker en Windows -PC, er Notisblokk teksteditoren som du sannsynligvis har installert.

På en Mac er situasjonen litt annerledes. OS X kommer tilfeldigvis med fire forskjellige tekstredigerere. Disse kalles Vim, Emacs, Pico og Nano. Men i motsetning til Notisblokk, jobber de alle tilfeldigvis i terminalen.

Dette er litt skremmende for folk som er nye innen webutvikling og ikke bør brukes av folk som er nye innen programvareutvikling. Vi kommer ikke til å bruke dem i denne guiden. Men når du blir litt mer trygg på programvare og webutvikling, er det definitivt verdt å ta en titt på Vim og Emacs. De er begge kraftige tekstredigerere, og når de mestres, kan du spare mye tid.

På Linux varierer standard tekstredigerer mellom distribusjoner. På Ubuntu er det sannsynligvis Gedit, som er en ganske hyggelig tekstredigerer som ikke er så ulik Notepad.

Imidlertid skal vi i dette kurset skrive koden vår ved hjelp av tre forskjellige verktøy.

Den første er Sublime Text 2. Jeg kan ærlig talt ikke anbefale dette høyt nok. Den kommer med alle tingene som gjør livet lettere for en nybegynner. For det første vil det gjøre koden lettere å lese ved å farge bestemte deler. For det andre lar den deg enkelt bytte mellom filer og administrere hele filprosjekter. Dette er ideelt for å bytte mellom filer og redigere flere kodebiter i farten.

Den tredje er Javascript -konsollen som er innebygd i Google Chrome. Dette lar oss skrive Javascript og se at det kjøres umiddelbart og vil bli brukt til å forklare grunnleggende programmeringskonsepter.

Den andre er et nettsted som heter Codepen.io. Dette bemerkelsesverdige nettstedet lar deg kode HTML, CSS og Javascript i nettleseren og er gratis å bruke. Det lar deg også se endringene dine umiddelbart.

2. Semantisk markering

I dette kapitlet vil du lære om Semantic Markup, og hvordan du organiserer koden din basert på innholdet.

Inntil nylig var HTML -kode vanligvis organisert med koder. Disse tillot deg å lage en gruppe elementer og deretter bruke styling på disse elementene.

Dette fungerte, men det var rom for forbedring. Problemet med tagger var at det ikke var semantisk. Div betyr egentlig ingenting.

Semantisk markup er en ny funksjon i HTML5. Det bringer inn nye koder, som fungerer på samme måte som en 'div' -tagge, men er for tagging av vanlige deler av en side.

Så, hvordan fungerer de? Vurder følgende kode.

I denne koden har vi en navigasjonslinje, en tittel og en liste. Dette er ikke så ulikt de fleste nettsteder du sannsynligvis kommer til å gå på når du tenker på det.

lommebøker som beskytter kredittkortene dine

La oss se en artikkel på MakeUseOf. Du vil legge merke til at det er en del av siden som er forbeholdt navigering til andre artikler. Du vil også legge merke til at det er en annen del av siden som inneholder ordene som utgjør en artikkel. Øverst på siden ser du en overskrift som inneholder MakeUseOf -logoen og noen andre lenker.

Når du tenker deg om, følger mange nettsteder disse konvensjonene. De fleste nettsteder har en del som er reservert for navigasjon. De har vanligvis et innhold. De har mer enn sannsynlig en header.

Semantiske koder er tagger som lar deg definere deler av et nettsted som ofte finnes på de fleste nettsteder. De legger ikke til noe på siden, men lar deg gruppere tagger basert på innholdet og bruke stylinger på disse gruppene.

Så, husk den koden vi hadde før? La oss se på det med noen semantiske markeringer lagt til.

Som du kan se, er koden mye lettere å lese. Du vet hvilke deler som er, og det er ingen tvetydighet. Dette er viktig, fordi det gjør det lettere å skrive god, ren kode. Skulle du noen gang bestemme deg for å bli en profesjonell webdesigner, blir dette avgjørende - du vet aldri hvem som skal lese verket du produserer.

Så la oss se på noen mer semantiske markeringstagger.

2.1 Avsnitt

Seksjon er en veldig nyttig tag. Den brukes til å fange enorme deler av informasjon og innhold som er merket med en overskrift eller en tittel. Tenk på dette som et kapittel i en bok. Et kapittel har en tittel, og kan også inneholde bilder, diagrammer, grafer og ord. En seksjonskode vil bli brukt til å inneholde alt dette.

2.2 Artikkel

Artikkeltaggen brukes til hvordan det høres ut; Inneholder innhold som et blogginnlegg eller en nyhetshistorie. Dette innholdet skal kunne skilles fra resten av bloggen og fortsatt være sammenhengende.

2.3 Bortsett fra

Denne taggen er reservert for innhold som er relatert til, men ikke en integrert del av nettsiden. Dette kan være en haug med fakta som er knyttet til en nyhetshistorie, eller biografien til en bruker på en blogg.

2.4 Topptekst

Mange nettsider har en stolpe øverst på siden som inneholder en logo, noe informasjon om nettstedet og kanskje noen lenker. I semantisk markering bruker du en overskriftstag for å inneholde alt dette.

2.5 Nav

Dette elementet er reservert for navigasjonsdelen av nettstedet ditt. Dette vil inneholde lenker til andre nettsteder eller til andre sider på nettstedet. I konteksten til MakeUseOf kan dette være den delen av siden som er under overskriften.

Denne taggen er reservert for den nedre delen av siden. Her kan du legge til noen kontaktdetaljer, opphavsrettsinformasjon, et kart eller noen lenker til siden din om meg.

2.7 Test deg selv

  • Hva er Semantic Markup, og hva brukes det til?
  • Jeg lager en webside, og jeg vil bruke en semantisk tag for å inneholde en biografi om meg. Hvilken bruker jeg?

3. Skjemaer

Hvis du noen gang har gjort litt webdesign, vet du sannsynligvis hvordan du lager et enkelt skjema i HTML. Hvis du er virkelig smart, vet du sannsynligvis hvordan du tar informasjonen du får fra skjemaet ditt og hvordan du gjør noe med det, så legg det inn i en database.

Skjemaer er enormt viktige. De er grunnlaget for de fleste tingene vi gjør på Internett. Hver gang du oppretter en statusoppdatering på ditt favoritt sosiale nettverk, kjøper noe fra Amazon eller sender en e -post, har du sannsynligvis brukt et HTML -skjema.

Det du sannsynligvis ikke visste er at måten vi lager skjemaer har endret seg radikalt i HTML5. Det er også betydelig bedre. I dette kapitlet skal vi se på noen av de kule tingene du nå kan gjøre, bare med vanlig gammel markering.

Så, hva er så kult med den nye måten vi kan skrive skjemaer i HTML5? For det første kan du sikre at noen felt må fylles ut for å kunne sendes inn, bare ved å endre markeringen av selve skjemaet. I tillegg trenger du ikke lenger å skrive fjell med JavaScript eller PHP for å gjøre dette. Det er trivielt enkelt.

For det andre kan du sikre at brukerne bare kan sende inn bestemte typer informasjon til skjemaet ditt. Så la oss anta at du har et nettsted for adresselisten din, og at du bare vil at folk skal kunne sende inn faktiske e -postadresser? Du kan gjøre det, bare ved å bruke HTML5. Det er virkelig utrolig kraftig.

For det tredje kan du få skjemaene dine til å se bedre ut ved å gi bestemte felt en plassholder. Dette vil gjøre dem betydelig mer intuitive, ettersom du kan vise brukerne et eksempel på hva du forventer for et skjema.

3.1 Forbedring av et skjema

Så, la oss se på et skjema og se hvordan vi kan gjøre det bedre.

Denne formen er ganske grunnleggende. Den tar inn et navn, en e -post og en favorittfarge, og lar deretter brukeren sende det inn. Den inneholder ingen validering av hvilken informasjon som blir lagt inn i den, og det er ingenting som hindrer brukere i å sende inn dette skjemaet med noen tomme felt. La oss endre alt det.

Så det første vi vil gjøre er å sikre at e -postfeltet bare tar en e -post. Dette pleide faktisk å være en ganske vanskelig oppgave, ettersom du må opprette alle slags bastant Regex -kode. Vel, ikke lenger. Du må bare endre typen inngang fra 'tekst' til 'e -post'. Når du prøver å sende inn skjemaet med tull, klager det og insisterer på at du sender inn en e -post.

3.2 Inndatatyper og mønstre

Det er andre inngangstyper, som du kan kreve. Disse inkluderer telefonnumre, webadresser, søkeskjemaer og til og med fargeplukkere! Siden HTML5 stadig utvikler seg, er det en grunn til at vi snart kan spesifisere flere inngangstyper i nær fremtid.

Videre, for ting som telefonnumre som varierer avhengig av lokalitet, kan du spesifisere mønstre for innganger. Disse er opprettet ved hjelp av noe som kalles 'Regular Expressions' og er ganske kompliserte, men umåtelig kraftige.

Vi vil også gi et eksempel på en e -post i feltet vårt, slik at brukeren ikke har noen tvetydighet om hva han eller hun må sende inn. Det er veldig enkelt å gjøre. Bare opprett et nytt attributt for 'plassholder' med et eksempel på e -postadresse.

Vi skal sikre at feltet 'Favorittfarge' er obligatorisk. I den siste vinkelbraketten (>) i e -postinput -taggen skriver du bare 'nødvendig'. Det er det. Når du prøver å sende inn skjemaet ditt uten verdi, gir det en feilmelding.

Det virkelig utrolige med disse feilmeldingene er at brukeren ikke trenger å skrive dem eller skrive noen kode for å lage dem. Du endrer bare et felt for å gjøre det nødvendig, og det fungerer bare. Når det er sagt, er det mulig å tilpasse dem hvis du vil.

Det var en utrolig kort introduksjon til kraften i skjemaer i HTML5. Hvis du ønsker å lese mer, anbefaler jeg at du besøker disse linkene.

Videre lesning:

  • CSS -triks - La oss skrive semantisk markup
  • HTML5 Doctor - Let's Talk About Semantics

3.3 Test deg selv

Det er bursdagen din neste uke, og du vil lage et registreringsskjema slik at du vet hvor mye kake du trenger å lage. Åpne tekstredigereren og lag et skjema med følgende felt.

  • Navn
  • Epostadresse
  • Telefonnummer
  • Allergi

Sørg for at navn, e -post og telefonnummer er obligatoriske, og at feltene E -post og Telefonnummer er angitt med inndatatypene 'e -post' og 'tlf'. Lag en plassholder for allergifeltet med verdien 'pollen, egg, quiche'.

Lek med skjemaet. Prøv å sende inn obligatoriske felt som tomme, og prøv å sette inn ikke-numeriske tegn i telefonnummerfeltet. I e -postfeltet, sett inn noe som ikke er en e -postadresse. Hva skjer?

4. Gjennomsnitt

Det pleide å være en tid da den eneste måten du kunne sette inn video eller lyd på en webside var ved å bruke noe som Flash, Shockwave eller SilverLight.

Dette var ikke ideelt. For det første fungerte ingen av disse rammene så godt på mobile enheter. De var bare ikke utstyrt for den moderne verden av smarttelefoner og nettbrett.

hvordan fikse wifi har ikke gyldig ip -konfigurasjon

I tillegg var de proprietære formater. Som et resultat kan brukere av Linux og OS X få en ganske annenrangs opplevelse eller til og med bli forhindret i å bruke medietjenester, ettersom den ikke var tilgjengelig for plattformen.

Til slutt hadde de en tilbøyelighet til å være trege. Hvis du var på en mindre eller eldre datamaskin, ville du ikke ha en god opplevelse av å se video med disse rammene. Flash var spesielt beryktet for dette.

4.1 Hvordan HTML5 gjør video og lyd fantastisk

HTML5 endret dette ved å la webutviklere inkludere video og lyd på sine websider med bare noen få kodelinjer. Det fungerer en godbit på mobile enheter og fungerer på alle moderne nettlesere.

Som et resultat utnytter store selskaper som YouTube, Vimeo og Netflix HTML5 -revolusjonen. Hvorfor blir du ikke med dem?

4.2 Alt om kodeker

I dette kapitlet lærer du hvordan du bruker kraften til HTML5 til å inkludere lyd og video på nettsidene dine.

For det første må jeg begynne med en advarsel. Selv om du kan bruke HTML5 -video i alle moderne nettlesere, fungerer den ikke det samme i hver nettleser. Kodekene som brukes av hver nettleser varierer. I Internet Explorer er du begrenset til å bruke MP4 -video. Chrome er litt mer sjenerøs og lar deg bruke WebM, MP4 og Ogg Theora -video. Opera er litt mer restriktiv og lar deg bare bruke Theora og WebM -video.

Som et resultat må du være litt flink med hvordan du setter inn video på nettsiden din. Så la oss se hvordan det fungerer.

4.3 Starter med video

Til å begynne med må du lage noen åpnings- og lukkemerker. Det er her du vil koble til videofiler. Men først vil du sette en plakat. Hva betyr det?

Vel, når du venter på at videoen din skal lastes inn, kan personen som besøker nettstedet ditt se et bilde som er relatert til videoen. For å gjøre det, bare gi videomerkene attributtet 'plakat' med verdien av bildet du ønsker å koble til. Det skal se slik ut.

Det neste vi vil gjøre er å lage et fallback. Hva betyr dette? Så anta at du bruker en av de eldre, mindre fantastiske nettleserne der ute. Mange av disse eldre nettleserne støtter ikke HTML5 -video og kan derfor ikke spille HTML5 -video. Du vil gi dem en melding om at de vil oppgradere nettleseren, og at de ikke kan se videoen din før de gjør det.

For å gjøre det, skriver du bare meldingen din inne i videokodene. Ingenting annet er nødvendig. Når du har gjort det, vil du sitte igjen med en kode som ser slik ut.

La oss legge til en video. Jeg skal teste dette på Google Chrome, så jeg skal linke til en MP4 -film. For å gjøre det, oppretter jeg en kildekode og gir den et attributt til src som har en verdi for videoen jeg vil inkludere.

Siden min er nå klar til å åpnes i nettleseren min. Jeg har lenket til en film som er veldig, veldig stor og som et resultat, når man åpner den, kan man bare se plakaten.

4.4 Legge til lyd

Lyd kan settes inn på websiden din på en måte som minner veldig om hvordan vi satte inn video på siden vår.

For det første lager man noen lydmerker. Disse lydmerkene inneholder attributtet 'kontroller'. Dette gir brukeren som besøker siden muligheten til å pause, spille tilbake og spole frem lyden som spilles av.

Deretter tar du med en kildekod til MP3 -filen du vil koble til. Du trenger egentlig ikke å bekymre deg så mye når det gjelder kodek -kompatibilitet. De nyeste nettleserne har muligheten til å spille MP3 -lyd, selv om det er god praksis å også inkludere en '.ogg' og en '.wav' fil - bare i tilfelle.

Til slutt kan du lage en tilbakemelding for eldre nettlesere. Dette gjøres på samme måte som du opprettet fallbacken for videoen din.

Sluttresultatet ser litt slik ut.

Når du åpner dette i nettleseren din, skal det se litt slik ut.

4.5 Test deg selv

  • Hva er hensikten med å ha en plakat i videokodene dine?
  • Hvilke kodeker kan du ikke bruke i Internet Explorer?
  • Hvis jeg ville ha muligheten til å sette litt lyd på pause, hvilket attributt ville du lagt til i lyd -taggen din?

Videre lesning:

5. CSS3 -transformasjoner og animasjoner

CSS ble tradisjonelt brukt til å håndtere layout og design av en webside. Dette er fortsatt sant, men i sin siste iterasjon har det fått evnen til å håndtere animasjoner og transformasjoner av elementer og bilder.

Folk har gjort noen fantastiske ting med CSS3, fra å lage en digital klokke til å skrive et fullstendig Pong -spill. Noen brukte den til og med til å gjenopprette introduksjonskredittene til Mad Men. Det er en virkelig kraftig teknologi, og når den mestres, kan den brukes til å legge til et fantastisk nivå av funksjonalitet på nettsiden din.

I dette kapitlet skal jeg gi deg en kort introduksjon til CSS3, og vise deg hvordan du legger til noen fantastiske effekter på siden din.

Naviger først til codepen.io og lag en ny penn. Vi kommer til å bruke dette som arbeidsområdet vårt i dette kapittelet.

Vi skal begynne enkelt og lage en enkel bildetransformasjon som roterer et bilde 3 grader når du holder markøren. Først av alt, opprett en div -kode og gi den en ID. I eksemplet nedenfor har jeg gitt den en ID for 'muo'.

5.1 CSS Hover -effekter

I den div, inkludere et bilde av ditt valg. Jeg har tatt med en kopi av logoen for MakeUseOf.

Du må da skrive noen regler for stilark. I eksemplet nedenfor har jeg laget en topp- og venstre marg for å gi bildet litt plass. Jeg har også inkludert en nysgjerrig stilartregel som starter med '#muo: svever'. Hva er det?

Når du knytter ': svever' til en stilarkregel, det være seg til et element, en ID eller en klasse, forteller du nettleseren effektivt om å bruke denne stylingen når musen styrer elementet. Ganske kult, ikke sant?

Inne i '#muo: hover' -regelen har vi en linje som sier '-webkit-transform: rotate (3deg)'. Som jeg er sikker på at du har gjettet, forteller dette nettleseren å rotere det div -elementet med tre grader.

Det er imidlertid verdt å merke seg at denne taggen bare fungerer i Chrome og Safari. Hvis du vil at koden din skal fungere i Firefox eller Internet Explorer 9 og nyere, vil du endre CSS -filen til å inneholde følgende linjer.

Når du holder musepekeren over bildet, ser det slik ut:

5.2 Bruke CSS3 til å endre størrelse på bilder

Så hvorfor stoppe der? Visste du at du også kan bruke 'transform' -metoden for å forstørre eller krympe et bilde. La oss endre vår CSS -fil til å inkludere følgende linjer.

Som du kan se, har vi nå inkludert en ny transformeringsregel, men denne gangen forteller vi den å gjøre noe som kalles 'skala'. Dette er en virkelig vakker måte å øke størrelsen på et bilde. Det krever to parametere (tallene du ser mellom parentesene), og de representerer mengden du øker elementets høyde og bredde med.

Som du kan se fra koden, kommer jeg til å øke størrelsen på MakeUseOf div -logoen med 50%. Du kan teste dette fungerer ved å holde musepekeren over det. Du vil se at nå er MakeUseOf -logoen betydelig mer strukket.

Dette var en veldig skånsom introduksjon til CSS3 -transformasjoner. Til tross for at CSS3 faktisk er veldig nytt, kan du nå se at du kan gjøre mange veldig interessante manipulasjoner med det.

5.3 Test deg selv

  • Hvordan bruker vi en styling på et element når vi svever?
  • Hvordan roterer du et bilde ved hjelp av CSS3?
  • Hvordan skalerer du et bilde ved hjelp av CSS3?
  • Hva skjer hvis du består transformasjonsmetoden 'translate (50px, 50px)'?

Videre lesning:

HTML5 Rocks - Presentasjon

6. Bare nok Javascript

Hvis du vil bruke script i nettleseren din, må du bruke Javascript. Det er dessverre ingen to måter. Det er et språk som har mange fans, og mange motstandere også. Etter hvert som språk går, har den mange vorter. Det er en grunn til at den mest bemerkelsesverdige boken om språket kalles 'Javascript: The Good Parts'.

Det vil være umulig å lære deg hvordan du bruker Javascript i et enkelt kapittel. Det er ikke målet her. Målet er å lære deg nok Javascript slik at du kan forstå neste kapittel, som handler om å bruke en teknologi som kalles Canvas for å lage tegninger og animasjoner.

6.1 Få tilgang til konsollen

For å gjøre dette, skal vi bruke Javascript -konsollen som er innebygd i hver kopi av Google Chrome. For å få tilgang til dette kan du høyreklikke på hvilken som helst nettside og deretter trykke på 'Inspiser element'. Klikk deretter på 'Konsoll'. Du burde se dette.

Det er tradisjonelt at det første programmet noen spirende utviklere noensinne skriver, er 'Hello World' -programmet. Dette er et enkelt program som skriver ut uttrykket 'Hello World', og ikke mye annet. I konsollen skriver du inn 'console.log (' Hei verden! ') ;.

6.2 Ditt første program

Så hva gjorde vi egentlig? For det første kalte vi noe som heter 'console.log'. Dette er en bit kode som er innebygd i datamaskinen som bare skriver ut det du forteller den til. Vi festet deretter noen parenteser til det, og inkluderte i doble anførselstegn 'Hello World'. Dette kalles 'passerende argumenter', og typen argument vi passerte kalles en streng. Når du vil gjøre noe som involverer bokstaver og spesialtegn, må du bare bruke enkle anførselstegn. Men hvis du vil gjøre noe ved hjelp av tall, trenger du vanligvis ikke å bruke anførselstegn, som vist nedenfor.

6.3 Variabler i JavaScript

Du kan også sende variabler til 'console.log' også. Variabler høres kompliserte ut, men alt de egentlig er, er et rom for å legge biter av informasjon. Dette er ofte tall eller bokstaver. For å gjøre det, erklærer du en variabel ved å bruke søkeordet 'var', gir det et navn og gir det en verdi med et likhetstegn. Så jeg skal lage en variabel som heter 'hei' og deretter gi den verdien 'Hei verden!'. Jeg skal deretter overføre det til console.log.

Legg merke til hvordan jeg ikke sendte 'hei' til console.log ved hjelp av sitater. Det er fordi jeg ønsket å skrive ut innholdet i 'hei' til konsollen og ikke 'hei' i seg selv.

6.4 Hvilke funksjoner gjør

Det kan være litt kjedelig å skrive om den samme koden igjen og igjen, så det er derfor vi skriver funksjoner. Funksjoner er enklere enn du tror. Alt de er er biter av kode som vi kan gjenbruke uten å skrive om den samme koden igjen. Nedenfor har vi opprettet en funksjon som heter 'sup' og sender den et argument ved hjelp av parenteser som deretter logges til skjermen. Vi kaller 'sup' ved å sende til konsollen 'sup (' Hei verden! ');'.

6.5 Gjenta en handling med en 'for' -sløyfe

Anta at du ønsket å gjøre den samme handlingen et bestemt antall ganger. Det er av den grunn hvorfor vi vil bruke en 'for' loop. De ser skummelt ut først, men er så enkle å gjøre når du forstår dem. Du starter med å skrive 'for ()'.

I parentesene vil vi lage en variabel som teller hvor mange ganger vi har utført en handling. Så vi får noe som ser slik ut 'for (var i = 0;)'.

Vi vil deretter kontrollere at jeg ikke har oppfylt en betingelse. Så i dette tilfellet vil vi se at det er mindre enn 10. Så etter semikolonet skriver vi 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Hvis jeg er mindre enn 10, vil vi legge det til ett og deretter gjøre noe. Så vi setter 'i = i + 1'. Sløyfen vår er nesten ferdig: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

Etter det kommer vi til å ønske å gjøre en handling. Så, etter de siste parentesene, skriver vi noen krøllete bukseseler og mellom dem skal vi konsolere. Logge verdien av i. Dette vil opprette en teller som teller opptil ni.

De to siste programmeringskonstruksjonene vi skal se på er 'if' -utsagn og' while' -sløyfer.

6.6 If -erklæringer

En 'hvis' -setning utfører en handling hvis et bestemt kriterium er oppfylt. De ligner på 'for' løkker i konstruksjonen, og fungerer som følger. Anta at du har en variabel som heter 'cheeseburgers', og du vil se om den har verdien 'velsmakende'. Hvis det gjør det, vil du logge 'yum, cheeseburgers' til skjermen. For å gjøre det ville du skrive noe slikt.

Legg merke til hvordan jeg skrev 'if (cheeseburgers ==' delicious ')'. Du bruker dobbel eller trippel lik for å kontrollere likhet og enkel lik for å tildele en verdi.

6.7 Mens sløyfer

Til slutt utfører en 'mens' -sløyfe en handling mens et kriterium er oppfylt. Så tenk deg at du vil logge 'yum, cheeseburgers' mens cheeseburgere er like velsmakende. For å gjøre det, skriver du følgende.

Det er verdt å merke seg at dette ville komme inn i en uendelig sløyfe, og du bør unngå å gjøre en handling på en verdi som ikke sannsynligvis vil endre seg. Dette kan føre til at nettleseren din låses, eller at koden din ikke fungerer.

Som jeg nevnte før, var dette en veldig kort introduksjon til programmeringskonstruksjoner i Javascript. Du oppfordres til å lese mer om dette fascinerende, om enn enorme emnet.

6.8 Test deg selv

  • Jeg vil telle ned fra 30. Skriv en 'for' loop som gjør det.
  • Jeg vil lage en variabel som heter 'makeuseof' og gi den verdien 'fantastisk'. Hvordan gjøres det?
  • Jeg vil lage en funksjon som skriver ut 'MakeUseOf Is Awesome' når den blir ringt. Skriv den funksjonen.

Videre lesning:

7. Kreativt lerret

Canvas er en kul teknologi som lar deg tegne bilder og lage animasjoner uten å måtte bruke Flash eller Silverlight. Folk har brukt den til å lage bisarre og fantastiske ting, inkludert en hårføner -simulator og forskjellige videospill. Det er et fantastisk og ufattelig stort stykke teknologi, i denne opplæringen skal jeg gi deg en kort introduksjon til den.

Det er verdt å merke seg at Canvas bare fungerer på moderne nettlesere. Hvis du bruker en gammel versjon av IE, Chrome eller Firefox, er det ikke sikkert du kan følge dette kapitlet. Hvis det er tilfelle, bør du vurdere å laste ned den nyeste versjonen av Google Chrome, som var nettleseren der jeg opprettet denne opplæringen.

7.1 Komme i gang med Canvas

Først av alt må du åpne nettleseren din og navigere til codepen.io. Lag en ny penn.

Nå må vi deklarere et lerretelement. Lag to åpne og lukkende lerretskoder. I dem bør du gi den tre attributter. Dette er bredden og høyden på Canvas -elementet, sammen med ID -en du gir den. Som før da du satte inn en video, bør du inkludere en tilbakemelding.

Nå vil vi skrive noen Javascript -kode som vil trekke noe til skjermen. Vi skal starte grunnleggende og lage en enkel rød firkant.

Vi skal lage en variabel (jeg kalte den 'demo'), og deretter velge lerretelementet og tilordne den til den variabelen. For å gjøre det, bruker du document.getElementByID () og sender inn ID -en til elementet du vil velge.

Den andre linjen i skriptet vårt oppretter en annen variabel kalt 'kontekst' og kaller deretter 'demo.getContext (' 2d ')' på den. Dette fortalte nettleseren at vi skal jobbe med et 2d -bilde, og passerte deretter de nødvendige funksjonene vi måtte for å trekke til skjermen.

Den tredje og fjerde linjen er de som faktisk tegner til skjermen. Den tredje linjen fyller et rektangel med fargen rød, mens den fjerde linjen kaller fillRect, som plasserer den og definerer dens lengde og bredde.

Det er imidlertid ikke imponerende. La oss gjøre noe litt mer avansert og bruke magien til Javascript og Canvas for å lage MakeUseOf en helt ny logo.

7.2 Former og tekst

La oss slette vår fjerde linje, og erstatte den med en som plasserer rektangelet vårt øverst i venstre hjørne og strekker det ut i lengden på lerretet vårt.

De to første argumentene definerer hvor vi ønsker å plassere x- og y -aksen til formen. La oss sette disse to til '0' for nå. Det tredje argumentet refererer til bredden på formen. La oss sette det til '200', og la det fjerde argumentet ligge på '50'. Du burde nå ha noe som ligner litt på dette.

Dette er en flott start, men det nevner ikke MakeUseOf i det hele tatt. Så vi skal legge til litt tekst. La oss lage en variabel som inneholder 'makeuseof', og vi vil kalle den variabelen 'MakeUseOf'.

Vi vil da lage en annen kontekstvariabel. Kall denne 'kontekst2', og sørg for at den er 2d. Det er dette vi skal bruke til å skrive teksten vår inn.

Vi vil at teksten vår skal være blå og at den røde firkanten skal legges over. Så, akkurat som før, kommer vi til å gi den en fyllestil med 'blå'. Nå skal vi velge egenskapene til teksten vår. Vi vil at den skal være 20 piksler stor, fet format og bruke en Arial -skrift. Vi kaller font på context2 og tildeler den verdien 'fet 20px arial'.

Fordi vi vil at denne teksten skal legge over den forrige røde boksen, må vi kalle 'textBaseLine' på context2 og gi den en verdi på toppen. Når dette er fullført, kaller vi 'fillText' på context2 og sender variabelen som inneholder teksten vår og x- og y -koordinatene der vi har tenkt å plassere teksten, videre. Sluttresultatet av koden vår er noe slikt.

Bildet som er produsert av koden ser slik ut.

7.3 Et ord på lerret

Selv om dette var en utrolig grunnleggende introduksjon til Canvas, bør du forstå at det også er en utrolig stor teknologi, og en utrolig kraftig å starte opp. Denne guiden fungerte ganske enkelt som en introduksjon til å lage grafikk ved hjelp av denne nye teknologien.

hvordan får jeg et gratis microsoft word på datamaskinen min?

7.4 Test deg selv

  • Legg til følgende slagord i bildet du opprettet: 'The best tech site ever!'
  • Lag en 'for' -løkke som kjører for ti iterasjoner. Se om du kan flytte tegningen nedover lerretet, en piksel om gangen.
  • Pakk inn tegningen i en funksjon. Hva skjer hvis du ikke kaller det?

Videre lesning:

8. Hvor neste?

Takk for at du leser min utrolig korte guide til de nye teknologiene som finnes i HTML5. Det er ubestridelig at HTML5 er fremtidens teknologi. Det blir tatt i bruk av de fleste teknologier, ettersom det er lett å skrive og kraftig uten mål. Folk gjør utrolige ting med det hele tiden, og jeg er ikke i tvil om at du i fremtiden vil være en av dem. Jeg er beæret over å ha vært en del av reisen din inn i den ville og fantastiske verden av HTML5.

Jeg ber deg om å fortsette å lære. Fortsett å kode. Fortsett å nivåere og forbedre deg, og på kort tid vil du bruke teknologiene som er introdusert i denne korte guiden for å lage fantastiske produkter.

Dele Dele kvitring E -post Er det verdt å oppgradere til Windows 11?

Windows har blitt redesignet. Men er det nok til å overbevise deg om å bytte fra Windows 10 til Windows 11?

Les neste Relaterte temaer
  • Wordpress og webutvikling
  • HTML5
  • Langform
  • Longform Guide
Om forfatteren Matthew Hughes(386 artikler publisert)

Matthew Hughes er en programvareutvikler og forfatter fra Liverpool, England. Han blir sjelden funnet uten en kopp sterk svart kaffe i hånden og elsker absolutt Macbook Pro og kameraet. Du kan lese bloggen hans på http://www.matthewhughes.co.uk og følge ham på twitter på @matthewhughes.

Mer fra Matthew Hughes

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere