, javascript redskaber: jsbin,,,,, 35,,,,,,,,, 23,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, vi alle har været der.der er tider, hvor man blot ønsker at smide nogle javascript kode op og se, hvordan det fungerer.ja, du kunne gå igennem besværet af:,,,, at oprette en særlig fortegnelse, skabe en fil med fortjeneste, at den seneste version af din favorit biblioteker, downloade dem og med dem i din kode, skabe deres stylesheet, konfigureringen af din informationssamfundet, det ser ud som en frygtelig masse arbejde gør en simpel kode test.heldigvis er redskaber, der gør denne type arbejde, ligegyldigt.i denne lektion, jeg vil gerne tage et af mine yndlings - værktøjer til interaktive javascript testning, jsbin.,, for jsbin, som jeg nævnte tidligere, i mange tilfælde, du er simpelthen nødt til at prøve en lille gruppe af javascript kode.oprettelse af en hel udvikling miljø for en sådan anvendelse, i de fleste tilfælde betyder ikke meget mening, medmindre der er en klar afhængighed af hardware (f.eks. webrtc) eller afhængighed af en tredjepart api eller produkt, hvor skal du backend tjenester for at få adgang til information, hvad jsbin tilbud er en browser baseret på brugergrænseflade, hvor du kan træde:,, html avance, css, javascript,,...og få umiddelbar feedback baseret på din kode.desuden, du kan eventuelt omfatte en række populære rammer i din skærmen kode, som gør det muligt at skabe de rammer, som er kapacitet.den største fordel er den direkte feedback, du får fra opdateringer, du laver.lad os se på disse redskaber lidt nøjere, at få at vide, jsbin, jsbin blev oprettet og er aktivt fortsat respekteret udvikler remy sharp.idéen om at udvikle det kom fra behovet for at samarbejde med andre entreprenører, til javascript interaktivt ser kode.det er da modnet i en solid redskab, der tillader grupper:,, udviklere, at arbejde sammen for at løse koden problemer, fungerer som en slags bin, at entreprenører kan gå tilbage til reference, gør fælles kode og løsninger utrolig let, jsbin er også opensource licens i henhold til den liberale mit kørekort, således at ef - medlemmer til frit at bidrage til eller hvad med at skabe deres egne tilpassede løsninger. jsbin giver en enkel eu - erhvervsgrenen at pauser hver type kode i individuelle lodrette paneler.,,,, hvert panel indeholder en mini - ide, der giver dig mulighed for at træde ind i kode og få umiddelbar feedback via, output, panel.for eksempel, hvis jeg tilføje følgende kode til, html, panel, < div > rey bango < /div >, vil jeg straks se det nye element, og teksten gøre i produktionen, panel.,,,, men du kan tilføje antal elementer til tillægget, så du skabe en side hurtigt og interaktivt.at være i stand til at stil din - er lige så vigtigt, da det i nogle tilfælde, javascript du tester er der udtrykkeligt til at manipulere styles og css regler, der gælder for deres elementer.det er der, css panel kommer.det giver fuld css stil stand, så du kan layout din elementer til dine behov, selv at udnytte css3 regler.så tilføje følgende kode:, div (farve: rød; skrifttype: 20px tahoma, uden serif; grænse: 1px fast sort; bredde: 100px; margen: 30px; polstring: 10px og omdanne: roter (15deg); - webkit omdanne: roter (15deg)).giver følgende resultater:,,,, så langt, koden er blevet enkle, men jeg er nødt til at understrege, at det vigtigste her er ikke kompleksiteten af koden, men det faktum, at du er i stand til at modtage direkte feedback.jeg kan let tage sig mere kode, som den css overgange demo på mozilla udvikler netværk og tilføje, at i jsbin til at producere en tilsvarende virkning for min test - kode:, div (farve: rød; skrifttype: 20px tahoma, uden serif; grænse: 1px fast sort; bredde: 100px; margen: 30px; fyld: 10px; - moz overgang: bredde 2s, højde, 2s, baggrund, farve, 2s, - - ændre 2s - webkit overgang: bredde 2s, højde, 2s, baggrund, farve, 2s, - webkit omdannelse af 2s. - o-transition: bredde 2s, højde, 2s, baggrund, farve, 2s, - o-transform 2s; overgangen: bredde 2s, højde, 2s, baggrund, farve, 2s, omdannelse af 2s.} div: den {baggrund farve:&#ffcccc; bredde: 200px. højde: 200px, - - ændre: rådnespiste (180deg); - webkit omdanne: roter (180deg); - o-transform: roter (180deg) og omdanne: roter (180deg)},,,,, så længe jeg er mere specifikt sigte på javascript aspekt af jsbin, er det klart, at web - udviklere i almindelighed kan drage fordel af den interaktive karakter værktøj, med javascript, for mig er den vigtigste fordel af jsbin er evnen til at prøve javascript hurtigt.jeg er i stand til at piske op hurtigt og beskidt kode, jeg kan prøve og tilpasse den flue, uden at det er nødvendigt at dreje en hel arbejdsmiljø.ja, de fleste browsere give udvikler værktøjer, som tilbyder en konsol, hvor du kan gå hurtigt stumper, men de er endnu ikke nået til et punkt, hvor du kan interaktivt test store beløb i kode, endsige fastlægge supplerende skik - og på vej til produktionen., jsbin er, javascript panel er, hvor du er i stand til at definere deres skik javascript kode.som forventet, at du har fuld adgang til sprog samt dom api - støttet af browseren.det betyder, at når jeg skriver:, var mydiv = dokument. queryselector ("okay"); mydiv.innerhtml = "foo", det:,, tillader mig at skabe en lokal variabel, giver adgang til, div. element, jeg skabte i, html, panel, ændrer element er indhold, resultaterne er umiddelbar, der tillader mig at ser som jeg skriver koden, har adgang til almindelig ole javascript er stor, men det er meget almindeligt at bruge en javascript utility bibliotek, som jquery eller en fuldstændig ramme som glød til abstrakt kompleksiteten af kors - udvikling eller skabe app som erfaringer i browseren.jsbin behandler dette ved at give dig til at omfatte de fleste af de populære biblioteker i din test., at klikke på tilsættes bibliotek, menu mulighed omfatter en lang liste over støttede biblioteker, der kan injiceres i din jsbin projekt.hvad det betyder er, skaber en, manuskript, et i din kode, der trækker javascript fil fra et cdn.udvælgelse af ", jquery 2.0.2" fra listen giver følgende:, < manuskript src = "http: //ajax. googleapis. kom /ajax /libs /jquery /2.0.2 /jquery. min.js" > < /manuskript > < meta - charset = utf - 8 />.mens udvælgelsen af rygraden tilføjer følgende:, < manuskript src = "http: //documentcloud. github. io /understreger /underscore-min.js" > < /manuskript > < manuskript src = "http: //documentcloud. github. io /rygrad /backbone-min.js" > < /manuskript >, hvor jsbin anvender forskellige cdns baseret på hvor filerne er til rådighed.de fleste af de store navn projekter er opført, herunder:,, jquery, dojo, modernizr, bootstrap,,...og mange flere., idet det i jquery giver mig fuld adgang til alle biblioteker "fremragende hjælper metoder og muligheder.jeg kan gå over til at bruge sin søde, lakoniske api - adgang til dom elementer og fastsætte værdier i et pænt lænket linje kode: $("okay"). tekst ("foo"), eller jeg kan tage det lidt længere og afprøve en ajax anmodning til flickr er api til at trække sig tilbage json data og gøre billeder baseret på: (function() {var flickerapi = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback =? "og $. getjson (flickerapi (tags: "mount rainier", tagmode: "enhver", format: "json"}). (funktion (data) {%. hver (data.items, funktion (- punkt) {$(< img > "). attr (" src ", punkt. medier. m). appendto (" okay "); hvis (i = = = 3) {tilbage falske}})})}) (), den kode ovenfor ville gøre som følger:,,,,, at den fulde effekt af disse biblioteker og rammer virkelig åbner afprøvning scenarier, som du kan fælde med jsbin.jeg gentager, at dette er en liste over de mest populære biblioteker og rammer til rådighed og klart, en niche, der vil ikke være på listen.hvis du har brug for at føje deres egen tradition, bibliotek, dokumentation viser, hvordan kan du sige det selv, supplerende elementer og ressourcer, finder jeg jsbin uvurderlige for mit skrivebord udvikling og som jeg vagt til at fokusere på mobile anordninger, er jeg glad for at se, at jeg vil være i stand til at fortsætte med at bruge det til at teste på disse anordninger samt.som i version 3, jsbin har indarbejdet et træk, kaldet "bor gøre", der fungerer som en overgang på tværs af flere forbundne udstyr.disse anordninger ikke eksplicit forbundet, men i stedet, gearing, en specifik url, som giver dem mulighed for at gøre det i det væsentlige resultater på samme tid.kan du se dette element i aktion i følgende video. et andet vigtigt aspekt er evnen til at skabe deres egen jsbin konto, hvor du kan redde dine kasser for fremtiden og udveksling.registrering er enkel, og man kan endda gearing, din github kvalifikationer via github er oauth funktioner.,,,, nøglen til fordel for registrering, er evnen til at holde en historie af kasser i skabe, så du kan tage dem senere, for virkelig at få en fornemmelse for den fulde bredde af funktioner, der tilbydes af jsbin opfordrer jeg du skal gå til remy er youtube - kanal for jsbin, hvor han har gjort et godt stykke arbejde med at skabe pædagogiske videoer undersøger alle de fremragende egenskaber af tjenesten.det er også en stor opgave for fao på fælles spørgsmål., jsbin er en af mine mest værdifulde redskaber, jeg har fundet til javascript udvikling.den kendsgerning, at det er en fri og åben kilde er det ligetil at tilføje en værktøjskasse.og det fortsatte tilsagn om at tjenesteydelsen er prisværdig.alt dette tilsammen gør det nemt for mig at sprede budskabet om sådan et godt redskab.