szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:javascript|< JavaScript]]

====== JavaScript Megoldások ======

===== Időzítés =====

==== Inline ====

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

==== Internal ====

<code html>
<input type="button" onclick="csinal()" />

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


==== Internal több függvénnyel ====
<code html>
<input type="button" onclick="csinal()" />

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

</script>
</code>

==== Másként ====


<code html>

<button onclick="feldob()">Csináld</button>
<script>
function feldob()
{
    setInterval(function(){alert("Helló Világ")},10000); //10 másodpec
}
</script>

</code>



<code html 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>
</code>






<code 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>

</code>


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

<code html>
<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>

</code>


==== Más ====



<code javascript>
var idozitoObj = setInterval(function(){idozito()},1000);

function idozito()
{
    var jelen = new Date();
    var ido = jelen.toLocaleTimeString();
    document.getElementById("idoHelye").innerHTML=ido;
}
</code>


Leállítás
<code javascript>
window.clearInterval(idozitoObj);
</code>

===== Osztályváltás =====



<code html 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>

</code>


===== Óra =====

==== Egyszerű óra ====

<code html 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>
</code>



==== Óra leállítása ====

<code html>
<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>
</code>

===== Dátum =====

<code javascript>
var most = new Date();
var ezt = most.toISOString().substring(0, 10);
alert(ezt);
</code>


A substring helyett használhatjuk a slice() függvényt:
<code javascript>
var most.toISOString().slice(0,10);
</code>

<code javascript>
var most = new Date();

console.log(most.toLocaleDateString());
console.log(most.toLocaleTimeString());
console.log(most.toLocaleString());
</code>

Kimenet:
<file>
2021. 04. 08.
22:49:00
2021. 04. 08. 22:49:00
</file>

==== 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 ====

<code javascript>
var most = new Date();
console.log(most.getFullYear());
</code>


==== Hónap ====

<code javascript>
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()]);
</code>

==== Dátum kiírása ====

<code javascript>
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}`);
</code>

Kimenet:
  2021-04-08

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

Kimenet például:
  23




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 ====

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

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 ====

<code javascript>
var d = new Date();
var a = d.toISOString().split('T')[0]
console.log(a);
</code>

Eredmény:
  2021-04-08

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

Eredmény:
  2021-04-08 21:43
Az eredményt UTC időben kapjuk.
===== Visszaszámlálás =====


<code html 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>
</code>


===== Ál-URL =====

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

<code html>
<a href="javascript:csinald();">Kattints ide</a>
</code>

===== Navigátor =====

Böngésző típusa:
<code>
window.alert(navigator.appName);
</code>

| Mozilla változatok | Netscape |
| Apple Safari | Netscape |
| Opera | Opera |
| Konqueror | Konqueror |
| Internet Exploler | Microsoft Internet Exploler |



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

<code>
window.alert(navigator.userAgent);
</code>


  * 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 =====


<code javascript>
if(document.getElementById)
	document.write("Van");
else
	document.write("Nincs");
</code>


===== Dokumentum objektum =====

==== Domain ====

<code javascript>
document.write(document.domain);
</code>

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


<code html>
<a name="elso" >Első</a>
<a name="masodik" >Második</a>

<script type="text/javascript" >

document.write(document.anchors.length);

</script>
</code>


<code javascript>
document.write(document.anchors[0].innerHTML);
</code>


==== Formok ====


<code javascript>
document.write(document.forms.length);
</code>

<code javascript>
document.write(document.forms[0].name);
</code>


==== Képek ====


<code html>
<img src="kep01.jpg">
<img src="kep02.jpg">


<script type="text/javascript">
document.write(document.images.length);
</script>
</code>


<code html>
<img id="kep1" src="kep01.jpg">
<img id="kep2" src="kep02.jpg">

<script type="text/javascript">

document.write(document.images[0].id);

</script>
</code>

==== Utolsó módosítás ====

<code javascript>
document.write(document.lastModified);
</code>

==== Linkek ====

<code html>
<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>
</code>



<code html>
<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>
</code>





<code html>
<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>
</code>


==== Státusz ====

<code javascript>
document.write(document.readyState);
</code>



==== Visszahivatkozás ====

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


<code javascript>
document.write(document.referrer);
</code>

Localhoston nem ad eredményt.

Próbáljuk ki itt:

http://szit.hu/homokozo



==== Teljes URL ====

<code javascript>
document.write(document.URL);
</code>

==== Oldalcím ====

<code javascript>
document.write(document.title);
</code>

===== Írás a weblapra =====

<code javascript>
function hozzafuz()
{
	document.getElementsByTagName("body")[0].innerHTML += "Ide";	
}
</code>

===== Ablak =====


==== Új ablak megnyitása ====



Szintaxis: 
<code javascript>
window.open('megnyitott_url','ablaknev','tulajdonsag1,tulajdonsag2')
</code>

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:
<code html>
<input type="button" value="Új ablak"
onClick="window.open('http://szit.hu','ablak','width=400,height=200')"> 
</code>





Egyszerű példa:

<code javascript>
open("http://szit.hu");
</code>


Az ablakot elnevezzük "egy" néven:
<code javascript>
open("http://szit.hu", "egy");
</code>

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:
<code javascript>
ablak=window.open('','','width=400,height=300');
ablak.document.write("<p>Az ablakunk'</p>");
ablak.focus()
</code>

<code javascript>
ablak=window.open('','','width=400,height=300');
ablak.document.write(ablak.outerWidth);
</code>

==== Ablakméret ====

<code html 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>
</code>


==== Ablak ====

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



<html>

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

</html>


==== Képernyő ====

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


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 ====

  * http://www.w3schools.com/jsref/met_win_open.asp
  * http://www.w3schools.com/jsref/obj_window.asp

===== Képcsere =====

<code javascript>
function changeImage(name, url)
{
    if(document.images[name])
    {
        document.images[name].src=url;
    }
}
</code>

<code html>
<img name="kepem" src="kep.png" 
  onmouseover="changeImage('kepem','mas.png');" 
  onmousemout="changeImage('kepem','kep.png');" />
</code>

===== Rejt és mutat egy gombbal =====

<code javascript>
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";	
	}
}
</code>

<code html>
<p id="egy">Lorem ipsum ...</p>
<button onclick="rejt()" id="gomb">Rejt</button>
</code>


===== Objektum falbaütköztetése =====

<code html 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>
</code>


<code javascript 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;
}

</code>
===== Weblap újratöltése =====

<code javascript>
location.reload();
</code>

===== Kiíratás vezető nullákkal =====

<code javascript>

function zeroFormatFill(num, len) {
	var newNum = Array(len).join("0") + num
	return (newNum).slice(-len);
}

</code>