Efterlyser små sjove øvelser

Her kan du få hjælp og stille spørgsmål til JavaScript!
Besvar
cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:
Efterlyser små sjove øvelser

Indlæg af cristian » 28. sep 2014, 16:56

Så her i weekenden trængte jeg til at komme lidt væk fra Java, og komme midlertidig tilbage til noget let scripting.
Så tog fat i min JavaScript bog, læste de første 230 sider og legede lidt med det i Netbeans.

Dog er det sværeste for mig er ikke at scripte et eller andet, men hvad skal det være?
Hvis der er nogle der har nogle små sjove øvelser så del dem endelig.

Indtil videre har jeg ikke lavet så meget udover at håndtere cookies, tilføje en resize listener
og lave en lille farvelade.

Overvejede et slideshow af en art som det næste, for at se hvordan det er anderledes fra CCS3 med key frames.
Men ved ikke om jeg skal kværne 100 sider i bogen før det. Eller hvor indviklet det er.

JavaScript er jo rimelig nemt at forstå når man kommer fra OOP. Objekter, loops, regler for operators, functions mm.
Er alt sammen ens.

Hvis der er andre der ville lege med det jeg selv har lavet.

Kode: Vælg alt

<!DOCTYPE html>
<html>
    
    <head>
        
        <title>TODO supply a title</title>
        
        <meta charset="UTF-8">
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style type="text/css">
            body, html, table, td {
                width: 99%;
                height: 99%;
            }
            
            td {
                text-align: center;
                vertical-align: middle;
            }
            
            h1 {
                font-size: 3em;
            }
            
            h2 {
                font-size: 2em;
            }
            
            td div {
                width: 300px;
                height: auto;
                
                margin: auto auto;
                
                padding: 10px 0px 10px 0px;
                
                background-color: black;
            }
            
            td div p {
                color: white;
            }
            
            td div div {
                display: inline-block;
                
                width: 90px;
                height: 70px;
                
                cursor: pointer;
            }
            
            td div div:nth-child(2) {
                background-color: red;
            }
            
            td div div:nth-child(3) {
                background-color: green;
            }
            
            td div div:nth-child(4) {
                background-color: blue;
            }
            
            td div div:nth-child(5) {
                background-color: white;
                display: block;
                width: 280px;
            }
        </style>
        
        <script type="text/javascript" src="Script1.js"></script>
        
    </head>
    
    <body onload="getBrowserSize();">
        
        <table>
            <tr>
                <td>
                    <h1>Your browser size is</h1>
                    <h2 id="size"></h2>
                    
                    <div>
                        <p>Choose a color</p>
                        <div id="red" onclick="changeBackgroundColor(this.id);">
                            <p>t</p>
                        </div>
                        <div id="green" onclick="changeBackgroundColor(this.id);"></div>
                        <div id="blue" onclick="changeBackgroundColor(this.id);"></div>
                        <div id="white" onclick="changeBackgroundColor(this.id);"></div>
                    </div>
                    
                </td>
            </tr>
        </table>
        
    </body>
    
</html>

Kode: Vælg alt

window.addEventListener("resize", getBrowserSize);
            
function getBrowserSize() {
    var width = document.body.clientWidth;
    var height = document.body.clientHeight;

    document.getElementById("size").innerHTML = width + " x " + height + " Pixels";
}

/*
 *Cookie management 
 */
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
    }
    return "";
}

function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

/*
 *Change website color section
 */

function changeBackgroundColor(id) {
    var color = document.getElementById(id).id.toString();
    document.body.style.backgroundColor= color;
}
Vh
Cristian
Vedhæftede filer
farvelade.PNG
farvelade.PNG (14.96KiB)Vist 3670 gange

Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg:709
Tilmeldt:21. jun 2012, 23:40
Kontakt:

Re: Efterlyser små sjove øvelser

Indlæg af scootergrisen » 29. sep 2014, 07:44

I stedet for onload kan du bruge :

Kode: Vælg alt

    if (window.addEventListener) {

        window.addEventListener('load', getBrowserSize, false);

    }
Og det samme med onclick.
Så er HTML koden og Javascript koden helt skilt ad.

Du kan prøve og kigge på eksemplerne her : http://netkoder.dk/netkoder/eksempler.php
Også kunne du prøve og forbedre på dem eller laver noget spændende ud af det eller kombinere det med andre ting.

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: Efterlyser små sjove øvelser

Indlæg af cristian » 1. okt 2014, 23:49

scootergrisen skrev:I stedet for onload kan du bruge :

Kode: Vælg alt

    if (window.addEventListener) {

        window.addEventListener('load', getBrowserSize, false);

    }
Og det samme med onclick.
Så er HTML koden og Javascript koden helt skilt ad.

Du kan prøve og kigge på eksemplerne her : http://netkoder.dk/netkoder/eksempler.php
Også kunne du prøve og forbedre på dem eller laver noget spændende ud af det eller kombinere det med andre ting.
Hvorfor bruger du en if blok "if (window.addEventListener)"? Og skriver du false som det trejdle argument for at if blokken kan være false til mere end en eventlistener?

Vh

Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg:709
Tilmeldt:21. jun 2012, 23:40
Kontakt:

Re: Efterlyser små sjove øvelser

Indlæg af scootergrisen » 2. okt 2014, 05:05

if() fordi så giver det ikke fejl i de browsere som ikke understøtter addEventListener.
false ved jeg ikke hvorfor, det har jeg vist bare læst man skal bruge.

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: Efterlyser små sjove øvelser

Indlæg af cristian » 2. okt 2014, 12:54

Fandt ud af hvad den trejdle parameter gør :)
The third parameter is a boolean value specifying whether to use event bubbling or event capturing. This parameter is optional.

Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg:709
Tilmeldt:21. jun 2012, 23:40
Kontakt:

Re: Efterlyser små sjove øvelser

Indlæg af scootergrisen » 2. okt 2014, 14:44

Jeg ved ikke hvad det betyder.

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: Efterlyser små sjove øvelser

Indlæg af cristian » 2. okt 2014, 17:08

scootergrisen skrev:Jeg ved ikke hvad det betyder.
Du læser ikke engelsk?

Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg:709
Tilmeldt:21. jun 2012, 23:40
Kontakt:

Re: Efterlyser små sjove øvelser

Indlæg af scootergrisen » 2. okt 2014, 17:40

jo

Besvar