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.

--- oktatas:web:javascript:allapotok_es_koetesek_tarolasa [2023/05/07 18:57]
admin [Számláló]
+++ oktatas:web:javascript:allapotok_es_koetesek_tarolasa [2024/03/08 22:58]
admin [Számláló]
@@ Sor 4: / Sor 4: @@
   * **Szerző:** Sallai András
-  * Copyright (c) Sallai András, 2023
+  * Copyright (c) 2023, Sallai András
+  * Szerkesztve: 2023, 2024
   * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
   * Web: https://szit.hu
@@ Sor 26: / Sor 27: @@
     count: 0
 };
+window.addEventListener('load', () => {
+    init();
+})
 function init() {
-    doc.button.innerText = `Count: ${state.count}`;
+    render();
     doc.button.addEventListener("click", () =>
       updateState()
@@ Sor 39: / Sor 44: @@
     render();
 }
+function render() {
+    doc.button.innerText = `Count: ${state.count}`;
+}
+</code>
+===== Háromszög területszámítás =====
+<code html index.html>
+<!DOCTYPE html>
+<html lang="hu">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h3>Háromszög</h3>
+    <div class="triangleForm">
+        <div class="input">
+            <label for="baseInput">Alap</label>
+            <input type="text" id="baseInput">
+        </div>
+        <div class="input">
+            <label for="heightInput">Magasság</label>
+            <input type="text" id="heightInput">
+        </div>
+        <div>
+            <button id="calcButton">Számít</button>
+        </div>
+        <div class="input">
+            <label for="areaInput">Terület</label>
+            <input type="text" id="areaInput">
+        </div>
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>
+</code>
+<code javascript app.js>
+const doc = {
+    baseInput: document.querySelector("#baseInput"),
+    heightInput: document.querySelector("#heightInput"),
+    areaInput: document.querySelector("#areaInput"),
+    calcButton: document.querySelector("#calcButton")
+}
+const state = {
+    base: 0,
+    height: 0,
+    area: 0
+}
+window.addEventListener('load', () => {
+    init();
+})
+function init() {
+    doc.calcButton.addEventListener("click", () => {
+        startCalc();
+    })
+}
+function startCalc() {
+    state.base = doc.baseInput.value;
+    state.height = doc.heightInput.value;
+    state.area = calcArea(state.base, state.height);
+    doc.areaInput.value = state.area;
+}
+function calcArea(base, height) {
+    return base * height / 2;
+}
 </code>
+===== Lásd még =====
+  * https://github.com/oktat/exemployee_statejs

szit

Felhasználói eszközök

Eszközök a webhelyen

Különbségek

Eszközök az oldalon