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 ja aloittaan kyseisen sivukokonaisuuden ensimmäisen version muokkaamisen. Muokkaukset tallentuvat automaattisesti palvelimelle ja samaa työtä pääsee jatkamaan menemällä selaimella uudelleen samaan osoitteeseen.</p>
  <a href="javascript:;" class="nappi" id="nappula1">Paina!</a>
</body>
</html>
 
body {
  background: #cdf;
  margin: 0;
}
​
p {
  margin: 0.5em 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