spotkanie 4.1

Proszę zadania wykonać "w plikach" lub korzystając z https://jsbin.com/vutukuqege/edit

JavaScript, JS – skryptowy język programowania, stworzony przez firmę Netscape, najczęściej stosowany na stronach internetowych. 

Komentarze

// To jest komentarz jednolinijkowy
var foo;

/*
  To jest komentarz wielolinijkowy, 
  który może iść przez kilka linii
 */
 
 /* Komentarz wielolinijkowy może też mieć jedna linię */

Zmienne

Zmienne jest to sposób przechowywania wartości w programie do użycia ich później. Zmienne moga przechowywać tekst, liczby lub bardziej złożone struktury.

Zmienne deklarujemy używając słowa var

var myName = 'Rebecca';
var a = 1;
var b = 'two';
var a = 1,
    b = 'two';

Gdy już utworzymy jakąś zmienna możemy z niej skorzystać, np. wypisać ją na ekran

console.log( myName ); // logs 'Rebecca'

lub alternatywnie wyświetlić w okienku

alert( myName ); // logs 'Rebecca'

Funkcje

Funkcje są podstawowoym narzędziem budowania instrukcji i programów w Javascripcie. Umożliwiają one wydzilenie fragmentu kodu tak aby móc z niego łatwiej korzystać.

function(a, b) {
  return a + b;
}

Ta funkcja przyjmuje dwa argumenty i zwraca ich sumę

Aby móc skorzystać z naszej funkcji musimy przypisać ją do zmiennej

var addTwoNumbers = function(a, b) {
  return a + b;
};

i wtedy możmy jej użyć np. tak:

console.log( addTwoNumbers(1, 2) ); // logs 3

lub alternatywnie

function addTwoNumbers(a, b) {
  return a + b;
}

Zakres funkcji i zmiennych

W takim przypadku dostaniemy bląd ponieważ zmianna foo nie będzie znana w trakcie wykonywania

var myFunction = function() {
  var foo = 'bar';
};

myFunction();
console.log( typeof foo ); // logs undefined!

Nawet w poniższym przypadku zachowanie jest takie jak ma być, ponieważ zakres zmiennej jest zależny od jej miejsca deklaracji.

var foo = 'qux';
var myFunction = function() {
  var foo = 'bar';
};

console.log( foo ); // logs 'qux'
myFunction();
console.log( foo ); // still logs 'qux'

Należy pamiętać tylko, że zmienne zdefiniowane bez użycia słówka var są zmiennymi globalnymi

function test() {
  a = 1;
}

test();

console.log( a ); // logs 1

Obiekty

Prawie wszystko w javascripcie to obiekt. Co to jest obiekt? Proszę spojrzeć na przykład

var person = {
  firstName : 'Boaz',
  lastName : 'Sender'
};

console.log( 'First name: ' + person.firstName );     // dot notation
console.log( 'Last name: ' + person[ 'lastName' ] );  // bracket notation

Nasz obiekt zawiera dwa pola (własności): firstname oraz lastname. Utworzyiśmy go używając nawiasów { }.

Możemy się też w taki sposób odnosić do jego pól.

var person = {
  firstName : 'Boaz',
  lastName : 'Sender'
};

var prop = 'lastName';

console.log( 'Last name: ' + person[ prop ] );

Możemy modyfikować jego pola

var person = {
  firstName : 'Boaz',
  lastName : 'Sender'
};

person.firstName = 'Ben';
person.lastName = 'Alman';

console.log( 'First name: ' + person.firstName );
console.log( 'Last name: ' + person.lastName );

Obiekty i metody

Meoda greet jest jest metodą związaną z obiektem person. Metoda ta przyjmuje argument name. Uzywamy jej

var person = {
  firstName : 'Boaz',
  lastName : 'Sender',
  greet : function(name) {
    console.log( 'Hi, ' + name );
  }
};

person.greet( person.firstName );

Obiekty, metody i this

this wskazuje na dany obiekt (na aktualny obiekt)

var person = {
  firstName : 'Boaz',
  lastName : 'Sender',
  greet : function() {
    console.log( 'Hi, ' + this.firstName );
  }
};

person.greet();

Obiekty metody cd

Możemy metody zapisać w zmiennej

var person = {
  firstName : 'Boaz',
  lastName : 'Sender',
  greet : function() {
    console.log( 'Hi, ' + this.firstName );
  }
};

var sayIt = person.greet; // store the method in a variable

sayIt(); // logs 'Hi, undefined' -- uh-oh

Tablice

var myArray = [ 'a', 'b', 'c' ];

Do elementów tablic możemy się odwoływać podając ich indeks

var myArray = [ 'a', 'b', 'c' ];
var firstItem = myArray[ "0" ]; // access the first item

Do elementów tablic możemy się odwoływać podając same numery

var myArray = [ 'a', 'b', 'c' ];
var firstItem = myArray[ 0 ];

var secondItem = myArray[ 1 ]; // access the item at index 1
console.log( secondItem ); // logs 'b'

Tablice mają długość

var myArray = [ 'a', 'b', 'c' ];
var len = myArray.length;
console.log( len ); // logs 3

Pętle

Przykład pętli for

var myArray = [ 'a', 'b', 'c' ];
var i;
var len = myArray.length;

// we'll use the variable i as our index; it starts at 0,
// and we increment it by 1 (using i++) until i is no longer
// less than the length of the array
for (i = 0; i < len; i = i + 1) {
  console.log( 'item at index ' + i + ' is ' + myArray[ i ] );
}

Logika

Instrukcja if sprawdza warunek

if ( 1 ) {
  // this code will run!
  console.log( '1 is truthy' );
}

Natomiast tutaj obsługujemy przypadek gdy warunek nie jest prawdziwy

var n = 2;

if ( n == 3 ) {
  // this code will not run!
  console.log( 'n equals to 3' );
} else {
  // this code will run
  console.log( 'n is not 3' );
}

Operatory logiczne

Możmy korzystać z kilku operacji logicznych

var foo = 1;
var bar = 0;
var baz = 2;

foo || bar;     // returns 1, which is truthy
bar || foo;     // returns 1, which is truthy

foo && bar;     // returns 0, which is falsy
foo && baz;     // returns 2, which is truthy

Ciekawostki

console.log( 'a' + 2 );           // 'a2'
console.log( '4' + 3 );           // '43'
console.log( 'five' - '4' );      // NaN (not a number)
console.log( - '1' );             // -1
console.log( 1 + true );          // 2
console.log( 1 == true );         // true
console.log( 1 === true );        // false

Zadania

Zadanie 1

Napisz metodę, która sprawdza czy liczba jest parzysta.

Zadanie 2

Napisz metodę, która wyznaczy silnię korzystając z pętli for.

Zadanie 3

Napisz metodę, która sprawdza obliczy silnię rekurencyjnie.