Javascript

javascript
?
Informacje ogólne
Wspólne rozszerzenia	.js
Paradygmat	Wieloparadygmat , programowanie funkcjonalne , ​programowanie prototypowe , imperatywne , interpretowane ( skrypty )
Pojawił się w	4 grudnia 1995
Zaprojektowany przez	Netscape Communications , Mozilla Foundation
Najnowsza stabilna wersja	ECMAScript 2021 (01 czerwca 2021 r. (1 rok, 4 miesiące i 15 dni))
typ systemu	słaba, dynamiczna, kaczka
wdrożenia	SpiderMonkey , Rhino , KJS , JavaScriptCore , V8 , Chakra .
dialekty	ECMAScript
wpływem	Java , Perl , Self , Python , C , Scheme
wpłynął	ObjectiveJ, JScript .NET, TIScript

JavaScript (powszechnie w skrócie JS ) to interpretowany język programowania , dialekt standardu ECMAScript . Definiuje się ją jako zorientowaną obiektowo opartą na prototypie , imperatywną , słabo typizowaną i dynamiczną .

Jest używany głównie po stronie klienta , zaimplementowany jako część przeglądarki internetowej, umożliwiając ulepszenia interfejsu użytkownika i dynamiczne strony internetowe oraz JavaScript po stronie serwera ( JavaScript po stronie serwera lub SSJS ). Nie bez znaczenia jest również jego wykorzystanie w aplikacjach poza siecią , na przykład w dokumentach PDF , aplikacjach desktopowych (głównie widżetach ).

Od 2012 roku wszystkie nowoczesne przeglądarki w pełni obsługują ECMAScript 5.1, wersję JavaScript. Starsze przeglądarki obsługują co najmniej ECMAScript 3. Szósta edycja została wydana w lipcu 2015 roku. ]

JavaScript został zaprojektowany ze składnią podobną do C++ i Java , ​, chociaż przyjmuje nazwy i konwencje z języka programowania Java. Jednak Java i JavaScript mają różne semantyki i cele. Ich relacja ma charakter czysto komercyjny, po zakupie twórcy Javy (Sun Microsystems) od Nestcape Navigator (twórca LiveScript) i zmianie nazwy języka programowania.

Wszystkie nowoczesne przeglądarki interpretują kod JavaScript osadzony na stronach internetowych. Do interakcji ze stroną internetową, język JavaScript jest dostarczany z implementacją Document Object Model (DOM). Javascript to jedyny język programowania, który przeglądarki rozumieją natywnie.

Tradycyjnie jest używany na stronach internetowych HTML do wykonywania operacji i tylko w ramach aplikacji klienckiej , bez dostępu do funkcji serwera . Obecnie jest szeroko stosowany do wysyłania i odbierania informacji z serwera wraz z pomocą innych technologii, takich jak AJAX . JavaScript jest interpretowany przez agenta użytkownika, gdy instrukcje są pobierane wraz z kodem HTML .

Od wydania standardu ECMAScript 1 z czerwca 1997 r. istniały wersje 2, 3 i 5, które są obecnie najczęściej używane (wersja 4 została porzucona ). W czerwcu 2015 została zamknięta i opublikowana wersja ECMAScript 6. ]

Historia

Narodziny JavaScriptu

JavaScript został pierwotnie opracowany przez Brendana Eicha z firmy Netscape pod nazwą Mocha , która później została zmieniona na LiveScript , ostatecznie stając się JavaScriptem. Zmiana nazwy z grubsza zbiegła się z momentem, w którym Netscape dodał obsługę technologii Java do swojej przeglądarki internetowej Netscape Navigator w wersji 2002 w grudniu 1995 roku. Nazewnictwo spowodowało zamieszanie, dając wrażenie, że język jest rozszerzeniem Javy. jako strategia marketingowa dla Netscape w celu zdobycia prestiżu i innowacji w dziedzinie nowych języków programowania internetowego. ]

„JAVASCRIPT” jest zastrzeżonym znakiem towarowym firmy Oracle Corporation . Jest używany na licencji przez produkty stworzone przez Netscape Communications i obecne podmioty, takie jak Mozilla Foundation . ]

Microsoft nazwał swój dialekt JavaScript " JScript ", aby uniknąć problemów z brandingiem. JScript został zaadoptowany w wersji 3.0 Internet Explorera, wydanej w sierpniu 1996 r., i zawierał obsługę funkcji daty w programie Effect 2000 , odbiegając od tych, które były wówczas oparte. Dialekty mogą wydawać się tak podobne, że terminy „JavaScript” i „JScript” są często używane zamiennie, ale specyfikacja JScript jest pod wieloma względami niezgodna ze specyfikacją ECMA.

Aby uniknąć tych niezgodności, World Wide Web Consortium zaprojektowało standard Document Object Model (DOM lub Document Object Model w języku hiszpańskim), który obejmuje Konqueror , wersje 6 Internet Explorer i Netscape Navigator , Opera w wersji 7, Mozilla Application Suite i Mozilla Firefox od pierwszej wersji. ^{[ potrzebne cytowanie ]}

W 1997 roku autorzy zaproponowali JavaScript, aby został przyjęty jako standard przez Europejskie Stowarzyszenie Producentów Komputerów ECMA , które pomimo swojej nazwy nie jest europejskie, ale międzynarodowe, z siedzibą w Genewie. W czerwcu 1997 został przyjęty jako standard ECMA pod nazwą ECMAScript . Wkrótce także jako standard ISO .

JavaScript po stronie serwera

Netscape wprowadził implementację skryptów po stronie serwera w Netscape Enterprise Server , wydanym w grudniu 1994 roku (niedługo po wydaniu JavaScript dla przeglądarek internetowych). ​ Począwszy od połowy 2000 roku nastąpił wzrost liczby implementacji JavaScript po stronie serwera. Node.js jest jednym z godnych uwagi przykładów JavaScript po stronie serwera, używanego w dużych projektach. ]

Dalsze wydarzenia

JavaScript stał się jednym z najpopularniejszych i najczęściej używanych języków programowania w Internecie. Początkowo jednak wielu programistów nie aprobowało tego języka, ponieważ jego docelowymi odbiorcami byli między innymi wydawcy artykułów i inni hobbyści. Pojawienie się Ajax przywróciło znaczenie JavaScript i przyciągnęło uwagę wielu innych programistów. W wyniku tego nastąpiła proliferacja zestawu frameworków i bibliotek o ogólnym zakresie, ulepszających praktyki programowania JavaScript i zwiększone wykorzystanie JavaScript poza przeglądarkami internetowymi , co widać w przypadku rozprzestrzeniania się środowisk JavaScript po stronie internetowej. serwer . W styczniu 2009 r. uruchomiono projekt CommonJS , którego celem było określenie biblioteki używanej przez wspólne zadania głównie do programowania poza przeglądarką internetową. ]

W czerwcu 2015 r. zamknięto i opublikowano standard ECMAScript 6 ​ z nieregularną obsługą między przeglądarkami ​ i który zapewnia JavaScript z zaawansowanymi funkcjami, które zostały pominięte i są powszechnie używane w JavaScript. jako moduły do ​​organizacji kodu, prawdziwe klasy do programowania obiektowego , wyrażenia strzałek, iteratory, generatory lub obietnice programowania asynchronicznego.

Wersja 7 ECMAScript jest znana jako ECMAScript 2016, i jest najnowszą dostępną wersją, wydaną w czerwcu 2016. Jest to pierwsza wersja, która korzysta z nowej procedury rocznego wydania i procesu rozwoju. ]

Funkcje

Poniższe funkcje są wspólne dla wszystkich implementacji zgodnych ze standardem ECMAScript, chyba że wyraźnie określisz inaczej.

Tryb imperatywny i uporządkowany

JavaScript obsługuje większość programistycznej struktury języka C (na przykład instrukcje if, pętle for, instrukcje switchitp.). Z jednym zastrzeżeniem, po części: w C zmienne są ograniczone do bloku, w którym zostały zdefiniowane; jednakże JavaScript tego nie obsługuje, ponieważ zakres zmiennych jest zakresem funkcji, w której zostały zadeklarowane. Zmienia się to w wersji ECMAScript 2015, ponieważ dodaje obsługę zakresu blokowego za pomocą słowa kluczowego . Podobnie jak w C, JavaScript rozróżnia wyrażenia i instrukcje. Różnicą składniową w stosunku do C jest automatyczne wstawianie średników, czyli w JavaScript można pominąć średniki kończące zdanie. ] let

Dynamiczny

pisanie dynamiczne

Jak w większości języków skryptowych , typ jest dołączony do wartości, a nie do zmiennej. Na przykład zmienna xmoże być raz powiązana z liczbą, a później ponownie powiązana z łańcuchem . JavaScript obsługuje kilka sposobów sprawdzania typu obiektu, w tym pisanie kaczką . Jednym ze sposobów, aby się dowiedzieć, jest użycie słowa kluczowego typeof.

przedmiotowy

JavaScript składa się prawie wyłącznie z obiektów . Obiekty w JavaScript to tablice asocjacyjne , wzbogacone o dodanie prototypów (patrz niżej). Nazwy właściwości obiektów są kluczami typu string: obj.x = 10i obj['x'] = 10są równoważne, przy czym notacja z kropką to cukier składniowy . Właściwości i ich wartości można tworzyć, zmieniać lub usuwać w czasie wykonywania. Większość właściwości obiektu (oraz tych, które są zawarte w prototypowym łańcuchu dziedziczenia) można wyliczyć za pomocą instrukcji loop for... in. JavaScript posiada niewielką liczbę predefiniowanych obiektów, takich jak Functioni Date.

Ocena w czasie wykonywania

JavaScript zawiera funkcję evaloceny wyrażeń wyrażonych jako ciągi w czasie wykonywania. Z tego powodu zaleca evalsię ostrożne korzystanie z tej funkcji i jak najczęstsze korzystanie z tej funkcji JSON.parse(), ponieważ może być ona znacznie bezpieczniejsza.

Funkcjonalne

Funkcje pierwszej klasy

Funkcje są często nazywane obywatelami pierwszej klasy; są obiektami samymi w sobie. Jako takie mają właściwości i metody, takie jak .call()i .bind(). ​ Funkcja zagnieżdżona to funkcja zdefiniowana wewnątrz innej. Jest on tworzony za każdym razem, gdy wywoływana jest funkcja zewnętrzna. Ponadto każda utworzona funkcja tworzy zamknięcie ; jest wynikiem oceny zakresu zawierającego jedną lub więcej zmiennych zależnych od innego zakresu zewnętrznego, w tym stałych, zmiennych lokalnych i argumentów wywoływanej funkcji zewnętrznej. Wynik oceny tego zamknięcia jest częścią wewnętrznego stanu każdego obiektu funkcji, nawet po zakończeniu oceny funkcji zewnętrznej. ]

Prototypowy

prototypy

JavaScript używa prototypów zamiast klas do korzystania z dziedziczenia . Możliwe jest emulowanie wielu funkcji dostarczanych przez klasy w tradycyjnych językach obiektowych poprzez prototypowanie w JavaScript. ]

Funkcje jako konstruktory obiektów

Funkcje również zachowują się jak konstruktory. Poprzedź wywołanie funkcji słowem kluczowym , aby newutworzyć nową instancję prototypu, która dziedziczy właściwości i metody konstruktora (w tym właściwości prototypu Object). ECMAScript 5 udostępnia metodę Object.create, umożliwiającą jawne tworzenie instancji bez konieczności automatycznego dziedziczenia z prototypu Object (w starszych środowiskach prototyp utworzonego obiektu może wyglądać jak null). Właściwość prototypekonstruktor określa obiekt używany do wewnętrznego prototypu nowo tworzonych obiektów. Nowe metody można dodawać, modyfikując prototyp obiektu używanego jako konstruktor. Predefiniowane konstruktory w JavaScript, takie jak Arrayu Object, również mają prototypy, które można modyfikować. Chociaż jest to możliwe, modyfikacja prototypu uważana jest za złą praktykę, Objectponieważ większość obiektów w JavaScript dziedziczy metody i właściwości obiektu object prototype, czyli obiektów, które mogą oczekiwać, że nie zostały zmodyfikowane. ]

Inne cechy

Środowisko uruchomieniowe

JavaScript zazwyczaj zależy od środowiska, w którym działa (na przykład w przeglądarce internetowej ), aby zapewnić obiekty i metody, za pomocą których skrypty mogą wchodzić w interakcje ze „światem zewnętrznym”. W rzeczywistości od środowiska zależy, czy będzie można dołączać lub importować skrypty (na przykład w HTML za pomocą tagu <script>). (To nie jest funkcja językowa, ale jest wspólna dla większości implementacji JavaScript).

funkcje zmienne

Do funkcji można przekazać nieskończoną liczbę parametrów. Funkcja może uzyskać do nich dostęp poprzez parametry lub również poprzez obiekt lokalny arguments. Funkcje zmienne można również tworzyć za pomocą .apply().

Funkcje jako metody

W przeciwieństwie do wielu języków obiektowych, nie ma rozróżnienia między definicją funkcji a definicją metody . Raczej rozróżnienie występuje podczas wywołania funkcji; funkcję można wywołać jako metodę. Gdy funkcja jest wywoływana jako metoda obiektu, słowo kluczowe this, które jest zmienną lokalną funkcji, reprezentuje obiekt, który wywołał funkcję.

Tablice i dosłowna definicja obiektów

Podobnie jak wiele języków skryptowych, tablice i obiekty ( tablice asocjacyjne w innych językach) można tworzyć za pomocą skróconej składni. W rzeczywistości te literały stanowią podstawę formatu danych JSON .

Wyrażenia regularne

JavaScript obsługuje również wyrażenia regularne w podobny sposób jak Perl , który zapewnia zwięzłą i wydajną składnię do manipulacji tekstem, która jest bardziej wyrafinowana niż funkcje wbudowane w obiekty łańcuchowe. ]

Rozszerzenia specyficzne dla producenta

JavaScript jest oficjalnie pod organizacją Mozilla Foundation i okresowo dodawane są nowe funkcje językowe. Jednak tylko niektóre silniki JavaScript obsługują te funkcje:

• Właściwości geti set(obsługiwane również przez WebKit, Opera, ​ ActionScript i Rhino). ]
• Klauzule warunkowe catch.
• Protokół iteratora przejęty z Pythona .
• Współprogramy również przejęte z Pythona.
• Generowanie list i wyrażeń przez zrozumienie również przejęte z Pythona.
• Ustaw zakres do blokowania za pomocą słowa kluczowego let.
• Destrukturyzacja tablic i obiektów (ograniczona forma dopasowywania wzorców).
• Konkretne wyrażenia w funkcjach (function(args) expr).
• ECMAScript for XML (E4X), rozszerzenie, które dodaje natywną obsługę XML do ECMAScript.

Składnia i semantyka

najnowsza wersja języka to ECMAScript 2016 opublikowana 17 czerwca 2016 r. ]

Proste przykłady

Zmienne w JavaScript definiuje się za pomocą słowa kluczowego var : ]

zmienna  x ;  // definiuje zmienną x, chociaż domyślnie nie ma przypisanej wartości 
var  y  =  2 ;  // zdefiniuj zmienną y i przypisz jej wartość 2

Rozważ komentarze w powyższym przykładzie, które są poprzedzone 2 ukośnikami.

Język nie zawiera żadnych funkcji we/wy ; środowisko uruchomieniowe już to zapewnia. Specyfikacja ECMAScript w wydaniu 5.1 wspomina: ]

...w rzeczywistości nie ma w tej specyfikacji żadnych postanowień dotyczących wprowadzania lub wyprowadzania danych zewnętrznych dla wyników obliczeń.

Jednak większość środowisk wykonawczych ma wywoływany obiekt [ console który może być używany do drukowania przez strumień wyjściowy konsoli debugowania. Oto prosty program, który wypisuje "Witaj świecie!":

konsola . log ( "Witaj świecie!" );

Funkcja rekurencyjna :

function  silnia ( n )  { 
    if  ( n  ===  0 )  { 
        return  1 ; 
    } 
    return  n  *  silnia ( n  -  1 ); 
}

Przykłady funkcji anonimowej (lub funkcji lambda ) i domknięcia:

var  displayClosure  =  function ()  { 
    var  liczba  =  0 ; 
    funkcja powrotu  () { powrót ++ liczba ; }; } var inc = displayClosure (); inc (); // zwraca 1 inc (); // zwraca 2 inc (); // powrót 3  
         
    

   
 
 
 

Wyrażenia samowywołujące umożliwiają funkcjom przekazywanie do niego zmiennych według parametrów w ich własnych zamknięciach.

zm  v ; 
v  =  1 ; 
var  getValue  =  ( function ( v )  { 
  funkcja powrotu  () { powrót v ;}; }( v ));  


v  =  2 ;

getValue ();  // 1

Bardziej zaawansowane przykłady

Poniższy kod przedstawia różne funkcje JavaScript.

/* Znajdź najmniejszą wspólną wielokrotność (LCM) dwóch liczb */ 
function  LCMCalculator ( x ,  y )  {  // funkcja konstruktora 
    var  checkInt  =  function  ( x )  {  // funkcja wewnętrzna 
        if  ( x  %  1  !==  0 )  { 
            throw  new  TypeError ( x  +  " nie jest liczbą całkowitą" );  // zrzuć wyjątek 
        } 
        return  x ; 
    }; 
    to . a  =  checkInt ( x )  // średniki są w 
    tym przypadku opcjonalne . b  =  checkInt ( i ); 
} 
// Prototyp instancji obiektów tworzonych przez konstruktor jest zgodny z właściwością „prototype” konstruktora. 
LCMCalkulator . prototype  =  {  // obiekt zdefiniowany jako 
    konstruktor dosłowny :  LCMCalculator ,  // kiedy ponownie przypisujemy prototyp, poprawnie ustawiamy jego właściwość konstruktora 
    gcd :  function  ()  {  // metoda obliczająca największy wspólny czynnik 
        // Algorytm Euklidesa: 
        var  a  =  Matematyka . abs ( to . a ),  b  =  Matematyka . abs ( to . b ),  t ; 
        if  ( a  <  b )  { 
            // zamień zmienne 
            t  =  b ; 
            b  =  a ; 
            a  =  t ; 
        } 
        while  ( b  !==  0 )  { 
            t  =  b ; 
            b  =  a  %  b ; 
            a  =  t ; 
        } 
        // GCF musimy obliczyć tylko raz, więc "przedefiniujemy" tę metodę. 
        // (Niezupełnie przesłonięcie — jest zdefiniowane w samej instancji, więc 
        // this.gcd odnosi się do tego „przesłonięcia” zamiast LCMCalculator.prototype.gcd). 
        // Również 'gcd' === "gcd", this['gcd'] === this.gcd 
        this [ 'gcd' ]  =  function  ()  { 
            return  a ; 
        }; 
        powrót  do ; 
    }, 
    // Nazwy właściwości obiektów można określić za pomocą łańcuchów oddzielonych pojedynczymi cudzysłowami (') lub podwójnymi cudzysłowami (). 
    "lcm"  :  function  ()  { 
        // Nazwy zmiennych nie kolidują z właściwościami obiektu. Na przykład: |lcm| nie jest |tym.lcm|. 
        // Nie używaj |this.a * this.b| aby uniknąć problemów z obliczeniami zmiennoprzecinkowymi. 
        var  lcm  =  to . do  /  tego . gcd ()  *  to . b ; 
        // Wystarczy raz obliczyć LCM, więc "przedefiniujemy" tę metodę. 
        to . lcm  =  funkcja  ()  { 
            return  lcm ; 
        }; 
        powrót  lcm ; 
    }, 
    toString :  function  ()  { 
        return  "LCMCalculator: a = "  +  this . a  +  ", b = "  +  to . b ; 
    } 
};

// Definiujemy generyczną funkcję wyświetlającą wynik; ta implementacja działa tylko w przeglądarkach internetowych 
function  output ( x )  { 
    document . ciało . appendChild ( document . createTextNode ( x )); 
    dokument . ciało . appendChild ( document . createElement ( 'br' )); 
}

// Uwaga: Metody .map() i .forEach() prototypu Array są zdefiniowane w JavaScript 1.6. 
// Te metody są używane tutaj, aby zademonstrować nieodłączną funkcjonalną naturę języka. 
[[ 25 ,  55 ],  [ 21 ,  56 ],  [ 22 ,  58 ],  [ 28 ,  56 ]]. map ( function  ( para )  {  // dosłowna konstrukcja tablicy + funkcja mapująca. 
    return  new  LCMCalculator ( para [ 0 ],  para [ 1 ]); 
}). sort ( function  ( a ,  b )  {  // sortowanie kolekcji za pomocą tej funkcji 
    zwraca  a . lcm ()  -  b . lcm (); 
}). forEach ( function  ( obj )  { 
    output ( obj  +  " , gcd = "  +  obj . gcd ( )  +  " , lcm = "  +  obj . lcm ( ) ); 
} );

Poniższy przykład pokazuje dane wyjściowe, które powinny być wyświetlane w oknie przeglądarki.

LCMCalkulator: a = 28, b = 56, gcd = 28, lcm = 56
LCMCalkulator: a = 21, b = 56, gcd = 7, lcm = 168
Kalkulator LCMC: a = 25, b = 55, gcd = 5, lcm = 275
Kalkulator LCMC: a = 22, b = 58, gcd = 2, lcm = 638

Wykorzystanie na stronach internetowych

Zobacz też: Interpreter JavaScript i AJAX .

Najczęstszym zastosowaniem języka JavaScript jest pisanie funkcji osadzonych na stronach HTML i współdziałających z modelem obiektów dokumentu (DOM) strony. Oto kilka prostych przykładów tego zastosowania:

• Prześlij nową zawartość strony lub wyślij dane na serwer za pośrednictwem AJAX bez przeładowywania strony (na przykład sieć społecznościowa może umożliwić użytkownikowi wysyłanie aktualizacji statusu bez opuszczania strony).
• Animuj elementy strony, spraw, by znikały, zmieniaj rozmiar, przesuwaj itp.
• Treści interaktywne, na przykład gry oraz odtwarzanie audio i wideo.
• Walidacja wartości wejściowych formularza internetowego w celu upewnienia się, że są one akceptowalne przed wysłaniem na serwer.
• Przekazywanie informacji o nawykach czytelniczych użytkowników i aktywności przeglądania do różnych stron internetowych. Strony internetowe często robią to w celach analitycznych, śledzenia reklam, personalizacji lub w innych celach. ]

Ponieważ kod JavaScript może być wykonywany lokalnie w przeglądarce użytkownika (a nie na serwerze zdalnym), przeglądarka może szybko reagować na działania użytkownika, dzięki czemu aplikacja jest bardziej responsywna. Z drugiej strony kod JavaScript może wykrywać działania użytkownika, których sam HTML nie potrafi, takie jak naciśnięcia klawiszy. Aplikacje takie jak Gmail wykorzystują to: większość logiki interfejsu użytkownika jest napisana w JavaScript, wysyłając żądania do serwera (na przykład treść wiadomości e-mail). Rosnący trend do korzystania z programowania w Ajax podobnie wykorzystuje tę technikę.

Silnik JavaScript (znany również jako interpreter JavaScript lub implementacja JavaScript) to interpreter, który interpretuje kod źródłowy JavaScript i odpowiednio wykonuje skrypt. Pierwszy silnik JavaScript został stworzony przez Brendana Eicha w Netscape Communications Corporation dla przeglądarki internetowej Netscape Navigator. Silnik o nazwie SpiderMonkey jest zaimplementowany w języku C. Od tego czasu został zaktualizowany (w JavaScript 1.5), aby był zgodny z edycją 3 ECMA-262. Silnik Rhino, stworzony głównie przez Norrisa Boyda (dawniej Netscape, obecnie w Google) jest implementacja JavaScript w Javie . Rhino, podobnie jak SpiderMonkey, jest zgodny z ECMA-262 edycja 3.

Przeglądarka internetowa jest zdecydowanie najpopularniejszym środowiskiem hostingowym dla JavaScript. Przeglądarki internetowe często tworzą nienatywne, zależne od środowiska wykonawczego obiekty, aby reprezentować Document Object Model (DOM) w JavaScript. Serwer WWW to kolejne wspólne środowisko usług. Serwer WWW JavaScript zazwyczaj ujawnia własne obiekty reprezentujące obiekty żądań i odpowiedzi HTTP, które program JavaScript może następnie przesłuchiwać i manipulować, aby dynamicznie generować strony WWW.

Ponieważ JavaScript jest jedynym językiem obsługiwanym przez większość popularnych przeglądarek, stał się językiem, z którym kompiluje się wiele frameworków w innych językach, mimo że JavaScript nie został zaprojektowany do takich celów. Pomimo ograniczeń wydajności nieodłącznie związanych z jego dynamiczną naturą, zwiększona szybkość silników JavaScript uczyniła ten język zaskakująco wykonalnym środowiskiem kompilacji.

Przykładowy skrypt

Oto krótki przykład strony internetowej (zgodnej ze standardami standardu HTML5 ), która używa JavaScript do obsługi DOM :

<!DOCTYPE html> 
< html > 
< head > 
    < meta  charset = "utf-8" > 
    < title > Prosty przykład </ title > 
</ head > 
< body > 
    < h1  id = "header" > To jest JavaScript </ h1 >

    < skrypt > 
        dokument . ciało . appendChild ( document . createTextNode ( 'Witaj świecie!' ));
    
        var  h1  =  dokument . getElementById ( 'nagłówek' );  // zawiera odniesienie do znacznika <h1> 
        h1  =  document . getElementsByTagName ( 'h1' )[ 0 ];  // dostęp do tego samego elementu <h1> 
    </ script >

    < noscript > Twoja przeglądarka nie obsługuje JavaScript lub JavaScript jest wyłączony. </ noscript > 
</ body > 
</ html >

Uwagi dotyczące kompatybilności

Ponieważ JavaScript działa w tak wielu różnych środowiskach, ważną częścią testowania i debugowania jest testowanie i sprawdzanie, czy kod JavaScript działa poprawnie w wielu przeglądarkach. Interfejs DOM służący do uzyskiwania dostępu do stron internetowych i manipulowania nimi nie jest częścią standardu ECMAScript ani samego JavaScriptu. DOM jest zdefiniowany przez wysiłki normalizacyjne W3C , niezależnej organizacji. W praktyce implementacje JavaScript w różnych przeglądarkach różnią się zarówno od siebie, jak i od standardów standardu.

Aby rozwiązać te różnice, autorzy JavaScript mogli być w stanie napisać kod zgodny ze standardami, który działałby również poprawnie w większości przeglądarek, lub w przeciwnym razie napisać kod zdolny do sprawdzania obecności niektórych funkcji przeglądarki i zachowujący się inaczej, jeśli zostanie powiedziany funkcja nie jest dostępna. Zdarzają się przypadki, w których dwie przeglądarki mogą zaimplementować tę samą funkcję, ale z różnym zachowaniem, co może pomóc programistom wykryć, która przeglądarka jest uruchomiona w danym momencie, a tym samym zmienić zachowanie tekstu, aby pasowało. ​ Programiści często korzystają również z bibliotek lub narzędzi, które uwzględniają różnice między przeglądarkami.

Ponadto skrypty mogą nie działać dla niektórych użytkowników. Na przykład użytkownik może:

• Korzystanie ze starszej przeglądarki bez pełnej obsługi DOM API,
• Użyj przeglądarki PDA lub telefonu komórkowego, która nie obsługuje JavaScript
• Ze względów bezpieczeństwa wyłącz wykonywanie JavaScriptu,
• Korzystanie z przeglądarki głosowej z powodu np. wady wzroku.

Aby wesprzeć tych użytkowników, twórcy stron internetowych często tworzą strony odporne na błędy w oparciu o klienta użytkownika (typ przeglądarki), który nie obsługuje JavaScript. W szczególności strona powinna nadal być użyteczna bez dodatkowych funkcji, które dodałby JavaScript. Alternatywnym podejściem, które wielu uważa za preferowane, jest najpierw tworzenie treści przy użyciu technologii działających we wszystkich przeglądarkach i ulepszanie treści dla użytkowników, którzy włączyli JavaScript.

Dostępność

Zakładając, że użytkownik nie wyłączył wykonywania kodu JavaScript, po stronie klienta JavaScript powinien być napisany zarówno w celu poprawy doświadczeń odwiedzających z niepełnosprawnością wzrokową lub fizyczną, jak i w celu uniknięcia ukrywania informacji przed tymi osobami. ]

Czytniki ekranu , używane przez osoby niewidome i niedowidzące, mogą być uwzględniane przez JavaScript, a tym samym mogą uzyskać dostęp do elementów DOM strony i czytać je. Napisany kod HTML powinien być tak zwięzły, łatwy w nawigacji i bogaty semantycznie, jak to tylko możliwe, niezależnie od tego, czy JavaScript jest wykonywany, czy nie.

JavaScript nie powinien być całkowicie zależny od zdarzeń myszy w przeglądarce i powinien być dostępny dla użytkowników, którzy nie chcą używać myszy (komputera) do nawigacji lub którzy decydują się używać tylko klawiatury. Istnieją zdarzenia niezależne od urządzenia, takie jak onfocusi onchangektóre są preferowane w większości przypadków. ]

JavaScript nie może być używany do wprowadzania zamieszania lub dezorientacji użytkownika sieci. Na przykład modyfikacja lub wyłączenie normalnej funkcjonalności przeglądarki, takie jak zmiana sposobu działania przycisku nawigacji wstecz lub zdarzenia odświeżania, to praktyki, których na ogół najlepiej unikać. Podobnie wyzwalanie zdarzeń, o których użytkownik może nie wiedzieć, zmniejsza poczucie kontroli użytkownika i powoduje nieoczekiwane zmiany w zawartości strony. ]

Często proces dostarczania złożonej strony internetowej o najwyższym możliwym stopniu dostępności staje się nietrywialnym problemem, w którym wiele kwestii kończy się dyskusją i opiniowaniem, co wymaga od wszystkich zaangażowania do końca. Jednak programy użytkownika i technologie wspomagające dla osób niepełnosprawnych stale się rozwijają, a nowe wytyczne i informacje są nadal publikowane w sieci. ]

Bezpieczeństwo

Zobacz też: Bezpieczeństwo przeglądarki

JavaScript i DOM pozwalają programistom nadużywać go do wprowadzania skryptów, które wykonują kod ze złośliwą zawartością bez zgody użytkownika, co zagraża bezpieczeństwu użytkownika.

Twórcy przeglądarek uwzględniają to ryzyko, stosując dwa ograniczenia. Po pierwsze, skrypty działają w piaskownicy , w której można wykonywać tylko działania związane z siecią, a nie zadania programistyczne ogólnego przeznaczenia, takie jak tworzenie plików. Po drugie, ogranicza ją sama polityka pochodzenia: skrypty z jednej witryny nie mają dostępu do informacji przesyłanych do innej witryny (z innej domeny), takich jak nazwy użytkownika, hasła czy pliki cookie. Większość luk bezpieczeństwa JavaScript jest związanych z naruszeniem jednego z tych dwóch ograniczeń.

Istnieją projekty takie jak AdSafe lub Secure ECMA script (SES), które zapewniają wyższy poziom bezpieczeństwa, zwłaszcza w kodzie tworzonym przez strony trzecie (np. reklamy). ]

Content Secure Policy (CSP) to podstawowa metoda przewidziana w celu zapewnienia, że ​​na stronie internetowej można wykonać tylko zaufany kod.

Luki w różnych witrynach

Częstym problemem bezpieczeństwa w JavaScript jest cross-site scripting (XSS), który jest naruszeniem zasad tego samego pochodzenia. Luki XSS umożliwiają atakującemu wstrzyknięcie kodu JavaScript do stron internetowych odwiedzanych przez użytkownika. Jedną z takich stron internetowych może być strona banku, na której atakujący może uzyskać dostęp do aplikacji bankowej z uprawnieniami ofiary, co może ujawnić tajne informacje lub przelać pieniądze bez jej autoryzacji. Jednym z rozwiązań luk XSS jest użycie kodu HTML podczas wyświetlania informacji z niezaufanych źródeł.

Niektóre przeglądarki zawierają częściową ochronę przed odbitymi atakami XSS (atakujący znajduje się w tym samym żądaniu sieciowym). Atakujący podaje adres URL zawierający złośliwy kod. Jednak nawet użytkownicy przeglądarek są narażeni na inne ataki XSS, takie jak te, w których złośliwy kod jest przechowywany w bazie danych. Tylko prawidłowy projekt aplikacji internetowych po stronie serwera może całkowicie zapobiec XSS. Luki XSS mogą również wystąpić z powodu błędów wykonania przez programistów przeglądarek. ]

Inną luką w zabezpieczeniach jest fałszowanie żądań między witrynami lub CSRF. W CSRF kod atakującej witryny oszukuje przeglądarkę ofiary, umożliwiając atakującemu wysyłanie żądań w imieniu ofiary, uniemożliwiając docelowej aplikacji (na przykład bankowi dokonującemu przelewu pieniężnego) sprawdzenie, czy żądanie zostało wykonane dobrowolnie. przez użytkownika lub przez atak CSRF.

Atak działa, ponieważ jeśli strona docelowa używa tylko plików cookie do uwierzytelniania żądań ofiar, żądania inicjowane przez kod atakującego będą miały takie same uwierzytelnione dane uwierzytelniające dostępu, jak żądania inicjowane przez użytkownika.

Ogólnie rzecz biorąc, rozwiązaniem CSRF jest wprowadzenie ukrytego pola formularza, którego wartość jest wykorzystywana do przeprowadzania uwierzytelniania, nie tylko za pośrednictwem plików cookie, na żądaniach, które mogą mieć trwałe skutki. Pomocne może być również sprawdzenie nagłówka odsyłającego HTTP.

„Przechwytywanie JavaScript” to rodzaj ataku CSRF, w którym znacznik <script> w witrynie atakującego wykorzystuje lukę na stronie witryny ofiary, która powoduje, że zwraca ona prywatne informacje w postaci kodu JSON lub JavaScript. Możliwe rozwiązania to:

• że token uwierzytelniający jest wymagany w parametrach żądań POST i GET dla tych żądań, które wymagają zwrotu prywatnych informacji o użytkowniku.
• używaj POST i nigdy GET dla żądań, które zwracają prywatne informacje

Narzędzia programistyczne

W JavaScript posiadanie debugera staje się niezbędne podczas tworzenia dużych, nietrywialnych aplikacji. Ponieważ mogą występować różnice w implementacji między różnymi przeglądarkami (szczególnie pod względem DOM), warto mieć dostęp do debugera dla każdej przeglądarki, do której będzie kierowana nasza aplikacja internetowa. ]

Debugery internetowe są dostępne dla przeglądarek Internet Explorer, Firefox, Safari, Google Chrome i Opera. ]

Istnieją trzy debuggery dostępne dla Internet Explorera : Microsoft Visual Studio jest najbardziej zaawansowanym z trzech, tuż za nim Microsoft Script Editor (składnik pakietu Microsoft Office ) i wreszcie Microsoft Script Debugger, który jest znacznie bardziej podstawowy niż pozostałe dwa, chociaż jest bezpłatne. Bezpłatne środowisko Microsoft Visual Web Developer Express IDE oferuje ograniczoną wersję funkcji debugowania JavaScript w programie Microsoft Visual Studio. Internet Explorer zawiera narzędzia programistyczne od wersji 8 (wyświetlane po naciśnięciu klawisza F12). Aplikacje internetowe w Firefoksie można debugować za pomocą dodatku Firebug lub starego debuggera Venkman. Firefox ma również wbudowaną podstawową konsolę błędów, która rejestruje i ocenia JavaScript. Rejestruje również błędy i ostrzeżenia CSS . Opera zawiera zestaw narzędzi o nazwie Dragonfly. Web Inspector WebKit zawiera debugger JavaScript używany w Safari , a także zmodyfikowaną wersję Google Chrome .

Istnieje kilka narzędzi pomocniczych do debugowania, również napisanych w JavaScript i stworzonych do uruchamiania w Internecie. Przykładem jest program JSLint , opracowany przez Douglasa Crockforda , który obszernie pisał o tym języku. JSLint analizuje kod JavaScript tak, aby był zgodny z zestawem standardów i wytycznych, aby zapewnić odpowiednią funkcjonalność i łatwość konserwacji.

Zobacz także

• VBScript
• AJAX
• Aplikacja internetowa
• Obiektowy model dokumentu
• jQuery
• JSON
• HTML
• HTML5

Linki zewnętrzne

• Centrum programistów Mozilli .
• (w języku angielskim) Samouczek JavaScript .
• JavaScript — zaglądanie za kulisy .