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. 04. 30.

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:

  1. feladat

  1. Hozzunk létre két JavaScript fájlt, és egy HTML-t, ami a két JavaScript fájlt hivatkozza
  2. Az első hozzon létre egy objektumot
  3. 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>');
  1. feladat

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

    1. fájl: tömb, bármilyen elemekkel
    1. 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>');
}
  1. 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>
  1. 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment