Oprogramowanie do pracy z javascriptem. Jaki jest najlepszy edytor kodu HTML, PHP, CSS, JS? Warunki i cykle

Skrypt Java to! To fajny program do tworzenia ładnych efektów w JavaScript. Za pomocą tego programu wyraźnie ułatwisz sobie życie podczas tworzenia stron internetowych. Zasadniczo jest przeznaczony dla osób, które są zbyt leniwe, aby samemu pisać skrypty i ogólnie wszystko w JavaScript. Oczywiście został stworzony z myślą o początkujących, chociaż do pracy z nim nadal potrzebujesz minimalnej znajomości języka HTML.

Co to jest JavaScript?

JavaScript to zorientowany obiektowo język skryptowy do tworzenia aktywnych stron HTML. Przez „aktywny” rozumiemy tutaj strony HTML, które zawierają wszelkiego rodzaju dynamicznie zmieniające się elementy sieci, na przykład:

• Menu rozwijane po najechaniu myszą.
• Małe animowane obrazki, które podążają za kursorem lub na przykład przesuwają się do określonej części strony po kliknięciu dowolnego elementu.
• Bloki informacyjne (na przykład z krótki opis produktów) z automatycznym przewijaniem czasu i nie tylko.

Te. JavaScript pozwala na tworzenie takich elementów internetowych, które w jakiś sposób oddziałują na użytkownika, reagując na ruch kursora myszy, naciśnięcia klawiszy, przewijanie strony w przeglądarce itp. Do tej samej listy należy dodać w pełni zautomatyzowane elementy sieciowe, które wykonują dowolne akcje bez interwencji użytkownika.

Jak każdy inny język programowania, JavaScript zawiera pojęcia takie jak zmienne, tablice, obliczenia logiczno-arytmetyczne itp. itp. Te. w Pomoc JavaScript możesz wykonywać złożone obliczenia, zarządzać dużymi ilościami danych i wiele więcej, które pozostają poza zasięgiem wzroku odwiedzającego witrynę.

Fakt, że JavaScript jest językiem programowania obiektowego, otwiera przed programistą jeszcze więcej możliwości, ale ta kwestia nie będzie tutaj rozważana.

Nauka JavaScript poprzez Java Script It!

Jednym z głównych powodów tak dużej popularności JavaScript wśród początkujących programistów internetowych jest posiadanie tego języka programowania, tzw. „niskiego progu wejścia”. Te. wystarczy podstawowa znajomość HTML i języka znaczników CSS.

Skrypt Java to! udostępnia narzędzia do szybkiego wstawiania kodów różnych gotowych elementów internetowych napisanych w JavaScript do strony HTML. Wszystkie dostępne przedmioty są podzielone na 3 kategorie:

1. Aplety to elementy, które pełnią jakąś niezależną funkcję: baner, animowany tekst, ruchomy obraz itp.
2. Skrypty - prezentowane są tu głównie elementy webowe kontrolowane przez użytkownika: formularze do wprowadzania tekstu według masek (daty, hasła itp.), bloki umożliwiające tworzenie pokazów slajdów z automatycznym przewijaniem obrazów, różne przyciski systemowe (np. do otwierania okna dialogowe aby przesłać pliki do serwisu).
3. Oraz DHTML — różnorodne interaktywne elementy składające się ze znaczników HTML, tabel kaskadowych CSS i skryptów JavaScript (takich jak rozwijane menu lub wyskakujące okienka/formularze).

Każdy z dostępnych elementów ma swoje własne ustawienia. Dla prostoty i wygody ich wprowadzania/zmiany przewidziano specjalny formularz.

Wstawianie kodu JavaScript za pomocą Java Script It! Na to wygląda:

• Użytkownik tworzy na dysku plik z rozszerzeniem HTM lub HTML. Możesz też skorzystać z gotowego pliku HTML wypełnionego jakimś kodem.
• Następnie wybierany jest jeden z dostępnych elementów webowych, po czym wypełniany jest formularz z jego ustawieniami (np. wymiary, nazwy pozycji menu itp.).
• Wygenerowany kod JavaScript jest wstawiany do pliku HTML w pożądanej przez użytkownika pozycji (odbywa się to w formie ustawień elementów webowych).
• Gotowy.

W skrypcie Java to! wbudowana standardowa wtyczka do przeglądarki Windows Internet Explorer, tj. wynik pracy jest wyświetlany natychmiast po zakończeniu konfiguracji elementu webowego. Wynik możesz wyświetlić w dowolnej innej przeglądarce, dla której wystarczy otworzyć w niej utworzony/edytowany plik HTML.

Jeśli otworzysz w przeglądarce źródło Strony HTML, możesz przeglądać i sprawdzać sam kod JavaScript. Tutaj możesz go również edytować, zmieniając różne znaczenia ręcznie. W ten sposób użytkownik będzie mógł zdobyć podstawowe umiejętności programowania JavaScript, a mianowicie, w jaki sposób kod jest wstawiany do dokumentu HTML, jakie polecenia są używane do ustawiania określonych właściwości elementu internetowego itp.

Oczywiście Java Script It! może być używany do wypełniania stron internetowych różnymi aktywne elementy, ale ze względu na przestarzałość programu bardziej nadaje się do zapoznania się z podstawami programowania w JavaScript.

Ten rozdział skupia się na języku skryptowym JavaScript. Dowiesz się czym jest JavaScript i dlaczego jest potrzebny.

Rozważmy funkcje tworzenia dynamiki na stronie, przetwarzania formularzy, a także pracy z warstwami i stylami.
JavaScript jest językiem skryptowym zorientowanym obiektowo o składni nieco podobnej do składni języków C, Perl oraz Pyton... Pomimo tego, że język ma podobną nazwę do języka programowanie w Javie, nie mają ze sobą nic wspólnego poza częścią nazwy.

Obecnie JavaScript służy przede wszystkim do tworzenia skryptów osadzonych na stronach internetowych, które pozwalają w pełni kontrolować zarówno same strony internetowe, jak i przeglądarki internetowe, w których te strony internetowe są otwierane. Więc język JavaScript w większości przypadków służy do tworzenia interaktywnych stron internetowych i aplikacji internetowych.

Internet zbudowany jest na technologii” klient-serwer».
Serwery to komputery lub programy, które świadczą klientom pewnego rodzaju usługi, takie jak serwer WWW lub serwer poczty e-mail.
Klienci to komputery lub programy korzystające z oferty serwerów, takie jak przeglądarki internetowe lub klienty poczty e-mail.

Skrypty JavaScript to małe programy uruchamiane na komputerze użytkownika po pobraniu z serwera wraz ze stronami internetowymi.

Zakres JavaScript

JavaScript od samego początku był wykorzystywany do pisania różnych skryptów po stronie klienta. Były powszechnie używane do zadań, takich jak sprawdzanie poprawności informacji wprowadzonych przez użytkownika do formularza przed przesłaniem go na serwer lub programowanie odpowiedzi na działania użytkownika, które sprawiają, że strony internetowe stają się interaktywne. Dziś całe aplikacje internetowe tworzone są przy użyciu JavaScript, niektóre z nich niewiele ustępują swoim desktopowym odpowiednikom. Dobre przykłady takie aplikacje internetowe można znaleźć wśród usług Google, na przykład Kalendarz Google, wielofunkcyjny organizer w przeglądarce internetowej oraz Dokument Google& Arkusz kalkulacyjny to edytor tekstu i arkuszy kalkulacyjnych, który umożliwia pracę z dokumentami biurowymi bezpośrednio w oknie przeglądarki internetowej. Język dynamicznego tworzenia treści jest używany do tworzenia dynamicznej treści dla stron internetowych. Strony HTML Dynamiczny HTML, którego kluczową częścią jest ponownie JavaScript.

JavaScript jest używany nie tylko w Internecie, ale także w programach takich jak Adobe Dreamweaver, Adobe akrobata Czytelnik i Adobe Photoshop aby rozszerzyć ich możliwości, podobnie jak przy użyciu języka Visual Basic w Microsoft Office.

Przyjrzyjmy się teraz, jak tworzyć skrypty i jak je osadzić w dokumencie HTML.

Skrypty

Przyjrzyjmy się wszystkim etapom tworzenia skryptu JavaScript – od organizacji środowiska pracy po połączenie kodu z dokumentem HTML.

Do pracy nad skryptami prawie każdy edytor tekstu, który pozwala tworzyć zwykłe pliki tekstowe i zapisz je z rozszerzeniem htm lub html. Na przykład na sali operacyjnej System Windows wśród standardu znajdują się dwa odpowiednie edytory tekstu - Notatnik i WordPad. Istnieją również edytory zaprojektowane specjalnie do tworzenia stron internetowych, takie jak Microsoft FrontPage i Adobe Dreamweaver (wcześniej znany jako Macromedia Dreamweaver). Te edytory umożliwiają tworzenie stron internetowych za pomocą narzędzi wizualnych, a następnie przełączanie się w tryb wyświetlania kodu i wprowadzanie niestandardowych zmian, takich jak dodawanie skryptów. W przeciwieństwie do konwencjonalnego edytory tekstu, w takich edytorach podświetlana jest składnia HTML i JavaScript, co jest bardzo wygodne.

Ponadto w Internecie można znaleźć dużą liczbę innych edytorów tekstu, które umożliwiają tworzenie stron internetowych i podkreślanie składni języków HTML i JavaScript. Edytory te mają również wiele innych przydatnych funkcji, które znacznie upraszczają proces tworzenia stron internetowych i tworzenia skryptów. Wiele z tych edytorów jest darmowych lub shareware, a niektóre z nich mogą Ci się spodobać.

Będziesz tworzyć skrypty, które manipulują stronami internetowymi, więc potrzebujesz jakiejś przeglądarki internetowej, aby przetestować te dokumenty, aby działały. Pamiętaj, że po przetestowaniu swojego dzieła w jednej przeglądarce internetowej, nie możesz być pewien, że zadziała również w innych. Dlatego warto sprawdzać strony internetowe w wielu przeglądarkach internetowych, a im więcej, tym lepiej.

Twórcy stron internetowych muszą liczyć się głównie z osobliwościami przeglądarki internetowej Microsoft Internet Poszukiwacz. Dlatego konieczne jest przetestowanie swoich stron internetowych w tej przeglądarce internetowej, która jest dostępna we wszystkich system operacyjny Okna.
Bardzo popularne są również przeglądarki internetowe. Mozilla Firefox i Opera, które starają się być jak najbardziej zgodne ze standardami. Mozilla Firefox można pobrać ze strony http://www.mozilla.ru/, a Opera można pobrać ze strony.

Rozważmy osobno debugowanie programu (skryptu). Gdy skrypt jest duży, nie jest łatwo go zrozumieć, a debugowanie, czyli proces wyszukiwania i naprawiania błędów, może zająć większość czasu tworzenia całego programu (lub skryptu). Aby uprościć i przyspieszyć debugowanie, programy specjalne nazywa debugery... Typowy debugger ma takie funkcje, jak przechodzenie przez program, zatrzymywanie się na każdym wierszu kodu lub na wcześniej zaznaczonych punktach przerwania oraz śledzenie i modyfikowanie wartości każdej zmiennej podczas działania programu.

Istnieje wiele programów do debugowania skryptów JavaScript. Na przykład Microsoft Script Debugger ma wszystko, czego potrzebujesz do pomyślnego debugowania skryptów JavaScript. Jest używany w połączeniu z przeglądarką internetową Microsoft Internet Explorer. Ten regulator jest rozpowszechniany bezpłatnie przez firmę Microsoft i można go pobrać ze strony internetowej. Ponadto ten debugger jest rozpowszechniany wraz z Edytor Microsoft Pierwsza strona w ciągu Programy Microsoft Edytor skryptów, który praktycznie nie różni się od Microsoft Script Debugger.

Istnieją również inne debuggery, na przykład dla przeglądarki internetowej Mozilla Firefox, są one zbudowane jako rozszerzenia. W szczególności debugger FireBug można pobrać ze strony, a jeśli wejdziesz na tę stronę w przeglądarce internetowej Mozilla Firefox, debugger zostanie natychmiast zainstalowany.

W tej książce nie będziemy omawiać procesu debugowania, ponieważ jest to osobny temat, który wymaga dokładnego przestudiowania. Do pisania prostych skryptów nie jest wymagane debugowanie.

Osadzanie skryptów

Przyjrzyjmy się osadzaniu skryptów na stronach internetowych.
Skrypty są osadzane w dokumencie HTML na trzy standardowe sposoby:

tekst jako skrypt w dowolnym języku. Język skryptowy określa się za pomocą atrybutu type. Na przykład poniższy kod służy do określenia języka JavaScript:

Ten atrybut można pominąć, ponieważ domyślna jest wartość „text / javascript”.

Możesz używać komentarzy w kodzie skryptu - tekstu, który jest ignorowany przez interpreter JavaScript. Komentarze // i

Komentarze mogą być również wieloliniowe, co ułatwia debugowanie skryptu i pozwala zakomentować problematyczną część kodu. Służą do tego zestawy znaków /* i */, jak np. w poniższym kodzie:

Skrypty mogą być zawarte w samej stronie internetowej, jak opisano powyżej, lub w osobnym pliku. Etykietka

...

4. Zapisz plik, na przykład o nazwie script1.html.
Po utworzeniu oskryptowanej strony internetowej możesz zobaczyć, jak będzie wyglądać w przeglądarce internetowej. Aby upewnić się, że skrypt działa zgodnie z oczekiwaniami, przetestuj go we wszystkich przeglądarkach internetowych zainstalowanych na komputerze.
5. Uruchom przeglądarkę internetową i otwórz w niej wygenerowaną stronę internetową.

Tak więc, jeśli zrobiłeś wszystko poprawnie, dziesięć komunikatów "Hello World !!!" pojawi się na ekranie Twojej przeglądarki internetowej. (rys. 2.3).

Tworząc skrypty, zazwyczaj masz otwarty jednocześnie edytor tekstu, w którym tworzysz stronę internetową oraz kilka przeglądarek internetowych, w których sprawdzasz funkcjonalność tworzonej strony internetowej. Po wprowadzeniu zmian w skrypcie po prostu przełącz się na przeglądarkę internetową i kliknij przycisk Odśwież.

Ryż. 2.3. Twój pierwszy skrypt w przeglądarce internetowej

Składnia i podstawowe funkcje JavaScript

Teraz wyjaśnijmy podstawowe elementy języka JavaScript: zmienne, typy danych, wyrażenia, różne operatory, funkcje itp. Ta wiedza jest podstawowa, gdyż bez niej nie da się zrozumieć reszty materiału.

Praca z informacją

Dowolny program lub skrypt pracuje z informacją, to znaczy otrzymuje pewne dane, przetwarza je zgodnie ze swoim algorytmem, a następnie z reguły zwraca jakiś wynik w postaci obrazu, dźwięku, pliku, sygnału do innego programu itp. .

Skrypty klienckie często działają jako bufor między użytkownikiem a programem serwera, wykonując wstępne przetwarzanie i weryfikację danych.

Skrypty klienta mogą pozyskiwać informacje w następujący sposób:

/ dane wprowadzone do skryptu przez dewelopera (wartości początkowe);
/ dane otrzymane od użytkownika za pomocą formularzy;
/ dane przekazywane przez adres URL;
/ informacje otrzymane przez obsługę zdarzeń, takich jak przesuwanie wskaźnika myszy, klikanie lub naciskanie klawiszy;
/ dane otrzymane z innych witryn lub przesłane przez program serwera.

Rozważ wejście / wyjście informacji w JavaScript przy użyciu następujących trzech metod: alert (), monit () i potwierdzenie (). Te metody generują różne okna komunikatów.

Metoda alertu ()

Metoda alert() wyświetla okno dialogowe alertu z odpowiednim komunikatem. Po przeczytaniu wiadomości użytkownik musi kliknąć przycisk OK, aby zamknąć okno. Argumentem tej metody jest ciąg.

W najprostszym przypadku tekst ostrzeżenia, ujęty w cudzysłów, umieszcza się w nawiasach (Listing 2.3).

Wykaz 2.3. Praca z ostrzeżeniem

Okno ostrzeżenia jest generowane przez samą przeglądarkę, więc wygląd okna może się różnić w zależności od przeglądarki. Na ryc. 2.4 pokazuje widok okna wygenerowanego przy użyciu prezentowanego kodu w przeglądarce Internet Explorer.

Ryż. 2.4. Praca z ostrzeżeniem

Metoda monitu ()

Metoda zachęty () służy do pobierania danych od użytkownika (Listing 2.4).

Listing 2.4. Praca z zapytaniem

Po wywołaniu wyświetlane jest okno dialogowe monitu z polem tekstowym. Ta metoda może zawierać dwa argumenty. Pierwszym argumentem jest komunikat wyświetlany w oknie dialogowym. Drugi argument to domyślny tekst, który powinien pojawić się w odpowiednim polu. Dodatkowo metoda ta zwraca wartość - tekst, który wprowadził użytkownik.

Po uruchomieniu strony z powyższym kodem pojawi się żądanie (rys. 2.5), a następnie ostrzeżenie.

Ryż. 2.5. Praca z zapytaniem

W tym przykładzie użyto zmiennej, aby zademonstrować, jak działa metoda zachęty (), a metoda alert () używa wyrażenia jako argumentu. Poniżej przeanalizujemy te koncepcje.

W metodzie zachęty () można pominąć drugi argument, czyli podać tylko jedną linię.

Potwierdź () metodę

Metoda Confirm() wyświetla okno dialogowe potwierdzenia, które zawiera dwa przyciski: OK i Anuluj. Listing 2.5 przedstawia kod do tworzenia okna potwierdzenia, ale ten skrypt nie podkreśla różnicy między przyciskami OK i Anuluj.

Listing 2.5. Praca z potwierdzeniem

Kliknięcie dowolnego przycisku spowoduje zamknięcie okna dialogowego (rys. 2.6).

Ryż. 2.6. Praca z potwierdzeniem

Skrypt może inaczej reagować na kliknięcia przycisków OK i Anuluj.

Zmienne i typy danych

Podczas interpretacji skryptu przeglądarka dzieli kod na pojedyncze znaki, słowa lub frazy, które może rozpoznać. Te elementy nazywane są tokenami. W JavaScript tokeny dzielą się na cztery typy: identyfikatory, słowa kluczowe, literały i operacje.

Identyfikatory

Identyfikatory to nazwy oznaczające zmienne, funkcje i obiekty. Niektórych nazw nie można używać jako identyfikatorów, ponieważ mają one specjalne znaczenie. Identyfikatory są tworzone przy użyciu kombinacji różnych znaków z następującymi ograniczeniami:

/ wszystkie identyfikatory muszą zaczynać się od litery;
/ po pierwszej literze pozostałe znaki mogą być literami i cyframi;
/ litery to wszystkie duże i małe litery alfabetu łacińskiego: od A do Z i od a do z;
/ znak podkreślenia (_) pełni rolę litery i jest często używany zamiast spacji, której nie można używać w identyfikatorach;
/ Znak dolara ($) działa jak litera i jest powszechnie używany w automatycznym generowaniu kodu.

RADA
Nie należy używać identyfikatorów, które różnią się tylko dużymi i małymi literami w tym samym skrypcie, takich jak flagId i FlagID. Są to różne identyfikatory, które mogą powodować subtelne błędy.

Tabela 2.1 zawiera przykłady prawidłowych i nieprawidłowych identyfikatorów.

Dopuszczalne	Nieważny
liczyć	2mj
x	Nowy
x	mój№
jest dobrze	jest dobrze

Tabela 2.1. Przykłady identyfikatorów JavaScript

Pamiętaj, że nowy identyfikator, chociaż zawiera znaki prawne, jest słowem kluczowym i dlatego nie może działać jako identyfikator niestandardowy.

Słowa kluczowe i słowa zastrzeżone

Słowa kluczowe to predefiniowane identyfikatory, które tworzą rdzeń języka JavaScript. Te słowa mają specjalne znaczenie i pełnią określone funkcje. Słów kluczowych nie można używać w identyfikatorach niestandardowych. Tabela 2.2 to lista słów kluczowych JavaScript.

przerwa	w przeciwnym razie	Nowy	typ
Obudowa	wreszcie	zero	var
łapać	dla	powrót	próżnia
kontyntynuj	funkcjonować	przełącznik	podczas
domyślny	Jeśli	ten	z
kasować	w	rzucić
robić	wystąpienie	próbować

Tabela 2.2. Słowa kluczowe JavaScript

abstrakcyjny	wyliczenie	int	niski
logiczne	eksport	berło	statyczny
bajt	rozciąga się	długie	Super
zwęglać	finał	rodzinny	zsynchronizowany
klasa	pływak	pakiet	rzuty
stały	iść do	prywatny	przejściowy
debugger	przybory	chroniony	lotny
podwójnie	import	publiczny

Tabela 2.3. Słowa zastrzeżone JavaScript

Literały

Literały to liczby lub ciągi znaków używane do reprezentowania wartości w JavaScript. Informacje mogą być bardzo zróżnicowane, więc znaczenia przybierają różne formy. Najprostsze typy danych w JavaScript to podstawowe typy danych: liczby, łańcuchy i wartości logiczne.

Liczby w JavaScript są dwojakiego rodzaju: liczby całkowite i liczby zmiennoprzecinkowe. Wartości całkowite mogą być dodatnie, na przykład 1, 2, 3, ujemne, na przykład –1, –2, –3 i zero. Ponadto wartości całkowite mogą być wyrażone w notacji dziesiętnej, ósemkowej lub szesnastkowej.

Liczby dziesiętne mogą zawierać dowolny ciąg cyfr od 0 do 9, który nie zaczyna się od zera.

Liczby ósemkowe mogą zawierać dowolny ciąg liczb od 0 do 7, który musi zaczynać się od zera.

Liczby szesnastkowe mogą zawierać dowolny ciąg cyfr od 0 do 9 oraz litery od a do f, które muszą zaczynać się od 0x.

Rozważmy przykłady reprezentowania liczb całkowitych w różnych formatach (Tabela 2.4).

Format dziesiętny	Format ósemkowy	Format szesnastkowy
45	055	0x2d
– 255	– 0377	- 0xff
10000000	046113200	0 × 989680
10	012	0XA

Tabela 2.4. Przykłady liczb całkowitych

Liczby zmiennoprzecinkowe definiują liczby dziesiętne z częścią ułamkową. Liczby te mogą być wyrażone w notacji regularnej lub wykładniczej. W tym drugim przypadku symbol służy do reprezentowania zamówienia mi lub mi... Mantysa dziesiętna i kolejność mogą być dodatnie lub ujemne. Poniżej znajdują się przykłady liczb zmiennoprzecinkowych.

1.4142135623730950488016887242097 -35,0 4567.0002 3,4e100 -5,456e-3 0,007

JavaScript obsługuje typy danych typu Boolean, które mogą przyjmować tylko dwie wartości: true i false. Wartości logiczne są potrzebne do radzenia sobie z warunkami, o których dowiesz się w dalszej części tego rozdziału.

UWAGA!
Słowa kluczowe prawda i fałsz należy wprowadzać małymi literami.

Najczęściej używanym typem danych w JavaScript jest prawdopodobnie string. Linia to zestaw znaków (prawdopodobnie pusty), ujęty w pojedyncze lub podwójne cudzysłowy. Używane są dwa typy cudzysłowów, ponieważ ciąg może zawierać pewnego rodzaju cudzysłowy. Oto przykłady literałów łańcuchowych:

„Linia tekstu” „Rosja!” „4567” „” „Systemy operacyjne” „Lewis Carroll” Alicja w Krainie Czarów „”

Czasami może być konieczne poinstruowanie komputera, aby używał znaków specjalnych, takich jak tabulatory lub znaki nowego wiersza. Aby zawrzeć dowolny znak Unicode w ciągu, należy wprowadzić jego kod po znaku usługi \ u w postaci \ uXXXX. Tabela 2.5 zawiera listę najczęściej używanych znaków sterujących.

Sekwencja kontrolna	Unicode	Opis	Symbol
\ b	\ u0008	Backspace
\ T	\ u0009	Zakładka pozioma
\ n	\u000A	Wysunięcie wiersza (nowa linia)
\ v	\ u000B	Zakładka pionowa
\ F	\u000C	Kanał strony
\ r	\u000D	Zwrot karetki
\»	\ u0022	Cudzysłów	»
\’	\ u0027	Pojedynczy cytat	’
\\	\ u005C	Ukośnik wsteczny	\

Tabela 2.5. Postacie kontrolne

Znaki kontrolne są często używane do wyrównywania danych (Listing 2.6).

Listing 2.6. Wyrównanie danych ze znakami kontrolnymi

Okno dialogowe generowane przez metodę alert () jest zależne od przeglądarki, więc wyrównanie jest różne w różnych przeglądarkach. Powyższy kod jest dostosowany do Microsoft Internet Explorer (rys. 2.7).

Ryż. 2.7. Wyrównanie znakami kontrolnymi

Oprócz liczb, łańcuchów i wartości logicznych istnieją dwa inne specjalne typy danych: funkcje i obiekty. Funkcje mogą być wbudowane, takie jak alert(), lub mogą być tworzone przez programistę. Również funkcje mogą być własnością obiektu (w tym przypadku są one nazywane metody). Obiekty mogą być również wbudowane (jak dokument) lub mogą być tworzone przez programistę. Null jest uważany za obiekt.

Zmienne

Zmienny to nazwa przypisana do lokalizacji w pamięci komputera, która przechowuje określone dane podczas działania skryptu. Zmienne ułatwiają programiście manipulowanie danymi.

Nazwa zmiennej jest identyfikatorem, więc podlega tym samym zasadom.

Przed użyciem zmiennej należy ją zadeklarować, czyli zarezerwować miejsce na przechowywanie danych. Aby zadeklarować zmienną, należy podać jej identyfikator po słowie kluczowym var. Możesz zadeklarować kilka zmiennych naraz, podając ich nazwy oddzielone przecinkami:

Var mojeDane1; zmienna x, y, z; var k, msg1, msg2, IM;

W procesie deklarowania zmiennej możesz ją zainicjować, czyli ustawić jej wartość początkową:

Var mójStr = "Cześć"; var k = 1000, x = 12, y = –5; var s = 1.34e-5, msg11 = "Błąd", Flaga = Fałsz;

Dopóki zmienna nie otrzyma wartości, jest niezdefiniowana - niezdefiniowana. Do określenia typu zmiennej można użyć operacji typeof, która zwraca ciąg znaków z typem zmiennej (Listing 2.7).

Listing 2.7. Typy danych

Typy danych

W powyższym kodzie do wyświetlenia informacji użyliśmy metody document.write(), która pozwala nam dołączyć linię tekstu bezpośrednio do strony (rys. 2.8).

Ryż. 2.8. Typy danych

Aby wyświetlić tekst, wartości zmiennych i ich typ, argument tej metody jest dość złożonym wyrażeniem. Wyrażenia zostaną wyjaśnione bardziej szczegółowo poniżej.

Zmienne według zakresu są podzielone na globalne i lokalne. Zmienna zadeklarowana wewnątrz funkcji jest lokalna i tylko ta funkcja ma dostęp do jej wartości. Zmienne lokalne są tworzone i niszczone wraz z odpowiednią funkcją. Zmienne globalne są deklarowane poza funkcjami. Takie zmienne umożliwiają funkcjom wymianę danych.

Szyk to specjalna zmienna, która pozwala na przechowywanie wielu wartości jednocześnie. Zazwyczaj wartości te są ze sobą powiązane, takie jak nazwy miesięcy i dni tygodnia. Tablice mogą znacznie uprościć kod, a podczas korzystania z pętli zmniejszyć złożoność skryptów.

Rozważ przykład deklarowania i ustawiania wartości dla elementów tablicy (Listing 2.8).

Listing 2.8. Praca z tablicą

Należy pamiętać, że podczas deklarowania tablicy liczba elementów jest podana w nawiasach, a odwołując się do elementu, jego indeks jest podawany w nawiasach kwadratowych. Ponadto numeracja elementów tablicy w JavaScript jest liczona od zera, więc pierwszym elementem tablicy będą gwiazdki.

JavaScript umożliwia wyświetlanie wszystkich elementów tablicy zamiast wyświetlania ich pojedynczo. Aby to zrobić, musisz odwołać się do samej tablicy. Wynikiem będzie łańcuch, w którym wszystkie elementy tablicy są wymienione oddzielone przecinkami (rys. 2.9).

Ryż. 2.9. Wyprowadzanie wszystkich elementów tablicy

Wartości elementów tablicy można określić podczas zadeklarowania tablicy. W takim przypadku nie trzeba określać liczby elementów w tablicy (Listing 2.9).

Listing 2.9. Inicjalizacja tablicy

Wymiar tablicy można pominąć, ponieważ JavaScript tego nie wymaga. Tablicę można rozszerzać w miarę dodawania danych. Ponadto możesz zadeklarować element z indeksem n, co zwiększy długość tablicy do n + 1... Długość tablicy można sprawdzić za pomocą właściwości length (Listing 2.10).

Listing 2.10. Rozmiar tablicy

Pomimo tego, że w rzeczywistości w tablicy jest 6 elementów, długość tablicy wynosi 100 (rysunek 2.10).

Ryż. 2.10. Rozmiar tablicy

Wyrażenia

Wyrażenia są operandami połączonymi za pomocą operacji. Jako operandy zwykle używa się wartości i zmiennych, ale można również użyć innych wyrażeń. Na przykład wyrażenie 4 + 6 dodaje dwie wartości, co daje w wyniku wartość 10. A wyrażenie q = 5 przypisuje wartość 5 do zmiennej q. Jeśli manipulacje są przeprowadzane z jedną wartością, operacja jest nazywana jednoargumentową, a jeśli ponad dwa - dwójkowy... Następnie spójrzmy na operacje JavaScript.

Operacje przypisania

Jedną z najczęściej używanych operacji jest operacja przypisywania. W najprostszym przypadku ta operacja przypisuje wartość do zmiennej:

Ta operacja może być używana jednocześnie dla kilku zmiennych:

msg1 = msg2 = "Witam"

Inne operacje przypisania to kombinacje przypisania i operacji arytmetycznych lub bitowych (tabela 2.6).

Tabela 2.6. Połączone operacje przypisania

Działania arytmetyczne

/ Dodatek - znak plus (+). Na przykład 5 + 7 = 12.
/ Odejmowanie to znak minus (-). Na przykład 67 - 43 = 24.
/ Mnożenie to gwiazdka (*). Na przykład 2 * 2 = 4.
/ Division - ukośnik (/). Na przykład 45/5 = 9.
/ Pozostała część podziału to procent (%). Na przykład 7% 5 = 2.
/ Do pracy z liczbami używane są operacje arytmetyczne.

W programowaniu bardzo powszechne są operacje zwiększania lub zmniejszania zmiennej o jeden (operacje inkrementacji i dekrementacji). Przyrost jest wskazywany przez sekwencję ++ , a dekrementacja - według sekwencji — ... Na przykład, ja ++ jest alternatywą dla wyrażenia ja = ja + 1.

Istnieją formy prefiksowe i postfiksowe tych operacji. W przypadku operacji na prefiksie najpierw wykonywana jest inkrementacja lub dekrementacja, a następnie obliczane jest wyrażenie:

ja = 4
++ i * 2 = 10

Jeśli używana jest operacja postfiksowa, wyrażenie jest oceniane jako pierwsze, a następnie zmienna jest zwiększana lub zmniejszana:

ja = 4
ja ++ * 2 = 8

Listing 2.11 demonstruje pracę z operacjami arytmetycznymi.

Listing 2.11... Działania arytmetyczne

Działania arytmetyczne

W tym przykładzie widać, że operacje arytmetyczne są zgodne z zasadami matematycznymi. Na przykład mnożenie następuje przed dodaniem (rysunek 2.11).

Odbywa się to poprzez priorytet operacji, który można zmienić za pomocą nawiasów.

Ryż. 2.11. Działania arytmetyczne

Operacje porównawcze

Operatory porównania służą do dopasowywania operandów. W tych operacjach operandami mogą być nie tylko liczby, ale także łańcuchy, wartości logiczne i obiekty. Tabela 2.7 wymienia wszystkie operacje porównania.

Tabela 2.7. Operacje porównawcze

Listing 2.12 przedstawia kod, który używa operacji porównania.

Listing 2.12... Operacje porównawcze

Operacje porównawcze

Powyższy kod porównuje zmienne ja = 5 oraz m2 = "5"... Są uważane za równe, ale nie identyczne (rysunek 2.12).

Ryż. 2.12. Operacje porównawcze

Operacje na ciągach

Jak wspomniano, struny można porównać. Alternatywnie można je połączyć za pomocą operacji konkatenacji (+) , co zrobiliśmy więcej niż raz. Na przykład:

S1 = "Cześć"; S2 = ","; S3 = "Pokój!"; S = S1 + S2 + "" + S3;

W rezultacie zmienna S będzie zawierać ciąg "Hello World!"

Dzięki automatycznemu rzutowaniu typu możesz łączyć liczby i łańcuchy:

"rok" + 2008 = "rok 2008"

Operacje logiczne

Operacje logiczne umożliwiają łączenie wyrażeń zwracających wartości logiczne. Język JavaScript obsługuje trzy operacje logiczne.

Operacja logiczna AND (&&) zwroty prawda tylko wtedy, gdy oba operandy są prawdziwe. Na przykład, (12) .

Operacja logiczna LUB (||) zwroty prawda jeśli przynajmniej jeden operand jest prawdziwy. Na przykład, (22) .

Logiczna operacja NIE (!) jest jednoargumentowy i odwraca wartość logiczną.

Operacje warunkowe

JavaScript ma operację ?: , który przypisuje wartość do zmiennej w zależności od tego, czy warunek jest spełniony. Rozważmy następujący przykład:

Znak Var = (a> = 0)? "Pozytywny Negatywny";

Wynik wyrażenia przed znakiem zapytania wpływa na wartość zmiennej: jeśli wartość jest prawdziwa, to obliczane jest wyrażenie przed dwukropkiem, jeśli fałszywe, to określane jest wyrażenie po dwukropku. W naszym przypadku, jeśli zmienna a jest większa lub równa 0 , zmienny znak przyjmuje wartość „Dodatni”, w przeciwnym razie - wartość „Ujemny”.

Istnieją również operacje w JavaScript (na przykład bitowe), które są dość rzadkie i są potrzebne do rozwiązywania konkretnych problemów, więc nie będziemy ich rozważać.

Warunki i cykle

Do zmiany kolejności wykonywania kodu w JavaScript służą mechanizmy rozgałęziania. (wypowiedzi if i switch) pozwalając na wybranie jednej z alternatywnych akcji w zależności od warunku. Do powtórnego wykonania kodu używane są operatory pętli (podczas, za i zrób)... Pętle są również przydatne do manipulowania tablicami.

Jeśli oświadczenie

Operator Jeśli kontroluje kolejność wykonywania poleceń. Składnia tego operatora jest następująca:

If (wyrażenie logiczne) (operatory)

Najpierw obliczane jest wyrażenie logiczne, a następnie, jeśli jest równe prawda, operatory są wykonywane; jeśli jest równy fałszywe, instrukcje są pomijane, a skrypt kontynuuje działanie.

Spójrzmy na przykład. Powiedzmy, że funkcja f (x) definiuje się następująco:

X + 10, dla x< 0 f(x)= x2 + 4, при 0 ≤ x ≤ 5 5 / x, при x > 5

Możesz użyć kodu z listingu 2.13, aby określić wartość tej funkcji w określonym punkcie.

Listing 2.13... Przykład instrukcji if

Jeśli .. jeszcze oświadczenie

Często wygodnie jest użyć pełnej formy instrukcji warunkowej. Używając tego operatora, możesz określić akcje, które mają być wykonane, jeśli wyrażenie logiczne to fałszywe:

If (wyrażenie logiczne) (instrukcje1) else (instrukcje2)

Co więcej, możesz łączyć w przeciwnym razie z innym operatorem Jeśli... W takim przypadku możesz rozważyć kilka alternatyw i wykonać odpowiednie instrukcje:

If (wyrażenie logiczne1) (instrukcje1) else if (wyrażenie logiczne2) (instrukcje2) else (instrukcje3)

Przepisujemy poprzedni skrypt, aby zdefiniować funkcję za pomocą instrukcji if..else (Listing 2.14).

Listing 2.14... Przykład operatora if..else

Jak widać z tego kodu, nawiasy klamrowe są opcjonalne, jeśli wykonywana jest tylko jedna instrukcja. Zaleca się jednak, aby zawsze ich używać, aby kod był łatwiejszy do odczytania.

Przełącz oświadczenie

Instrukcja switch porównuje wartość z wieloma innymi wartościami. Ten sam efekt można osiągnąć za pomocą wielu instrukcji if, ale instrukcja switch umożliwia tworzenie zwięzłego i opisowego kodu:

Switch (wyrażenie) (sprawa wartość1: zestawienia sprawa wartość2: zestawienia ..domyślnie: zestawienia)

Załóżmy, że chcesz stworzyć skrypt, który tłumaczyłby nazwy zwierząt z języka angielskiego (Listing 2.15).

Listing 2.15.

Ten kod pozwala przetłumaczyć jedną z trzech nazw zwierząt (ryc. 2.13).

Ryż. 2.13. Wynik instrukcji switch

Zwróć uwagę na instrukcję break, która kończy wykonywanie instrukcji switch. W przeciwnym razie reszta kodu zostanie wykonana w instrukcji switch, niezależnie od wartości zmiennej.

Instrukcja for służy do tworzenia pętli. Ten operator ma następującą składnię:

For (wyrażenie inicjujące; wyrażenie warunku; wyrażenie pętli) (instrukcje)

Wyrażenie inicjujące jest zwykle używane do ustawienia początkowej wartości licznika pętli. Wyrażenie warunku przestaje wykonywać pętlę, gdy zwróci wartość false. Wyrażenie pętli zwykle zwiększa lub zmniejsza licznik pętli. Każde z tych wyrażeń można pominąć, ale należy użyć odpowiedniego średnika.

Listing 2.16 pokazuje kod do znajdowania silni n! = 1 ∙ 2 ∙ 3 ​​​​∙…… ∙ n za pomocą pętli for.

Listing 2.16. Znajdowanie silni za pomocą instrukcji for

Ten kod zapętla się od 1 do x bez sprawdzania poprawności wprowadzonej wartości dla uproszczenia. Na tej podstawie możesz na przykład uzyskać wartość nieskończoności dla dużej wartości x.

Instrukcja while jest podobna do instrukcji for, ale nie inicjuje i nie zwiększa licznika w swojej deklaracji. Składnia tej instrukcji jest następująca:

Chociaż (wyrażenie warunkowe) (wyrażenia)

Jeśli wyrażenie warunkowe w pętli while jest fałszywe, instrukcje nigdy nie zostaną wykonane.
Listing 2.17 pokazuje kod do znajdowania silni za pomocą pętli while.

Listing 2.17. Znajdowanie silni za pomocą instrukcji while

Czy .. while pętla

Instrukcja do..while jest prawie identyczna z instrukcją while. Jednak w tej instrukcji warunek jest sprawdzany na końcu, więc gwarantuje to, że instrukcje zostaną wykonane przynajmniej raz, niezależnie od tego, czy warunek jest spełniony:

Do (instrukcje) while (wyrażenie warunkowe)

Listing 2.18 przedstawia kod do znajdowania silni za pomocą pętli do..while.

Listing 2.18. Znajdowanie silni za pomocą instrukcji do..while

Dla .. w pętli

Pętla for..in umożliwia wykonanie instrukcji dla prawie każdej właściwości obiektu. Składnia tej instrukcji jest następująca:

Dla (nieruchomość w obiekcie) (operatorzy)

Na przykład, używając tego operatora, możesz zwiększyć wszystkie elementy w tablicy (Listing 2.19).

Listing 2.19. Korzystanie z operatora for..in

W wyniku wykonania tego kodu wszystkie elementy tablicy a zwiększą się o 1 (rys. 2.14).

Ryż. 2.14. Zwiększanie elementów tablicy

Przerwij i kontynuuj wypowiedzi

Czasami podczas wykonywania pętli konieczne staje się przerwanie całej pętli lub jednej z jej iteracji. Służą temu stwierdzenia break i Continue. Instrukcja break całkowicie zatrzymuje wykonywanie pętli i przekazuje kontrolę do instrukcji znajdujących się za pętlą. Instrukcja continue przerywa bieżące wykonywanie pętli i przechodzi do następnego kroku w pętli. Różnicę w sposobie działania tych operatorów pokazano na listingu 2.20.

Listing 2.20. Korzystanie z instrukcji przerwania pętli

Kod ten pozwala określić iloraz liczby wprowadzonej przez użytkownika i elementów tablicy a. W takim przypadku wśród elementów tej tablicy mogą znajdować się zera, wówczas do elementu tablicy z wynikiem b należy wpisać myślnik "-". W takim przypadku możesz zobaczyć wynik przetwarzania kodu na ryc. 2.15.

Ryż. 2.15. Korzystanie z instrukcji przerwania pętli

Powyższy kod demonstruje również możliwość zagnieżdżenia jednej pętli w innej. Z pętli while można wyjść tylko po wprowadzeniu zera (domyślnie). Jeśli wprowadzisz inne liczby, pętla się nie zakończy. Pętla for czasami przerywa się podczas wykonywania, jeśli element tablicy a jest równy zero (aby uniknąć dzielenia przez zero).

Edytor kodu to przydatne narzędzie dla każdego programisty. I każdy wybiera dla siebie: ktoś docenia funkcjonalność, czyjąś mobilność, dla kogoś najważniejsze jest design i wygoda. Niektórzy lubią nawet pisać kod w Notatniku, ale to tak, jakby próbować zbudować dom młotkiem.

JavaScript to potężny i nastrojowy język. Z jednej strony jest wiele frameworków i bibliotek, z drugiej nie najprostsza składnia i niebezpieczeństwa związane z „dynamiką”. Dlatego ważne jest, aby wybrać edytora do pracy z nim. Właściwy wybór zapewni Ci czysty kod, dużą szybkość rozwoju, minimum błędów i przyjemność z pracy. Wybór jednego z setek istniejących edytorów zajmie dużo czasu, więc część pracy wykonaliśmy za Ciebie. Oto top 5.

WebStorm

WebStorm firmy JetBrains jest doskonały w obu swoich przejawach: jako IDE wspiera pracę z systemami kontroli wersji, pozwala zdalnie wdrażać kod jak edytor - standardowe udogodnienia, takie jak podświetlanie składni, autouzupełnianie, nawigacja.

Zalety:

• LiveEdit - przeglądaj zmiany dokonane w kodzie bez konieczności ich zapisywania;
• interakcja z frameworkami takimi jak React, Angular, Meteor;
• ponad sto wbudowanych testów do wykrywania błędów;
• integracja z Mocha, Protractor, Jest, Karma do testów jednostkowych;
• w pełni rozwinięty debugger do debugowania kodu po stronie serwera i klienta;
• nawigacja do jednoczesnej pracy z kilkoma plikami;
• uzupełnianie kodu, podświetlanie składni.

Niedogodności:

• kosztuje 129 USD za pierwszy rok eksploatacji;
• dla początkujących programistów funkcjonalność jest zbędna.

Kod programu Visual Studio

Widelec środowiska IDE Visual Studio skoncentrowany na pracy z kodem. Jest łatwy do nauczenia, łatwy w obsłudze i jednocześnie funkcjonalny.

Zalety:

• autouzupełnianie kontekstowe, zarówno składniowe, jak i używane zmienne, moduły, funkcje itp.;
• debugger z punktami przerwania, stosem wywołań, interaktywną konsolą;
• obsługa fragmentów i szablonów;
• integracja z Git;
• wygodny i prosty interfejs;
• darmowy edytor.

Niedogodności:

• kilka wtyczek.

Wysublimowany tekst

Wygodny i sprawdzony wieloplatformowy edytor z konfigurowalnym interfejsem i możliwością wykonywania prostych czynności za pomocą skrótów klawiszowych.

Zalety:

• Klawisze skrótu;
• nawigacja po kodzie w postaci mini-mapy;
• możliwość zmiany motywu wizualnego;
• obsługa fragmentów;
• podświetlanie, uzupełnianie zmiennych i składni;
• wielokrotne edycje dzięki zastosowaniu wskaźników;
• wsparcie systemów budowania;
• sprawdzanie składni bezpośrednio w momencie wprowadzania;
• autozapis.

Niedogodności:

• pełna wersja kosztuje 70 USD;
• brak analizatora kodu do umieszczania linków.

Edytor Atomów

Wprowadzony w 2015 roku edytor kodu Git, który kopiuje projekt Sublime Text i jest opakowany w Chromium.

Zalety:

• ponad 50 otwartych modułów;
• wygodny i przyjemny interfejs;
• darmowy;
• uzupełnianie i podświetlanie kodu;
• menedżer pakietów, których jest już ponad 3,5 tys.;
• elastyczne ustawienia edytora, pakiety wtyczek, motywy interfejsu;
• edycja i nawigacja za pomocą skrótów klawiszowych.

Niedogodności:

• niska produktywność;
• puste opakowanie "po wyjęciu z pudełka".

Wsporniki

W 2014 r. Brackets odstraszył programistów błędami i wadami, ale teraz stopniowo odzyskuje zaufanie dzięki nowej, wysokiej jakości funkcjonalności.

Zalety:

• bogaty pakiet pakietów „po wyjęciu z pudełka”;
• Tryb podglądu na żywo - podgląd zmian w przeglądarce w czasie rzeczywistym;
• menedżer pakietów;
• pokazywanie obrazów i kolorów użytych w kodzie;
• autouzupełnianie i podświetlanie składni;
• analizator kodu;
• darmowy.

Niedogodności:

• ścisłe skupienie się na sieci i HTML + CSS + JavaScript;
• powolny rozwój;
• niska wydajność ze względu na funkcje podglądu.

Obecnie javascript zajmuje wiodącą pozycję, jeśli chodzi o oprogramowanie po stronie klienta i jest używany przez profesjonalnych programistów i twórców stron internetowych na całym świecie. javascript Jest potężnym językiem programowania z wieloma zaawansowanymi funkcjami i frameworkami, takimi jak jQuery, YUI, SproutCore i Cappuccino. Ma jednak pewne wady, na przykład JavaScript działa inaczej w różnych przeglądarkach i może ograniczać dostęp do strony internetowej i wygodę użytkownika. Ale te czynniki nie powinny ograniczać możliwości tego wspaniałego języka.

Dla wielu programistów praca z javascript Może to zabrzmieć trochę zniechęcająco, ale mamy wiele narzędzi dla programistów JavaScript, które są nie tylko łatwe w użyciu, ale także dają świetne wyniki w ciągu kilku minut. Dzięki znajomości javascriptu możesz wykonać każde zadanie - pisanie dokumentacji, edytowanie, testowanie, debugowanie itp.

Narzędzia dokumentacji

jGrouseDoc to narzędzie, które pozwala generować dokumentację API z komentarzy w kodzie źródłowym (programie) i tym samym dokumentować wszystkie niezbędne koncepcje, funkcje, zmienne, klasy, interfejsy, przestrzenie nazw itp., czego efektem jest świetny niestandardowy produkt.

JSDoc Toolkit to aplikacja napisana w javascript do automatycznego generowania formatów szablonów i wielojęzycznej dokumentacji HTML z komentowanego kodu źródłowego javascript.

Narzędzia do kompresji

JSCompress to internetowy kompresor javascript, który kompresuje pliki javascript przy użyciu algorytmów kompresji, takich jak JSMin i Packer, a skompresowane pliki javascript są idealne dla środowisk produkcyjnych, ponieważ ich rozmiar jest zmniejszony o 30% -90%.

YUI Compressor to minifikator javascript zaprojektowany w celu uzyskania wyższego współczynnika kompresji niż mogą zapewnić inne narzędzia. Od wersji 2.0 YUI Compressor kompresuje pliki CSS przy użyciu portu opartego na regularnym wyrażeniu Isaac Schluter.

javascript Compressor kompresuje i optymalizuje pliki JavaScript. Z tego powodu ładują się szybciej, a tym samym zmniejszają wykorzystanie przepustowości. Dzięki temu nazwy funkcji i zmienne globalne pozostają nienaruszone.

Scriptalizer to narzędzie online do minimalizowania skryptów Java i CSS, które pozwala zaoszczędzić miejsce na dysku twardym poprzez zmniejszenie rozmiaru kodu. Usuwa również dodatkowe spacje, tabulatory i puste wiersze, nowe wiersze i komentarze oraz blokuje ograniczniki.

Narzędzia do formatowania

JSbeautifier to narzędzie online, które zmienia formatowanie i wcinanie bookmarkletów (od słów zakładka i aplet), niechlujnego javascript i rozpakowuje skrypty oraz odkrywa złożone fragmenty skryptów. Po prostu wklej swój kod i kliknij przycisk Udekoruj.

Edytory IDE i zestaw narzędzi

Aptana Studio to platforma do tworzenia stron internetowych od wiodącej firmy w swojej branży, która łączy zaawansowane oprogramowanie do pracy z HTML, CSS i javascript. Aptana RadRails to kompletne środowisko programistyczne do tworzenia profesjonalnych aplikacji z bogatymi rozszerzeniami kodu w Ruby & Rails, javascript, CSS i HTML.

Spket IDE to potężny zestaw narzędzi do programowania w javascript i XML, a także w javascript, XUL/XBL i Yahoo Widget. Zapewnia funkcje, takie jak rozszerzanie kodu, podświetlanie składni i plan treści.

Komodo Edit to darmowy wielojęzyczny edytor open source, który ułatwia pisanie wysokiej jakości kodu. Obsługuje PHP, Python, Ruby, Perl i Tcl, a także javascript, CSS, HTML i języki szablonów, takie jak RHTML, Template-Toolkit, HTML-Smarty i Django.

Narzędzia do debugowania

Firebug to najpotężniejsze narzędzie do tworzenia stron internetowych, używane do walidacji HTML oraz modyfikowania stylu i układu w czasie rzeczywistym, dokładnej analizy wykorzystania i wydajności sieci. Fixer javascript może być używany z dowolną przeglądarką.

Blackbird to projekt open source, który oferuje łatwy sposób rejestrowania wiadomości w javascript oraz atrakcyjną konsolę do ich przeglądania i filtrowania, minimalizując w ten sposób lub eliminując użycie funkcji alert().

Faux Console to javascript, który można wstawić do dokumentu, aby uzyskać podstawową konsolę debugowania w IE, a do rejestrowania informacji między przeglądarkami można użyć plików YUI lub pliku console.log().

JS Bin to aplikacja internetowa, która pomaga w testowaniu kodu JavaScript i fragmentów kodu CSS w określonym kontekście oraz dostrajania kodu razem. Umożliwia edycję i testowanie JavaScript i HTML.

JSON to format danych, który w dzisiejszych czasach zyskuje na popularności i jest szeroko stosowany w wielu witrynach Web 2.0 z AJAX. Wiele witryn oferujących interfejsy API zwraca dane JSON. Często spacje w dostarczonych danych JSON są kompresowane w celu zmniejszenia ilości przesyłanych danych. Ta witryna zapewnia szybki i łatwy sposób sformatowania pliku JSON, abyś mógł go przeczytać.

Eclipse Marketplace Client (MPC) to bogaty interfejs klienta do przeglądania i instalowania rozwiązań opartych na Eclipse. MPC zapewnia silną integrację instalacji między obszarem roboczym Eclipse i Eclipse Marketplace, a także wydruki rozwiązań innych firm.

Venkman to debugger javascript dla Mozilli oparty na przeglądarkach takich jak Firefox 3.x, Netscape 7.x, Seamonkey 1.x i Mozilla Seamonkey 2.x. Inżynier serwisu jest również dostępny jako pakiet rozszerzeń XPI.

JS.Class to zestaw narzędzi do tworzenia zorientowanych obiektowo programów JavaScript w oparciu o Rubiego. Oferuje również potężny menedżer wsadowy, który ma na celu pomóc w ładowaniu aplikacji i obsługiwać wszystkie główne przeglądarki internetowe, w tym Rhino, Node.Js i Narhwal.

Narzędzia testowe

Sugartest ułatwia pisanie testów dla JavaScript, działa na JsUnitTest jak DSL, który instaluje, odinstalowuje, zagnieżdża zawartość, nie ma zależności i działa z prostą, ale ekspresyjną składnią.

jSLint pobiera źródła javascript i skanuje lub zaznacza problemy. Jeśli znajdzie problem, wyświetla komunikat opisujący go, a także wskazuje lokalizację, w której problem składniowy nie powinien być, a także sprawdza stylizację i programy strukturalne.

Stworzony przez Johna Resiga i Jana Odvarko, FireUnit zapewnia prosty interfejs API JavaScript do uruchamiania prostego testu logowania i przeglądania go w nowej karcie Firebug.

JsUnit to moduł, który testuje framework po stronie klienta javascript, który działa jako port JUnit, a także zawiera framework do automatyzacji testowania w przeglądarkach i komputerach z różnymi systemami operacyjnymi.

YUI Test to platforma testowa dla rozwiązań JavaScript opartych na przeglądarce, w której można łatwo dodać testy jednostkowe do rozwiązań JavaScript. YUI Test zapewnia również zaawansowane wykrywanie błędów dla tych metod, które przenoszą błędy, testy asynchroniczne do walidacji zdarzeń, komunikację opartą na Ajax i nie tylko.

JSpec to bardzo mała, ale bardzo potężna platforma testowa, która używa własnej gramatyki i preprocesora i zawiera wiele skrótów, czytelną składnię, obsługę Async i Rhino, zagnieżdżony opis, ogólne zachowanie, obsługę akcesoriów, symulacje Ajax i wiele innych.

JSLitmus to lekkie narzędzie do tworzenia wysoce wyspecjalizowanych problemów z testami javascript, które działa we wszystkich najpopularniejszych przeglądarkach. Jest to open source, licencjonowane w stylu MIT, responsywne pętle testowe i może być również hostowane na istniejących stronach internetowych lub aplikacjach.

Znakomity moduł sprawdzania kodu JavaScript służy do śledzenia elementów ;; na stronie internetowej, a gdy znajdzie element HTML ze zdarzeniami w tekście, podświetla tę sekcję czerwoną obwódką, a łącza javascript: z karmazynową obwódką.

Inne przydatne narzędzia

PrettyPink to wbudowany w przeglądarkę zrzutnik zmiennych JavaScript, który umożliwia drukowanie obiektów dowolnego typu do przeglądania podczas sesji konfiguracyjnych w formacie tabeli. Nie wymaga żadnych arkuszy stylów ani obrazów, może pracować z nieskończoną liczbą zagnieżdżonych obiektów, chroni przed cyklicznymi/duplikatymi odwołaniami i jest w pełni kompatybilny z JSLint.

Firediff to rozszerzenie Firebug do śledzenia zmian DOM i CSS, to znaczy monitoruje zmiany, co daje możliwość zrozumienia funkcjonalności aplikacji, a także prowadzi rejestr wprowadzonych zmian i poprawia wyświetlanie strony.

Wykresy JS to generator wykresów javascript, który umożliwia tworzenie wykresów przy użyciu różnych szablonów, takich jak wykresy słupkowe i proste wykresy liniowe.

PageSpeed ​​​​to dodatek do przeglądarki Firefox / Firebug o otwartym kodzie źródłowym, który służy do oceny wydajności stron internetowych i dostarczania zaleceń dotyczących ich ulepszania. Przyspiesza również twoją stronę internetową, zmniejsza wykorzystanie przepustowości i koszty hostingu.

Rockstar Web Profiler lub Razor zawiera trzy komponenty, a mianowicie RockStar Profiler Server do analizy połączeń sieciowych i wydajności serwera, RockStar Profiler Probe do analizy wydajności po stronie klienta oraz RockStar Profiler Console, która dostarcza informacji do analizy zebranych danych dotyczących wydajności.

Mobilny (dla Safari) framework javascript jest zminimalizowany do mniej niż 8 KB, odnosi się do laboratorium Sizzle na iPhonie, obsługuje przejścia i animacje CSS, jest zorientowany obiektowo i łatwo rozszerzalny.

php.js to projekt open source do przenoszenia wysokopoziomowych funkcji PHP na niskopoziomowe platformy JavaScript, takie jak przeglądarki internetowe, rozszerzenia przeglądarki, silniki AIR i SSJS, takie jak V8, Rhino i SpiderMonkey.

JSSpec to javascript "BehaviorDrivenDevelopment" -struktura, która pokazuje różnicę między wartościami oczekiwanymi a rzeczywistymi, wyraźnie pokazuje linię uszkodzenia, obsługuje obsługę warunkowego wykonania dla IE 6 lub IE 7, FireFox 2 i Safari 3.

MochaUI to biblioteka interfejsu użytkownika aplikacji internetowych zbudowana przy użyciu skryptu JavaScript Mootools używanego w aplikacjach internetowych, elementach internetowych na pulpicie, stronach internetowych, widżetach i samodzielnych oknach dialogowych.

Highlight.js wyróżnia składnię w przykładowym kodzie na blogach, forach i ogólnie na dowolnej stronie internetowej. Automatycznie wyszukuje bloki kodu, wykrywa język i podświetla go.

Biblioteki narzędzi i komponentów dla javascript

Uploadify to wtyczka jQuery, która ułatwia integrację wielu przesyłanych plików z witryną i wymaga Flasha lub dowolnego innego wewnętrznego języka programistycznego. Podstawowa implementacja jest dość prosta i oferuje ogromną możliwość modyfikacji dla zaawansowanych użytkowników.

Burst to przykład ogólnej animacji wykorzystującej technologie javascript i HTML5 i bez użycia technologii Flash. Plik SVG jest tworzony za pomocą Inkscape. Burst jest składniowo podobny do jQuery.

JSTestDriver buduje maszynę testową javascript, którą można łatwo zintegrować z systemami ciągłego budowania; umożliwia szybkie uruchamianie testów w różnych przeglądarkach w celu ułatwienia rozwoju w stylu TDD i zapewnia szybkie wykonywanie testów, w pełni kontrolowaną przez DOM, kontrolę wiersza poleceń i tak dalej.

Booklaylet to kod wrappera bookmarkletu zaprogramowany do ładowania dowolnej zawartości innej strony w otwartym oknie za pomocą warstw div i iframe. Działa z przeglądarkami Firefox, Safari i Opera, ale nie działa z Internet Explorerem.

javascriptools to zbiór komponentów, funkcji i klas JavaScript, w których funkcje wykonują podstawowe operacje na obiektach, ciągach znaków, tablicach danych, polach formularzy i tak dalej. Pakiet zawiera dynamiczną tabelę, która obsługuje stronicowanie, sortowanie i edycję plików oraz jest w pełni konfigurowalna za pomocą CSS.

liteAJAX to dowód koncepcji dla lekkich klas AJAX.

JSPDF to biblioteka do generowania dokumentacji PDF przy użyciu javascript i open source. Może być używany w rozszerzeniach Firefoksa, javascript po stronie serwera z danymi URL w niektórych przeglądarkach.

Narwhal to wieloplatformowe, wielointerpretacyjne środowisko programistyczne JavaScript, które tworzy aplikacje i frameworki JavaScript, takie jak Nitro. Zawiera menedżera pakietów, system modułów i standardową bibliotekę dla wielu interpreterów javascript.

Przydatne biblioteki javascript i inne narzędzia

Obrus ​​to łatwy i dyskretny sposób na dodanie stylu i zachowania do tabel elementów html. Posiada funkcję przypisywania parzystych/nieparzystych nazw klas do alternatywnych ciągów znaków, dodaje nazwy klas dla pozycji myszy nad i poza określonym obszarem.

Mousture to biblioteka ruchów myszy oparta wyłącznie na javascript z możliwością i elastycznością zwijania. Biblioteka została napisana w języku Mootools, zgodnym ze standardami obiektowymi. Jego celem jest rozpoczęcie prac nad przyszłą strukturą ruchów myszy w dowolnej przeglądarce, w tym na nowoczesnych urządzeniach mobilnych.

jQuery Tools to zbiór najważniejszych komponentów interfejsu użytkownika dla nowoczesnych stron internetowych, w którym wszystkie narzędzia mogą być używane razem do rozszerzania, konfigurowania i usuwania. Jest używany przez największe serwisy internetowe na całym świecie.

Tipimage służy do tworzenia i manipulowania podpowiedziami na obrazach, tworzenia kwadratowych części obrazów i dołączania do każdego opisu, który jest wyświetlany jako chmurka podpowiedzi. Obsługuje również użycie niestandardowej funkcji zwrotnej.

qGallery to mały program wiersza poleceń, który przetwarza obrazy jpeg i w szczególności zmienia nazwy plików w niektórych strukturach folderów, tworząc statyczną galerię HTML dla publikacji, automatycznie generuje indeksy obrazów dla podglądów, adnotacje dla każdego obrazu, a dodatkowe obrazy i HTML można dodać później.

LivePipe UI to zestaw wysokiej jakości widżetów i kontrolek dla aplikacji WEB 2.0 korzystających z Prototype javascript Framework, gdzie każda kontrolka jest dobrze przetestowana, w pełni otwarta, udokumentowana i elastycznie zastąpiona uproszczoną wersją w przeglądarkach bez włączonej obsługi javascript.

javascript Klawiatura wirtualna to system wielokrotnego użytku do dodawania interfejsu klawiatury graficznej do pól testowych, pól haseł i pól tekstowych. Zapewnia również łatwy dostęp do znaków specjalnych.

Unobtrusive Table Actions Script może rysować tabelę w paski, obsługuje przesuwanie kursora po poziomym i pionowym pasku menu oraz efekty przesuwania kursora nad poszczególnymi komórkami, może pracować z rowSpans i ColSpans, a także działa szybko w Internet Explorerze.

Glassbox to lekki interfejs użytkownika javascript, który wykorzystuje Prototype i Script.aculo.us do osiągnięcia pewnych efektów. GlassBox pozwala na łatwe budowanie jasnych, świecących ramek, schematów kolorów i efektów „pod” Flashem.

Glimmer to interaktywne narzędzie do projektowania lub aplikacja Windows, które może łatwo tworzyć animacje i interakcje oraz inne efekty. Generuje również jQuery, XHTML i CSS.

Bookmarklety służą do wykonywania przydatnych funkcji, Bookmarklet umożliwia tworzenie adresu URL z javascriptu i dodawanie go do Ulubionych. Wprowadź swój kod javascript, a Bookmarklets zrobią resztę.

Javascript Regex Generator generuje poprawne stosunkowo podstawowe wyrażenia, do których wystarczy wprowadzić dane do testowania i zaznaczyć części, które Regex powinien porównać. Wersja beta narzędzia umożliwia dodanie siedmiu grup.

Tabela główna zgodności zawiera łącza do poszczególnych tabel. Zawiera również wskazówki dotyczące zgodności tabel, które określają, czy jest w pełni obsługiwana, trudna, czy w ogóle nie jest obsługiwana.

Nie jest tajemnicą, że w naszych czasach JavaScript stał się jednym z najpopularniejszych języków programowania. W odległych latach 90., w czasach narodzin języka, kiedy został stworzony wyłącznie w celu dodania interaktywności do stron internetowych i poprawy doświadczenia użytkownika, który by pomyślał, że osiągnie tak niespotykane dotąd wyżyny. W końcu teraz możesz na nim zrobić prawie wszystko. Chcesz napisać stronę internetową: zarówno backend, jak i frontend w JavaScript? Proszę! Chcesz napisać aplikację mobilną JavaScript? bez problemu. Programowanie mikrokontrolera - i tu z pomocą przychodzi JavaScript.

Istnieją oczywiście małe wady podejścia do korzystania z JavaScriptu wszędzie, ale jeśli się nad tym zastanowić, ile czasu i wysiłku można zaoszczędzić, ucząc się tylko jednego języka, zwłaszcza jeśli ta sama aplikacja musi działać na różnych platformach. Mówisz o różnych platformach? Hmm... No właśnie - różne platformy - teraz JS stać na aplikacje desktopowe na Windows, Linux, Mac, jak pytasz? Odpowiedź jest prosta: spotkaj się - NW.js.

Node.js- platforma programowa oparta na silniku V8, która przekłada nasz skrypt na kod maszynowy. Platforma ta została stworzona w 2009 roku głównie do pracy z witrynami backendowymi.

WebKit to darmowy silnik opracowany przez Apple. Po raz pierwszy ogłoszony w ramach Safari w 2003 r.
Tak więc kod napisany w JS dla tej technologii będzie miał dostęp zarówno do modułów Node.js, jak i standardowego API przeglądarki (odpowiednio WebKit)

Szybki start

Wszystko dobrze i dobrze, ale od czego zacząć? Możesz znaleźć i pobrać repozytorium kodu źródłowego na github. Również tutaj można znaleźć bezpośrednie linki do pobrania dla platformy, na której będzie realizowany rozwój. Między innymi potrzebujemy zainstalowanego node.js.

Po pobraniu i zainstalowaniu niezbędnego oprogramowania napisałeś swoją aplikację w swoim ulubionym JS (przeczytaj, jak to zrobić poniżej) i zlokalizowałeś wszystko w jednym folderze. Zakończyła się połowa bitwy, teraz pozostaje najtrudniejsze i długoterminowe zadanie - spakować wszystko do jednego pliku i przygotować do dystrybucji. Dla uproszczenia można skorzystać z gotowych bibliotek, na przykład nw-builder. Instalacja biblioteki nie jest trudna, jeśli pracowałeś już z node.js. Jak wiesz, node.js zawiera menedżer pakietów npm z którym chcesz pracować z wiersza poleceń. Aby zainstalować dowolną bibliotekę, musisz uruchomić polecenie:

> npm install [nazwa_lib] [opcje]
Należy pamiętać, że bibliotekę można zainstalować zarówno lokalnie, jak i globalnie, do instalacji lokalnej użyj opcji --save-dev, dla globalnego -g... W ten sposób zainstalujemy globalnie nasz kolektor dla NW.js, uruchamiając polecenie:

> npm zainstaluj nw-builder -g
Aby zbudować naszą aplikację, musisz uruchomić polecenie (dużą ilość opcji znajdziesz w dokumentacji):

> nwbuild -p [nazwa_platformy] -o [ścieżka_do_folderu_wersji_kompilacji] [ścieżka_do_aplikacji]
Nazwa platformy może mieć następujące wartości: win32, win64, osx32, osx64, linux32, linux64.

Podczas programowania nie ma potrzeby każdorazowego budowania aplikacji, wystarczy uruchomić ją tak, jak jest, a otworzy się ona w osobnym oknie. Aby to zrobić, musisz uruchomić aplikację nw.exe z wiersza poleceń i podać ścieżkę do folderu z twoją aplikacją jako parametrami. Ponadto, jeśli pracujesz w systemie Windows, możesz po prostu przeciągnąć i upuścić folder z kodem źródłowym aplikacji na JS (zwróć uwagę, że jest to cały folder) do nw.exe.

Witaj świecie!

Teraz, kiedy już wiesz, jak uruchomić aplikację, jak złożyć ją w jeden plik, napiszmy coś. Tradycyjnie znajomość nowej platformy zaczyna się od napisania aplikacji Hello, world.

Do tej aplikacji nawet nie potrzebujemy JavaScript, tylko HTML... Stwórzmy folder o nazwie Witaj świecie... Umieść plik w środku index.html z następującymi znacznikami:

Dodatkowo dla każdej aplikacji pod NW.js wymagany jest plik, który należy nazwać pakiet.json... Z niego zostaną pobrane informacje do budowy aplikacji. Stwórzmy najprostszą wersję pliku i umieśćmy go w folderze Witaj świecie... Więc:

("name": "hello-world", "version": "1.0.0", "description": "Pierwsza aplikacja", "main": "index.html", "autor": "Programista", "okno ”: („pasek narzędzi” : fałsz, „szerokość ”: 500, „wysokość ”: 200))
Zawartość pliku nie wymaga wyjaśnień (pamiętaj, że wymagane pola tylko main i name). V Główny konieczne jest napisanie pliku ze znacznikiem, który będzie punktem wejścia do aplikacji. Sekcja okno konfiguruje parametry okna (w tym przypadku wyłączamy pasek narzędzi i ustawiamy rozmiar okna na 500x200).

Dodatkowo możesz skonfigurować takie pola jak (pełna lista opcji znajduje się w dokumentacji):

• Ikona- określ ścieżkę do ikony (zastąp standardową)
• pozycja- możesz określić położenie okna podczas ładowania ( zero, środek lub mysz)
• min_szerokość, min_wysokość,maksymalna_szerokość, maksymalna wysokość- ograniczenie rozmiaru okna
• skalowalny- wartość logiczna, która wskazuje, czy użytkownik może zmienić rozmiar okna
• pełny ekran- Włącz tryb pełnoekranowy
• kiosk- włącz tryb kiosku
• przezroczysty- spraw, aby okno było przezroczyste

Aplikacja została utworzona i możesz ją uruchomić. Po uruchomieniu (jak to zrobić, patrz sekcja powyżej), powinno pojawić się następujące okno:

Aplikacja jest napisana, ale jest tylko jeden element div i nie ma w ogóle logiki, ale co jeśli mamy bogaty znacznik i złożoną logikę? Z pomocą przychodzi element pliku konfiguracyjnego. pasek narzędzi które ustawiliśmy na fałsz. Aby udostępnić narzędzia do debugowania, musisz ustaw pasek narzędzi na true... Po wykonaniu tej czynności podczas uruchamiania aplikacji otrzymamy następujące okno:

Po kliknięciu przycisku w prawym górnym rogu otworzy się kolejne okno, w którym zostaną wyświetlone znane narzędzia programistyczne:

Praca z natywnymi kontrolkami

NW.js umożliwia pracę z natywnymi kontrolkami. Rozważmy pracę na przykładzie menu... Aby pracować z natywnymi kontrolkami UI w nw.js, musisz użyć modułu nw.gui które można podłączyć w ten sposób:

Var gui = wymagaj ("nw.gui");
Ogólny szablon korzystania z kontrolek:

Element Var = new gui.ElementName (opcja);
Dlatego do tworzenia elementów menu możesz użyć następującej konstrukcji:

Menu Var = nowe gui.Menu ();
Ponadto dowolne właściwości tworzonego przez nas obiektu można łatwo zmienić za pomocą standardowych konstrukcji JS, na przykład:

Menu.title = "(! LANG: Nowy tytuł"; !}
Menu jest stworzone, teraz musimy je wypełnić, są metody na manipulowanie elementami potomnymi:

Menu.append (nowy gui.MenuItem ((etykieta: "Etykieta elementu menu"))); menu.removeAt (0);
Dodatkowo dla bardziej elastycznego dodawania elementów do menu możesz skorzystać z metody wstawić, w parametrach których musisz przejść Pozycja w menu i numer pozycji, gdzie go wstawić ( pozycja przed pierwszym elementem to 0).

Aby uzyskać dostęp do utworzonych elementów, możesz użyć właściwości rzeczy:

Menu.items.title = "(! LANG: Nowy tytuł" !}
Pamiętaj, że nie możesz tworzyć elementów bezpośrednio:

Menu.items = nowy gui.MenuItem (); // NIE POPRAWNIE
Najważniejszą rzeczą podczas pracy z natywnymi kontrolkami jest to, aby o tym pamiętać każdy błąd podczas pracy z nimi może doprowadzić do awarii całej aplikacji, dlatego musisz być bardzo ostrożny i, jeśli to możliwe, usuwając elementy, również przypisać wartość null do zmiennej. Zatem usunąć kontrolę, możesz wykonać następujące czynności:

Control.usuń (); kontrola = zero;
Dla wygodniejszej pracy z kontrolkami są one dziedziczone z EventEmitter, więc dobrą wiadomością jest to, że możemy łatwo pracować ze zdarzeniami, na przykład:

Menuitem.on ("klik", funkcja () (// zrób coś przydatnego));
Menu zostało utworzone, ale jeśli uruchomisz aplikację, nie zobaczysz żadnego menu. Aby wyświetlić menu, istnieje metoda wyskakująca, w której parametrach należy podać współrzędne wyświetlania menu.

Aby zademonstrować główne funkcje menu, dodaj poniższy skrypt do utworzonego wcześniej projektu Witaj świecie:

Var gui = wymagaj ("nw.gui"); var menu1 = nowy gui.Menu (); menu1.append (nowy gui.MenuItem ((etykieta: "Pozycja 1"))); var subMenu1 = nowe gui.Menu (); subMenu1.append (nowy gui.MenuItem ((etykieta: "Pozycja 2")))); menu1.append (nowy gui.MenuItem ((etykieta: "Submenu", podmenu: subMenu1))); document.body.addEventListener ("menu kontekstowe", funkcja (ev) (ev.preventDefault (); menu1.popup (ev.x, ev.y); return false;));
Po uruchomieniu aplikacji widzimy stworzone menu kontekstowe dla ciała. W ten sposób możemy zdefiniować menu kontekstowe dla dowolnego elementu.

Dodaj tagi