Der Supertext-Programmier-Kurs: Javascript 2

Hier sind die Slides und Übungen vom viertenTeil und vorläufig letzten Teils unseres Programmierkurses:

https://www.dropbox.com/s/m95350oahmu2kem/Javascript2.zip?dl=0

Das Material vom drei Teilen finden Sie hier:

http://remy.supertext.ch/2015/01/der-supertext-programmier-kurs-javascript-1/

http://remy.supertext.ch/2015/01/der-supertext-programmier-kurs-html-basics/

http://remy.supertext.ch/2015/01/der-supertext-programmier-kurs-html-mit-css/

 

Übung 1

Damit Sie für die erste Übung mit den Loops nicht alles nochmals selber schreiben müssen, hier nochmals das Template:

 

<!DOCTYPE html>
<html>
<head>
<title>Javascript 1 - For loop</title>
<script>

</script>
</head>
<body>

<h1>For loop</h1>

</body>
</html>

 

Übung 2

Und das Template für die zweite Übung mit der Funktion.

<!DOCTYPE html>
<html>
<head>
  <title>Javascript 2 - For loop mit Funktion</title>
  <script>

  </script>

  <style type="text/css">
    .square {
      width:200px;
      height: 60px;
      background-color: Green;
      margin:10px;
      padding:10px;
    }
  </style>

</head>
<body>

  <h1>For loop mit Funktion</h1>

</body>
</html>

 

Übung 3

Damit alle bei der Übung vom letzten Teil auf dem gleiche Stand sind,  den Code von unten einfach in ein HTML File kopieren. Bis jetzt fährt damit das Rechteck einfach endlos über den Bildschirm. Die Idee ist jetzt, diesen Code soweit zu erweitern, dass die Bewegung irgendwann stoppt. Hint: If/then/else.

 

<!DOCTYPE html>
<html>
<head>
  <title>Javascript - Bewegung 1</title>
<script>
  var moves = 1;

  function MoveElementRight() {
    myVar = setTimeout(function() {MakeOneStep();}, 50);
  }

  function MakeOneStep() {
    var element = document.getElementById("MyClick");
    element.style.marginLeft = (moves * 10) + "px";
    moves = moves + 1;

    MoveElementRight();
  }
</script>

<style type="text/css">
.square {
  width:200px;
  height: 60px;
  background-color: Green;
  margin:10px;
  padding:10px;
}
</style>
</head>
<body>

  <h1>Bewegung</h1>

  <div class="square" id="MyClick" onclick="MoveElementRight();" >Klick auf mich</div>

</body>
</html>

 

Viel Glück und hoffentlich auch heute viel Spass!




Ähnliche Beiträge


Leave a Reply

Your email address will not be published. Required fields are marked *



*