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

  * **Szerző:** Sallai András
  * Copyright (c) 2019, Sallai András
  * Szerkesztve: 2019, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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. 


===== Hibára épülő feladatok =====

==== Feladat 0101 ====


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.


<code html index.html>
<!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>
</code>


<code javascript script.js>
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;
	}
};
</code>

<code css style.css>
#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;
}

</code>
szit

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon
