jsFiddle: Online-leikkipaikka JavaScriptille, HTML: lle, CSS: lle

Jokainen kehittäjä on ollut tilanteessa, jossa sinulla on koodi tai malli, joka sinun on testattava nopeasti ja mahdollisesti jaettava muiden kanssa. jsFiddle on täydellinen ratkaisu; se tarjoaa mukautetun ympäristön (käyttäjän valintojen perusteella), jotta voit testata (tai vihata) JavaScript-, HTML- ja CSS-koodiasi selaimesi sisällä. Nopea kiertue jsFiddle antaa sinulle paremman käsityksen siitä, mitä se tarjoaa ja miksi sinun pitäisi käyttää sitä.

JsFiddle-ympäristö

Käynnistäminen ja käyttö jsFiddle-sovelluksen kanssa on nopeaa kuin kirjoittaa sen osoite selaimeesi. Kun sivusto latautuu, sinulle annetaan sivu, joka on jaettu eri osioihin. Sivun vasen osa on valikkoalue, jolla voit määrittää jsFiddle-ympäristön. Sivuston pääosa (oikealla) on jaettu neljään osaan:

  • CSS: Kirjoita CSS, jota käytetään testissäsi käytettyyn HTML-koodiin. Se sijoitetaan elementin väliin sivun otsikkoosassa.
  • HTML: Tällä alueella voit kirjoittaa HTML-koodin testissä käytettäväksi. Oletuksena se näkyy sivun elementtien välillä, paitsi jos vasemman ruudun vaihtoehdot korvaavat sen. Se toimii suoraan niiden alueille syötettyjen CSS: n ja JavaScriptin kanssa. Elementteihin syötetty JavaScript voidaan kirjoittaa myös tähän.
  • JavaScript: JavaScript-lähde on syötetty tälle alueelle. Se näkyy sivun otsikkoosan tunnisteissa. Vasemmalla puolella olevien asetusten avulla voit valita, mitä kirjastoja / kehyksiä käytetään, joten tämän osan koodin ei tarvitse sisältää niitä.
  • Tulos: CSS: n, HTML: n ja JavaScriptin suorittamisen tulokset tulivat sivun osiin.
Kuvassa A on jsFiddle, joka on ladattu Internet Explorer 9: ään tyhjillä koodiruuduilla. Kuvio A

JsFiddle-sivuston oletusliitäntä (napsauta kuvaa suurentaaksesi.)

Työskentely jsFiddle-käyttöliittymän kanssa

JsFiddle: n käyttöönotto on yhtä helppoa kuin sivuston lataaminen ja koodin syöttäminen sivun asianmukaisille alueille. JsFiddle-käyttöliittymä tarjoaa runsaasti ominaisuuksia, jotka auttavat kehitystäsi. Sivun yläosa sisältää rivin painikkeita joidenkin näiden ominaisuuksien käyttämiseksi. Nämä painikkeet sisältävät:

  • Suorita: Suorittaa sivun alueille syötetyn koodin ja näyttää tulokset tulostusalueella.
  • Haarukka: Luo uuden esimerkin käyttämällä perustana nykyistä koodia.
  • Reset: Poistaa kaikki jsFiddle-käyttöliittymän alueet.
  • TidyUp: Puhdistaa JavaScript-koodisi sisennämällä koodilohkoja.
  • JSLint: käyttää JSLint-työkalua staattisen koodianalyysin suorittamiseen koodin sivun JavaScript-alueelle.
  • Jaa: Voit jakaa koodin jsFiddle-sivulta muiden käyttäjien kanssa. Vaihtoehtoja ovat Facebook ja Twitter, se ja linkki ja koodi upottaakseen ne verkkosivustolle (esimerkiksi blogiin).

JsFiddle-käyttöliittymän vasemmassa ruudussa voit määrittää kehitysympäristön. Seuraavassa luettelossa on esimerkki käytettävissä olevista ominaisuuksista:

  • JavaScript-sijoittelu: Ensimmäinen pudotusvalikko määrittelee, missä JavaScript-koodi sijoitetaan ja suoritetaan. Oletusasetus on onLoad, mikä tarkoittaa, että se suoritetaan verkkosivun onLoad-tapahtuman kautta. Muita vaihtoehtoja ovat sen sijoittaminen sivun otsikkoon tai runkoon.
  • JavaScript-kirjasto: Toisessa pudotusvalikossa voit käyttää yhtä monista JavaScript-kehyksistä, jotka sisältävät MooTools, jQuery, Prototype, YUI ja paljon muuta. Se tukee myös näiden työkalujen erilaisia ​​versioita, joten testausvaihtoehtoja on rajattomasti. Tämä on hieno ominaisuus, koska voit pelata näiden kirjastojen kanssa lataamatta ja määrittämättä omaa ympäristöäsi.
  • Paneelit: jsFiddle-käyttöliittymä sisältää kolme koodialuetta, mutta CSS- ja JavaScript-alueille on vaihtoehtoja. Voit käyttää SCSS: ää CSS: n sijaan ja käyttää CoffeeScriptiä JavaScriptin sijasta.
  • Tiedot: Kirjoita otsikko ja kuvaus, jotka ovat tärkeitä tallennettaessa / jakaessasi. Lisäksi voit määrittää käytetyn kehotunnisteen ja DTD: n.
  • Esimerkkejä: Tämän valinnan avulla on helppo nousta ja käyttää työkalua, jotta saat käsityksen sen ominaisuuksista ja käytöstä.
JsFiddle-käyttöliittymän tarjoamien monien ominaisuuksien ansiosta se on merkityksellinen melkein kaikille Web-sovelluskehittäjille. Kuva B esittää yhtä esimerkkejä - viivästynyt hiiren seuranta -, joka käyttää Processing.js-kirjastoa. Lisä HTML ja CSS on lisätty. Kuvio B

Yhden jsFiddle-sovelluksessa saatavilla olevan esimerkin käyttäminen (Napsauta kuvaa suurentaaksesi.)

Web-leikkipaikka

JsFiddle-sivusto merkitsee sitä Web-leikkipaikkana, enkä voi ajatella parempaa otsikkolinjaa, koska:

  • sen avulla kehittäjät voivat viulua Web-kehityksen kolmella keskeisellä elementillä (CSS, JavaScript ja HTML);
  • se käsittää verkon sosiaalisen elementin tekemällä siitä helpon jakamisen; ja
  • se näyttää täydelliseltä paikalta vastata näihin haastaviin kehityskysymyksiin ja jakaa tulokset nopeasti - sinun ei tarvitse luoda romuprojekteja tai tiedostoja.

Tämä on isännöity sovellus, joten suorituskyky voi heikentyä huipputason käytön aikana. Tämä ei ole aiheuttanut minulle ongelmia, mutta toivottavasti enemmän taustaresursseja (eli palvelimia) on saatavana, kun jsFiddle-käyttö lisääntyy. JsFiddle-blogin avulla voit pysyä ajan tasalla näistä asioista.

Katso jsFiddle tänään, ja näet sen voiman nopeasti prototyyppien määrittämistä ja testaamista varten.

Pidä insinööritaitosi ajan tasalla kirjautumalla TechRepublicin ilmaiseen Software Engineer -uutiskirjeeseen, joka toimitetaan joka tiistai.

© Copyright 2020 | mobilegn.com