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
- fájl: tömb kiíratása,
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>