Skip to content

Instantly share code, notes, and snippets.

@molnarg

molnarg/oraimunka.md

Last active Dec 17, 2015
Embed
What would you like to do?

Szent Angéla programozás szakkör - 2013. 05. 14.

HTML sablon

<html>
  <head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  </head>
  
  <body>
    <input id="in">
    <div id="negyzet" style="width: 100px; height: 100px; background-color: red;"></div>
  </body>
</html>
  1. példa

CSS és form tartalom módosítása:

  • a négyzet színének megváltoztatása
  • a beviteli mező értékének megváltoztatása:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  </head>
  
  <body>
    <input id="in">
    <div id="negyzet" style="width: 100px; height: 100px; background-color: red;"></div>
    
    <script>
      var negyzet = $('#negyzet');
      negyzet.css('background-color', 'green');
      
      var input = $('#in');
      input.val('Hello world!');
    </script>
  </body>
</html>
  1. példa

Eseménykezelés:

  • a négyzetre kattintva felugró ablakban megjelenik a beviteli mező tartalma
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  </head>
  
  <body>
    <input id="in">
    <div id="negyzet" style="width: 100px; height: 100px; background-color: red;"></div>
    
    <script>
      $('#negyzet').on('click', function() {
        var t = $('#in').val();
        alert(t);
      });
    </script>
  </body>
</html>
  1. feladat

  • a négyzet felé húzva az egeret változzon meg a színe
  • ha a kurzor elhagyja a négyzetet, a négyzet színe változzon vissza
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  </head>
  
  <body>
    <input id="in">
    <div id="negyzet" style="width: 100px; height: 100px; background-color: red;"></div>
    
    <script>
      $('#negyzet').on('mouseenter', function() {
        $('#negyzet').css('background-color', 'green');
      });
      
      $('#negyzet').on('mouseleave', function() {
        $('#negyzet').css('background-color', 'red');
      });
    </script>
  </body>
</html>
  1. feladat

Számológép program:

  • 3 beviteli mezőből áll és gombból áll
  • az 1. és a 3. mező számokat vár
  • a 2. mező egy műveleti jelet (+, -, /, *)
  • a gombra kattintva felugró ablakban jelenjen meg a számolás eredménye
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  </head>
  
  <body>
    <input id="szam1">
    <input id="muvelet">
    <input id="szam2">
    <button>Számolj!</button>
    
    <script>
      $('button').on('click', function() {
        var szam1 = Number($('#szam1').val()),
            szam2 = Number($('#szam2').val()),
            muvelet = $('#muvelet').val();
        
        var eredmeny;
        if (muvelet === '+') {
          eredmeny = szam1 + szam2;
        } else if (muvelet === '-') {
          eredmeny = szam1 - szam2;
        } else if (muvelet === '*') {
          eredmeny = szam1 * szam2;
        } else if (muvelet === '/') {
          eredmeny = szam1 / szam2;
        }
        
        alert(eredmeny);
      });
    </script>
  </body>
</html>
  1. feladat

Visszaszámláló:

  • a felhasználói felület egy beviteli mezőből és egy gombból áll
  • a felhasználó beír egy számot a mezőbe, majd megnyomja a gombot
  • ennek hatására elindul a visszaszámlálás, ami egészen 0-ig tart
  • 0-nál a háttér elkezd színesen villogni
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  </head>
  
  <body>
    <input id="szamlalo">
    <button>Visszaszámlálás!</button>
    
    <script>
      $('button').on('click', function() {
        var szamlalo = Number($('#szamlalo').val());
        
        setInterval(function() {
          szamlalo = szamlalo - 1;
          
          if (szamlalo >= 0) {
            // A számláló még nem járt le
            $('#szamlalo').val(szamlalo);
            
          } else {
            // A számláló már lejárt, mert negatív az értéke
            if (szamlalo % 2 === 0) {
              $('body').css('background-color', 'red');
            } else {
              $('body').css('background-color', 'green');
            }
          }
        }, 1000);        
      });
    </script>
  </body>
</html>

Ráadás: számláló horrorfilm stílusban :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.