Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:javascript:javascript_megoldasok

< JavaScript

JavaScript Megoldások

Időzítés

Inline

<input type="button" 
onclick="setTimeout('window.alert(\'Helló\')', 3000)" />

Internal

<input type="button" onclick="csinal()" />
 
<script type="text/javascript" >
function csinal()
{
	setTimeout('window.alert(\'Helló\')', 3000);
}
</script>

Internal több függvénnyel

<input type="button" onclick="csinal()" />
 
<script type="text/javascript" >
function csinal()
{
	setTimeout("feldob()", 3000);
}
function feldob()
{
	alert('Helló');
}
 
</script>

Másként

<button onclick="feldob()">Csináld</button>
<script>
function feldob()
{
    setInterval(function(){alert("Helló Világ")},10000); //10 másodpec
}
</script>
index.html
<!DOCTYPE html>
<html>
<body>
 
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
 
<script>
var myVar=setInterval(function(){myTimer()},1000);
 
function myTimer()
{
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
</script>
 
</body>
</html>
index.html
<!doctype html>
<html>
<head>
 
<meta charset=utf-8 />
<title>Cím</title>
 
<script type="text/javascript">
function csinal()
{
	setTimeout(function(){alert("Betöltödött")}, 3000); // 3 másodperc
}
window.onload = csinal();
</script>
</head>
<body>
 
</body>
</html>

Időzítés törlése

<input type="button" value="start" onclick="csinal()" />
<input type="button" value="stop" onclick="allj()" />
 
<script type="text/javascript" >
var idozites;
function csinal()
{
	idozites = setTimeout("feldob()", 3000);
}
function feldob()
{
	alert('Helló');
}
function allj()
{
	clearTimeout(idozites);
}
</script>

Más

var idozitoObj = setInterval(function(){idozito()},1000);
 
function idozito()
{
    var jelen = new Date();
    var ido = jelen.toLocaleTimeString();
    document.getElementById("idoHelye").innerHTML=ido;
}

Leállítás

window.clearInterval(idozitoObj);

Osztályváltás

index.html
<!doctype html>
<html>
<head>
 
<meta charset=utf-8 />
<title>Cím</title>
 
<script type="text/javascript">
function egyik()
{
	document.getElementById("fo").className="elso";
	setTimeout(function(){masik()}, 2000);
}
function masik()
{
	document.getElementById("fo").className="mas";
	setTimeout(function(){egyik()}, 2000);
}
window.onload = egyik;
</script>
 
<style type="text/css">
.elso {
	color: navy;
}
.mas {
	color: #00ffff;
	font-size: 40px;
}
</style>
 
 
</head>
<body>
 
<div id="fo">
 
<div>Lorem ipsum</div>
<div>Lorem ipsum</div>
 
</div>
 
 
 
</body>
</html>

Óra

Egyszerű óra

index.html
<!doctype html>
<html>
<head>
 
<meta charset=utf-8 />
<title>Cím</title>
 
<script type="text/javascript">
function oraKi()
{
	var most = new Date();
	var ora = most.getHours();
	var perc = most.getMinutes();
	var mperc = most.getSeconds();
	if(mperc<10){mperc = "0"+mperc;}
	document.getElementById("ido").innerHTML = ora + ":" + perc + ":" + mperc;
	setTimeout(function(){oraKi()}, 500);
}
 
window.onload = oraKi;
</script>
 
<style type="text/css">
.elso {
	color: navy;
}
.mas {
	color: green;
}
</style>
 
 
</head>
<body>
 
<div id="fo" class="harmadik">
 
<div class="elso">Lorem ipsum</div>
<div class="masodik">Lorem ipsum</div>
<div id="ido">Lorem ipsum</div>
</div>
 
 
<a href="javascript:csinal();">Kattints ide</a>
 
 
 
 
</body>
</html>

Óra leállítása

<meta charset="utf-8" />
<div id="idoHelye"></div>
<button onClick="leall()">Idő leáll</button>
 
<script>
var idozitoObj=setInterval(function(){	idozito()},1000);
 
function idozito()
{
	var d=new Date();
	var t=d.toLocaleTimeString();
	document.getElementById("idoHelye").innerHTML=t;
}
function leall()
{
	clearInterval(idozitoObj);
}
</script>

Dátum

var most = new Date();
var ezt = most.toISOString().substring(0, 10);
alert(ezt);

A substring helyett használhatjuk a slice() függvényt:

var most.toISOString().slice(0,10);

Visszaszámlálás

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
 
 
</head>
<body>
 
<input type="button" value="start" onclick="elokeszit()" />
<input type="button" value="stop" onclick="allj()" />
 
<script type="text/javascript" >
var idozites;
var szamlalo;
function elokeszit()
{
	szamlalo = 11;
	szamol();
}
function szamol()
{
	if(szamlalo>0)
	{
		szamlalo--;
		document.getElementById("szam").innerHTML = szamlalo;
		idozites = setTimeout("szamol()", 1000);
	}
}
 
function allj()
{
	clearTimeout(idozites);
}
</script>
 
<div id="szam"></div>
 
</body>
</html>

Ál-URL

<a href="javascript:window.alert('Üdv');">Kattints ide</a>
<a href="javascript:csinald();">Kattints ide</a>

Böngésző típusa:

window.alert(navigator.appName);
Mozilla változatok Netscape
Apple Safari Netscape
Opera Opera
Konqueror Konqueror
Internet Exploler Microsoft Internet Exploler

Teljes böngészőazonosító karakterlánc:

window.alert(navigator.userAgent);
  • Firefox
    • Mozilla/5.0 (X11; Linux i686; rv:14.0) Gecko/20100101 Firefox/14.0.1
  • Epiphany
    • Mozilla/5.0 (X11; Linux i686; hu-hu) AppleWebKit/531.2+ Debian/squeeze (2.30.6-1) Epiphany/2.30.6
  • Chrome
    • Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4

Böngésző képességei

if(document.getElementById)
	document.write("Van");
else
	document.write("Nincs");

Dokumentum objektum

Domain

document.write(document.domain);

Megkapjuk az IP címet, vagy domain nevet, amelyen hivatkoztak a weblapra. Például:

127.0.0.1

Horgonyok

<a name="elso" >Első</a>
<a name="masodik" >Második</a>
 
<script type="text/javascript" >
 
document.write(document.anchors.length);
 
</script>
document.write(document.anchors[0].innerHTML);

Formok

document.write(document.forms.length);
document.write(document.forms[0].name);

Képek

<img src="kep01.jpg">
<img src="kep02.jpg">
 
 
<script type="text/javascript">
document.write(document.images.length);
</script>
<img id="kep1" src="kep01.jpg">
<img id="kep2" src="kep02.jpg">
 
<script type="text/javascript">
 
document.write(document.images[0].id);
 
</script>

Utolsó módosítás

document.write(document.lastModified);

Linkek

<a href="elso.html" >Első</a><br />
<a href="masodik.html" >Második</a><br />
 
<script type="text/javascript" >
 
document.write(document.links.length);
 
</script>
<a href="elso.html" id="elso">Első</a><br />
<a href="masodik.html" id="masodik">Második</a><br />
 
<script type="text/javascript" >
 
document.write(document.links[0].id);
 
</script>
<a href="elso.html" id="elso">Első</a><br />
<a href="masodik.html" id="masodik">Második</a><br />
 
<script type="text/javascript" >
 
az = document.links[0].id;
document.write(az);
 
</script>

Státusz

document.write(document.readyState);

Visszahivatkozás

Melyik oldalról érkezett a felhasználó.

document.write(document.referrer);

Localhoston nem ad eredményt.

Próbáljuk ki itt:

http://szit.hu/homokozo

Teljes URL

document.write(document.URL);

Oldalcím

document.write(document.title);

Írás a weblapra

function hozzafuz()
{
	document.getElementsByTagName("body")[0].innerHTML += "Ide";	
}

Ablak

Új ablak megnyitása

Szintaxis:

window.open('megnyitott_url','ablaknev','tulajdonsag1,tulajdonsag2')

Ez a függvény egy új böngészőablakot nyit. A további tulajdonságokat vesszővel elválasztva kell megadni.

A paraméterek sorra:

  1. 'megnyitott_url'
    • A weblapcím, amelyet szeretnénk megjeleníteni a megjelenő ablakban.
  2. 'ablaknev'
    • Nevet adhatsz az ablaknak, amelyre később hivatkozhatsz.
  3. 'tulajdonságok1,tulajdonságok2'
    • Az ablak egyéb tulajdonságait adhatjuk meg.

Ablak tulajdonságok

A következő tulajdonságokat használhatod.

  1. width=300
    • Az ablak szélessége.
  2. height=200
    • Az ablak magassága.
  3. resizable=yes vagy no
    • Az ablak átméretezhető-e.
  4. scrollbars=yes vagy no
    • Az ablaknak lehet-e görgetősávja.
  5. toolbar=yes vagy no
    • Navigációssáv legyen-e.
  6. location=yes vagy no
    • címsor megjelenjen-e.
  7. directories=yes vagy no
    • Plusz gombok megjelenjenek-e.
  8. status=yes vagy no
    • A státuszsor megjelenjen-e.
  9. menubar=yes vagy no
    • Menüsáv megjelenjen-e.
  10. copyhistory=yes vagy no
    • Az előzmények listáját megkapja-e az új ablak.

Példa:

<input type="button" value="Új ablak"
onClick="window.open('http://szit.hu','ablak','width=400,height=200')"> 

Egyszerű példa:

open("http://szit.hu");

Az ablakot elnevezzük „egy” néven:

open("http://szit.hu", "egy");

Ennek újabb ablak nyitásakor van jelentősége. Ugyanezen a néven már nem tudunk másik ablakot nyitni.

Új ablak, URL nélkül, szöveget írva bele, fókuszba téve:

ablak=window.open('','','width=400,height=300');
ablak.document.write("<p>Az ablakunk'</p>");
ablak.focus()
ablak=window.open('','','width=400,height=300');
ablak.document.write(ablak.outerWidth);

Ablakméret

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" >
function meret()
{
 
	var hely = document.getElementById("hely");	           
	hely.innerHTML = window.innerWidth + "x" + window.innerHeight;
}
</script>
</head>
<body onresize="meret()">
 
<div id="hely">Ide</div>
 
<input type="button" onclick="meret()" />
 
</body>
</html>

Ablak

<input type="button" value="Új ablak" 
onClick="window.open('','ablakom','width=400,height=200,left=0,top=100,screenX=0,screenY=100')"> 

Képernyő

function meret()
{
	var hely = document.getElementById("hely");	           
	hely.innerHTML = window.screen.width + "x" + window.screen.height;
}

Screen Objektum tulajdonságok

Tulajdonság Leírás
availHeight Visszaadja a képernyő magasságát (beleértve a folyamatkezelő-sávot is)
availWidth Visszaadja a képernyő magasságát (beleértve a folyamatkezelő-sávot is)
colorDepth Visszaadja színmélységet
height Visszadja a teljes képernyő magasságot
pixelDepth Visszadja a képernyő felbontást
width Visszadja a teljes képernyő szélességét

Linkek

Képcsere

function changeImage(name, url)
{
    if(document.images[name])
    {
        document.images[name].src=url;
    }
}
<img name="kepem" src="kep.png" 
  onmouseover="changeImage('kepem','mas.png');" 
  onmousemout="changeImage('kepem','kep.png');" />

Rejt és mutat egy gombbal

function rejt()
{
	var elem = document.getElementById("egy");
	var gomb = document.getElementById("gomb");
	var cont = gomb.innerHTML;
	if(cont == "Rejt")
	{
		elem.style.display = "none";
		gomb.innerHTML = "Mutat";
	}
	else
	{
		elem.style.display = "block";
		gomb.innerHTML = "Rejt";	
	}
}
<p id="egy">Lorem ipsum ...</p>
<button onclick="rejt()" id="gomb">Rejt</button>

Objektum falbaütköztetése

index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SWBin</title>
<style>
canvas {
    border: 1px solid;   
}</style>
<script src="script.js"></script>
</head>
<body>
<canvas id="v" width="400" height="400"></canvas>
<div id="az"></div>    
 
</body>
</html>
script.js
var v = document.getElementById("v").getContext("2d");
v.fillStyle="rgba(0,0,123,1.0)";
 
var x = 250;
var y = 250;
 
var az = document.getElementById("az");
var angle = 235;
 
 
setInterval('move()', 5);
 
 
function move(){
 
    v.fillStyle="rgba(255,255,255, 1.0)";
    v.fillRect(x-2, y-2, 8, 8);
 
    x +=  Math.sin(angle * Math.PI/180.0)*1.0;
    y +=  Math.cos(angle * Math.PI/180.0)*1.0; 
 
    v.fillStyle="rgba(0,0,123,1.0)";
    v.fillRect(x, y, 5, 5);
 
    angle = getNewAngle(angle);
 
    az.innerHTML = angle + " " + parseInt(x) + " " + parseInt(y);
}
 
function getNewAngle(actAngle){
    var newAngle=actAngle;
    if(x>400){ //jobb fal    
        if(actAngle < 180 && actAngle > 90)
            newAngle = actAngle + 90;
        if(actAngle < 90 && actAngle > 0){
            newAngle = actAngle - 90;
            if(newAngle <0)
                newAngle = 360 + newAngle;
        }
    }
    if(x<=5){ //bal fal
        if((actAngle > 270) && (actAngle < 360)){
            newAngle = actAngle + 90;
            if(newAngle>360)
                newAngle = newAngle - 360;
        }
        if((actAngle > 180) && (actAngle < 270)){
            newAngle = actAngle - 90;           
 
        }
    }
    if(y<0){
        if((actAngle>180) && (actAngle < 270)){
            newAngle = actAngle + 90;
        }
        if((actAngle<180) && (actAngle > 90)){
            newAngle = actAngle - 90;
        }
    }
    if(y>400){
        if(eval(actAngle) > 270 && eval(actAngle) < 360)
            newAngle = actAngle - 90;
        if(actAngle > 0 && actAngle < 90)
            newAngle = actAngle + 90;
    }    
    return newAngle;
}

Weblap újratöltése

location.reload();

Kiíratás vezető nullákkal

function zeroFormatFill(num, len) {
	var newNum = Array(len).join("0") + num
	return (newNum).slice(-len);
}
oktatas/web/javascript/javascript_megoldasok.txt · Utolsó módosítás: 2020/02/24 16:54 szerkesztette: admin