Wprowadzenie do JavaScriptu

Wbrew swojej nazwie JavaScript jest powiązany tylko z Javą, ponieważ ma kilka podobieństw składniowych. Składnia języka JavaScript na początku tworzenia języka JavaScript luźno była inspirowana składnią Javy. Na początku w 1995 r. nazywano go „LiveScript”, aby zachować zgodność z innymi oferowanymi przez Netscape. Wkrótce potem firma Microsoft udostępniła własną implementację JavaScriptu o nazwie „JScript” w przeglądarce Internet Explorer 3.0.

Te wczesne prace zostały przesłane do Ecma International, organizacji zajmującej się opracowywaniem i publikowaniem standardów technicznych, aby sformalizować i określić sposób rozumienia tego języka skryptów przez inne przeglądarki. W 1997 r. organizacja Ecma International udostępniła standard ECMA-262, stanowiący standaryzację pierwszej wersji języka skryptów o nazwie ECMAScript. ECMAScript to standard, który informuje o tworzeniu bardziej konkretnych języków skryptowych. Na przykład opracowana przez Microsoft w późniejszych wersjach jest dostępna w języku JScript, języku JavaScript i samym kodzie JavaScript firmy Adobe.

To rozróżnienie jest ważne przy omawianiu konkretnych aspektów i funkcji języka JavaScript. Termin „ES5” oznacza pierwszą poważną wersję standardu ECMAScript, która pojawiła się w 2009 r. – została wydana w 2009 r., a faza pracował nad różnymi wersjami. „ES6” (lub „ES2015”) to skrót od standardów określonych przez szóstą edycję skryptu ECMAScript, która została wydana w 2015 roku. Po ES6 co roku publikowane są nowe wersje standardu ECMAScript, a zmiany i dodatki w każdej z nich są określane rokiem jako „ES2016” lub „ES2017”.

Podstawowe zasady

W przeciwieństwie do języków skompilowanych kod JavaScript nie jest tłumaczony z kodu napisanego przez użytkownika w sposób zrozumiały dla przeglądarki. Skrypt jest wysyłany do przeglądarki razem z zasobami takimi jak znaczniki, obrazy i arkusze stylów. Przeglądarka interpretuje go w taki sam sposób, w jaki został napisany: jako zrozumiałą dla człowieka sekwencję znaków Unicode przetworzoną od lewej do prawej i z góry do dołu.

Gdy interpreter JavaScript otrzyma skrypt, najpierw przeprowadza analizę leksyczną, która analizuje długi ciąg znaków składający się na skrypt, a następnie konwertuje go na te odrębne elementy wejściowe:

  • Tokeny
  • Formatuj znaki kontrolne
  • Końcówki linii
  • Komentarze
  • Odstępy (prawie zawsze oznaczające tabulatory i spacje).

Wyniki działania skryptu nie są zachowywane po ponownym załadowaniu strony lub zamknięciu bieżącej strony, chyba że w skrypcie podasz wyraźne instrukcje, jak to zrobić.

Ogólnie aplikacje JavaScript składają się z instrukcji i wyrażeń.

Oświadczenia

Instrukcja to jednostka instrukcji składającej się z 1 lub kilku wierszy kodu, które reprezentują działanie. Na przykład za pomocą tej instrukcji możesz przypisać wartość do zmiennej o nazwie myVariable:

let myVariable = 4;

myVariable;
> 4

Aby instrukcje były poprawne, muszą kończyć się średnikami. Jednak te średniki nie zawsze są wymagane podczas pisania JavaScriptu. Funkcja automatycznego wstawiania średnika sprawia, że podział wiersza, który następuje po pełnej instrukcji, jest traktowany jak średnik, jeśli brak średnika spowodowałby błąd.

ASI to poprawianie błędów, a nie mniej rygorystyczny aspekt JavaScriptu. Nadmierna reakcja na błąd może prowadzić do niejednoznacznych naruszeń kodu, dlatego i tak musisz ręcznie kończyć każdą instrukcję średnikiem.

Instrukcje blokowania

Instrukcja blokowania grupuje dowolną liczbę instrukcji i deklaracji w parze nawiasów klamrowych ({}). Pozwala ona łączyć wyrażenia w miejscach, w których JavaScript wymaga tylko jednego.

Instrukcje blokowania najczęściej pojawiają się obok instrukcji kontroli przepływu, np. if:

if ( x === 2 ) {
  //some behavior;
}

Wyrażenia

Wyrażenie to jednostka kodu, której wynikiem jest wartość, więc można jej używać wszędzie tam, gdzie oczekiwana jest wartość. 2 + 2 to wyrażenie, które zwraca wartość 4:

2 + 2;
> 4

„Operator grupowania”, czyli dopasowana para nawiasów zamykających, służy do grupowania części wyrażenia, aby zapewnić, że część wyrażenia będzie oceniana jako 1 jednostka. W ten sposób możesz na przykład override the mathematical order of operations lub poprawić czytelność kodu:

2 + 2 * 4;
> 10

( 2 + 2 ) * 4;
> 16

let myVariable = ( 2 + 2 );

myVariable;
> 4

Słabe pisanie

JavaScript jest językiem słabo wpisanym, co oznacza, że wartości danych nie trzeba wyraźnie oznaczać jako określonego typu danych. W przeciwieństwie do języka silnie wpisanego JavaScript może określić zamierzony typ na podstawie kontekstu wartości i przekonwertować na niego wartość. Ten proces jest nazywany przymusem typu.

Jeśli na przykład dodasz liczbę do wartości ciągu znaków w języku o silnym typie, takim jak Python, otrzymasz błąd:

>>> "1" + 1
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: cannot concatenate 'str' and 'int' objects

Zamiast zwracać błąd, JavaScript przekształca wartość liczbową w ciąg znaków i łączy 2 wartości. Jest to najbardziej prawdopodobne zamierzone działanie przy dodawaniu dowolnej wartości do ciągu znaków:

"1" + 1;
> "11"

Typy danych można też jawnie wymusić. W tym przykładzie zmieniono wartość liczbową 100 na ciąg znaków "100" przy użyciu wbudowanej metody toString w języku JavaScript:

let myVariable = 100;

typeof myVariable;
> "number"

myVariable = myVariable.toString();
> "100"

typeof myVariable;
> "string"

Rozróżnianie wielkości liter

W przeciwieństwie do kodu HTML i większości kodu CSS w samym kodzie JavaScript wielkość liter jest w pełni rozróżniana. Oznacza to, że zawsze musisz spójnie zapisywać wszystkie litery: od właściwości i metod wbudowanych w język po zdefiniowane przez siebie identyfikatory.

console.log( "Log this." );
> Log this.

console.Log( "Log this too." );
> Uncaught TypeError: console.Log is not a function
const myVariable = 2;

myvariable;
> Uncaught ReferenceError: variablename is not defined

myVariable;
> 2

Odstęp

W JavaScript nie są rozróżniane odstępy. Oznacza to, że interpreter ignoruje ilość i typ użytych znaków (tabulatory lub spacje).

                     console.log(       "Log this"  );console.log("Log this too");
> "Log this."
> "Log this too."

Jednak obecność odstępów może być istotna jako separator między tokenami leksyktycznymi:

let x;

[tokeny: [let] [x] ]

letx;
> Uncaught ReferenceError: letx is not defined

[tokeny: [letx] ]

Gdzie do rozdzielania znaczących tokenów leksykacyjnych używa się spacji, parser ignoruje liczbę i typ spacji:

let           x                             =                           2;

[tokeny: [let] [x] [=] [2] ]

To samo dotyczy podziałów wierszy, ale zdarzają się sytuacje, w których podziały wierszy mogą powodować problemy przez przedwczesne kończenie instrukcji:

let x
=
2;

[tokeny: [let] [x] [=] [2] ]

Stylistycznie niektóre wyrażenia często zajmują 1 wiersz:

let x = 1;
let y = 2;

Chociaż niektóre instrukcje często składają się z kilku wierszy:

if ( x == 2 ) {
  //some behavior;
}

Są one jednak stosowane wyłącznie w celu zapewnienia czytelności. JavaScript interpretuje poprzednie przykłady w taki sam sposób jak poniżej:

let x=1;let y=2;
if(x==2){}

Z tego względu automatyczny proces, który usuwa zbędne odstępy z plików skryptów w celu zmniejszenia rozmiaru transferu, jest częstym etapem przygotowywania JavaScriptu na potrzeby środowiska produkcyjnego i wielu innych optymalizacji.

Stosowanie znaków odstępów w kodzie JavaScript jest w dużej mierze kwestią preferencji autora i administratora. Projekty JavaScript, w których kod uwzględnia wielu programistów, często sugerują lub egzekwują określone konwencje odstępów, aby zapewnić spójne formatowanie kodu, np. stosowanie tabulatorów lub spacji do wcięcia instrukcji zagnieżdżonych:

let myVariable = 10;

if ( typeof myVariable === "number" ) {
    console.log( "This variable is a number." );
    if( myVariable > 5 ) {
     console.log( "This variable is greater than five." );
    }
}

> "This variable is a number."
> "This variable is greater than five."

Sprawdź swoją wiedzę

Co to jest wyrażenie?

Jednostka kodu, której wynikiem jest wartość.
Komentarz wyjaśniający działanie kodu.
Grupa instrukcji i deklaracji.

W skrypcie JavaScript wielkość liter ma znaczenie.

Prawda
Fałsz