Podstawy JavaScriptu. Część 2 Kurs JavaScript od początkującego do zaawansowanego

To druga część serii wpisów na blogu JavaScript, która zabierze Cię od początkującego do zaawansowanego. Pod koniec tej serii poznasz wszystkie podstawy potrzebne do rozpoczęcia kodowania w JavaScript. Bez dalszych ceregieli zacznijmy od drugiego samouczka.

Podstawy JavaScript – spis treści:

1. Podstawy JavaScript
2. Wykonanie linia po linii
3. Dwa sposoby na zakończenie instrukcji
4. Uwagi

W tym poście na blogu będziemy kontynuować od tego, gdzie wyszliśmy z pierwszego wpisu na blogu. Na tym etapie powinieneś mieć otwartą przeglądarkę Google Chrome, a dokładniej mieć otwartą konsolę JavaScript. Jeśli z jakiegoś powodu je zamknąłeś, byłby to dobry moment, aby je ponownie otworzyć. Zacznijmy uczyć się podstaw JavaScript

Jeśli korzystasz z komputera Mac, skrót klawiaturowy do otwierania konsoli polega na naciśnięciu „opcja + polecenie + J” po otwarciu Chrome. Jeśli używasz urządzenia z systemem Windows, możesz użyć skrótu klawiaturowego „Control + Shift + J”, aby otworzyć konsolę JavaScript po otwarciu Chrome. Możesz też przejść do menu u góry i przejść do Widok -> Programista -> Konsola JavaScript.

Podstawy JavaScript

JavaScript, podobnie jak wszystkie inne języki programowania, jest językiem używanym do komunikacji z komputerami. Podobnie jak język naturalny ma gramatykę i znane słowa, które tworzą poprawne zdania, tak języki programowania mają również pewne zasady, których należy przestrzegać, aby skutecznie komunikować się z komputerem.

Na przykład niektóre słowa oznaczają pewne rzeczy dla silnika JavaScript, który uruchamia nasz kod, takie jak słowo kluczowe „alert”, którego użyliśmy w poprzednim samouczku, miało na celu wyświetlenie alertu użytkownikowi z określonymi słowami, które umieścił w nawiasach zaraz po . W naszym przypadku napisaliśmy „Hello, World!” więc otrzymaliśmy alert, który mówił „Hello, World!”.

Istnieją również inne zastrzeżone słowa kluczowe w JavaScript, o których powinniśmy wiedzieć, aby móc skutecznie komunikować się z komputerem za pomocą odpowiednich słów i gramatyki. Podobnie jak gramatyka, którą mamy w języku naturalnym, istnieje również gramatyka w językach programowania. Ta gramatyka jest powszechnie nazywana „składnią” w językach programowania, a JavaScript nie jest tu wyjątkiem. Dlatego dobrym pomysłem jest zrozumienie głównych słów kluczowych i gramatyki, którą mamy w JavaScript, gdy zaczynamy uczyć się podstaw JavaScript. Zobaczmy kilka głównych rzeczy, które powinniśmy wiedzieć o JavaScript.

Wykonanie linia po linii

Jeśli chodzi o podstawy JavaScript, jedną z pierwszych rzeczy, które powinieneś wiedzieć, jest to, że kod, który napiszesz, będzie wykonywany linia po linii, od góry do dołu. Ten styl wykonywania kodu jest również określany jako JavaScript jako „interpretowany język programowania”.

Wręcz przeciwnie, niektóre języki programowania to „skompilowane języki programowania”. Niektóre przykłady języków kompilowanych to: C, C++, C#, Swift, Java i tak dalej. Główna różnica polega na tym, że w przypadku skompilowanych języków programowania cały kod, który napiszesz, zostanie „skompilowany” i zostanie wykonany w jednym kawałku przez komputer. Dlatego też może być trudniej rozpocząć naukę skompilowanego języka programowania, ponieważ może być trudniej zauważyć, gdzie popełniłeś błąd w swoim programie.

Niektóre przykłady interpretowanych języków programowania to JavaScript, Python, Bash i Matlab. Dzięki interpretowanym językom programowania masz nieodłączną korzyść polegającą na zobaczeniu, w którym wierszu popełniłeś błąd, na przykład zapomnienie średnika lub niepasowanie nawiasów w kodzie. Posiadanie tej cechy może nie sprawić większych różnic w niektórych aplikacjach, ale kiedy próbujemy załadować stronę internetową z wolnym połączeniem internetowym, wolisz, aby każda linia JavaScript była wykonywana tak szybko, jak to możliwe.

Dwa sposoby na zakończenie instrukcji

Program komputerowy na koniec dnia to zbiór instrukcji dla komputera. Ale gdzie kończy się jeden program, gdzie zaczyna się następna instrukcja? Istnieją różne podejścia do tego problemu. JavaScript używa dwóch głównych rzeczy, średnika i nawiasów.

W zależności od rodzaju instrukcji, jaką napiszemy, zazwyczaj używamy jednej do zakończenia lub pakowania zestawu instrukcji. Użyjemy różnych typów nawiasów dla różnych funkcjonalności i typów danych. Na przykład w alercie („Witaj, świecie”); kod, który wcześniej wykonaliśmy, nawiasy otaczające napis hello world mówią komputerowi, co powinien powiedzieć alert, a średnik na końcu instrukcji mówi komputerowi, że ta instrukcja kończy się tutaj, możesz przejść do następnej instrukcji. Jest to bardzo podobne do tego, jak używamy kropki „.” kończyć zdania w języku angielskim.

Uwagi

Dodawanie komentarzy do kodu jest istotną częścią programowania. Może być łatwo zrozumieć, jaki kod piszesz, kiedy go piszesz, ale w zależności od złożoności kodu możesz mieć bardzo niewielkie pojęcie po sześciu miesiącach, kiedy wrócisz do kodu.

Dodawanie komentarzy nie tylko ułatwia zrozumienie kodu na przyszłość, ale także ułatwia zrozumienie kodu każdemu, z kim pracujesz. Może również pomóc w lepszym zrozumieniu problemu, z którym pracujesz, ponieważ zwykle znacznie łatwiej jest rozwiązywać problemy, dzieląc je na mniejsze kawałki wielkości zgryzu. Skomentowane części kodu zostaną zignorowane przez interpreter i nie zostaną wykonane.

Istnieją dwa sposoby dodawania komentarzy w JavaScipt. Pierwszym z nich jest dodanie prostego komentarza „pojedynczej linii” z dwoma ukośnikami w następujący sposób:

// this is a comment

W ten sposób wszystko, co napiszesz po dwóch ukośnikach, zostanie zignorowane w określonej linii, w której umieściłeś ukośniki. Możesz powtórzyć to tyle razy, aby wiele wierszy zostało pokrytych takimi komentarzami:

// this is a comment.
// this is another comment.
// you can keep commenting like this.

Innym powodem, dla którego używamy komentarzy, jest zakomentowanie fragmentu kodu, aby poeksperymentować z kodem. Na przykład możesz napisać tę samą funkcjonalność na wiele sposobów i możesz chcieć skomentować jedną wersję tego samego kodu, aby porównać ich indywidualną wydajność lub wyniki. Zobaczmy to również na przykładzie.

Śmiało, skopiuj i wklej następujący kod do konsoli JavaScript otwartej w Chrome.

// greet user
alert("Hello, User!");
alert("Hi, User!");

Jeśli chcesz poćwiczyć samodzielne pisanie całego kodu, możesz to również zrobić. Jedną rzeczą, którą powinieneś wiedzieć o pisaniu wielu linii kodu w konsoli, jest to, że aby przejść do następnej linii bez jej wykonywania, możesz nacisnąć „shift + enter”, aby to zrobić. W przeciwnym razie po napisaniu pojedynczej linii kodu, jeśli naciśniesz po prostu enter, uruchomi ten wiersz kodu. W tym przykładzie nie jest to duży problem i dobrze jest wykonać go również linia po linii, ponieważ mamy prosty przykład, który może również działać w tym stylu.

Po skopiowaniu i wklejeniu lub napisaniu kodu samodzielnie, naciśnij „enter”, aby uruchomić kod. Wynik powinien dać dwa oddzielne alerty. Aby odrzucić alerty, możesz kliknąć „OK”, w tym przypadku nic nie zrobią, ponieważ jest to prosty alert i nie uruchamia niczego po wyświetleniu komunikatu, który chcemy wyświetlić.

Kiedy wykonaliśmy taki kod, dwukrotnie wykonujemy tę samą funkcjonalność. Ale co zrobić, jeśli chcesz widzieć tylko jedną implementację na raz? Cóż, wiesz dokładnie, co zrobić w tym przypadku, ponieważ już o tym rozmawialiśmy. Śmiało i skomentuj jeden z wierszy po wklejeniu lub napisaniu kodu, aby tylko druga implementacja „Hi, User!” zostanie wykonany.

Po ukończeniu wyzwania lub jeśli utkniesz podczas wyzwania, możesz zobaczyć kod rozwiązania wyzwania poniżej. Zanim przyjrzymy się rozwiązaniu, zawsze gorąco polecam wypróbowanie go samemu, ponieważ najlepiej nauczysz się, gdy naprawdę je przećwiczysz. Jeśli pomyślnie ukończyłeś wyzwanie, powinieneś patrzeć na taki ekran:

Zauważ, że kiedy zakomentujesz wiersz kodu, zmieni się on na ten sam kolor, co poprzednio skomentowany wiersz. Ta różnica kolorów nie ma żadnego znaczenia dla komputera, ale jest to raczej pomocna funkcja dla nas, gdy piszemy kod. W ten sposób jest znacznie łatwiej, jeśli omyłkowo zakomentujesz wiersz kodu, ponieważ kolory sprawią, że będzie to oczywiste.

Innym sposobem komentowania kodu jest użycie ukośnika i znaku gwiazdki. W ten sposób możemy tworzyć komentarze jedno- lub wielowierszowe w naszym kodzie.

/* a single line comment */
/* the commenting starts when we put a forward slash and an asterisk
and the commented areas ends
when we close of the comment with an asterisk and the forward slash
like this */

Teraz znasz podstawy JavaScript. W następnym samouczku zobaczymy niezwykle powszechną koncepcję programowania zwaną „zmiennymi” wraz z podstawowymi typami danych w JavaScript.

Autor: Robert Whitney

Ekspert i instruktor JavaScript, który szkoli działy IT. Jego głównym celem jest podnoszenie produktywności zespołu poprzez uczenie innych efektywnej współpracy podczas kodowania.

Zobacz wszystkie posty

Kurs JavaScript od początkującego do zaawansowanego w 10 postach na blogu:

1. Jak zacząć kodować w JavaScript?
2. Podstawy JavaScript
3. Zmienne i różne typy danych w JavaScript
4. Fragmenty i struktury kontrolne
5. Pętle while i pętle for
6. Tablica Javy
7. Funkcje JavaScript
8. Obiekty JavaScript
9. Metody JavaScript i nie tylko
10. Podsumowanie kursu JavaScript