molnarg/oraimunka.md

## oraimunka.md

      
    Raw
  

              oraimunka.md
            
          
    Szent Angéla programozás szakkör - 2013. 04. 30.

Chrome konzol kisérletezéshez:

Konzol megnyitása Chrome-ban: Ctrl+Shift+J
Enter: a beírt parancs kiértékelése
Shift + enter: parancs folytatása új sorba

Előző jegyzetek puskázáshoz:

Canvas: http://gabor.molnar.es/blog/2013/05/05/javascript-programozas-jegyzet-canvas-api/
Ojektumok: http://gabor.molnar.es/blog/2013/05/05/javascript-programozas-jegyzet-objektumok/
Függvények: http://gabor.molnar.es/blog/2013/05/05/javascript-programozas-jegyzet-fuggvenyek/
Elágazás, ciklusok: http://patrik.what.hu/web/szta_prog_2013/eloadas_4_5_kivonat.pdf


feladat


Hozzunk létre két JavaScript fájlt, és egy HTML-t, ami a két JavaScript fájlt hivatkozza
Az első hozzon létre egy objektumot
A második írja ki document.write()-ot használva a tulajdonságainak az értékét

A HTML és a két JS fájl legyen egy könyvtárban!
feladat1.html:
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hivatkozva</title>
</head>

<body>
  <script src="forras.js"></script>
  <script src="hivatkozas.js"></script>
</body>

</html>
forras.js:
var gitar = {
  marka : "Gibson",
  hossz : 22,
  raktar : true
};
hivatkozas.js:
document.writeln('Márka: ');
document.writeln(gitar.marka);
document.writeln('<br>');

document.writeln('Hossz: ');
document.writeln(gitar.hossz);
document.writeln('<br>');

document.writeln('Raktáron van: ');
document.writeln(gitar.raktar === true ? 'Igen' : 'Nem');
document.writeln('<br>');

feladat


Írjuk át az előző példát úgy, hogy:


fájl: tömb, bármilyen elemekkel


fájl: tömb kiíratása, for ciklussal


forras.js:
var days = ['monday','tuesday','wednesday','thursday','friday','saturday','sunday'];
hivatkozas.js:
for (var i = 0; i < 7; i++) {
  document.writeln('The ' + i + '. day of the week: ');
  document.writeln(days[i]);
  document.writeln('<br>');
}

feladat


Ez a fájl létrehoz egy tömbobjektumot, ami hőmérséklet mérési adatokat tárol: http://molnar.es/temperature.js
Állapítsuk meg a legkisebb, és legnagyobb mért adatot
Állapítsuk meg az átlaghőmérsékletet

feladat3.html:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>

<!-- A hőmérséklet fájl betöltése a t globális változóba -->
<script src="http://molnar.es/temperature.js"></script>

<script>
  // Minimum hőmérséklet:
  var min = t[0];
  for (var i = 0; i < t.length; i++) {
    if (t[i] < min) min = t[i];
  }
  document.write('A minimum hőmérséklet: ' + min);
  
  // Maximum hőmérséklet:
  var max = t[0];
  for (var i = 0; i < t.length; i++) {
    if (t[i] > max) max = t[i];
  }
  document.write('A maximum hőmérséklet: ' + max);
  
  // Átlaghőmérséklet:
  var sum = 0;
  for (var i = 0; i < t.length; i++) {
    sum = sum + t[i];
  }
  var atlag = sum / t.length;
  document.write('Az átlaghőmérséklet: ' + atlag);
</script>

<body>
</html>

feladat


Az előző példa tömbje egy 49x28-as terület mérési eredményeit tartalmazza.
Rajzoljuk ki a hőmérsékleti térképet <canvas>-on!
Segédfüggvény a szín beállítására a hőmérsékletnek megfelelően:

var set_temperature_color = function(t) {
    if (t < 0) {
        context.fillStyle = 'hsl(243, ' + (-t / 0.4) + '%, 50%)';
    } else if (t < 20) {
        context.fillStyle = 'hsl(50, ' + (t / 20 * 100) + '%, 50%)';
    } else {
        context.fillStyle = 'hsl(' + (50 - (t - 20) * 2.5) + ', 100%, 50%)';
    }
};
feladat4.html:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>

<body>

<!-- Egy 500x500 pixel méretű rajzvászon, "rajz" id-vel. -->
<canvas width="500" height="500" id="rajz"></canvas>

<!-- A hőmérséklet fájl betöltése -->
<script src="http://molnar.es/temperature.js"></script>

<script>
  // A canvas objektumhoz az id-je alapján lehet hozzáférni:
  var rajz = document.getElementById('rajz');

  // A rajzoló függvényeket a vászon 2 dimenziós "kontextusában" fogjuk használni
  // (van 3 dimenziós is, de azzal most nem foglalkozunk)
  var context = rajz.getContext('2d');

  // Ide jön a további rajzoló kód
  var set_temperature_color = function(t) {
    if (t < 0) {
        context.fillStyle = 'hsl(243, ' + (-t / 0.4) + '%, 50%)';
    } else if (t < 20) {
        context.fillStyle = 'hsl(50, ' + (t / 20 * 100) + '%, 50%)';
    } else {
        context.fillStyle = 'hsl(' + (50 - (t - 20) * 2.5) + ', 100%, 50%)';
    }
  };
  
  var box_w = rajz.width / 49,
      box_h = rajz.height / 28;

  for (var y = 0; y < 28; y++) {
      for (var x = 0; x < 49; x++) {
          set_temperature_color(t[y*49 + x]);
          context.fillRect(x * box_w, rajz.height - y * box_h, box_w, box_h);
      }
  }
</script>

<body>
</html>