Johdatus ohjelmointiin

Sorakuilu

Sisältö

  1. Orientaatio
  2. Työvälineet ja ympäristö, Javascriptin kirjoittaminen
  3. Muuttujat, tietotyypit ja operaattorit
  4. Ehtolauseet, boolean
  5. Funktiot (lohkot)
  6. Taulukot ja toistorakenteet
  7. Olioista, perusteet
  8. Osa 8, DOM, perusteita
  9. Osa 9, DOM, lomakkeet, listat
  10. Osa 10, JSON, perusteita

Osa 9. Lomakkeet, listat ja DOM

Jos elementillä on lapsia

Usein luetaan elementtejä, joilla on luonnollisesti olemassa lapsia (esim. table, ul, li, form).

Elementti voidaan tällöin sijoittaa muuttujaan ja lapsia voidaan kutsua samaan tapaan kuin taulukoiden elementtejä kutsutaan.

Mahdollisia vaihtoehtoja:

Lista

Esimerkki: ohjelma lukee listan elementit yksitewllen ja antaa niille ensin sisällön. Sen jälkeen se muuttaa silmukalla kaikkien css-luokan.

    

<h1>Minä</h1> <ul> <li>Lempinimi: </span> <li>Suosikit: </span> <li>Kotipaikka: </span> </ul> <script> document.body.style.fontFamily = 'Arial, sans-serif'; document.getElementById('nickname').innerHTML = 'Leevi Kettu'; document.getElementById('favorites').innerHTML = '35'; document.getElementById('hometown').innerHTML = 'Roi City'; var items = document.getElementsByTagName('li'); for (var i = 0; i < items.length; i++) { items[i].className = 'listitem'; } </script>

Lomake

Lomakkeella saadaan käyttäjän syötteet (input) www-järjestelmässä.

JavaScriptin DOM-metodit mahdollistavat lomakkeen lukemisen, muokkaamisen ja täyttämisen.

Lomake on olemassa

Kun lomake on olemassa html-merkkauksessa, saat luettua sen tietoja muuttujaan:

var x = document.getElementById("myForm"); <form id="myForm"> First name: <input type="text" name="fname" value="Donald"> <br> Last name: <input type="text" name="lname" value="Duck"> <br> <input type="submit" value="Submit"> </form> <script> function haeArvot() { var x = document.getElementById("myForm"); document.getElementById("demo").innerHTML = x["fname"].value +" "+ x["lname"].value; } </script> <p id="demo"> </p> <button onclick="haeArvot()">Hae lomakkeen arvot </button> </script>

Lomaketta ei ole dokumentissa, luodaan uusi

Lomakemuuttujan luominen

    

var x = document.createElement("FORM");

Lomakkeen ja inputin luova funktio

    

function myFunction() { var x = document.createElement("FORM"); x.setAttribute("id", "myForm"); document.body.appendChild(x); var y = document.createElement("INPUT"); y.setAttribute("type", "text"); y.setAttribute("value", "Donald"); document.getElementById("myForm").appendChild(y); }

Koko HTML-sivu, joka kutsuu funktiota

    

<!DOCTYPE html> <html> <head> <title>DOMdemo</title> <meta charset="UTF-8"> <script> function myFunction() { var x = document.createElement("FORM"); //luodaan lomake x.setAttribute("id", "myForm"); //annetaan lomakkeelle id document.body.appendChild(x); //lisätään lomake dokumentin lapseksi var y = document.createElement("INPUT"); //luodaan uusi input y.setAttribute("type", "text"); // annetaan inputille tyyppi y.setAttribute("value", "Donald"); //annetaan inputille arvo document.getElementById("myForm").appendChild(y); //lisätään input lomakkeen lapseksi } </script> </head> <body onload="myFunction()"> </body> </html>