JavaScript. Molnár András

HTML
DOWNLOAD

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "JavaScript. Molnár András"

Lajos Gulyás
8 évvel ezelőtt
Látták:

1 JavaScript Molnár András 1

2 HTML oldalak általános struktúrája <html> <head> 2 </head> <body> <h1>ez egy sima HTML oldal üzenete!</h1> <font color = "RED"> Itt lehet különféle HTML utasításokat alkalmazni. </font><br> </body> </html>

3 Hol helyezhetünk el scripteket? 3 <html> <head> </head> <body> </body> </html> A weboldal törzsében. Ekkor a script kimenete megjelenik az oldal részeként. A weboldal fejlécében. Az itt elhelyezett részek nem jelennek meg az oldal részeként, de lehet rájuk hivatkozni. Általában függvényeket lehet itt elhelyezni. A body vagy form elemekben script elem használata nélkül. Ezeket a részeket nevezzük eseménykezel knek. Különálló file-ban. Ezek.js kiterjesztés, különálló állományok.

4 Helló Világ 4 <html> <head> </head> <body> <h1>ez egy sima HTML oldal üzenete!</h1> <font color = "RED"> document.write("ez egy JavaScript üzenet!");<br> document.write(document.lastmodified);<br> </font><br> </body> </html> <script LANGUAGE="JavaScript"> document.write("ez egy JavaScript üzenet! <br>"); document.write(document.lastmodified + <br> ); </script>

5 Világid megjelenítése ido = new Date(); helyiido = ido.tostring(); vilagido = ido.togmtstring(); document.write("helyi id :" + helyiido + "<br>"); document.write("világid :" + vilagido + "<br>"); ora = ido.gethours(); perc = ido.getminutes(); masodperc = ido.getseconds(); 5 document.write("<font size=+5>"); document.write(ora + " : " + perc + " : " + masodperc); document.write("</font>");

6 Szövegbevitel, feltételkezelés szoveg = prompt("írd be a neved!"); document.write("<br><font size=+5> Szia " + szoveg + "!</font><br>"); szamlalo = 1; if (szamlalo == 1) alert ("A számláló értéke 1."); if (szamlalo!= 1) alert ("A számláló értéke NEM 1."); szamlalo = 2; if (szamlalo == 1) alert ("A számláló értéke 1."); if (szamlalo!= 1) alert ("A számláló értéke NEM 1."); 6

7 for ciklus for (i=1; i<5; i++) { document.write(i + ". lépés!<br>"); ****Figyelem! Itt is lehet végtelen ciklust írni!**** 7 for (i=1; i<5; i++) { document.write(i + ". lépés!<br>"); i = i-1;

8 do while ciklus nevek = new Array(); i =0; do{ next = window.prompt("kérem a következ nevet!",""); if (next > " ") nevek[i] = next; i++; while (next > " "); document.write("eddig " + (nevek.length) + " nevet rögzített."); document.write("<ol>"); 8 for(i in nevek) { document.write("<li>" + nevek[i] + "<br>"); document.write("</ol>");

9 Függvények 9 <head> <script LANGUAGE="JavaScript"> function Atlag(a,b,c,d) { eredmeny = (a + b + c + d)/4; return eredmeny; </script> </head> <body> <h1>átlag számoló függvény!</h1> <script LANGUAGE="JavaScript"> a1 = Veletlen(); pont a2 = Veletlen(); = Atlag(1,2,3,4); a3 = Veletlen(); function Veletlen() { return Math.floor(Math.random() * 10); document.write("az atlag: " + pont); a4 = Veletlen(); pont = Atlag(a1,a2,a3,a4); document.write("a(z) " + a1 + "," + a2 + "," + a3 + "," + a4 + "számok atlag: " + pont); </script> </body>

10 Switch & Case cel = prompt("add meg a megnyitni kívánt oldal nevét! Pl. Google"," "); 10 switch (cel) { case "Google" : window.location = " break; case "Yahoo" : window.location = " break; case "Microsoft" : window.location = " break; default : window.location = "

11 Eseménykezel k <a href = " onmouseover = "document.images[0].src='smoochie.gif';" onmouseout = "document.images[0].src='worship.gif';"> <img src="worship.gif"> </a> 11

12 Játékprogram 3/1 <head> <script> var szam = Math.floor(Math.random() * 100) + 1; var szamlalo = 0; function Tipp() { var g = document.form1.tipp1.value; szamlalo++; status = szamlalo + ". tippelés."; 12

13 Játékprogram 3/2 13 if (g < szam) document.form1.hint.value = "Nem jó! A tipp túl kevés."; if (g > szam) document.form1.hint.value = "Nem jó! A tipp túl sok."; if (g == szam) { window.alert("helyes!") location.reload(); if (szamlalo == 10) { window.alert("sajnálom, a " + szamlalo + ". tipp sem jó!"); location.reload(); </script> </head>

14 Játékprogram 3/3 <body> <h1>gondoltam egy számra!</h1> Gondoltam egy számra 1 és 100 között. Próbálja meg legfeljebb 10 lépésben kitalálni! <form NAME = "form1"> <input TYPE="text" SIZE=25 NAME="hint" VALUE="Gépelje be a tippjét!"><br> <b>tipp:</b> <input TYPE="text" NAME="tipp1" SIZE=5 onkeydown="isenter(event);" > <input TYPE="BUTTON" VALUE="Tipp" onclick="tipp();"> 14 </form> </body>

15 Játékprogram módosítás <head> <script> var szam = Math.floor(Math.random() * 100) + 1; var szamlalo = 0; 15 function IsEnter(E) { if (E.keyCode == 13) { Tipp(); function Tipp() { var g = document.form1.tipp1.value; szamlalo++; status = szamlalo + ". tippelés.";

16 Adatlap adatainak ellen rzése 1/3 <BODY> <H1>Adatlap regisztrációhoz</h1> <HR>Töltse ki az adatlap mez it, majd nyomja meg az "elküld" gombot!<hr> <FORM NAME="adatlap" onsubmit="return Ellenorzes();"> <B>Név:</B> <INPUT TYPE="text" NAME="felhasznalo" SIZE=20><BR> <B>Telefonszám: </B> <INPUT TYPE="text" NAME="telefon" SIZE=15><BR> <B> </B> <INPUT TYPE="text" NAME=" " SIZE=20><BR> <B>Levelezési cím:</b> <INPUT TYPE="text" NAME="cim" SIZE=30><BR> <B>Irányítószám:</B> <INPUT TYPE="text" NAME="ir" SIZE=30> <HR><INPUT TYPE="SUBMIT" NAME="submit" VALUE="Elküld"> <INPUT TYPE="RESET" VALUE="Mindent töröl"> </FORM> </BODY>

17 Adatlap adatainak ellen rzése 2/3 <HEAD> <SCRIPT> // Adatellenörzés function Ellenorzes() { hiba = false; if (!StringHossz(document.adatlap.felhasznalo.value,6)) error("hibás név!"); if (!StringHossz(document.adatlap.telefon.value,7)) error("hibás telefonszám!"); if (!StringHossz(document.adatlap. .value,5)) error("hibás cím!"); if (!StringHossz(document.adatlap.cim.value,10)) error("hibás cím!"); if (!StringHossz(document.adatlap.ir.value,3)) error("hibás irányítószám!"); return!hiba; /* Igaz, ha nem volt hiba! */ </SCRIPT> </HEAD>

18 Adatlap adatainak ellen rzése 3/3 //hibajelz változó (globális változó) var hiba = false; //sztring hosszának ellen rzése function StringHossz(item, hossz) { return (item.length >= hossz); // Hibaüzenet a képerny re function error(text) { if (hiba) return; window.alert(text); hiba = true;

19 <body> Pithagorasz 1/2 <form name="pythag"> <div align="center"><center><p><strong><big>a Pythagoras tétel <br> </big></strong>tetsz leges derékszög háromszög befogóinak (a, b) négyzetösszege megeggyezik az átfogó (c) négyzetével.<br> a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup><i></p> </center></div><div align="center"><center><p></i><strong>az átfogó kiszámítása a befogók adataiból</strong></p> </center></div><hr align="center"> <div align="center"><center><p><input TYPE="button" onclick="uzenet()" value="a befogók"> </p> </center></div><div align="center"><center><p>a <input type="text" name="a" value size="20"> </p> </center></div><div align="center"><center><p>b <input type="text" name="b" value size="20"> </p> </center></div><div align="center"><center><p><input type="button" value="kiszámítás" onclick="solvepg()"> </p> </center></div><div align="center"><center><p>c: <input type="text" name="eredmeny" value size="20"> </p> </center></div> </form> </body>

20 <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>pythagoras tetel</title> <script> Pithagorasz 2/2 function uzenet() { alert("csak add meg az a és b oldalakat, ne vonj gyököt, a program majd megteszi neked.") function solvepg() { a = document.pythag b = a.a.value c = a.b.value c=parseint(c) b=parseint(b) b = b*b c = c*c d = b+c e = Math.sqrt(d) document.pythag.eredmeny.value = e </script> </head>

Hasonló dokumentumok

HTML. Ismerkedés a JavaScripttel. A JavaScript lehet ségei. A JavaScript kód helye. Önálló JavaScript fájlok

HTML. Ismerkedés a JavaScripttel. A JavaScript lehet ségei. A JavaScript kód helye. Önálló JavaScript fájlok HTML Ismerkedés a JavaScripttel webprogramozó A weblapokat HTML nyelven készíthetjük el. A HTML egyszer leírónyelv, nem alkalmas válaszolni a felhasználóknak, nem tud döntéseket hozni, nem tud végrehajtani