en:modul:m291:learningunits:lu07:aufgaben:01

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		 Vorhergehende Überarbeitung
en:modul:m291:learningunits:lu07:aufgaben:01 [2025/04/29 13:00] – angelegt vdemiren:modul:m291:learningunits:lu07:aufgaben:01 [2025/05/09 09:33] (aktuell) – vdemir
Zeile 1: Zeile 1:
-====== LU07.A01 - Events - Introductory example ======+====== LU07.A01 - Methods simple - Introductory example ======
  
 ===== Prerequisites  ===== ===== Prerequisites  =====
Zeile 10: Zeile 10:
   - Use of Vue Methods.   - Use of Vue Methods.
   - Writing own methods und make use of them.    - Writing own methods und make use of them. 
-  - +
 ===== Source ===== ===== Source =====
   * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_methods_helloWorld |Code-example: Methods in VUE]]   * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_methods_helloWorld |Code-example: Methods in VUE]]
Zeile 18: Zeile 18:
   * 1.2: Transfer the above provided script to this new directory.   * 1.2: Transfer the above provided script to this new directory.
   * 1.3: Make sure that you have the title <h1> correctly named: **lu07.s01.html**   * 1.3: Make sure that you have the title <h1> correctly named: **lu07.s01.html**
-  * 1.4: Execute the script. As a result, in the right window there will be a green rectangle. After clicking on that green area there  should be a message-box with the content **Hello World!**+  * 1.4: Execute the script. As a result, in the right window there will be a green rectangle. After clicking on that green area there  should be a message-box with the content **Hello World** 
 + 
 +===== Assignment 2: resetText ===== 
 +  * 2.1: Add a method **resetText**, that sets the content of the variable //text// to '' (empties the content) 
 +  * 2.2: Use this new method //resetText// within a separate //div// 
 +  * 2.3: The text //Hello world// appears, when clicking the first area, and disapears when pushing the second area. 
 + 
 +===== Assignment 3: increment by 1 ===== 
 +  * 3.1: Add a new variable //cnt1// and initialize it with 0. 
 +  * 3.2: Add a method **increment1**, that increments the //cnt1-variable// with step-size 1 
 +  * 3.3: Create in the HTML-area a //div//, which increments the //cnt1-variable// by making use of the //increment1-method//
  
-===== Assignment 2: increment by 1 ===== +===== Assignment 4: increment by 2 ===== 
-  * 2.1: Add in a new variable //cnt// and initialize it with 0. +  * 4.1: Add a new variable //cnt2// and initialize it with 0. 
-  * 2.2: Add a method **increment**, that increments the //cnt-variable// with step-size 1 +  * 4.2: Add a method **increment2**, that increments the //cnt2-variable// with step-size 2 
-  * 2.3: And finally create in the //HTML-area a div, which increments the //cnt-variable// by making use of the //increment-methods+  * 4.3: Create in the HTML-area a //div//, which increments the //cnt2-variable// by making use of the //increment2-method// 
 +  
 +===== Assignment 5: cascading use of methods ===== 
 +  * A5.1: Create a new method **alltogether** which, in turn, uses the methods //setText, increment1, increment2//  
 +  * A5.2: Add a variable //text2// to store the combined content of the variables text, cnt1 and cnt2 
 +  * A5.3: Create in the HTML-area a //div//, in which the content of the variable //text2// is displayed
  
-===== Assignment 3: increment by 2 ===== +===== Assignment 6: Reset all variables ===== 
-  *A3.1: Add another varible //cnt2// for a second increment-method +  * A6.1: Define a final method //resetAll// which resets the content off all variables (text1, cnt1, cnt2, text2) 
-  *A3.2: Add another method //increment2//, which uses the step-size 2. +  * A6.2: Create in the HTML-area a //div//, that resets all variables when clicked.
-  *A3.3: Define another div for making use of the method //increment2//+
  
-===== Assignment 4: cascading use of methods ===== 
-  * A4.1: Define a final method //alltogether//, which uses both methods //increment// and //increment2// to display the result. 
-  * A4.2: The methods //alltogether// greets furthermore the Universe.  
-  * A4.3: Be content and happy, as you finshed the complete assignment.  
  
 ===== Solution ===== ===== Solution =====
Zeile 43: Zeile 53:
 | rectangle | Rechteck | | rectangle | Rechteck |
 | content | zufrieden | | content | zufrieden |
 +| which, in turn | die ihrersetis |
  
  
  • en/modul/m291/learningunits/lu07/aufgaben/01.1745924444.txt.gz
  • Zuletzt geändert: 2025/04/29 13:00
  • von vdemir