Keskustelu: Nettisivujen teko: javascript kysymys

Vasta_alkaja [24.06.2009 23:16:23]

Hei,

Täällä taas javascript vinkkejä ruinaamassa :)

Mietin vain tässä miten tekisin javascript:tillä seuraavanlaisen toiminnallisuuden. Minulla olisi esimerkiksi lista-elementillä tehty lista tuotteet.

<ul>
 <li> Makkara </li>
 <li> Peruna </li>
 <li> Mehu </li>
</ul>

Painaessani esimerkiksi kohtaa Peruna, siirtyisi peruna <textareaan>. Sen jälkeen kirjoittaisin sinne, että mätähän tuo oli ja tarvitsisin vielä mehua. Tässä vaiheessa painaisin kohtaa mehua ja mehu siirtyisi vielä sanan perään.

Eli document.wrieillahan tämä menee, mutta miten sen tekisi helpoiten.

Kannattaako minun aina painaessasi jotain elementtiä, kerätä textareassa olevat tiedot erilliseen muuttujaan, lisätä teksti sen loppuun ja liittää se taas textareaan, vai miten tämä olisi helpoiten toteutettavissa ilman sivun latausta?

tsuriga [25.06.2009 00:26:54]

Document.writeä ei nykyään suositella käytettävän enää mihinkään ^{(citation needed)}, käytämma sen sijaan DOMia. Sido listaelementteihin funktio, joka lisää textarean nykyiseen arvoon painetun elementin sisältämän tekstin.

Avainsanat: events, selectors, manipulation

Teuro [26.06.2009 12:15:48]

<script type="text/javascript">
function lisaa(elementti){
	document.getElementById("teksti").appendChild(document.createTextNode(elementti.innerHTML));
}
</script>
</head>
<body>
<ul>
<li onclick="lisaa(this)">Pottu</li>
<li onclick="lisaa(this)">Porkkana</li>
<li onclick="lisaa(this)">Sipuli</li>
</ul>
<textarea id="teksti" cols="60" rows="6"></textarea>

tsuriga [26.06.2009 12:28:30]

Sama jQueryllä:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript">

$(document).ready(function() {
  $("li").click(function () {
    $("#ostoslista").append($(this).text());
  });
});

  </script>
 </head>
 <body>
  <ul>
   <li>Maito</li>
   <li>Peruna</li>
   <li>Silli</li>
  </ul>
  <textarea id="ostoslista"></textarea>

Vasta_alkaja [27.06.2009 12:21:38]

Mietin vain sitä, että kuinka herkästi itse kukin tekee. esim.. näin pienen ominaisuuden jQueryllä, jos olettaa, että ei enää muuhun tarvitse sitä koskaan kyseisessä paikassa. Onko järkeä ladata apukirjasto vain tämän ominaisuuden takia vai kannattaako tehdä se ilman jQueryä. Kuinka paljon apukirjasto hidastaa sivustoa? Tuskin kovinkaan paljon?

tsuriga [27.06.2009 17:31:40]

Hyvä kysymys. Testailin ja vertailin tässä päivän mittaan: ensimmäisellä latauksella sivun lataus kesti jQueryn kanssa noin 200-300ms pidempään kuin ilman. Gzipattuna jQuery v1.3.2 tuo sivun kokoon lisää 20kB. Tuon kun cachettaa niin en uskoisi sen koituvan sivustolla pullonkaulaksi.

Valmiista kirjastoista on se hyöty, että niiden valmiita toimintoja käyttämällä saadaan helposti aikaiseksi tuki useammalle selaimelle pienellä vaivalla. Osa tässäkin keskustelussa esitetyistä koodinpätkistä ei luultavastikaan toimi (samoin) kaikilla selaimilla ilman selainkohtaisia korjauksia.

Vasta_alkaja [27.06.2009 23:17:59]

Teuro kirjoitti:

<script type="text/javascript">
function lisaa(elementti){
	document.getElementById("teksti").appendChild(document.createTextNode(elementti.innerHTML));
}
</script>
</head>
<body>
<ul>
<li onclick="lisaa(this)">Pottu</li>
<li onclick="lisaa(this)">Porkkana</li>
<li onclick="lisaa(this)">Sipuli</li>
</ul>
<textarea id="teksti" cols="60" rows="6"></textarea>

tämä toimi muuten loistavasti, mutta jos kirjoitin itse kenttään jotain niin onclick funcktio ei enää toiminut. Mistähän tämä voisi johtua?

tsuriga [28.06.2009 07:07:58]

Hyvä huomio, mikään esimerkeistä ei toimi odotetulla tavalla Fx3:lla. IE6:lla kylläkin, mutta se lisäsi automaagisesti välejä tekstikenttään (solmujen välille?). Ongelma liittynee jotenkin noihin nodeihin. Seuraava toimii halutunlaisesti:

_{ilman apukirjastoa}

window.onload = function() {
    var lis = document.getElementsByTagName('li');
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function() {
            document.getElementById('textarea').value += this.firstChild.nodeValue;
        };
    }
};

_{w/ jQuery}

$(document).ready(function() {
  $("li").click(function () {
    $("#textarea").val($("#textarea").val() + $(this).text());
  });
});

EDIT: Lisäsin edellisen viestin loppuun vielä unohtuneen seikan valmiiden kirjastojen käytön eduista.

Vasta_alkaja [29.06.2009 00:11:54]

Kiitoksia. nämä selainkohtaiset erot ovat ikuinen riesa, joten taidanpa ottaa suosiolla kirjaston käyttöön. Helpottaahan se muutenkin elämää :)

Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku

Tehtävät