Szent Angéla programozás szakkör - 2013. 04. 22.

Objektumok

Jegyzetek:

• 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/

Chrome konzol használata

• Konzol megnyitása: Ctrl+Shift+J
• Enter: a beírt parancs kiértékelése
• Shift + Enter: parancs folytatása új sorban
• Változó neve, utána Enter kiírja a változó aktuális értékét (objektumoknál kiírja a tulajdonságokat is!)

1. feladat

---

• A konzolban hozzunk létre egy objektumot
• Minden táblán levő műveletet végezzünk el vele
  • tulajdonság lekérdezés
  • tulajdonság értékadás
  • tulajdonság törlés
  • egy tulajdonság kiíratása

var o = {
  a: 16,
  szin: "zold",
  letezik: true,
  x: 5 + 6
};
o.y = false;
delete o.letezik;
console.log(o.a);

2. feladat:

---

• Hozunk létre egy könyv objektumot ezekkel a tulajdonságokkal:
  • szerző
  • cím
  • kiadás dátuma
• Hozzunk létre egy függvényt
  • ami egy könyv objektumot kap argumentumként
  • visszaadja a könyv adatait sztringként, pl: "Douglas Adams - Galaxis utikalauz stopposoknak (1979)"
• A függvény használva irassuk ki a könyv objektumunkat

var konyv = {
  szerzo: "Dzsordzs Bush",
  cim: "My war",
  datum: 2014
};
var f = function(konyv) {
  return konyv.szerzo + " - " + konyv.cim + " (" + konyv.datum + ")";
};
var s = f(konyv);
console.log(s);

Canvas API

Jegyzet: https://gist.github.com/molnarg/5429284

Példa

Egy elforgatott négyzet a vászon közepére:

context.translate(300, 300);
context.rotate(1);
context.strokeRect(0, 0, 100, 100);

3. feladat

---

Rajzoljunk virágot!

context.translate(300, 300);

context.strokeRect(0, 0, 100, 100);
context.rotate((2 * Math.PI) / 3);
context.strokeRect(0, 0, 100, 100);
context.rotate((2 * Math.PI) / 3);
context.strokeRect(0, 0, 100, 100);

4. feladat

---

Rajzoljunk kört téglalapokkal! :)

context.translate(300, 300);

context.rotate(1);
context.translate(0, 150);
context.strokeRect(0, 0, 100, 100);
context.translate(0, -150);

context.rotate(1);
context.translate(0, 150);
context.strokeRect(0, 0, 100, 100);
context.translate(0, -150);

context.rotate(1);
context.translate(0, 150);
context.strokeRect(0, 0, 100, 100);
context.translate(0, -150);

context.rotate(1);
context.translate(0, 150);
context.strokeRect(0, 0, 100, 100);
context.translate(0, -150);

4. feladat

---

Rajzoljunk spirált!

var x = 0;
for (var k = 1; k <= 13; k++) {
    context.rotate(1);
    context.strokeRect(x, 0, 10, 10);
    x = x + 10;
}

Bónusz: Fibonacci spirál

https://gist.github.com/molnarg/5442948