Tablice oraz iterowanie po nich (współdzielenie tablic, pilot)

workshop: #js5-ws-tab-obj.html

Mini-warsztat JS: tablice i iterowanie przez nie

Obsługa tablic, współdzielenie tablic poprzez referencję oraz poprzez kopię

Przygotowanie

Otwórz narzędzia deweloperskie przegladarki, następnie przejdź na zakładkę Konsola (console)
Wykonuj tam kod i polecenia z poniższych przykładów
Przetestuj każdy przykład od 1.1 do 1.4 wywołując jego funkcjonalności i obserwując zachowanie. Popraw/uzupełnij przykład, jeżeli posiada błędy/braki
Uzupełnij skrypt 1.4 Pilot TV, tak, by faktycznie zmieniał kanały
Na koniec przerób skrypt stworzony w poprzednim ćwiczeniu tak by składał się z obiektów (następne ćwiczenie):
- Wprowadź zabezpieczenia na zmianę nazwy gracza, by funkcja nie działała, kiedy gra jest rozpoczęta
- Wprowadź zabezpieczenia na dodawanie i odejmowanie punktów, by funkcja nie działała, kiedy gra jest wstrzymana
- Skończ obsługę inwentarza gracza - zapisuj zasoby w tablicy lub obiekcie, odczytuj zawartość tworząc listę, wprowadź zabezpieczenia, jak kontrolę kluczy/zawartości oraz Limit 5 sztuk w inwentarzu

1.1Dwie tablice współdzielące trzecią tablicę (referencja)

≫ var intro = ['Technologie Web','Standardy W3C','Podstawy HTML','Podstawy CSS'];
≫ var kursAplikacjiWww = [ intro, 'DOM','WebWorkers','WebSockets','Format JSON','Witryny w XML'];
≫ var kursWitrynWww = [ intro, 'Semantyka','Formularze','Animacje CSS','Responsywność','Widżety JavaScript'];
≫ console.log("Tematy kursu TAI: "+kursAplikacjiWww.join(', '));
≫ console.log("Tematy kursu WI: "+kursWitrynWww.join(', '));
≫ kursAplikacjiWww[0][0] = 'Podstawy sieci';
≫ console.log("Nowy temat to: "+kursWitrynWww[0][0]);
≫ console.log("Zmiana w podstawie: ");
≫ console.log("Tematy kursu TAI: "+kursAplikacjiWww.join(', '));
≫ console.log("Tematy kursu WI: "+kursWitrynWww.join(', '));

1.2Dwie tablice posiadające własną kopię trzeciej tablicy

≫ var intro = ['Technologie Web','Standardy W3C','Podstawy HTML','Podstawy CSS'];
≫ var kursAplikacjiWww = [ intro.slice(), 'DOM','WebWorkers','WebSockets','Format JSON','Witryny w XML'];
≫ var kursWitrynWww = [ intro.slice(), 'Semantyka','Formularze','Animacje CSS','Responsywność','Widżety JavaScript'];
≫ console.log("Tematy kursu TAI: "+kursAplikacjiWww.join(', '));
≫ console.log("Tematy kursu WI: "+kursWitrynWww.join(', '));
≫ kursAplikacjiWww[0][0] = 'Podstawy sieci';
≫ console.log("Nowy temat to: "+kursAplikacjiWww[0][0]);
≫ console.log("Zmiana dla kursu WI: ");
≫ console.log("Tematy kursu TAI: "+kursAplikacjiWww.join(', '));
≫ console.log("Tematy kursu WI: "+kursWitrynWww.join(', '));
≫ console.log("Tematy wspólne: "+intro.join(', '));

1.3Prosta kolejka FIFO oraz FILO

var fifoQue = ['B51','B52','B53','B54','B55'];
var filoQue = ['bułka','masło','ser','szynka','pomidor'];
var put = function(que,item){ (que=='fifo') ? fifoQue[fifoQue.length]=item : filoQue[fifoQue.length]=item; }
var get = function(que){ return (que=='fifo') ? fifoQue.shift() : filoQue.pop();}
var fifoStack = function(){
	console.log('Kolejka FIFO: pierwsze weszło pierwsze wyszło');
	var c = fifoQue.length-1;
	for( let i=c; i>=0; i--){
		var comment = (i==0 || i==c) ? (i===0?' //Pierwszy':' //Ostatni') : '';
		console.log('#'+i+' '+fifoQue[i]+comment);
	}
}
var filoStack = function(){
	console.log('Kolejka FILO: pierwsze weszło ostatnie wyszło');
	var c = filoQue.length-1;
	for( let i=c; i>=0; i--){
		var comment = (i==0 || i==c) ? (i===0?' //Spód':' //Wierzch') : '';
		console.log('#'+i+' '+filoQue[i]+comment);
	}
}

1.4Pilot TV

let kanal = 0;
let lista = ['TVP1','TVP2','TVPi$','TV4','Polsat','TVN','TVN 7','kanał 8','Ale Kino','STOPklatka'];
let prev = function(){
	console.log('Zamień ten wiersz, na warunek SHORT-IF, który sprawdzi, czy kanał jest 1-szy na liście,...');
	console.log(' i jeżeli tak, to przechodzi na ostatni kanał listy, jeżeli nie to zmniejsza kanał o 1');
		display();
	}
let next = function(){
	console.log('Zamień ten wiersz, na warunek SHORT-IF, który sprawdzi, czy kanał jest Ostatni na liście,...');
	console.log(' i jeżeli tak, to przechodzi na pierwszy kanał listy, jeżeli nie to zwiększa kanał o 1');
		display();
	}
let display = function(){
		let stacja = lista[kanal];
		console.log( parseInt(kanal+1)+' '+stacja);
	}

1.4Pilot TV

var pilot = {
	kanal: 0,
	lista: ['TVP1','TVP2','TVPi$','TV4','Polsat','TVN','TVN 7','kanał 8','Ale Kino','STOPklatka'],
	prev: function(){
	console.log('Zamień ten wiersz, na warunek SHORT-IF, który sprawdzi, czy kanał jest 1-szy na liście,...');
	console.log(' i jeżeli tak, to przechodzi na ostatni kanał listy, jeżeli nie to zmniejsza kanał o 1');
		pilot.display();
	},
	next: function(){
	console.log('Zamień ten wiersz, na warunek SHORT-IF, który sprawdzi, czy kanał jest Ostatni na liście,...');
	console.log(' i jeżeli tak, to przechodzi na pierwszy kanał listy, jeżeli nie to zwiększa kanał o 1');
		pilot.display();
	},
	display: function(){
		let stacja = pilot.lista[pilot.kanal];
		console.log( parseInt(pilot.kanal+1)+' '+stacja);
	}
}

1.5Użytkownik i punkty w grze. Zapisz jako: player-KLASA-NAZWISKO.js

let playerName = null;
let playerPoints = 0;
let inventory = null;
let gameStarted = false;
let gamePaused = false;

function setPlayerName( value ){
	console.log('Ustaw nazwę gracza');
	if( value!==null ){
		playerName = value;
		return true;
	} else
		return false;
}
function getPlayerName(){
	console.log('Player name is: '+playerName);
	return playerName;
}

function addPoints( value=0 ){
	playerPoints = parseInt(playerPoints)+parseInt(value);
}
function subtractPoints( value=0 ){
	playerPoints = parseInt(playerPoints)-parseInt(value);
}
function getPoints(){
	return parseInt(playerPoints)
}

function startGame(){
	playerPoints = 0;
	gameStarted = true;
	getPlayerName();
	getPoints();
}
function pauseGame(){
	gamePaused = !gamePaused;
	console.log('Stan pauzowania gry: '+gamePaused);
}
function isPaused(){
	return gamePaused;
}

function setInventory( key, item, count=1 ){
	if( count===1 ){
		// dodaj 1 element do inventory
		console.log('Dodano element: '+item+' pod adresem: '+key);
	} else {
		for( let i=0; i<count; i++ ){
			// dodaj element do inventory
			console.log('Dodano element: '+item+' pod adresem: '+key);
		}
	}
}
function getInventory(){
	console.log('Zawartość wyposażenia: '+inventory);
	return inventory;
}

Zasoby lekcji

Przygotowanie