Marcin Mrotek

Entuzjasta JavaScript i Node.js

javascript

Wprowadzenie do JavaScript – Część I

By | JavaScript | One Comment

Czym jest JavaScript?

JavaScript został stworzony przez Brendana Eicha, który pracował dla Netscape. Został ustandaryzowany w 1997r. przez organizację Ecma International w standaryzacji ECMAScript. JS   należy do grupy dynamicznych języków programowania tzn. podczas pracy wykonuje wiele zachowań języków statyczncyh, które są wykonywane podczas kompilacji jak dodanie nowego kodu czy rozszerzenie obiektów.  JavasScript jest multiparadygmatowy tzn. wspiera wiele stylów  programowania. Timothy Budd określa tą ideę tak:

Idęą język multiparadygmatowego jest dostarczenie frameworka dzięki któremy programiści mogą pracować używająć różnych stylów, bezproblemowo mieszająć konstrukcję z innych paradygmatów.

JavaScript ma określone cztery paradygmaty:
– Jezyk skryptowy (scripting)
– Zorientowany obiektowo  (object-oriented)
– Funkcjonalny (functional)
– Imperatywny (imperative)

JS jest najpopularniejszym językiem skryptowym, używanym w przeglądarkach po stronie klienta. Jest także używanym po stronie serwera przez środowisko Node.js, o którym szerzej napiszę wkrótcę. Umożliwia także pisanie gier, aplikacji desktopowych (node-webkit) czy też aplikacji mobilnych (Titanium SDK).

Javs vs. JScript vs. JavaScript

JScript został stworzony przez Microsoft, by uniknąć problemów z znakiem firmowym Sun Microsystems. Oba języki korzystają z ECMAScript i są defacto tym samym. Jedną z różnic jest to, że JavaScript nie ma dostępu do ActiveXObject, a JScript ma.

Główne różnice między Java, a JavaScript to:

  • Java jest statycznym językiem programowania, a JavaScript jest dynamicznym językiem programowania.
  • Java jest class-based, a JavaScript jest prototype-based.
  • Konstruktory w Java są specjalnymi funkcjami, które mogą być używane podczas tworzenia obiektów, a  kontstruktory w JavaScript są standardowymi funkcjami.
  • Java używa block-based scoping; JavaScript używa function-based scoping.
  • Java musi zostać skompilowana, a JavaScript znajduje się w tekście.

Zmienne

Wszystkie zmienne w JavaScript muszą być unikatowe. Zasady tworzenie nazw zmiennych:

  • Nazwy mogą zawierać litery, cyfry, podkreślenie i znak dolara
  • Nazwy muszą zaczynać się od litery
  • Nazwy mogą zaczynać się z $ i _
  • Nazwy są wrażliwe na duże i małe litery np. getProfileInformation nie będzie tym samym co GetProfileInformation
  • Nazwy nie mogą nazywać się tak samo jak zarezerwowane słowa kluczowe JavaScript jak np. var

Zmienne deklarujemy za pomocą słowa kluczowego var. O typach zmiennych jak lokalne, globalne i automatycznie globalne napiszę w kolejnym wpisie, poświęconym obiektom i funkcjom.

var fname = "Marcin";
var lname = "Mrotek";
var old = 21;

See the Pen Przypisanie zmiennych by Marcin Mrotek (@Abdizriel) on CodePen.

W powyższym przykładzie, dzięki użycia słowa kluczowego var i dopisaniu nazwy fname stworzyliśmy zmienną fname, której przypisaliśmy za pomocą symbolu i w cudzysłowie Marcin jej wartość. Podobna sytuacja występuje w przypadku zmiennej lname. Obie zmienne są string’ami. Jak sprawdzić czy są string’iem przedstawię w dalszej części wpisu. Zmiennej old przypisaliśmy wartość 21 bez cudzysłowia, dzięki temu dana zmienna będzie typu number.

var doYouLike; //Zostanie zwrócone undefined
doYouLike = "Pizza";

See the Pen EadLox by Marcin Mrotek (@Abdizriel) on CodePen.

Zmienne można również deklarować bez przypisania ich wartości. Domyślnie przy takim zadeklarowaniu zmiennej i sprawdzeniu jej wartości zostanie zwrócone wam undefined. Znaczy to, że do zmiennej nie zostało nic przypisane. W momencie, gdy ponownie wywołacie zadeklarowaną zmienną i przypiszecie jej wartość zostanie zwrócona przypisana wartość, w powyższym przykładzie będzie to Pizza.

var a = 5; // Przypisanie do a cyfry 5
var b = 6; // Przypisanie do b cyfry 6
var wynik = a + b; // Wynikiem operacji będzie 11 bo a = 5 + b = 6 da nam 11

var wynik; // Wartość 11 nie zostanie usunięta po ponownym zadeklarowaniu jej

var fname = "Marcin"; // Przypisanie do fname słowa Marcin
var lname = "Mrotek"; // Przypisanie do lname słowa Mrotek
var flname = fname + " " + lname // Wypisanie imienia i nazwiska

var numberFive = 5; // Przypisanie do numberFive cyfry 5
var stringFive = "5"; // Przypisanie do stringFive słowa 5
var numberString = numberFive + stringFive; // Wynik dodania wartości numerycznej i słownej

See the Pen QwZrQZ by Marcin Mrotek (@Abdizriel) on CodePen.

Zmienne można ze sobą łączyć przy użyciu symbolu jak w powyższych przykładach. Należy pamiętać, że ponowna deklaracja nie usuwa wartości przypisanej do zmiennej za pomocą operacji arytmetycznej! W ostatnim przykładzie dodanie wartości numerycznej do string’a spowoduje przekonwertowanie całego wyniku na string’a!

Typy danych

JavaScript ma 8(9) typów danych

  • Boolean
  • Null (traktowane jako Object)
  • Undefined
  • NaN
  • Number
  • String
  • Object
  • Array
  • Symbol

Boolean

Boolean może mieć tylko dwie wartości true bądź false.

var trueValue = true; // Wartość true
var falseValue = false; // Wartość false

See the Pen bNmMmx by Marcin Mrotek (@Abdizriel) on CodePen.

Wartości typu true/false używa się najczęściej przy sprawdzaniu pewnych warunków jak:
Czy Jasiu ma 18 lat? Jeśli tak to może pić alkohol, w przeciwnym razie alkohol jest zabroniony.

Undefined

Zmienna ma typ undefined w momencie zadeklarowania bez żadnej przypisanej wartości.

var undefinedValue; // Zwróci undefined

See the Pen PwyeXR by Marcin Mrotek (@Abdizriel) on CodePen.

Null

Null w wielu językach jest niczym lub wartością która nie istnieje. W JavaScript wartość null jest obiektem, który niczego nie zawiera.

var nullValue = null; // Zwróci object

See the Pen NPOMoE by Marcin Mrotek (@Abdizriel) on CodePen.

NaN

NaN  jest typem danych number, który reprezentuje wartość „Not-a-Number”. Wartość tą można uzyskać próbując np. odejmować od siebie dwie wartości typu string. By sprawdzić, czy wartość jest NaN trzeba użyć funkcji isNaN(), która zwróci true w momencie, gdy zmienna jest typu NaN.

var firstString = "A"; // Przypisanie do firstString A
var secondString = "B"; // Przypisanie do secondString B
var stringValue = firstString - secondString // Wynik operacji to NaN

var isStringValueNaN = isNaN(stringValue); // Zwróci true

See the Pen qEJYwq by Marcin Mrotek (@Abdizriel) on CodePen.

Number

Wartości numeryczne mogą być zapisywane w formacie dziesiętnym lub zwykłym. JavaScript ma tylko jeden format danych numerycznych, w odróżnieniu od np. Java gdzie występują integers, short czy long. Liczby dziesiętne traktowane są jako liczby double precision floating point numbers oznacza to, że operacje jak dodawanie mogą mieć problemy z zaokrąglaniem.

var normalValue = 5; // Przypisanie do normalValue cyfry 5
var decimalValue = 5.43; // Przypisanie do decimalValue cyfry 5.43

var a = 0.1 + 0.2; // Zwróci 0.30000000000000004
var b = a.toFixed(2); // Zwróci 0.30

See the Pen ogadrW by Marcin Mrotek (@Abdizriel) on CodePen.

String

Używając wartości typu string, trzeba bardzo uważać. Należy pamiętać, że łącząc typ string z number typ danych zostanie ustawiony na string, ale to nie wszystko. „Konwertowanie” zaczyna się od lewej do prawej do napotkania pierwszej zmiennej typu string lub tekstu.
W pierwszym przypadku poniżej Zostanie zwrócone I’m 16, gdyż odczytane zostanie to jako „I’m ” + „16”.
W drugim przypadku zostanie zwrócone 21 years old. ponieważ na początku są wykonywane operacje arytmetyczne 13 + 7 + 1, co daje wynik 21, a następnie dodanie stringa spowoduje zwrócenie wcześniej wspomnianego 21 years old.
W trzecim przypadku operacja arytmetyczna występuje po napotkaniu stringa, co spowoduje dodanie tych cyfr do tekstu, a nie siebie i zwróci My lucky number is 13, a nie My lucky number is 4.

var stringValue = "I'm " + 16 // Zwróci I'm 16
var stringValue2 = 13 + 7 + 1 + " years old." // Zwróci 21 years old.
var stringValue3 = " My lucky number is" + 1 + 3 // Zwróci My lucky number is 13

See the Pen xbyzGg by Marcin Mrotek (@Abdizriel) on CodePen.

Object

Object w JavaScript zapisywane są w nawiasach klamrowych. Zapisywane są jako name:value (można również powiedzieć klucz wartość). Następne wartości obiektu są oddzielane od siebie używając przecinka.

var samochod = {
  nazwa: "Sandero",
  marka: "Dacia",
  rocznik: 2012,
  silnik: 1.5,
  ABS: true
}; // Obiekt (object) samochod

See the Pen pvxKNo by Marcin Mrotek (@Abdizriel) on CodePen.

Array

Array w JavaScript deklaruje się przy użyciu nawiasów kwadratowych. Podobnie jak w obiektach, kolejne wartości oddziela się od siebie przy pomocy przecinka. ECMAScript 5, wprowadziło wiele bardzo przydatnych funkcji, które wspomagają pracę z tablicami. Na ten temat zostanie poświęcony inny wpis.
Sprawdzając czy dany typ danych jest Array’em zostanie zwrócony typ danych object, by upewnić się, że typ danych jest Array’em należy użyć Array.isArray

var tablica = ["A", "B", "C"]; // Tablica z wartościami A, B i C

See the Pen OPBEWr by Marcin Mrotek (@Abdizriel) on CodePen.

Symbol

Symbole są nowym typem danych wprowadzonym w ECMAScript 6. Symbol jest unikalnym, niezmiennym typem danych, który może zostać użyty jako identyfikator wartości obiektu.

var sym = Symbol("foo"); // Zadeklarowanie Symbolu
var obj = {[sym]: 1}; // Stworzenie obiektu z kluczem sym i przypisaną do niego wartością 1
obj[sym];            // Zwraca 1
obj[Object(sym)];    // Także zwraca 1

See the Pen azRKwW by Marcin Mrotek (@Abdizriel) on CodePen.

typeof

typeof zwraca string, który definiuje typ danych

// Number
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof NaN === 'number'; // Pomimo tego, że reprezentuje "Not-A-Number"

// Strings
typeof "" === 'string';
typeof "bla" === 'string';

// Boolean
typeof true === 'boolean';
typeof false === 'boolean';

// Symbol
typeof Symbol() === 'symbol'
typeof Symbol('foo') === 'symbol'

// Undefined
typeof undefined === 'undefined';
typeof blabla === 'undefined'; // Nie zdefiniowana wartość blabla

// Object
typeof {a:1} === 'object';

// Array
typeof [1, 2, 4] === 'object';

// Functions
typeof function(){} === 'function';

See the Pen VYEdMx by Marcin Mrotek (@Abdizriel) on CodePen.

Operatory

Operatory możemy podzielić na arytmetyczne i logiczne.

Operatory Arytmetyczne

Do operatorów arytmetycznych zaliczamy:

  • Dodawanie/Addition ( + )
  • Odejmowanie/Substraction ( – )
  • Mnożenie/Multiplication ( * )
  • Dzielenie/Division ( / )
  • Reszta z dzielenie/Modulo ( % )
  • Inkrementacja/Incrementation ( ++ )
  • Dekrementacja/Decrementation ( — )
// Dodawanie
var addition = 5 + 7; // Zwróci 12

//Odejmowanie
var substraction = 7 - 5; // Zwróci 2

//Mnożenie
var multiplication = 7 * 5; // Zwróci 35

//Dzielenie
var division = 8 / 2; // Zwróci 4

//Reszta z dzielenia 
var modulo = 3 % 2; // Zwróci 1

//Inkrementacja
var incrementation = 5; // Przypisanie 5 do zmiennej incrementation
incrementation++; // Do wartości 5 z incrementation dodaje się 1
var incrementationAfter = incrementation; // Zwróci 6

// Dekrementacja
var decrementation = 5; // Przypisanie 5 do zmiennej incrementation
decrementation--; // Od wartości 5 z decrementation odejmuje się 1
var decrementationAfter = decrementation; // Zwróci 6

See the Pen vEVrrV by Marcin Mrotek (@Abdizriel) on CodePen.

Operatory Logiczne

Do operatorów logicznych zaliczamy:

Operatory Arytmetyczne

Do operatorów arytmetycznych zaliczamy:

  • Wartość równa / equal to ( == )
  • Wartość i typ równy / equal value and equal type ( ===)
  • Wartość różna / not equal ( != )
  • Wartość i typ różny / not equal value or not equal type ( !== )
  • Większe niż / greater than ( > )
  • Większe niż lub równe /  greater than or equal to ( >= )
  • Mniejsze niż /  less than ( < )
  • Mniejsze niż lub równe / less than or equal to ( <= )
// Wartość równa
var x = 12;
x == 12; // true
x == 7; // false

// Wartość i typ równy
var y = "12";
y === "12"; // true
y === 12; // false

// Wartość różna
var z = "as";
z != "sa"; // true
z != "as" // false

// Wartość i typ różny
var c = 5;
c !== "5"; // true
c !== 5; // false

// Większe niż
var q = 55;
q > 44; // true
q > 55; // false
q > 65; // false

// Większe niż lub równe
var w = 79;
w >= 79; // true
w >= 81; // true
w >= 32; // false

// Mniejsze niż
var y = 81;
y < 98 // true;
y < 81 // false
y < 32 // false

// Mniejsze niż lub równe
var y = 81;
y <= 98 // true;
y <= 81 // true
y <= 32 // false

See the Pen qEJKGK by Marcin Mrotek (@Abdizriel) on CodePen.

bug, node.js, javascript

Zmiany na stronie

By | Aktualności | No Comments

Mijają prawie 2 lata od czasu, kiedy ostatnio aktualizowałem swoją stronę. Przez ten czas wiele w moim życiu się zmieniło i nastał czas na zmiany także na tej stronie. Największą zmianą jaką wprowadzam jest inny profil jej prowadzania. Ostatnio było nim przedstawienie moich prac, a teraz będzie nim blog.

W związku z tym, że pracuję na stanowisku testera oprogramowania i developera javascript chciałbym przedstawić wam na co warto zwrócić uwagę na tych stanowiskach, ale także przedstawiać wam interesujące wiadomości technologiczne związane z tymi stanowiskami, a także poradniki i omawiać pytania jakie mogą pojawić się na rozmowie kwalifikacyjne na oba stanowiska. Największą uwagę poświęcę jednak na zagadnieniu JavaScript i jego rozwiązaniach Front-end’owych jak Angular.js i Back-end’owych w oparciu o Node.js i framework ExpressJS.

Wszystkie skrypty/programy, które będę przedstawiał na blogu będę umieszczał na GitHubie, skąd będzie można je łatwo pobrać i samemu coś zmodyfikować. Przykłady live będą prezentowane przy użyciu narzędzia oferowanego przez CodePen.

Zapraszam serdecznie do czytania moich wpisów i komentowania, gdyż podczas dyskusji można poznać nowe, ciekawe rozwiązania o których nie miało się pojęcia. Polecam również subskrybowania treści w swoich czytnikach, gdyż zamierzam często (co najmniej raz w tygodniu) pisać

Pozdrawiam!