Johdatus ohjelmointiin

Sorakuilu

DOM demo 1

Kohta A

Lataa itsellesi seuraavat kuvat (voit myös piirtää itsellesi sopivat):

Laadi www-sivu ja sijoita sen bodyyn seuraava koodi:

    <span id="field">
        Tee toivomus
	    <img src="star_off.gif">
	</span>

Tee funktio, jolla vaihdat kuvan vaihtamalla elementin sisältö kokonaan (innerHTML), kutsu toimintoa painikkeen klikkauksella.

Kohta B

Käytä tässä samoja kuvia kuin edellisessä kohdassa.

Vaihda kuvaa vaihtamalla elementin attribuutin arvoa (äsken vaihdoimme koko html-elementin sisällön). Kutsu toimintoa painikkeen klikkauksella.

Kohta C

Vaihda css-tyyliä, vaihda kaikkien kappaleiden (p) taustaväri

Kohta D

Vaihda css-tyyliä, muunna seuraava tekstikappale 14 pisteen vihreäksi Comic Sans MS:ksi

<p id ='text'>Teksti: JavaScript Harjoitukset</p> 

Kohta E

Kirjoita tämä teksti kappaleeseen (anna sille id) ja piilota se

Kohta F

Näytä äsken piilotettu elementti


Vastauksen lähdekoodi

html

<!DOCTYPE html>
<html lang="fi">
<head>
    <title>
        DOM demot 1
    </title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="domdemo1.js"></script>
</head>
<body>
    <h2>Kohta A</h2>
    <p>Valitsee elementin ja vaihtaa sen html-sisällön</p>

    <span id="tahti">
        Tee toivomus
        <img src="./kuvat/star_off.gif">
    </span>
    <button type="button" onclick="toivo()">Toivo!</button>

    <h2>Kohta B</h2>
    <p>Vaihda elementin attribuutin arvoa (attribuutti on src ja arvo kuva)</p>

    <button onclick="document.getElementById('kuvani').src ='./kuvat/star_on.gif'">Kirkasta tähteä!</button>

    <img src="./kuvat/star_off.gif" alt="tähti" id="kuvani">

    <button onclick="document.getElementById('kuvani').src ='./kuvat/star_off.gif'">Haalista tähteä!</button>


    <h2>Kohta C</h2>
    <p>Vaihda kaikkien kappaleiden (p) taustaväri</p>

    <button onclick="set_background()">Vaihda p taustaväri </button>

    <h2>Kohta D</h2>

    <p>Vaihda kappaleen id="teksti" ulkoasu: teksti 14 pistettä, vihreä, Comic Sans MS</p>

    <p id="teksti">Tämä teksti: JavaScript harjoituksia muutetaan</p>
    <div>
        <button onclick="js_style()">Tyylin vaihto</button>
    </div>


    <h2>Kohta E</h2>
    <p id="piiloon">Piilota elementti</p>

    <button onclick="document.getElementById('piiloon').style.display ='none'">Piilota teksti!</button>

    <h2>Kohta F</h2>
    <p>Näytä piilotetut elementit</p>

    <button onclick="document.getElementById('piiloon').style.display='block'">Näytä piilotettu elementti</button>

    <body>
</html>

JavaScript

function toivo()
{
    document.getElementById("tahti").innerHTML ='<img src="./kuvat/star_on.gif">';
}

function set_background()
{
    docBody = document.getElementsByTagName("body")[0];

    myBodyElements = docBody.getElementsByTagName("p");

    myp1 = myBodyElements[0];
    myp1.style.background = "rgb(255,0,0)";

    myp2 = myBodyElements[1];
    myp2.style.background = "rgb(255,255,0)";
}

function js_style()
{
    var text = document.getElementById("teksti");
    text.style.fontSize = "14pt";
    text.style.fontFamily = "Comic Sans MS";
    text.style.color = "green";
}