Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <h1>Viikon VALO: JS Bin</h1>
  <p class="introduction">JS Bin on web-pohjainen ympäristö, jolla voi nopeasti kokeilla HTML-koodista, CSS-tyyleistä sekä Javascript-tiedostoista koostuvaa kokonaisuutta.</p>
  <p>JS Bin on avoimen lähdekoodin palvelinohjelmisto, jota voi käyttää www-tekniikoiden opetteluun, opettamiseen, harjoitteluun sekä kokeilemiseen web-pohjaisesti selaimella. Sitä on mahdollista käyttää <a href="http://jsbin.com">jsbin.com</a>-palvelussa tai vaihtoehtoisesti sen voi asentaa omalle koneelle tai palvelimelle.</p>
  <p>Palvelun toimintaideana on, että näyttö on valinnan mukaan jaettu korkeintaan viiteen palstaan, joissa ovat nähtävillä tai muokattavissa <strong>HTML</strong>-koodi, <strong>CSS</strong>-tyylisäännöt, <strong>Javascript</strong>-ohjelmakoodi, interaktiivinen Javascript-<strong>konsoli</strong> sekä näistä muodostuvan www-sivun sisällön näyttävä <strong>Output</strong>-näkymä. Kunkin sarakkeista voi kytkeä päälle tai pois näkymän yläreunassa olevilla nappuloilla. HTML-koodin ja CSS-tyylien muokkaaminen päivittävät tulostussarakkeen sisältöä välittömästi. Javascript taas suoritetaan valinnan mukaan joko jokaisen päivityksen yhteydessä automaattisesti taikka vasta nappia painamalla.</p>
  <p>Uuden JS Bin -istunnon aloittaminen luo palveluun uuden tähän istuntoon viittaavan osoitteen, esimerkiksi <a href="http://jsbin.com/ohevev/1/edit">http://jsbin.com/ohevev/1/edit</a> ja aloittaan kyseisen sivukokonaisuuden ensimmäisen version muokkaamisen. Muokkaukset tallentuvat automaattisesti palvelimelle ja samaa työtä pääsee jatkamaan menemällä selaimella uudelleen samaan muokkausosoitteeseen. Nykyisen version pystyy lukitsemaan, jonka jälkeen muokkaaminen tapahtuu seuraavalla versionumerolla. Versionumero on aina nähtävissä sivun osoitteessa. Osoitteen voi myös jakaa muille käyttäjille nähtäväksi katseluversiona (esimerkiksi <a href="http://jsbin.com/ohevev/2/watch">http://jsbin.com/ohevev/2/watch</a>), joka päivittyy reaaliaikaisesti sitä mukaa kun muokkausversiota päivitetään. Sivusta voi jakaa myös vain valmiin tuloksen näyttävän näkymän (esimerkiksi <a href="http://jsbin.com/ohevev/2">http://jsbin.com/ohevev/2</a>). Esillä olevasta työstä voi myös tehdä itselleen kloonin, joka on kopio alkuperäisestä työstä uudella osoitteella. Tätä ominaisuutta voi käyttää esimerkiksi opetuksessa antamalla opiskelijoille linkin alkuperäiseen tehtävänantona toimivaan sivuun ja käskemällä opiskelijoita kloonaamaan sen itselleen ja tekemään omaan versioonsa käsketyt tehtävät.</p>
  <p>Muokattavaan sivuun voi pudotusvalikosta lisätä yleisimpiä Javascript-kirjastoja. Listassa ovat valittavina muun muassa jQuery, jQuery-ui, jQuery Mobile, Bootstrap, Prototype ja MooTools. Sivuun voi toki lisätä script-tagilla viittauksen myös mihin tahansa muuhun kirjastoon. HTML-, CSS- ja Javascript-palstoilla on lisäksi valittavissa asetus, missä muodossa niiden sisältö syötetään. HTML-palstaan on mahdollista syöttää puhtaan html-tekstin sijasta myös Markdown-syntaksilla kirjoitettua tekstiä, jossa esimerkiksi listat on merkitty rivin aloittavalla tähdellä. Sisältö on mahdollista kirjoittaa myös Jade-kielellä. Tyylit on myös mahdollista kirjoittaa normaalin CSS-kielen sijasta LESS- tai Stylus-kielellä. Javascript voidaan puolestaan korvata CoffeeScriptillä taikka muutamalla muulla Javascriptiksi käännettävällä kielellä. Vaihtoehtoisilla kielillä kirjoitetut sisällöt, tyylit sekä ohjelmakoodit on mahdollista muuntaa kirjoittamisen jälkeen html-, css- ja Javascript-koodiksi.</p>
  <p>JS Bin tukee myös syntaksin korostusta sekä Zen Coding -lyhenteiden käyttöä.</p>
  <a href="javascript:;" class="nappi" id="nappula1">Paina!</a>
</body>
</html>
 
body {
  background: #cdf;
  margin: 0;
}
​
p {
  margin: 0.7em 0.8em;
}
​
p.introduction {
  font-weight: bold;
}
​
a.nappi {
  display: inline-block;
  padding: 0.5em;
  margin: 0.1em 0.5em;
  text-align: center;
  text-decoration: none;
  color: black;
  font-weight: bold;
  text-shadow: -1px -1px 1px rgba(0,0,0,0.3), 1px 1px 1px rgba(255,255,255,0.5);
  min-width: 8em;
  border: 1px solid #333;
  border-radius: 0.5em;
  box-shadow: inset 1px 1px 1px gold;
  background: rgb(254,252,234); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,252,234,1)), color-stop(100%,rgba(241,218,54,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
​
}
​
h1 {
  font-family: serif;
  font-size: 280%;
  color: gold;
  text-shadow: -1px -1px 2px rgba(0,0,0,0.8), 1px 1px 2px rgba(255,255,255,0.5);
  padding: 0.2em 0.5em;
  box-shadow: 0 7px 7px rgba(0,0,0,0.5);
background: rgb(135,224,253); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,224,253,1)), color-stop(40%,rgba(83,203,241,1)), color-stop(100%,rgba(5,171,224,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
}
 
$(function(){
  $('a#nappula1').click(function(){
    alert('Viikon VALO #116 on JS Bin');
  });
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers