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);

var most = new Date();
 
console.log(most.toLocaleDateString());
console.log(most.toLocaleTimeString());
console.log(most.toLocaleString());

Kimenet:

2021. 04. 08.
22:49:00
2021. 04. 08. 22:49:00

Függvények

A Date() objektumon futtatható függvények:

getFullYear() - 4 számjegy
getMonth() - 0-11
getDate() - 1-31
getHours() - 0-23
getMinutes() - 0-59
getSeconds() - 0-59
getMilliseconds() - 0-999

Év

var most = new Date();
console.log(most.getFullYear());

Hónap

var most = new Date();
 
const honapok = [
  'január',
  'február',
  'március',
  'április',
  'május',
  'június',
  'július',
  'augusztus',
  'szeptember',
  'október',
  'november',
  'december'
]
 
console.log(honapok[most.getMonth()]);

Dátum kiírása

var d = new Date();
 
let ev = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
let ho = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(d);
let nap = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d);
console.log(`${ev}-${ho}-${nap}`);

Kimenet:

2021-04-08

var d = new Date();
let ora = new Intl.DateTimeFormat('hu', { hour: '2-digit' }).format(d);
console.log(ora);

Kimenet például:

Használható kulcsok:

Adat	Kulcs
day	'numeric', '2-digit'
weekday	'narrow', 'short', 'long'
year	'numeric', '2-digit'
month	'numeric', '2-digit', 'narrow', 'short', 'long'
hour	'numeric', '2-digit'
minute	'numeric', '2-digit'
second	'numeric', '2-digit'

Vezető nulla

var d = new Date();
var ho = d.getMonth()
console.log(String(ho+1).padStart(2, '0'));

A hónapok számozása 0-tól kezdődik. Így a áprilisban 3-t ad a getMonth() függvény.

ISO formátum

var d = new Date();
var a = d.toISOString().split('T')[0]
console.log(a);

Eredmény:

2021-04-08

var d = new Date();
var a = d.toISOString().slice(0, 16).replace('T',' ')
console.log(a);

Eredmény:

2021-04-08 21:43

Az eredményt UTC időben kapjuk.

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>

Navigátor

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:

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

Ablak tulajdonságok

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

width=300
- Az ablak szélessége.
height=200
- Az ablak magassága.
resizable=yes vagy no
- Az ablak átméretezhető-e.
scrollbars=yes vagy no
- Az ablaknak lehet-e görgetősávja.
toolbar=yes vagy no
- Navigációssáv legyen-e.
location=yes vagy no
- címsor megjelenjen-e.
directories=yes vagy no
- Plusz gombok megjelenjenek-e.
status=yes vagy no
- A státuszsor megjelenjen-e.
menubar=yes vagy no
- Menüsáv megjelenjen-e.
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);
}

Tartalomjegyzék

JavaScript Megoldások

Időzítés

Inline

Internal

Internal több függvénnyel

Másként

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

Más

Osztályváltás

Óra

Egyszerű óra

Óra leállítása

Dátum

Függvények

Év

Hónap

Dátum kiírása

Vezető nulla

ISO formátum

Visszaszámlálás

Ál-URL

Navigátor

Böngésző képességei

Dokumentum objektum

Domain

Horgonyok

Formok

Képek

Utolsó módosítás

Linkek

Státusz

Visszahivatkozás

Teljes URL

Oldalcím

Írás a weblapra

Ablak

Új ablak megnyitása

Ablakméret

Ablak

Képernyő

Linkek

Képcsere

Rejt és mutat egy gombbal

Objektum falbaütköztetése

Weblap újratöltése

Kiíratás vezető nullákkal