Share
Koding språk er veldig mye akkurat det; språk. Bli dyktig på et kodingsspråk, enten det er HTML, CSS, JavaScript eller noe annet har alle utfordringene ved å lære et nytt språk.
På samme måte som med talte språk har hvert kodende språk sin egen "grammatikk"; strenge regler og idiosyncrasies som ofte er vanskelige å lære og bare blir fullt absorbert over mange års praksis.
uilang er et nytt, enkelt JavaScript-basert språk laget av Benjamin De Cock, og det gjør det mulig for webdesignere å opprette UI-klikk-interaksjoner ved å bruke et sett av regler tatt direkte fra engelsk. Dette betyr en mer intuitiv og forsiktig læringskurve for nybegynnere som ønsker å lette inn i JavaScript-bruk, og en raskere metode for UI-klikk-interaksjonsutplassering for gamle hender.
Kjernen i uilang er evnen til å legge til, fjerne eller bytte klassenavn på et gitt element. Dette kan bare være tre handlinger, men i kombinasjon med CSS de oversetter til muligheten til å gjøre alle slags ting som skjuler varsling og modal bokser, animerende brytere, viser nav meny dropdowns, og kjører tabulator og trekkspill systemer.
For eksempel, la oss si at du har følgende varslingsboks:
Den samlede boksen bærer id #melding, og knappen har klassen .gjemme seg. CSS er også inkludert på siden under klassen .skjult at når den legges til boksen, vil dens opasitet bli null, og dermed skjule eller avvise varselet.
Koden som brukes til å lage denne boksen er:
Du har 3 uleste meldinger.
Ved å bruke rett JavaScript, hvis du ønsket å legge til klassen .skjult til boksen når knappen klikkes, trenger du noe slikt:
Accentsconagua
document.addEventListener ('DOMContentLoaded', funksjon () [] .forEach.call (document.querySelectorAll ('. hide'), funksjon (el) el.addEventListener ('klikk', funksjon .target.nodeName.toLowerCase () == 'a') e.preventDefault (); document.getElementById ('varsling'). classList.add ('hidden'););););Hvis du ikke har erfaring med JavaScript, kan denne koden være ganske overveldende. Selv om du er kjent, kan det fortsatt være ganske tidkrevende å produsere.
Ved å bruke uilang i stedet for rå JavaScript, for å oppnå samme ende skriver du ut en instruksjonserklæring som dette:
klikke på ".hide" legger til klasse "skjult" på "#notification" Som du kan se, er denne koden langt mer lesbar uansett hvilket nivå av erfaring du har. Dens enkle språklige tilnærming gjør det både lett å forstå og raskt å distribuere.
La oss ta en titt på hvordan uilang fungerer.
Det første trinnet med å bruke uilang er å laste ned den lille JS-filen som driver den. Du kan hente det via nedlasting lenke over på uilang.com.
Når du har lastet ned filen, laster du den inn i HTML-siden din med:
Du er nå umiddelbart klar til å begynne å bruke uilang med noe element på siden din.
Velg først målelementet, for eksempel en knapp, som du vil at uilang skal se og svare på når folk klikker på det. Deretter setter du en handling som vil legge til, fjerne eller bytte et klassenavn, og du bestemmer hvilket element du vil at denne handlingen skal gjelde for.
Pass på at du legger inn noen uilang-kommandoer i klikke på som så:
klikke på Deretter legger du til klassen eller IDen til elementet du vil målrette for å se etter klikk, innpakket i talemerker:
klikker på ".thisbutton" På dette stadiet kan du også velge å ha mer enn ett målelement sporet for klikk ved å legge til et komma og en annen klasse eller ID:
klikke på ".this, #thatbutton" Du har nå valg av tre handlinger å velge mellom; legger til klasse, fjerner klassen eller bytter klasse.
Sett inn handlingen som gjør hva du vil, etterfulgt av klassenavnet du vil legge til / fjerne / bytte:
klikke på ".this, #that", legger til klasse "popup" Til slutt legger du til ordet på etterfulgt av klassen eller ID-en (innen talemerker) av elementet du vil endre, det vil si elementet du vil legge til / fjerne / bytte til en klasse:
klikke på ".this, #that", legger til klasse "popup" på "#message" Du kan også bruke flere linjer og definere mer enn ett klikk handling om gangen:
klikker på ".thisbutton, #that" legger til klasse "popup" på "#message" klikker på ".otherbutton" legger til klasse "goesaway" på "#message" Hvis elementet du vil spore klikk på, er også elementet du vil legge til / fjerne / bytte klasser på, kan du bruke søkeordet mål i stedet for å skrive ut identifikatoren en gang, slik som:
klikker på ". animasjon" bytter klasse "play_anim" på "target" Det handler om å bryte opp vår raske demonstrasjon av uilang! Den beste måten å se hva det handler om, er å gå over til uilang.com og leke med live demoer der.
Også gitt er en transpiler du kan bruke til å plugge inn noen uilang kommandoer og se hva rett JavaScript er produsert som et resultat: transpiler.uilang.com.
Benjamin, utvikleren, har også utgitt et stykke på medium som beskriver filosofien bak uilang og hans mål om å bidra til å gjøre overgangen til å lære JavaScript enklere for andre enn det som var for ham.
Hvis du bare kommer inn i JavaScript og ser etter en mer intuitiv måte å overvinne de første hindringene, eller hvis du bare leter etter en strømlinjeformet metode for å håndtere klikk-interaksjoner, kan du prøve uilang i ditt neste prosjekt.
