Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:javascript:javascript_feladatok

Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

Összehasonlító nézet linkje

oktatas:web:javascript:javascript_feladatok [2019/08/22 19:51] (aktuális)
admin létrehozva
Sor 1: Sor 1:
 +[[oktatas:​web:​javascript|<​ JavaScript]]
 +
 +====== JavaScript Feladatok ======
 +
 +===== Á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 1001 ====
 +
 +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 1002 ====
 +
 +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 2001 ====
 +
 +
 +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>​
  
oktatas/web/javascript/javascript_feladatok.txt · Utolsó módosítás: 2019/08/22 19:51 szerkesztette: admin