Elm reactor og moduler Lag din egen nettside!
Elmreactorogmoduler
Nybegynner
Elm
Introduksjon
Denneoppgaveninnførermoduler,somlarossbrukekodesomandreharskrevet.Nårviforstårmoduler,erviklarefor elm
reactor ,somviserossenwebapplikasjonviharskrevetivåregenfil.
Førdustarter,måduhagjennomførtinnstallasjonenioppgave2.
Lagdinegennettside!
Aktiviteter
Åpneenteksteditor,foreksempelteksteditorenAtom,Brackets,NotePadellerNotePad++.
Lagennyfil.
Fyllinndetteifilen:
importHtml
main=Html.text"Hei,verden!"
Lagrefilentilfilnavnet hei.elm .
Foråsenettsideniennettleser,måviførstgjøreomnettsidenvårtilHTML.HTMLerspråketsomfortellerennettleserom
hvordanennettsideskalseut.Seweb-kursetforålæremeromHTMLognettsider.
Omduhargjortoppgave2,kandunååpnekommandolinjenogskriveinn elmreactor :
elm-reactor0.18.0
Listeningonhttp://localhost:8000/
DetbetyratElmventerpåatduskalåpnehttp://localhost:8000/iennettleser.Finnsåigjenfilen hei.elm .
Førstegangduåpnerfilen,vildufåoppdettevinduet:
NåleserElmgjennomfilendinoggjørdenomtilvanligHTML!
Hvordansernettsidendinut?
Laossgjøreenendring.
Endre "Hei,verden!" til "Hei,allesammen!"
Lagrefilen
Lastnettleserenpånytt.
Skjeddedetnoe?
Tingdukanprøve
Forååpneforskjelligeprogrammerdirektefranettsidendin,kanduskrivenettadressenslik:
localhost:8000/hei.elm .Barebyttutfilnavnet!
Hvaskjernårduåpner hei.elm direkteinettleseren?
Nårnoegårgalt
Elmprøversågodtdenkanåhjelpeossåskrivekorrekteprogrammer.Nårvihargjortnoerart,sierdenifra.Endre
oppgave1a.elm tilfølgende:
importHtml
main=Html.taxt"Hei,verden!"
Elmsvarerfølgende:
Cannotfindvariable`Html.taxt`.
3|main=Html.taxt"Hei,verden!"
^^^^^^^^^
`Html`doesnotexpose`taxt`.Maybeyouwantoneofthefollowing?
Html.text
Dettebetyr:
Jegvetikkehva Html.taxt betyr
Duprøvdeåbruke Html.taxt pålinje3
Kanskjedumenteåskrive Html.text ?
Delnettsidenoppimoduler
Lagennyfilogkallden Knapper.elm
Dennefilenerakkuratliknettsidenvåriforrigeoppgave.Mendennegangenvilviatandreskalkunnebrukedenpåderes
nettsider.Damåvistartemedåfortelleatdennefilenskalværeenmodul.
Skrivinndetteistartenavfilen:
moduleKnapperexposing(..)
Filen Knapper.elm inneholdernåenmodulkalt Knapper !
Prøvååpne localhost:8000/Knapper.elm
Dettegirossenfeilmelding.Modulenvårinneholderingentingennå!
Leggtilenknappimodulen:
moduleKnapperexposing(..)
importHtmlexposing(button,text)
okKnapp=button[][text"Ok!"]
importHtmlexposing(button,text) importererHtml-modulen,somgjøratvikanbrukeHtml-elementerimodulenvår.
Sidenviskalbrukeelementene button forålageenknappog text foråleggetekstpåknappen,måvileggetil (button,
text) nårviimportererHtml-modulen.
Leggtildennyeknappenifilenfraforrigeoppgave
importKnapper
main=Knapper.okKnapp
PåsammemåtesomviimportererHtml-elementermed importHtml ,kanviimporterevåreegneelementermed import
Knapper . okKnapp erendelavmodulen Knapper ,påsammemåtesomat text erendelavHtml-modulen.Såvikan
skrive Knapper.okKnapp forålageenokKnapp.
Leggtilenekstrastiligknapp
moduleKnapperexposing(..)
importHtmlexposing(button,text)
importHtml.Attributesexposing(..)
okKnapp=button[][text"Ok!"]
stiligKnapp=button[styling][text"Stilig!"]
styling=
style
[("border-radius","100%")
,("padding","10px")
,("font-size","5em")
,("text-align","center")
,("background","red")
,("color","blue")
]
Byttut okKnapp med stiligKnapp ogsehvasomskjer
Leggtilflereegneknapperimodulen
Lisens: CCBY-SA4.0 Forfatter: AlexanderPerry
© Copyright 2024