JavaScript Intro

workshop: #js1-ws1-intro.html

Mini-warsztat JS: wprowadzenie

Przykład stosowania właściwości CSS używanych przy tzw. modelu pudełkowym.

Przygotowanie

Otwórz narzędzia deweloperskie przegladarki
Przejdź na zakładkę Konsola (console)
Wykonuj tam polecenia z poniższych przykładów
Na koniec przygotuj skrypt wykonujący określone działania (następne ćwiczenie)

1.1Deklarowanie zmiennych przy użyciu var, let oraz const

≫ var var1 = 'test';
≫ var1; // w konsoli nie jest wymagane użycie console.log();
≫ var var1 = 'nadpisz';
≫ var1;
≫ var2;
≫ var var2 = var1;
≫ var2;
≫ let use = 'one time';
≫ use;
≫ let use = 'second';
≫ use = 'second';
≫ v2;
≫ v2; // naciśnij przyciski: SHIFT oraz ENTER by przejść do nowego wiersza bez wykonywania kodu
let v2 = 'fly';
≫ v2;
≫ const pi = 3.14;
pi
≫ pi = 9.81;
≫ const pi = 9.81;
≫ var grav = '9.81';

1.2Sprawdzanie typu zmiennych

≫ typeof var1;
≫ typeof var2;
≫ typeof pi;
≫ typeof use;
≫ use = pi;
≫ typeof use;
≫ typeof grav;
≫ typeof false;
≫ typeof brakZmiennej;

1.3Sprawdzanie możliwości typów prymitywnych

≫ Number.MIN_VALUE
Number.MAX_VALUE
≫ Number.MIN_SAFE_INTEGER
Number.MAX_SAFE_INTEGER
≫ var1.length;
≫ var2.concat("--≫",var1);
≫ use.toUpperCase();
≫ String.fromCharCode(113);
≫ Number.parseInt(pi);
≫ Number.parseFlot(grav);
≫ grav+pi;
≫ pi+grav;
≫ grav-pi;
≫ pi-grav;
≫ parseFloat(grav)+parseFloat(pi)
≫ parseInt(grav)-parseInt(pi)

1.4Warunki oraz pętle

≫ if( wynikGravPi ≫ 6){
'Większe od '+wynikGravPi;
} else {
'Mniejsze od '+wynikGravPi;
}
≫ (( wynikGravPi ≫ 6) ? 'Większe od ' : 'Mniejsze od ')+wynikGravPi;
≫ "Wynik jest "+(( typeof wynikGravPi === "float" ) ? 'zmiennoprzecinkowy' : 'liczbowy');
≫ (( typeof brakZmiennej === "undefined" ) ? alert('Ustaw zmienną!') : "Wartość to: "+brakZmiennej);
≫ tablica = ['pięć','dziesięć','15'];
≫ for( var i=0; i<5; i++){
	tablica[i];
}
tablica.length;
≫ for( let i=5; i>0; i--){
	console.log(i);
}

1.5Metody oraz ich używanie

≫ function mojaFunkcja(){
    "nic nie robi"	// aby wyświetlić tekst (w konsoli) użyj console.log();
}
mojaFunkcja()
≫ function mojaFunkcja(){
    return "coś robi"
}
mojaFunkcja()
≫ brakZmiennej;
≫ var ustaw = function( wartosc ){
	brakZmiennej = wartosc;
}
≫ brakZmiennej;
≫ ustaw('ale wartość jest');
brakZmiennej;
≫ var ustaw = function( zmienna, wartosc ){
	used = true;
	zmienna = wartosc;
	return 'Ustawiłem zmienną: '+zmienna+' z wartością: '+wartosc;
}
≫ used;
≫ ustaw('mnie','do pionu');
≫ var ustaw = function( zmienna, wartosc ){
	used = true;
	Window[zmienna] = wartosc;
	return 'Ustaw '+zmienna+' '+wartosc;
}
≫ ustaw('mnie','do pionu');
≫ var komunikat = null;
≫ function dodaj( liczba ){
	komunikat = Array.from(arguments);
}
≫ function ocenaZaZadanie(){
	var ocena = '';
	for( let i=0; i<komunikat.length; i++){
		ocena += String.fromCharCode(komunikat[i]);
	}
	alert("Twoja ocena to: "+ocena);
}
≫ dodaj(74,101,100,121,110,107,97);
ocenaZaZadanie();

Zasoby lekcji

Przygotowanie