Hálózatok‎ > ‎

Javascript példák

Űrlap "küldése" javascriptben

<head>
    <script type="text/javascript">
        function send() {
            var x = document.getElementById('posts');
            var u = document.f1.user.value;
            var v = document.f1.valami.value;
            x.innerHTML += "<b>"+u+"</b>:"+v+"<br>";          
        }
    </script> 
</head>
<body>
<h1>Űrlap feldolgozása Javascriptben</h1>
 
<div style="padding:20px;border:solid 1px;width:500px;">
<form name="f1" action="javascript:send()">
Név:
<input type="text" name="user" size="30" maxlength="30"><br>
Mondj valamit: 
<input type="text" name="valami" size="50" maxlength="50"><br>
<input type="submit" value="Mehet!">
</form>
</div>      
<div id="posts">  </div>
</body> </html>

Űrlap ellenőrzése

<head>
    <script type="text/javascript">
        function send() {
            var x  = document.getElementById('posts');
            var um = document.getElementById('umsg');
            var vm = document.getElementById('vmsg');
            var u  = document.f1.user.value;
            var v  = document.f1.valami.value;
            um.innerHTML = "";
            vm.innerHTML = "";
            if (u=="") {
                um.innerHTML = "Nem maradhat üresen!";
           } else 
            if (v=="") {
                vm.innerHTML = "Nem maradhat üresen!";
            } else {
            x.innerHTML += "<b>"+u+"</b>:"+v+"<br>";          
            }
        }
    </script> 
</head>
 
<body>
...
<form name="f1" action="javascript:send()">
    <table>
    <tr><td colspan="2"> <div id="umsg" style="height=20px;color:red;"> </div></td></tr>    
    <tr> <td>Név:</td> <td><input type="text" name="user" size="30" maxlength="30"></td></tr>     
    <tr><td colspan="2"><div id="vmsg" style="height=20px;color:red;"> </div></td></tr>
    <tr> <td>Mondj valamit: </td> <td><input type="text" name="valami" size="50" maxlength="50"></td></tr>
    <tr><td colspan="2"><input type="submit" value="Mehet!"></td></tr>
    </table>
</form>
...
<div id="posts" style="padding:10px;"> </div>
...
</body>

Matematikai algoritmusok

Czövek Márton programja

3k+1 probléma

<script>
    function send(){
        var x = document.getElementById("Szoveg");
        var i = document.f1.Bemenet.value;
        x.innerHTML = i+" , ";
        while( i != 1 ) {
            if ( i%2 == 1) {
                i= 3*i+1;
            } else { i = i/2; }
            x.innerHTML += i+" , ";                   
        }               
    }
</script>
...
<p>
    <strong style="font-size: 18px">Írj be egy számot:</strong>
    </p>   
    <form name="f1" action="javascript:send()">
        <input type="text" name="Bemenet" size="15" maxlength="15"> <br/>
        <input type="submit" value="Küldés">
        <p id="Szoveg"></p>   
    </form>

Eseménykezelők

Katona Dávid játéka:

<!DOCTYPE html>
<html>
<head>
    <title>Game!</title>
    <meta charset="utf-8">
    <style>
        #canvas {
                display: block;
                border: solid 1px;
                margin-top: 50px;
                margin-left: auto;
                margin-right: auto;
                
            }
    </style>
</head>

<body>
    <canvas id="canvas" width= "500" height= "500";></canvas>
    <table  align="center">
        <tr><td><form action="javascript:move()">
            <input type="submit" value="Start!" Onclick="">
        </form></td>
        <td><form>
        <input type="submit" value="Restart!" onClick="href='labda.html'">
        </form></td></tr>
        <tr><td colspan="2">
        <form>
        <select id="Level">
        <option value="Beginner" >Kezdő</option>
        <option value="Medium" > Közepes</option>
        <option value="Impossible" >Legyőzhetetlen</option>
        <option value="Multi" >2 játékos</option></select>
        </form></td></tr>
    </table>
    <script for=document event="onkeydown()" language="JScript">
        if (window.event) KeyDown(window.event.keyCode);
    </script>
    <script language="JavaScript1.2">
    if (navigator.appName != "Microsoft Internet Explorer")
        document.captureEvents(Event.KEYDOWN)
        document.onkeydown = NetscapeKeyDown;
    function NetscapeKeyDown(key){
         KeyDown(key.which);
    }
    </script>
    <script>
        function KeyDown(whichkey){
            if (line.x<=0 && whichkey == 37){line.x=line.x;}
            else{
                if (line.x>=W-l && whichkey == 39){line.x=line.x;}
                else{
                    if (whichkey == 37) {line.x-=linemove;}//Bal nyíl lenyomása esetén...
                    if (whichkey == 39) {line.x+=linemove;}//Jobb nyíl lenyomása esetén...
                    if (whichkey == 52) {line.x-=linemove;}//Bal nyíl a NumPad-on...
                    if (whichkey == 54) {line.x+=linemove;}//Jobb nyíl a NumPad-on...
                }
            }
            if (lv=="Multi"){
                if (enemy.x<=0 && whichkey == 65)
                {enemy.x=enemy.x;}
                else{
                    if (enemy.x>=W-l && whichkey == 68){enemy.x=enemy.x;}
                    else{
                    if (lv=="Multi")
                    {
                        if(whichkey == 65){enemy.x-=linemove;}
                        if(whichkey == 68){enemy.x+=linemove;}
                                            }
                    }
                }
            }
        }
        var c=document.getElementById("canvas");
        var beginner=0;
        var medium=0;
        var impossible=0;
        var pm=1;
        var ctx=c.getContext("2d");
        var x=250, y= 250;
        var frame = 1000/60;
        var H=500, W=500;
        var l=100;
        var score=0;
        var escore=0;
        var linemove= l/5;
        var enemy = {}
        enemy = {
            x : W/2-l/2,
            y : 10,
            vonal: function(){
                ctx.beginPath();
                ctx.moveTo(this.x,this.y);
                if (lv=="Beginner"){ctx.lineTo(this.x+l,this.y);}
                if (lv=="Medium"){ctx.lineTo(this.x+l,this.y);}
                if (lv=="Impossible"){ctx.lineTo(this.x+l/2,this.y);}
                if (lv=="Multi"){ctx.lineTo(this.x+l,this.y);}
                ctx.stroke();
            }
        }
        var ball = {}
        ball = {
            x : W/2,//labda indulási x koordinátája
            y : H-15,//labda indulási y koordinátája
            r : 4,//labda sugara
            vx: 4.10,//labda vízsintes mozgásának összetevője
            vy: 2.2,//labda függőleges mozgásának összetevője
            ax: 0.000,//labda vízszintes gyorsulása
            ay: 0.000,// labda függőleges gyorsulása
            rajz: function(){//Ez a függvény rajzolja le a labdát.
                ctx.beginPath();
                ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
                ctx.stroke();
            }
        }
        var line = {}//Ez az alsó vonal
        line = {
            x : W/2-l/2,
            y : H-10,
            vonal: function(){
                ctx.beginPath();
                ctx.moveTo(this.x,this.y);
                ctx.lineTo(this.x+l,this.y);
                ctx.stroke();
            }
        }
        var anim;
        var lv;
        function move (){
            lv=document.getElementById("Level").value;//lekérdezzük a szintet induláskor.
            anim = setInterval(update,frame)
        }

        function update (){
            ctx.clearRect(0,0,W,H);
            ctx.font = "bold 20px Arial";
            ctx.fillText(escore,5,200);
            ctx.fillText(":",5,250);
            ctx.fillText(score,5,300);
            ball.rajz();
            line.vonal();
            enemy.vonal();
            if (lv=="Beginner")
            {if(pm==2){enemy.x=(ball.x+beginner/2-l/2);}
            else{enemy.x=(ball.x-beginner/2-l/2);}}
            if (lv=="Medium")
            {if(pm==2){enemy.x=(ball.x+medium/2-l/2);}
            else{enemy.x=(ball.x-medium/2-l/2);}}
            if (lv=="Impossible")
            {if(pm==2){enemy.x=(ball.x+impossible/2-l/4);}
            else{enemy.x=(ball.x-impossible/2-l/4);}}
            ball.x+=ball.vx;
            ball.y+=ball.vy;
            ball.vx +=ball.ax;
            ball.vy +=ball.ay;
            
            if (lv=="Beginner"){if (ball.y <=ball.r+enemy.y && ball.x>enemy.x && ball.x<enemy.x+l) {
                    ball.y=ball.r+enemy.y;
                    ball.vy=-ball.vy;
                }
            }//labda visszapattan
            if (lv=="Medium"){if (ball.y <=ball.r+enemy.y && ball.x>enemy.x && ball.x<enemy.x+l) {
                    ball.y=ball.r+enemy.y;
                    ball.vy=-ball.vy;
                }
            }//labda visszapattan
            if (lv=="Impossible")
            {if (ball.y <=ball.r+enemy.y && ball.x>enemy.x && ball.x<enemy.x+l/2) {
                    ball.y=ball.r+enemy.y;
                    ball.vy=-ball.vy;
                }
            }//labda visszapattan
            if (lv=="Multi"){if (ball.y <=ball.r+enemy.y && ball.x>enemy.x && ball.x<enemy.x+l) {
                ball.y=ball.r+enemy.y;
                ball.vy=-ball.vy;
                }
            }//labda visszapattan
            if(ball.y <enemy.y){score+=1;ball.vy=-ball.vy;
                if (score-escore==10){//10 pontkülönbségnél vége van!
                    ctx.fillText("Nyertel: "+score+" "+escore+"-re!", 195, 235);
                    ctx.fillText("Gratulalunk!", 210, 265);
                    clearInterval(anim);//megáll az animáció
                }
            }
            if (ball.y >= -ball.r+line.y && ball.x>line.x && ball.x<line.x+l) {
                ball.y=-ball.r+line.y;
                ball.vy=-ball.vy;
                pm=Math.floor(Math.random()*2)+1;
                if(lv=="Beginner"){beginner=Math.floor(Math.random()*(l+l/3))+1;}
                if(lv=="Medium"){medium=Math.floor(Math.random()*(l+l/5))+1;}
                if(lv=="Impossible"){impossible=Math.floor(Math.random()*(l/4-1))+1;}
            }
            if (ball.y >line.y){
                escore+=1;
                pm=Math.floor(Math.random()*2)+1;
                if(lv=="Beginner"){beginner=Math.floor(Math.random()*(l+l/3))+1;}
                if(lv=="Medium"){medium=Math.floor(Math.random()*(l+l/5))+1;}
                if(lv=="Impossible"){impossible=Math.floor(Math.random()*(l/4-1))+1;}
                ball.vy=-ball.vy;
                if (escore-score==10){//10 pontkülönbségnél vége van!
                    ctx.fillText("Vesztettel: "+score+" "+escore+"-re :S", 165, 235);
                    ctx.fillText("Probald ujra!", 205, 265);
                    clearInterval(anim);//megáll az animáció
                }
            }
            if (ball.x <= ball.r) {// az oldalsó falról való visszapattanás.
                ball.x=ball.r;
                ball.vx=-ball.vx;
            }
            if (ball.x >= W-ball.r) {// az oldalsó falról való visszapattanás.
                ball.x=W-ball.r;
                ball.vx=-ball.vx;
            }
        }
    </script>
</body>
</html>

Térképek használata