< JavaScript

JavaScript Feladatok

Szerző: Sallai András

Copyright © 2019, Sallai András

Szerkesztve: 2019, 2024

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Általános feladatok

Feladat 0001

Készítsen weblapot, amelynek tetején minidig a napszaknak megfelelő üdvözlet szerepel.

Például 10:00-ig „Jó reggelt”, Utána 18:00-ig „Jó napot”. Utána „Jó estét”.

Űrlapos feladatok

Feladat 0051

Készítsen egy űrlapot, ahol bekér egy e-mail címet. Az űrlapba beírt e-mail címet ellenőrizze, hogy valóban e-mail cím-e a beírt szöveg.

Feladat 0052

Készítsen webalkalmazást, amely kiszámítja egy háromszög területét az alapból és a magasságból.

Tömbös rendereléses

Feladat 0101

REST API rendereléses

Feladat 0151

Hibára épülő feladatok

Feladat 0201

Az alábbiakban egy duplázó webes alkalmazást láthatunk JavaScript és CSS megoldással. A feladatban azonban nem működik a duplázás. Három hibát is rejt a feladat. Keresse meg a hibákat.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Sablon</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <h1>Duplázó</h1> <p> Készítsen weblapot, amely tartalmazza a feladat leírását. A weblapon legyen egy beviteli mező, amely számokat vár. Legyen egy nyomógomb, amelyre kattintva, a beviteli mező tartalma megduplázódik. A duplázott érték egy div elemben jelenjen meg </p> <div> <label>Szám:</label> <input type="text" id="szam1"><br> <button if="duplaGomb">Dupla</button> <button id="rejtGomb">Rejt</button> <div id="eredmeny"></div> </div> </div> <script src="script.js"></script> </body> </html>
var szam1Div = document.getElementById("szam1"); var duplaGomb = document.getElementById("duplaGomb"); var eredmenyDiv = document.getElementById("eredmeny"); var rejtGomb = document.getElementById("rejtGomb"); rejtGomb.onclick = function() { eredmenyDiv.style.display = "none"; }; duplaGomb.onclick = function() { eredmenyDiv.style.display = "block"; var szam1Str = szam1Div; if(szam1Str.match("[^0-9]")) { alert("Nem várt karakter!"); }else { var eredmeny = 2 * szam1Div.Value; eredmenyDiv.innerHTML = eredmeny; } };
#eredmeny { background-color: navy; color: white; padding: 48px; border-radius: 10px; position: fixed; top: 50px; left: 40%; display: none; border-width: 2px; border-style: solid; } #container { background-color: navy; color: white; padding: 48px; border-radius: 10px; margin: 2% 10%; } #container h1 { font-family: sans; }