Futási környezete
A JavaScript esetében a futási környezet jellemzően egy webböngésző (JavaScript-motorja).
Windowsos környezetben futtatható a wscript.exe segítségével vagy a node-dal a Node.js telepítésével. linuxos környezetben pedig node-dal és szintén a Node.js installálása után futtatható.
Három elsődleges elemi adattípus létezik:
String
Number
Boolean
A lefuttatandó szkripteket a <script> tag alkalmazásával lehet beilleszteni egy weboldal kódjába. A <script> zárótag használata is kötelező. Tetszőleges számú script elem megadható egy dokumentum fejrészében és törzsében is.
Speciális típusok:
Null
Undefined
Két összetett típus:
Object
Array
Pár fontosabb objektum:
Date
RegExp
Function
Math
A JavaScript nyelvben minden változót deklarálni kell. Ezt a var kulcsszóval tudjuk megtenni. Lehet csoportos deklaráció is, amikor vesszővel elválasztva több változót megadunk, és akár értéket is rendelhetünk hozzájuk. Arra is van lehetőség, hogy a var kulcsszót elhagyjuk, viszont ilyenkor az értékadás kötelező, és a változó globálisan elérhető lesz, míg a var-ral deklarált változók csak az aktuális scope-ben láthatóak.
var str;
var int1, int2, int3;
var a=[],b,c=d=0;
var i = 1;
j = null;
A string típusú adatokat 'aposztróf' vagy "idézőjel" pár közé írjuk. Mindkét megoldás lehetséges, így az éppen nem használt jeleket is tartalmazhatja a szöveg.
var a = "I'm sorry.";
var b = 'Idézőjel: (")';
var c = " \" ' ";
ami egyszerűbben:
var a="I'm sorry.",b='Idézőjel: "',c="\"'";
Változók típusai és elnevezése
number - Szám (mindegy, hogy egész vagy tizedes tört...
string - Szöveg "Idézőjelek közés zárva" vagy 'idézőjelek közé zárva'
boolean - Logikai változó. Az értéke False vagy True
object - Objektum. Erről még lesz szó.
special values - Speciális értékek. Ez lehet a null és az udefined.
Rövid változóneveket használjunk: i, j, k, id, user, stb..
A név utaljon az adat jelentésére:
var username - felhasználó neve
var userId - felhasználói azonosító
var i,j,k - index változók ciklusokban
var x,y,z - koordináták
Ha több szóból áll a változó neve, akkor a szavakat írjuk egybe és a szó első betűje legyen nagy:
var SzovegEgyseg;
var FelhasznaloiCim;
Literálok
A literálok értékeket képviselnek a Javascriptben
Típusaik:
Szöveg literálok
Egy szöveg(string) literál vagy nem tartalmaz karaktert, vagy akárhány karaktert tartalmaz két ' vagy " jelek között.
Speciális karaktereket is tartalmazhat egy string:
Karakter Jelentés
\b backspace, visszatörlés
\f form feed, lapdobás
\n new line, új sor
\r carrige return, kocsi vissza, sor elejére
\t tab, tabulátor-pozíció
\\
\"
\'
backslash
backslash karakter,ill. más speciális karakterek írása
Egész számok
Decimális
Oktális (0-val kezdõdnek, a számjegyek 0-7-ig lehetnek)
Hexadecimális (0x-el vagy 0X-el kezdõdnek, a számok számjegyekbõl (0-9-ig), és betûkbõl állhatnak(a-f ill. A-F)).
Lebegõpontos számok
A következõ részekbõl állhatnak: decimális egészbõl, decimális pontból, törtrészbõl és kitevõbõl.
Pl.: 16.423, 16.423E-1
Logikai literálok
A Boolean típusnak két literálja van: true és false
--------------------------
Kötések
Mire is jók a változók?
Egy hosszabb, bonyolultabb programban, egy-egy értéket többször fel kell használni. Ráadásul lehet ez az érték, egy bonyolult számítás végeredménye. Nem szeretnéd minden felhasználási helyen újra és újra kiszámolni ugyanazt a dolgot, sokkal jobb, ha egyszer kiszámolod és elmented egy változóba, aztán a változót használod a többi helyen. Így gyorsabb és optimalizáltabb lesz a programod.
Továbbá segít a programodat olvashatóvá tenni, ha csak a 7-es számot látja valaki a programban. nem biztos rájön, hogy az a kedvenc száma a programozónak, de ha látod, hogy egy kedvencSzamom változóban van elmentve, akkor ezt rögtön kitalálható.
Milyen egy jó változónév?
A változónevek nagyon fontos részei a programodnak, segítenek megérteni azt később. Emiatt muszáj érthető neveket használni, bármennyire is egyszerűnek tűnik a valtozo1, valtozo2, v1, v2 elnevezés, nem ez a jó. A változóneveknek beszédesnek, szándékot kifejezőnek kell lennie, fogalmazd bele mire használod a változót, mit is tárolsz benne.
------------
Kötések
Mikor deklarálsz egy változót, meg kell adnod milyen kötéssel (binding-al), szeretnéd létrehozni. Ebből három félét használhatsz:
var
screen_shot_2018-06-28_at_8_05_10.pngA var a legrégebbi kötés Javascriptben. Amikor készítették a nyelvet, ezt a bindingot architekturálisan eléggé elrontották (hogy pontosan miért, arra a láthatóságnál fogok kitérni). A weben nagyon fontos a visszafele kompatibilitás, azaz hogy a régi Javascript kód ugyanúgy működőképes legyen, hiába jönnek ki új szabványok, ezért a var működésének megváltoztatása sajnos nem lehetséges. Használatát érdemes elkerülni.
let
screen_shot_2018-06-28_at_8_02_29.png
A let binding a var -t hivatott lecserélni. Ez a binding az, aminek a var -nak lennie kellett volna. Az úgynevezett Ecsmascript 6 szabvánnyal lett bevezetve (2015-ben), ezáltal a 2015-től kiadott böngészőverziók támogatják, az az előttiek nem. Pontosan azt csinálja amire számítanál, létrehoz egy változót, és értékül adja neki az egyenlőségjel jobb oldalán levő értéket. Ha új értéket szeretnél neki adni, akkor már a let nélkül kell megadni a változó nevét és az egyenlőségjel után pedig az új értéket.
screen_shot_2018-06-28_at_8_14_27.png
const
screen_shot_2018-06-28_at_8_03_16.png
A const hasonlóan a let -hez, az ES6 szabvánnyal került a köztudatba. Különbsége a let-hez képest, hogy ha ezzel definiálsz egy változót, nem tudod felülírni egy másik értékkel, ekkor hibát kapsz. Az értéke a const -al definiált változónak végleges.
screen_shot_2018-06-28_at_8_13_05.png
--------------
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A kód elrejtése, ha szükséges
function sarga(){
document.bgColor="#FFFF00";
}
function kek(){
document.bgColor="#0000FF";
}
function eredeti(){
document.bgColor="#FFFFFF";
}
// Elrejtés vége -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<P>
<FORM>
<INPUT TYPE="button" VALUE="Sárga háttér" onClick="sarga()">
<INPUT TYPE="button" VALUE="Kék háttér" onClick="kek()">
<INPUT TYPE="button" VALUE="Eredeti háttér" onClick="eredeti()">
</FORM>
</P>
</CENTER>
</BODY>
</HTML>--------------
<form name="szamol">
<input name="egy"><br>
<input type="button" value=" + " onClick="plusz()">
<input type="button" value=" - " onClick="minusz()">
<input type="button" value=" * " onClick="szor()">
<input type="button" value=" / " onClick="oszt()"><br>
<input name="ketto"><p>
Eredmény: <input name="eredmeny">
</form>
<script>
function plusz() {
document.szamol.eredmeny.value = document.szamol.egy.value *1 + document.szamol.ketto.value * 1;
}
function minusz() {
document.szamol.eredmeny.value = document.szamol.egy.value - document.szamol.ketto.value;
}
function szor() {
document.szamol.eredmeny.value = document.szamol.egy.value * document.szamol.ketto.value;
}
function oszt() {
document.szamol.eredmeny.value = document.szamol.egy.value / document.szamol.ketto.value;
}
</script>
---------------
<HTML>
<HEAD><TITLE>Példa oldal</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF>
<CENTER>
<IMG SRC="pld021.jpg" NAME="pelda_pic1">
<P>
<FORM NAME="pelda_urlap">
Név:<INPUT TYPE="text" NAME="nev" VALUE="JavaScript"><BR><BR>
Cím:<INPUT TYPE="text" NAME="cim" VALUE="www.netscape.com"><BR><BR>
<INPUT TYPE="button" VALUE="Kattints rám" NAME="gomb"
onClick="alert('Most megnyomtál! :-)')">
</FORM>
<P>
<P>
<IMG SRC="pld022.jpg" NAME="pelda_pic2">
<P>
<P>
<A HREF="http://www.netscape.com">Nézd meg a Netscape
JavaScript oldalait is!</A>
</CENTER>
</BODY>
</HTML>---------------------------
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Elrejtés
function Udvozol(){
var name = document.forms[0].elements[0].value;
alert("Szia "+name);
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="urlap"> Név: <INPUT TYPE="text" NAME="nev">
<INPUT TYPE="button" VALUE="Írd be a neved, majd kattints rám!"
onClick="Udvozol()">
</FORM>
</BODY>
</HTML>------------------
<script>
function hatter(szin) {
document.bgColor = szin;
}
</script>
<form>
<input type="button" value="kék" onClick="hatter('blue')">
<input type="button" value="piros" onClick="hatter('red')">
<input type="button" value="zöld" onClick="hatter('green')">
</form>
------------------
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Elrejtés
function betolt(url, keret){
if (keret == "dokumentum1") parent.dokumentum1.location.href=url;
else parent.dokumentum2.location.href=url;
}
function betolt2(elso_url, masodik_url){
betolt(elso_url, 'dokumentum1');
betolt(masodik_url, 'dokumentum2');
}function szincsere(ujszin, keret){
if (keret == "dokumentum1")
parent.dokumentum1.document.bgColor=ujszin;
else
parent.dokumentum2.document.bgColor=ujszin;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<H1>Menü</H1>
<A HREF="javascript:betolt('pld0310.htm','dokumentum1')">Betölt egy
új dokumentumot az elsõ keretbe</A><BR>
<A HREF="javascript:betolt('pld0310.htm','dokumentum2')">Betölt egy
új dokumentumot a második keretbe</A><BR>
<A HREF="javascript:szincsere('#00FFFF','dokumentum1')">Háttérszín
cseréje az elsõ keretben</A><BR>
<A HREF="javascript:szincsere('#FFFF00','dokumentum2')">Háttérszín
cseréje a második keretben</A><BR>
<A HREF="javascript:betolt2('pld0311.htm','pld0311.htm')">Dokumentum
betöltése egyszerre két keretbe</A><BR>
</CENTER>
</BODY>
</HTML>---------------
<head>
<center>
<script language="JavaScript">
function backbs(clr) {document.bgColor = clr}
//--></script><form>
<input type="button" value="Bíbor" onclick="backbs('aaqua')">
<input type="button" value="Sárga" onclick="backbs('yellow')">
<input type="button" value="Kék" onclick="backbs('zöldes')">
<input type="button" value="Zöld" onclick="backbs('3455')">
<input type="button" value="Fekete" onclick="backbs('sgray')">
</form>
<SCRIPT LANGUAGE="JavaScript">
<!-- innen
/*
*/
function createHexArray(n) {
this.length = n;
for (var i = 1; i <= n; i++)
this[i] = i - 1;
this[11] = "A";
this[12] = "B";
this[13] = "C";
this[14] = "D";
this[15] = "E";
this[16] = "F";
return this;
}
hx = new createHexArray(16);
function convertToHex(x) {
if (x < 17) x = 16;
var high = x / 16;
var s = high+"";
s = s.substring(0, 2);
high = parseInt(s, 10);
var left = hx[high + 1];
var low = x - high * 16;
if (low < 1) low = 1;
s = low + "";
s = s.substring(0, 2);
low = parseInt(s, 10);
var right = hx[low + 1];
var string = left + "" + right;
return string;
}
function makeRainbow(text) {
text = text.substring(0, text.length);
color_d1 = 255;
mul = color_d1 / text.length;
for(var i = 0; i < text.length; i++) {
color_d1 = 255*Math.sin(i / (text.length / 3));
color_h1 = convertToHex(color_d1);
color_d2 = mul * i;
color_h2 = convertToHex(color_d2);
k = text.length;
j = k - i;
if (j < 0) j = 0;
color_d3 = mul * j;
color_h3 = convertToHex(color_d3);
document.write("<FONT COLOR=\"#" + color_h3 + color_h1 + color_h2 + "\">" + text.substring(i, i + 1) + "</FONT>");
}
}
// eddig -->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!-- SzaboLaszloIstvan by szli@freemail.hu
message='A másikon játszhatsz';
FonT='Verdana';
ColoR='999999';
SizE=2; //1 to 7 only!
var amount=5,ypos=-50,xpos=0,Ay=0,Ax=0,By=0,Bx=0,Cy=0,Cx=0,Dy=0,Dx=0,Ey=0,Ex=0;
if (document.layers){
for (i = 0; i < amount; i++)
{document.write('<layer name=nsl'+i+' top=0 left=0><font face='+FonT+' size='+SizE+' color='+ColoR+'>'+message+'</font></layer>')}
window.captureEvents(Event.MOUSEMOVE);
function nsmouse(evnt){
xpos=evnt.pageX+20;
ypos=evnt.pageY+20;
}
window.onMouseMove = nsmouse;
}
else if (document.all){
document.write("<div id='outer' style='position:absolute;top:0px;left:0px'>");
document.write("<div style='position:relative'>");
for (i = 0; i < amount; i++)
{document.write('<div id="text"'+i+' style="position:absolute;top:0px;left:0px;width:400px;height:20px"><font face='+FonT+' size='+SizE+' color='+ColoR+'>'+message+'</font></div>')}
document.write("</div>");
document.write("</div>");
function iemouse(){
ypos=event.y+20;
xpos=event.x+20;
}
window.document.onmousemove = iemouse;
}
function makefollow(){
if (document.layers){
document.layers['nsl'+0].top=ay;document.layers['nsl'+0].left=ax;
document.layers['nsl'+1].top=by;document.layers['nsl'+1].left=bx;
document.layers['nsl'+2].top=cy;document.layers['nsl'+2].left=cx;
document.layers['nsl'+3].top=Dy;document.layers['nsl'+3].left=Dx;
document.layers['nsl'+4].top=Ey;document.layers['nsl'+4].left=Ex;
}
else if (document.all){
outer.style.pixelTop=document.body.scrollTop;
text[0].style.pixelTop=ay;text[0].style.pixelLeft=ax;
text[1].style.pixelTop=by;text[1].style.pixelLeft=bx;
text[2].style.pixelTop=cy;text[2].style.pixelLeft=cx;
text[3].style.pixelTop=Dy;text[3].style.pixelLeft=Dx;
text[4].style.pixelTop=Ey;text[4].style.pixelLeft=Ex;
}
}
function move(){
ey=Ey+=(ypos-Ey)*0.1;ex=Ex+=(xpos-Ex)*0.1;
dy=Dy+=(ey-Dy)*0.1;dx=Dx+=(ex-Dx)*0.1;
cy=Cy+=(dy-Cy)*0.1;cx=Cx+=(dx-Cx)*0.1;
by=By+=(cy-By)*0.2;bx=Bx+=(cx-Bx)*0.2;
ay=Ay+=(by-Ay)*0.2;ax=Ax+=(bx-Ax)*0.2;
makefollow();
setTimeout('move()',10);
}
window.onload=move;
//-->
</script>
<SCRIPT LANGUAGE="JavaScript">
function udvozles ()
{ alert("Kedves Hallgató! Sok sikert a játékhoz!") }
</SCRIPT>
</head>
<BODY onload ="udvozles()">
<center><script>
<!--
makeRainbow("Ezen az oldalon a klikkelést gyakorolhatja!");
// -->
</script>
<script>
function biztospiros()
{if(confirm("Biztos, hogy piros hátteret akar?"))
{document.bgColor="ff0000"}
}
</script>
<center> <form> <input type="button" value="Piros hátteret akarok!" onclick="biztospiros()"> </form> </center>
<form><center><input type="button" value="Csak felnőtteknek!" onclick="alert('Te még nem vagy felnőtt!')"></form></center>
<p align="center"><a href="javascript:void(0)"
onmouseover="alert('Mégis megközelítetted!')">Ne közelítse meg ezt a linket!</a> </p>
<font size="+2"><center><font size="+2">Játék leírása!</font><p>
</center><head>
<SCRIPT LANGUAGE="JavaScript">
function elkoszon ()
{ alert("Köszönöm a játékot! Játszon velem máskor is!")
}
</SCRIPT>
<span style="width: 500; height: 50; font-size: 12pt; font-family: Arial Black; color: blue; Filter: DropShadow(Color=#FF0000, OffX=2, OffY=2, Positive=1)"><br>Az egeret csusztassa a piros négyzetre és a bal egérgombját lenyomva tartva mozgasd a fekete szegélyen belül úgy hogy közben elkerüld a közeledő alakzatokat...</span>
</head>
<BODY onUnLoad ="elkoszon()">
----------------<!DOCTYPE html>
<!-- 2016. december 07. -->
<html>
<head>
<title>Szabó László István</title>
<meta charset="utf-8" />
<style type="text/css">
h1 {text-align: center; color: red;}
h2 {text-align: center;}
#menu1, #menu2, #menu3 {margin-left: 600px;}
h4 {text-align: center; color: blue;}
body {background-color: cyan;}
form {margin-left: 500px; color: blue;}
input {text-align: center;}
#input2 {margin-left: 70px;}
#input3 {margin-left: 385px;}
#kiir {text-align: center; color: red;}
div {text-align: center;}
</style>
</head>
<body>
<h1>Szabó László István</h1>
<br>
<h2>Válassz lottót!</h2>
<h3 id="menu1">1. Ötöslottó</h3>
<h3 id="menu2">2. Hatoslottó</h3>
<h3 id="menu3">3. Skandináv lottó</h3>
<form>
Melyik lottó legyen? <input id="input1" type="text" maxlength="1" min="1" max="3"><br>
<br>
Hány szelvényen akarod? <input id="input2" type="text" min="1" ><br>
<br>
<input id="input3" type="button" onclick="kiir()" value="Mehet!"><br>
</form>
<h3 id="kiir"></h3>
<div id="div1">
</div>
<script> // JavaScript
function kiir() {
document.getElementById('kiir').innerHTML = ""; // A "kiir" azonosítójú HTML elem tartalmának üressé tétele
document.getElementById("div1").innerHTML = ""; // A "div1" azonosítójú HTML elem tartalmának üressé tétele
var lotto = document.getElementById('input1').value; // Input boxok értékének változóba mentése
var hasab = document.getElementById('input2').value; // Hasab értéke nem lehet kisebb 1-nél
if (hasab < 1) {
document.getElementById('kiir').innerHTML = "Helytelen számot választottál a második boxban, válassz 0-nál nagyobb számot!";
throw new Error(); // Ez az utasítás megszakítja a program futását, a boxokba új értékeket lehet írni
}
if (lotto == 1) { // Választott hasábérték vizsgálata
document.getElementById('kiir').innerHTML = "Az ötöslottó számai: ";
for (var i = 1; i <= hasab; i++) { // For ciklus a hasábok számának megfelelően
var lottoszamok5 = []; // Üres tömb létrehozása a lottószámoknak
while (lottoszamok5.length < 5) { // While ciklus a megfelelő számú lottószám generálásához (ötöslottó)
var randomNumber = Math.floor(Math.random() * 90) + 1; // Lottószám generálása véletszám-generátorral és egésszé tétele a Math.floor() és az adott formula segítségével a megfelelő számközön
if(lottoszamok5.indexOf(randomNumber) > -1) continue; // Ez a vizsgálat biztosítja, hogy a lottószámok különbözőek legyenek
lottoszamok5[lottoszamok5.length] = randomNumber; // A generált lottószám felvétele a lottószámok tömbjébe
}
var sortedSzamok5 = lottoszamok5.sort(function(a, b){return a - b});// Lottószámok sorbarendezése a sort() metódus és egy Comparator függvény segítségével. A sima sort() csak sztringek sorbarendezéséhez jó!
var h3 = document.createElement("h3"); // Új h3 HTML elem létrehozása
var node = document.createTextNode(sortedSzamok5.join(", ")); // Szövegnode létrehozása a lottószámok listájából egymástól vesszővel és szóközzel elválasztott sztringként
h3.appendChild(node); // Szövegnode beillesztése a h3 elembe
var element = document.getElementById("div1"); // A "div1" elem azonosítása és változóba mentése
element.appendChild(h3); // A h3 elem "div1" azonosítójú elembe illesztése
}
}
else if (lotto == 2) { // Hatoslottó
document.getElementById('kiir').innerHTML = "A hatoslottó számai: ";
for (var i = 1; i <= hasab; i++) {
var lottoszamok6 = [];
while (lottoszamok6.length < 6) {
var randomNumber = Math.floor(Math.random() * 45) + 1;
if(lottoszamok6.indexOf(randomNumber) > -1) continue;
lottoszamok6[lottoszamok6.length] = randomNumber;
}
var sortedSzamok6 = lottoszamok6.sort(function(a, b){return a - b});
var h3 = document.createElement("h3");
var node = document.createTextNode(sortedSzamok6.join(", "));
h3.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(h3);
}
}
else if (lotto == 3){ // Heteslottó
document.getElementById('kiir').innerHTML = "A skandináv lottó számai: ";
for (var i = 1; i <= hasab; i++) {
var lottoszamok7 = [];
while (lottoszamok7.length < 7) {
var randomNumber = Math.floor(Math.random() * 35) + 1;
if(lottoszamok7.indexOf(randomNumber) > -1) continue;
lottoszamok7[lottoszamok7.length] = randomNumber;
}
var sortedSzamok7 = lottoszamok7.sort(function(a, b){return a - b});
var h3 = document.createElement("h3");
var node = document.createTextNode(sortedSzamok7.join(", "));
h3.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(h3);
}
}
else {
document.getElementById('kiir').innerHTML = "Helytelen számot választottál az első boxban, válassz újra 1-3 között! ";
}
}
</script>
</body>
</html>
---------------------
<HTML><HEAD><TITLE>Szabó László István </TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<SCRIPT language=JavaScript type=text/javascript>
<!-- A fejben foglal helyet a javascript tipus definiciója a legfontosabb információkkal -->
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;
<!-- A változókat és a tömböket itt definiáljuk -->
var curX, curY, curX2, curY2, boxX, boxY, moving=0, touch=0;
var gametime=0, started=0, speed;
var starttime, endtime, finaltime=0; //pass finaltime to popup window to ask for initials
var enemyxdir = new Array(1,1,1,1);
var enemyydir = new Array(1,1,1,1);
<!-- Ha lenyomjuk az egeret elindulnak az alakzatok -->
if (isNS4 || isNS6){
document.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEMOVE);
}
document.onmousedown = start;
document.onmousemove = checkLocation;
document.onmouseup = stop;
<!-- Ezzel egyidőben elindul az óra a számláló -->
function startclock() {var today = new Date(); starttime = today.getTime();}
function endclock() {var today = new Date(); endtime = today.getTime();}
function calctime() {var time = (endtime - starttime - 0)/1000; return time;}
<!-- A mozgásokat ezekkel a függvényekkel változtatjuk, annyit mozdul az alakzat amennyit az egérrel mozdulunk -->
function giveposX(divname) {
if (isNS4) var posLeft = document.layers[divname].left;
else if (isIE4 || isIE5) var posLeft = document.all(divname).style.pixelLeft;
else if (isNS6) var posLeft = parseInt(document.getElementById(divname).style.left + "");
return posLeft;
}
function giveposY(divname) {
if (isNS4) var posTop = document.layers[divname].top;
else if (isIE4 || isIE5) var posTop = document.all(divname).style.pixelTop;
else if (isNS6) var posTop = parseInt(document.getElementById(divname).style.top + "");
return posTop;
}
function setposX(divname, xpos) {
if (isNS4) document.layers[divname].left = xpos;
else if (isIE4 || isIE5) document.all(divname).style.pixelLeft = xpos;
else if (isNS6) document.getElementById(divname).style.left = xpos;
}
function setposY(divname, ypos) {
if (isNS4) document.layers[divname].top = ypos;
else if (isIE4 || isIE5) document.all(divname).style.pixelTop = ypos;
else if (isNS6) document.getElementById(divname).style.top = ypos;
}
function givesize(divname, dimension) {
var divsize = 0;
if (dimension == 'y') {
if (isNS4) divsize = document.layers[divname].clip.height;
else if (isIE4 || isIE5) divsize = document.all(divname).style.pixelHeight;
else if (isNS6) divsize = parseInt(document.getElementById(divname).style.height + "");
}
else if (dimension == 'x') {
if (isNS4) divsize = document.layers[divname].clip.width;
else if (isIE4 || isIE5) divsize = document.all(divname).style.pixelWidth;
else if (isNS6) divsize = parseInt(document.getElementById(divname).style.width + "");
}
return divsize;
}
// Itt ellenőrizzük le hogy a pályán van-e a piros négyzetünk
function checktouching(num) {
var enemy = "enemy" + num + ""
var difX = giveposX('box') - giveposX(enemy) - 0; // -0 converts to integer
var difY = giveposY('box') - giveposY(enemy) - 0;
// set touch = 1 if it is touching an enemy
if (difX > (-1 * givesize('box', 'x')) && difX < givesize(enemy, 'x') && difY > (-1 * givesize('box', 'y')) && difY < givesize(enemy, 'y')) {
touch = 1;
}
else touch = 0;
}
<!-- A lépések nagysága a sebesség változást befolyásolja -->
function movenemy(num,step_x,step_y){
var enemy = "enemy" + num + ""
var enemyx = givesize(enemy, 'x');
var enemyy = givesize(enemy, 'y');
if (giveposX(enemy) >= (500 - enemyx) || giveposX(enemy) <= 0) {
enemyxdir[num] = -1 * enemyxdir[num];
}
if (giveposY(enemy) >= (500 - enemyy) || giveposY(enemy) <= 0) {
enemyydir[num] = -1 * enemyydir[num];
}
var newposx = giveposX(enemy) + (step_x*enemyxdir[num]) + 0;
var newposy = giveposY(enemy) + (step_y*enemyydir[num]) + 0;
setposX(enemy, newposx);
setposY(enemy, newposy);
checktouching(num + "");
if (touch == 1) {
stop(); reset();
}
}
<!-- Az itt lévő változókkal a mozgó alakzatok sebességét változtatjuk meg a számláló segítségével automatikusan -->
function movenemies() {
gametime = gametime + 1
if (gametime >= 0 && gametime < 100) speed = 80;
else if (gametime >= 100 && gametime < 200) speed = 70;
else if (gametime >= 200 && gametime < 300) speed = 60;
else if (gametime >= 300 && gametime < 400) speed = 50;
else if (gametime >= 400 && gametime < 500) speed = 40;
else speed = 10;
// window.status = "speed: " + speed + " gametime: " + gametime;
movenemy(0,-10,12);
movenemy(1,-12,-20);
movenemy(2,15,-13);
movenemy(3,17,11);
setTimeout(movenemies,speed);
}
function start(e) {
if (started == 0) { movenemies(); startclock(); started = 1; }
curX = (isNS4 || isNS6) ? e.pageX : window.event.x ;
curY = (isNS4 || isNS6) ? e.pageY : window.event.y ;
curX2 = eval(curX - 40);
curY2 = eval(curY - 40);
boxX = eval(curX - 20);
boxY = eval(curY - 20);
var boxleft = giveposX('box');
var boxtop = giveposY('box');
if (curX > boxleft && curX2 < boxleft && curY > boxtop && curY2 < boxtop) {
moving = 1;
setposX('box', boxX);
setposY('box', boxY);
if (isNS4 || isNS6){
document.captureEvents(Event.MOUSEMOVE);
}
}
}
<!-- Ha az egér pozíciója és az egyik alakzat pozíciója egyenlő akkor stop lezár és kiírja az eltelt időt -->
function stop(e){
moving=0;
if (isNS4 || isNS6){
document.releaseEvents(Event.MOUSEMOVE);
}
}
function reset(e){
endclock();
moving=0;
if (isNS4 || isNS6){
document.releaseEvents(Event.MOUSEMOVE);
}
if (finaltime == 0) {
finaltime = calctime();
window.alert('Ido: ' + finaltime + ' masodperc');
// var entername = window.confirm('Enter your name?');
// if (entername) {
// window.open("?" + finaltime,'winwin','width=300,height=500,left=40,top=40,status=1,resizable');
// document.location.reload();
// }
// else document.location.reload();
document.location.reload();
}
}
<!-- Az egér helyének ellemőrzése a keret adataival, egyezés esetén azonnal stop és leállás és az eltelt idő kiírása -->
function checkLocation(e){
curX = (isNS4 || isNS6) ? e.pageX : window.event.x ;
curY = (isNS4 || isNS6) ? e.pageY : window.event.y ;
boxX = eval(curX - 20);
boxY = eval(curY - 20);
checktouching('1');
if (moving == 1 && touch == 0){
setposX('box',boxX);
setposY('box',boxY);
if (curY > 69 && curX > 69 && curY < 381 && curX < 381) return false;
else stop(); reset();
}
else if (touch == 1){
stop(); reset();
}
}
</SCRIPT>
<!-- Ez a jávascript az ablak alján futó szövegért felelős -->
<script>
var esemeny
szoveg=' Szia 10 másodpercenként növelem a sebességet! Nekem 22 másodpercig sikerült... Neked meddig sikerül?'
function scroll() {
txt=txt.substring(1)
if (txt.length==0) txt=szoveg;
window.status=txt
esemeny=setTimeout("scroll()",100)
}
txt=szoveg;
scroll()
</script>
<!-- Itt történik a villogó háttér színének változtatása -->
<script language="JavaScript">
<!--
var currentcolor = 0
function initArray(n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '
}
}
bgcolors = new initArray(15)
bgcolors[0]="ffffff"
bgcolors[1]="ffdead"
bgcolors[2]="ffffff"
bgcolors[3]="add8e6"
bgcolors[4]="0000ff"
bgcolors[5]="add8e6"
bgcolors[6]="90ee90"
bgcolors[7]="00ff00"
bgcolors[8]="90ee90"
bgcolors[9]="ffc0cb"
bgcolors[10]="ff0000"
bgcolors[11]="ffc0cb"
bgcolors[12]="FFFFFF"
bgcolors[13]="ffdead"
bgcolors[14]="yellow"
<!-- Ez a függvény változtatja a színeket -->
function backgroundChanger() {
document.bgColor = bgcolors[currentcolor];
if (currentcolor < bgcolors.length-1) {
currentcolor++
setTimeout("backgroundChanger()", 100);
}
}
backgroundChanger();
//-->
</script>
<!-- Itt történik a szöveg színének méretének helyének beállítása -->
<BODY text=red bgColor=yellow leftMargin=0 topMargin=0 marginwidth="0"
marginheight="0">
<!-- Itt történik a mozgatható piros alakzat méretének színének beállítása -->
<DIV id=box
style="LEFT: 205px; WIDTH: 40px; POSITION: absolute; TOP: 205px; HEIGHT: 40px; BACKGROUND-COLOR: red; layer-background-color: #990000">
<TABLE height=40 width=40>
<TBODY>
<TR>
<TD> </TD></TD></TR></TBODY></TABLE></DIV>
<!-- Itt történik az automatikusan mozgó zöld alakzat méretének színének beállítása -->
<DIV id=enemy0
style="LEFT: 270px; WIDTH: 60px; POSITION: absolute; TOP: 60px; HEIGHT: 50px; BACKGROUND-COLOR: green; layer-background-color: #000099">
<TABLE height=50 width=60>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE></DIV>
<!-- Itt történik az automatikusan mozgó kék alakzat méretének színének beállítása -->
<DIV id=enemy1
style="LEFT: 300px; WIDTH: 100px; POSITION: absolute; TOP: 330px; HEIGHT: 20px; BACKGROUND-COLOR: blue; layer-background-color: #000099">
<TABLE height=20 width=100>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE></DIV>
<!-- Itt történik az automatikusan mozgó lila alakzat méretének színének beállítása -->
<DIV id=enemy2
style="LEFT: 70px; WIDTH: 30px; POSITION: absolute; TOP: 320px; HEIGHT: 60px; BACKGROUND-COLOR: purple; layer-background-color: #000099">
<TABLE height=60 width=30>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE></DIV>
<!-- Itt történik az automatikusan mozgó narancs alakzat méretének színének beállítása -->
<DIV id=enemy3
style="LEFT: 70px; WIDTH: 60px; POSITION: absolute; TOP: 70px; HEIGHT: 60px; BACKGROUND-COLOR: orange; layer-background-color: #000099">
<!-- Itt történik a fekete szegélyű tábla paraméterezése -->
<TABLE height=60 width=60>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 border=0><!-- felsooldal -->
<TBODY>
<TR>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR><!-- sarok rész-->
<TR>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR><!-- bal masodik oldal-->
<TR>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR><!--sarok rész felül-->
<TR>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR><!-- jobb oldal -->
<TR>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR><!-- felső jobb sarok-->
<TR>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR><!-- alsó negyedik oldal -->
<TR>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR><!--bal alsó sarok -->
<TR>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR><!--jobb alsó sarok-->
<TR>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width=50 bgColor=#000000 height=50>
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<!-- Itt történik a játéktér aláírt szöveg definiálásaés méretezése és színének beállítása -->
<center><span style="width: 500; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Glow(Color=#0000FF, Strength=10)"> Kedves nyugdíjas! Sok szerencsét kívánok a játékhoz! Szabó László István </span>
</BODY></HTML>
-----------
http://nyelvek.inf.elte.hu/leirasok/JavaScript/index.php?chapter=3
https://www.fzolee.hu/fw/602_a_javascript_alapjai_valtozok
http://gabor.molnar.es/blog/2013/05/05/javascript-programozas-jegyzet-tombok/
var termeklista = {
0: 'zöld pengető',
1: 'kék pengető',
2: 'húrok',
3: 'erősítő',
4: 'hangfal'
}
A tömbök nagyon gyakran előjönnek a programozásban, ezért létezik egy kényelmesebben használható rövidített formátum, amivel gyakorlatilag ugyanezt az objektumot lehet megadni (a főbb különbségekről később még lesz szó):
var termeklista = ['zöld pengető', 'kék pengető', 'húrok', 'erősítő'];
--------------------
Szorzótábla
<script type="text/javascript">
var i, j;
document.write('<table class="multiplicationtable">');
for (i=1; i<=15; i++) {
document.write('<tr>');
for (j=1; j<=15; j++) {
document.write('<td class="mptd">', i*j, '</td>');
}
document.write('</tr>');
}
document.write('</table>');
</script>
