Co to jest JavaScript? - Przewodnik dla początkujących

Dla programistów stron internetowych HTML i CSS były tam, aby wyświetlać treści na stronie i sprawić, że wyglądają estetycznie. Ale nie byli w stanie poradzić sobie z interaktywnością stron internetowych. W tym celu wymagany był inny język, specjalnie do obsługi aspektu programowania Twojej witryny. Aby poradzić sobie z dynamicznym i interaktywnym zachowaniem Twojej witryny.

Stąd przyszedł JavaScript. To jeden z najpopularniejszych Języki scenariusze Ta praca nad Strona klienta Aby obsłużyć interaktywność Twojej strony internetowej. Ponadto może zwiększyć dynamiczne zachowanie witryny poprzez manipulowanie treści otrzymywanej z serwera WWW. Istnieje wiele rzeczy, które może zrobić JavaScript, dowiemy się tego w tym artykule, a także to, jak to działa i kilka podstawowych pojęć.

Różne funkcje, które możesz wykonać z JavaScript:

• Zmodyfikuj zawartość strony internetowej, dodając i usuwając elementy.
• Monitoruj różne kliknięcia myszy, zdarzenia zawisające i obsługuj ich działania.
• Kontroluj różne animacje i przejścia.
• Obsługa zdarzeń, gdy użytkownik wprowadza pewne dane wejściowe.
• Sprawdzaj wejście, które użytkownik zapewnia przed przesłaniem do serwera.

I wiele innych, możesz kontrolować, jak zachowuje się Twoja strona.

Po co uczyć się JavaScript?

JavaScript był uważany za narzędzie tylko dla interaktywnych stron internetowych. Ale te dni minęły, a teraz możesz budować pełne aplikacje mobilne i internetowe, a także aplikacje sieciowe za pomocą różnych ram dostarczanych przez JavaScript.

Możesz także zaprojektować gry przeglądarki z JavaScript. Zakłada się na inne języki, a słynne firmy budują swoje aplikacje wokół JavaScript. Teraz znasz znaczenie nauki JavaScript, więc zobaczmy, jak to działa.

Edytor kodu JavaScript

W przypadku kodu JavaScript możesz użyć konsoli przeglądarki, a nawet redaktorów JS online. Ale najlepiej używać edytorów kodu. Istnieją różne edytorów kodów, takich jak kod Visual Studio, Sublime Text, Atom i więcej. Spośród nich kod Visual Studio jest wysoce zalecany, ponieważ jest najczęściej używanym edytorem kodu, a uzasadnieniem jest jego stałe obsługę nadchodzących technologii i łatwy w użyciu interfejs użytkownika.

Jak dodać JavaScript do pliku?

Istnieją dwa sposoby dodawania JavaScript do pliku HTML:

Skrypt wewnętrzny (Konfigurowanie JavaScript w pliku HTML za pomocą znacznika)

Skrypt zewnętrzny (Tworzenie oddzielnego pliku dla kodu JS i dodanie linku do znacznika

Consol.dziennik, powiadomienia i dokument.Napisz w JavaScript

Przydatne polecenie debugowania i rejestrowania kodu jest konsola.dziennik. Przydatne jest pośrednio pisanie treści w konsoli internetowej.

konsola.Log („Hello World”);

Alerty są używane do dostarczania powiadomień użytkownika końcowego, który uzyskuje dostęp do strony internetowej.

Alert („Hello World”);

Dokument.pisać Modyfikuje treść na stronie internetowej, dodając dodatkową zawartość do strony internetowej.

dokument.Napisz („Witamy na stronie internetowej!");

W JavaScript konsola ma kilka metod. Więcej informacji w szczególności jest tutaj.

Jak dodać komentarze w JavaScript

Podczas programowania pisanie komentarzy jest niezwykle przydatne. Pomaga pamiętać o tym, co zakodowałeś, a jeśli istnieje jakieś dodatkowe informacje, musisz napisać dla drugiej osoby, która sprawdza Twój kod. Obydwa pojedynczy I wiele Komentarze linii można napisać. Aby użyć komentarza jednoliniowego w kodzie (JavaScript) używamy //:

// to całe zdanie to jeden duży komentarz jednoliniowy.

Podczas gdy w przypadku wielu linii używaj / * w żebraniu i zamykaj go za pomocą * /:

/* To jest komentarz wieloletni. Możesz nawet swój blog tutaj, jeśli chcesz. */

Zmienne w JavaScript

Podobnie jak w każdym innym języku programowania, zmienne są również używane w JavaScript. Zadaniem zmiennej jest przechowywanie typu danych w nazwanym odniesieniu. W JavaScript możemy ustawić zmienne przy użyciu trzech sposobów: var, pozwalać, const.

var jest używany od początku JavaScript i jest on globalnie zaskoczony, co oznacza, że ​​wszystkie funkcje na tej stronie lub w tym programie mogą uzyskać do niego dostęp.

var x = 15;
var y = 4;
konsola.log (x + y);

Wyjście:

Ponieważ jest na całym świecie, lepiej go użyć pozwalać I const. Powodem jest to, że czasami chcesz zadeklarować zmienną w instrukcji IF, a na zewnątrz, jeśli oświadczenie chcesz zadeklarować zmienną o tej samej nazwie. Korzystanie z VAR spowoduje problemy. Aby dowiedzieć się więcej o zmiennych globalnych w JavaScript, możesz sprawdzić ten artykuł.

Pozostałe dwa rodzaje zmiennych dostępnych w JavaScript to pozwalać I const. Korzystając z LET, możemy zadeklarować dowolny typ danych, podczas gdy w przypadku stał.

Niech Msg = „Hello World”;
konsola.log (MSG);
MSG = 10;
konsola.log (MSG);

Wyjście:

Tutaj zadeklarowaliśmy ciąg, a także typ danych liczbowych za pomocą zmiennej Let. Teraz, używając const, jeśli spróbujemy zadeklarować jakąkolwiek wartość inną niż stała, da nam to błąd.

// poniżej spowoduje błąd.
const pi = 3.142;
konsola.log (PI);
PI = 3.15;
konsola.log (PI);

Typy danych w JavaScript

JavaScript zapewnia nam różne typy danych, takie jak Liczby, Smyczki, Boolean, Platforma, Obiekty, i więcej. Jeśli chcesz odczytać o typach danych w JavaScript, możesz przejść do oficjalnych dokumentów MDN. Mówi programowi, z jakim rodzajem danych pracują i manipulują.

Numer: Typ danych reprezentujący dodatnią, ujemną liczbę całkowitą lub zmiennoprzecinkową jest liczba.

Niech num = 11;
konsola.log (num);
konsola.log (typeof num);
num = -12;
konsola.log (num);
konsola.log (typeof num);

Wyjście:

Strunowy: Aby przechowywać sekwencję znaków, używany jest typ danych string.

Niech x = „Witaj”
konsola.log (x);
konsola.log (typeof x);

Wyjście:

Boolean: Typ danych reprezentujących wartości prawdziwych i fałszywych w programie.

Niech x = prawda
konsola.log (x);
konsola.log (typeof x);

Wyjście:

Obiekty: Aby przechowywać gromadzenie różnych typów danych w jednej zmiennej, używane są obiekty.

Niech film =
Nazwa: „Incepcja”,
gatunek: „thriller”,
Yearofrelease: „2010”,
NumberOfCopies: 10
;
konsola.log (film);
konsola.dziennik (rodzaj filmu);

Wyjście:

Tablice w JavaScript

Aby przechowywać gromadzenie danych dowolnego typu, możemy korzystać z tablic. Po prostu zainicjuj tablicę za pomocą konstruktora tablicy:

Niech miesiące = nowa tablica ();

Lub z [] [] inicjalizacja:

Niech miesiące = [];

Lub po prostu utwórz tablicę z wyraźnymi danymi:

Niech miesiące = [„styczeń”, „luty”, „marzec”, „kwiecień”, „maj”];

Indeks w tablicy zaczyna się od zera i aby uzyskać dostęp do dowolnego elementu, musisz po prostu napisać tablicę [pozycja indeksu]:

Niech miesiące = [„styczeń”, „luty”, „marzec”, „kwiecień”, „maj”];
konsola.log (miesiące [3]);

Wyjście:

Aby lepiej zrozumieć koncepcję tablicy w JavaScript, sprawdź ten artykuł.

Metody różnych typów danych w JavaScript

Występują różne metody manipulowania wartościami różnych typów danych.

Metody string: Aby zmodyfikować wartości łańcucha, dostępnych jest dla nas wiele różnych metod. Można je użyć do sprawdzenia długości ciągu, znajdź pozycję określonego słowa w ciągu lub przekonwertować na różne typy danych.

Niech x = "Witaj, witamy dom"
// Aby sprawdzić długość ciągów
konsola.Log (x.długość);
//, aby wyciąć określoną część ciągu
konsola.Log (x.pokrój (3, 7));
// Aby wymienić określone słowo w ciągu
konsola.Log (x.zamień („Strona główna”, „tutaj”));
// Aby przekonwertować ciąg na małe litery
konsola.Log (x.TOLOWERCAS ());

Wyjście:

Oczywiście istnieje kilka innych metod, jeśli chcesz dowiedzieć się więcej, sprawdź również ten artykuł.

Metody liczbowe: Podobnie do manipulowania wartością typu danych liczbowych, istnieją różne metody. Niektóre z nich podano poniżej:

Niech x = 4445.4
// Aby przekonwertować liczby na ciąg
konsola.Log (x.ToString);
// Aby przekonwertować liczbę na swoją konsolę formularza wykładniczego.Log (x.toexponential ());
// Zwraca liczbę o określonej długości
konsola.Log (x.Toprecision (2));

Wyjście:

JavaScript zapewnia nam metody obiektów, boolean, tablic i innych.

Warunki w JavaScript

Inną podstawową częścią programowania jest podejmowanie decyzji i spowodowanie niektórych działań na podstawie tych decyzji. Można to zrobić za pomocą instrukcji warunkowych w JavaScript. Możesz użyć:

Jeśli inaczej:

Niech równowaga = 1200;
if (równowaga < 1000)

konsola.log („równowaga mniejsza niż 1000”);

w przeciwnym razie

konsola.log („równowaga więcej niż 1000”);

Wyjście:

Jeśli… inaczej, jeśli… inaczej:

Niech równowaga = 1200;
if (równowaga <1000)
konsola.log („równowaga mniejsza niż 1000”);
w przeciwnym razie if (saldo> 1000 && bilans <1500)
konsola.log („Bilans między 1000-1500”);
else konsola.log („równowaga więcej niż 1500”);

Wyjście:

Przełącznik:

Niech alphabet = „B”;
przełącznik (alfabet)

sprawa „A”:
konsola.log („jajko”);
przerwa;
sprawa „B”:
konsola.log („Mango”);
przerwa;
domyślny:
konsola.Dziennik ("herbata!");

Wyjście:

Aby lepiej zrozumieć ten temat, możesz szczegółowo sprawdzić te artykuły z ELSE i przełączać.

Pętle w JavaScript

Dopóki nie zostanie spełnione określony warunek. Pętle powtarzają kawałek kodu (może być jedno-, a nawet wieloletnim) JavaScript, podczas gdy, podczas gdy-i dla każdej pętli. Oto jak działają wraz z przykładami:

Dla pętli

Kilka razy zapętla się przez dany kod.

dla (niech i = 0; i < 10; i++)

konsola.log (i + "");

Wyjście:

Możesz zrozumieć koncepcję i pracę w tym artykule.

Podczas pętli

Pętle za pośrednictwem określonego danego kodu, dopóki nie zostaną spełnione podane warunki.

Niech i = 0;
podczas gdy ja <4 )

konsola.log (i + "");
i ++;

Wyjście:

Robić w pobycie

Podobnie do pętli While, istnieje pętla do zrobienia. Różni się tym aspektem, że przynajmniej pętla zostanie wykonana raz. Powodem jest to, że warunki są sprawdzane na końcu pętli.

Niech i = 0;
Do

konsola.log (i + "");
i ++;
podczas gdy ja < 3);
Wyjście:

Wyjście:

Dla każdej pętli

Aby iterować przy kolekcji takiej jak tablice, dla każdej pętli jest używana.

niech liter = [„M”, „A”, „N”, „G”, „O”];
list.dla każdego(
funkcja (wpis)

konsola.log (wpis + "");

);

Wyjście:

To tylko po to, aby dać ci podstawowe zrozumienie. Jeśli chcesz zrozumieć ten szczegółowy, sprawdź ten artykuł lub zrozumieć pętlę dla in-in, możesz również sprawdzić ten artykuł.

Funkcje w JavaScript

Funkcje to bloki kodu, które są przypisane do wykonania jakiegoś zadania. Na przykład chcesz wyświetlić wiadomość po kliknięciu przycisku. Tak się stanie dzięki zastosowaniu funkcji. Aby szczegółowo zrozumieć koncepcję, możesz sprawdzić ten artykuł.

Oto pokaz, jak to działa:

Dodatek funkcji (I, J = 5)

return i + j;

Pozwól wynik = dodanie (3,5);
konsola.log („Dodaj (3,5) to” + wynik);

Wyjście:

W powyższym przykładzie dwie liczby zostały przekazane do funkcji dodawania () i były przechowywane w wyniku zmiennego.

JavaScript zapewnia nam różne typy danych, funkcje, metody i bardziej dogłębne. Są one niezwykle przydatne i ułatwiają zrozumienie programu. Istnieje wiele sposobów nauki JavaScript, za pośrednictwem książek, a także zasobów online.

Wniosek:

W dzisiejszym przewodniku nauczyliśmy się podstaw JavaScript. JavaScript stał się niczym niezbędnym dla interaktywnych i atrakcyjnych stron internetowych. W dzisiejszych czasach JavaScript zapewnia nam różne ramy, które nawet pomagają nam w tworzeniu aplikacji internetowych i mobilnych. Deweloperzy tworzą również gry przeglądarkowe za pomocą JavaScript.

Wraz ze wzrostem popytu na JavaScript zasoby do nauki języka również rosną. Możesz się tego nauczyć poprzez samouczki online, kursy, a nawet za pośrednictwem książek. Ale bez względu na to, jakie jest twoje medium nauki, jedyną rzeczą, która czyni cię ekspertem, jest ćwiczenie.