Noe jeg er ganske begeistret med Dart, som noen kommer fra Javascript, er muligheten til enkelt å importere og bruke annen kode inn i prosjektet. Den første blokken av vår standardkoden bruker en enkelt import uttalelse:
#import ('dart: html');

Dette importerer en innebygd Dart bibliotek, en som omhandler spesifikt med HTML-sider og gir oss tilgang til DOM manipulasjon funksjonalitet. Vi kommer til å importere andre bibliotek som vi trenger dem, inkludert en som vi skal skrive selv.

Når vår Dart Prosjektet er utarbeidet for å Javascript, er alle de uensartede Dart kode konvertert og sammensatt i en enkelt Javascript fil. Det er smart nok til å ikke inkludere det samme biblioteket to ganger, slik at du kan importere biblioteker fra andre filer og ikke bekymre deg for dem i konflikt med eller duplisere kode i det endelige produktet.

Vår DartMarquee.dart filen skal se omtrent slik ut nå:
#import ('dart: html'); klasse DartMarquee {DartMarquee () {}} funksjonen main () {new DartMarquee ();}

La oss endelig skrive kode. Vi kommer til å legge et mål eiendom til DartMarquee klassen, slik at hoved HTML element som vi refererer er nyttig innenfor klassen.

Like etter klasse erklæring, og før konstruktøren, legge til en Eiendommen som så:
klasse DartMarquee {Element _target; DartMarquee () {}}

Legg merke til syntaksen her: i stedet for var, bruker vi en datatype til både deklarere en variabel og gi den en datatype på en gang. Denne syntaksen minner om C og Java. Navnet på vår eiendom er _target, og linjen avsluttes med et semikolon. Du vil finne Dart mye mindre tilgivende om manglende semikolon.

En interessant ting om Dart type system er at det er valgfritt. Hvis du angir en type, vil Dart gjøre hva den kan for å holde seg til å skrive regler. Men vi kan også velge å forlate å skrive ut ved å skrive at eiendom som dette:
Var _target;

Dart vil da ikke forsøke å holde typer safe; vil du ha en dynamisk skrevet variabel akkurat som i Javascript. Hva er enda mer interessant enn det faktum at det er valgfritt, er at du kan blande sterk og dynamisk typing i samme kode.

Personlig, sterk typing er en av de tingene som trekker meg til Dart, som det er nyttig å ha den slags ansvarlighet. Dette vil være siste gang jeg nevner dynamisk typing i Dart.

Vi er ikke ferdige med denne egenskapen ennå. Dette er en viktig egenskap, så la oss sette den i konstruktøren.
klasse DartMarquee {Element _target; DartMarquee (this._target) {}}

Dette kan se litt uventet. Dette er en Dart idiom; det er så vanlig for en konstruktør å motta argumenter, og så bare bruke konstruktøren kropp å stash disse verdiene inn i egenskaper, som Google opprettet en snarvei

Normalt ser en metode parameter som du forventer det til.: alle variabelnavn vil gjøre, men ikke noe som ser ut som en eiendom på et annet objekt. Disse parameterne er normale parametere som du er vant til; de er tilgjengelige ved navn i kroppen av metoden.

Denne nye syntaks, men vil gå videre og tildele verdi sendt inn til denne parameteren til eiendommen utpekt av parameternavnet. Med andre ord, er koden ovenfor identisk med denne koden:
DartMarquee (mål) {this._target = målet;}

Bare vi slipper å skrive at standardtekst av en linje
Merk at denne snarveien er kun tilgjengelig i konstruktører

Nå som vi har et mål eiendom satt opp, må vi gi det en verdi. Tilbake i den viktigste funksjonen, må vi velge telt < div > og passerer det i til konstruktøren.

Dart gir en metode for å finne HTML-elementer av CSS utvalg, mye som jQuery eller noen av de populære Javascript-biblioteker gjøre. Dette er levert av at dart. Html bibliotek importert på toppen av filen, som også gir en topp-nivå dokumentet variabel som gir oss global tilgang til HTML-dokumentet

Oppdater den viktigste funksjonen til å se slik ut :
void main () {new DartMarquee (document.query ('# telt'));}

Det er så enkelt: Hvis du har brukt jQuery (eller et annet bibliotek), bør dette være ganske kjent. Bare ring document.query og passere i velgeren. Dart gjør resten

Hvis du har utviklet med Javascript, er sjansene du har gjort mye bruk av console.log å teste og verifisere koden din. Dart gir en utskriftsfunksjon som, når kompilert til Javascript, slår inn til en samtale for å console.log. La oss prøve det ut, og teste vårt prosjekt så langt på samme tid.

I DartMarquee konstruktør, la oss skrive ut _target eiendommen for å sørge for at det blir satt.
DartMarquee (this._target) {print (this._target);}

Og treffer Run. I nettleseren din, åpne opp konsollen og du skal se omtrent slik ut:

Legg merke til at på den tiden dette ble skrevet, er det en feil med Dart Editor som genererer en advarsel som sier at "print" er ikke en fremgangsmåte. Dette følges av Google, og vil trolig bli fikset snart, om ikke av den tiden du leser dette. Men hvis du ser den advarselen, bare overse den; det fortsatt kompilerer fint. Dette er et eksempel på blødning kanten som Dart står; utskrifts advarselen var ikke skjer når jeg begynte å skrive denne opplæringen, er det bare skjedd med den nyeste bygg av Editor (build 5104)

Vi kommer for å skape den nødvendige HTML-elementer programmatisk, og plassere dem i vår målgruppe < div >. Dart gir et veldig rent API for denne type oppgave.

Først, la oss lage noen flere egenskaper for å holde noen av elementene. Legg disse rett under den første egenskapen du la til:
klasse DartMarquee {Element _target; DivElement _mainImage; DivElement _thumbContainer; DartMarquee (this._target) {

Legg merke til hvordan vi bruker understrek som prefiks? Ikke bare dette en vanlig konvensjon når navngi private eiendommer, er det faktisk idiomatisk Dart. En understrekning prefiks gjør eiendommen (eller metode, eller klassen selv) private. Ellers er det offentlig.

Legg også merke til hvordan vi har skrevet dem som DivElement? En annen fin funksjon av Dart (som minst for web) er at det gir klasser for de enkelte HTML-elementer, i motsetning til den mer generell tilnærming vanligvis tatt i Javascript. Resultat er at enkelte elementtyper har de riktige egenskapene, så det er lett å manipulere dem med Dart. For eksempel, Image har en src eiendom som kan være trygt og enkelt nås direkte med Dart å endre bildets kilde.

La oss nå lage disse elementene. I konstruktøren:
DartMarquee (this._target) {_mainImage = new Element.tag ('div'); _mainImage.classes = ["mainImage"]; _thumbContainer = new Element.tag ('div'); _thumbContainer.classes = ["thumbContainer"]; target.nodes.add (_mainImage); target.nodes.add (_thumbContainer);}

Det er mye som skjer her; la oss bryte det ned.

Først lager vi en ny DivElement. Men legg merke til at vi ikke skrive ny DivElement som du kan forvente (og tro meg, jeg forventet det, og fortsatte å forvente at for en god stund før jeg oppdaget riktig teknikk). Selv om DivElement er en klasse, det har ikke en konstruktør som du kan få tilgang til. I stedet bruker du en oppkalt konstruktør
på Element klassen for å skape et element av en bestemt type.

Navngitte konstruktører er bare forskjellige konstruktører (type som metode overbelastning, men det er egentlig ikke så ) som kan gi et annet grensesnitt til konstruksjonen. I dette tilfellet, kan vi angi ved strengtypen element. Du kan også skrive nye Element.html ('< div > ... < /div >'); å skrive ut HTML i string format. To ganske ulike tilnærminger, så vi har to konstruktører.

Når vi har vår _mainImage DivElement, vi setter sin klasse. Elementet klasser egenskap som lar oss få tilgang til de ulike klassene som kan anvendes. I dette tilfellet er det et helt nytt element, slik at eiendommen er tom. Vi setter den til en enkelt klasse navn, "mainImage".

Du kan forvente klasser for å være en Array (eller List, i Dart språkbruk), men det er faktisk en Set. Et sett er lik en Array i at det er en samling av uavhengige verdier, men den største forskjellen er at samlingen er uordnet
; det er ingen garanti for at rekkefølgen på de inneholdt verdier vil være noe spesielt, eller til og med den samme hver gang. Dette har en liten forgrening i hvordan vi jobber med klasser eiendommen, men for nå er det en enkel tilordning til det som ser ut som en Array inneholder en enkelt streng.

De neste to linjene gjentas nesten ordrett, bortsett fra at vi kan dess tildele _thumbContainer eiendom, og tildele en annen klasse.

De siste to linjene legge disse nye elementene til DOM, spesielt til målet div. Som du kan se, er det en noder eiendom på Element, som som du forventer er en liste over underordnede elementer. Å være en liste (eller Array), kan vi bare legge til (ligner på Javascript push) et element i den. Og på dette punktet, er elementene i DOM

Gå videre og kjøre prosjektet igjen.; fordi vi har lagt klasser til den nye < div > s, og vi har vår CSS-filen klar til å gå, bør du se en liten endring til side: