JavaScriptPierwsze kroki w JavaScript


Uwagi

JavaScript (nie mylić z Javą ) jest dynamicznym, słabo typowanym językiem używanym zarówno po stronie klienta, jak i po stronie serwera.

JavaScript to język, w którym rozróżniana jest wielkość liter. Oznacza to, że język uważa, że wielkie litery różnią się od ich małych liter. Słowa kluczowe w JavaScript są pisane małymi literami.

JavaScript jest powszechnie przywoływaną implementacją standardu ECMAScript.

Tematy w tym tagu często odnoszą się do użycia JavaScript w przeglądarce, chyba że zaznaczono inaczej. Same pliki JavaScript nie mogą być uruchamiane bezpośrednio przez przeglądarkę; konieczne jest osadzenie ich w dokumencie HTML. Jeśli masz kod JavaScript, który chcesz wypróbować, możesz osadzić go w niektórych symbolach zastępczych takich jak ten i zapisać wynik jako example.html :

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test page</title>
  </head>
  <body>
    Inline script (option 1):
    <script>
      // YOUR CODE HERE
    </script>
    External script (option 2):
    <script src="your-code-file.js"></script>
  </body>
</html>

Wersje

Wersja Data wydania
1 01.06.1997
2) 1998-06-01
3) 01.12.1998
E4X 2004-06-01
5 01.12.2009
5.1 01.06.2011
6 01.06.2015
7 14.06.2016
8 27.06.2017

Korzystanie z console.log ()

Wprowadzenie

Wszystkie nowoczesne przeglądarki internetowe, NodeJ, a także prawie wszystkie inne środowiska JavaScript obsługują pisanie wiadomości na konsoli przy użyciu zestawu metod rejestrowania. Najczęstszą z tych metod jest console.log() .

W środowisku przeglądarki funkcja console.log() jest używana głównie do celów debugowania.


Pierwsze kroki

Otwórz konsolę JavaScript w przeglądarce, wpisz następujące polecenie i naciśnij klawisz Enter :

console.log("Hello, World!"); 

Spowoduje to zalogowanie do konsoli:

Dane wyjściowe dziennika konsoli w przeglądarce Google Chrome

W powyższym przykładzie funkcja console.log() wypisuje Hello, World! do konsoli i zwraca undefined (pokazane powyżej w oknie wyjściowym konsoli). Wynika to z faktu, że console.log() nie ma wyraźnej wartości zwracanej .


Rejestrowanie zmiennych

console.log() może być używany do rejestrowania zmiennych dowolnego rodzaju; nie tylko struny. Po prostu podaj zmienną, która ma być wyświetlana w konsoli, na przykład:

var foo = "bar";
console.log(foo);
 

Spowoduje to zalogowanie do konsoli:

konsoli.log () można używać ze zmiennymi

Jeśli chcesz zarejestrować dwie lub więcej wartości, po prostu oddziel je przecinkami. Spacje będą automatycznie dodawane między każdym argumentem podczas konkatenacji:

var thisVar = 'first value';
var thatVar = 'second value';
console.log("thisVar:", thisVar, "and thatVar:", thatVar); 
Spowoduje to zalogowanie do konsoli:

Konsola Concat


Symbole zastępcze

Możesz użyć console.log() w połączeniu z symbolami zastępczymi:

var greet = "Hello", who = "World";
console.log("%s, %s!", greet, who);
 

Spowoduje to zalogowanie do konsoli:

wprowadź opis zdjęcia tutaj


Rejestrowanie obiektów

Poniżej widzimy wynik logowania obiektu. Jest to często przydatne do rejestrowania odpowiedzi JSON z wywołań API.

console.log({
    'Email': '', 
    'Groups': {},
    'Id': 33,
    'IsHiddenInUI': false,
    'IsSiteAdmin': false,
    'LoginName': 'i:0#.w|virtualdomain\\user2',
    'PrincipalType': 1,
    'Title': 'user2'
}); 

Spowoduje to zalogowanie do konsoli:

Zarejestrowany obiekt w konsoli


Rejestrowanie elementów HTML

Masz możliwość zarejestrowania dowolnego elementu, który istnieje w DOM . W tym przypadku logujemy element body:

console.log(document.body);
 

Spowoduje to zalogowanie do konsoli:

wprowadź opis zdjęcia tutaj


Uwaga końcowa

Aby uzyskać więcej informacji na temat możliwości konsoli, zobacz temat konsoli .

Korzystanie z interfejsu API DOM

DOM oznacza D otument O bject M odel. Jest to obiektowa reprezentacja uporządkowanych dokumentów, takich jak XML i HTML .

Ustawienie właściwości textContent Element jest jednym ze sposobów wyświetlania tekstu na stronie internetowej.

Rozważmy na przykład następujący tag HTML:

<p id="paragraph"></p>
 

Aby zmienić jego właściwość textContent , możemy uruchomić następujący JavaScript:

document.getElementById("paragraph").textContent = "Hello, World";
 

Spowoduje to wybranie elementu z paragraph id i ustawienie jego zawartości tekstowej na „Hello, World”:

<p id="paragraph">Hello, World</p>
 

(Zobacz także to demo)


Możesz także użyć JavaScript, aby programowo utworzyć nowy element HTML. Rozważmy na przykład dokument HTML o następującym treści:

<body>
   <h1>Adding an element</h1>
</body> 
 

W naszym JavaScript tworzymy nowy tag <p> z właściwością textContent i dodajemy go na końcu treści HTML:

var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM
 

Spowoduje to zmianę treści HTML na następujące:

<body>
   <h1>Adding an element</h1>
   <p>Hello, World</p>
</body>
 

Zauważ, że aby manipulować elementami w DOM przy użyciu JavaScript, kod JavaScript musi zostać uruchomiony po utworzeniu odpowiedniego elementu w dokumencie. Można to osiągnąć, umieszczając tagi JavaScript <script> po całej zawartości <body> . Alternatywnie możesz także użyć detektora zdarzeń, aby nasłuchiwać np. window zdarzeniu onload window , dodanie kodu do tego detektora zdarzeń opóźni uruchomienie kodu, aż do momentu załadowania całej zawartości strony.

Trzecim sposobem na upewnienie się, że cały DOM został załadowany, jest zawinięcie kodu manipulacji DOM funkcją limitu czasu wynoszącą 0 ms . W ten sposób ten kod JavaScript jest ponownie umieszczany w kolejce na końcu kolejki wykonawczej, co daje przeglądarce szansę na wykonanie pewnych czynności, które nie czekają na JavaScript przed ukończeniem tego nowego fragmentu JavaScript.

Korzystanie z interfejsu API DOM (z tekstem graficznym: Canvas, SVG lub plik obrazu)

Korzystanie z elementów na płótnie

HTML zapewnia element canvas do tworzenia obrazów rastrowych.

Najpierw zbuduj obszar roboczy do przechowywania informacji o pikselach obrazu.

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
 

Następnie wybierz kontekst płótna, w tym przypadku dwuwymiarowy:

var ctx = canvas.getContext('2d');
 

Następnie ustaw właściwości związane z tekstem:

ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);
 

Następnie wstaw element canvas na stronę, aby zastosować:

document.body.appendChild(canvas);
 

Korzystanie z SVG

SVG służy do budowania skalowalnej grafiki wektorowej i może być używany w HTML.

Najpierw utwórz kontener elementu SVG o wymiarach:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.width = 500;
svg.height = 50;
 

Następnie zbuduj element text o pożądanym położeniu i charakterystyce czcionki:

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '0');
text.setAttribute('y', '50');
text.style.fontFamily = 'Times New Roman';
text.style.fontSize = '50';
 

Następnie dodaj rzeczywisty tekst do wyświetlenia do elementu text :

text.textContent = 'Hello world!';
 

Na koniec dodaj element text do naszego kontenera svg i dodaj element kontenera svg do dokumentu HTML:

svg.appendChild(text);
document.body.appendChild(svg);
 

Plik graficzny

Jeśli masz już plik obrazu zawierający żądany tekst i umieścisz go na serwerze, możesz dodać adres URL obrazu, a następnie dodać obraz do dokumentu w następujący sposób:

var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
document.body.appendChild(img);
 

Korzystanie z window.alert ()

Metoda alert wyświetla na ekranie wizualne pole alertu. Parametr metody alertu jest wyświetlany użytkownikowi zwykłym tekstem:

window.alert(message);
 

Ponieważ window jest obiektem globalnym, możesz wywoływać również za pomocą następującego skrótu:

alert(message);
 

Więc co robi window.alert() ? Cóż, weźmy następujący przykład:

alert('hello, world');
 

W Chrome spowodowałoby to wyświetlenie wyskakującego okienka: alarm

Notatki

Metoda alert jest technicznie właściwością obiektu window , ale ponieważ wszystkie właściwości window są automatycznie zmiennymi globalnymi, możemy użyć alert jako zmiennej globalnej zamiast jako właściwości window - co oznacza, że możesz bezpośrednio użyć alert() zamiast window.alert() .

W odróżnieniu od korzystania z console.log alert działa jak monit modalny, co oznacza, że alert wywołania kodu zostanie wstrzymany do momentu odpowiedzi na monit. Tradycyjnie oznacza to, że żaden inny kod JavaScript nie zostanie wykonany, dopóki alert nie zostanie odrzucony:

alert('Pause!');
console.log('Alert was dismissed');
 

Jednak specyfikacja pozwala na kontynuowanie wykonywania kodu uruchamianego przez zdarzenie, nawet jeśli modalne okno dialogowe jest nadal wyświetlane. W takich implementacjach możliwe jest uruchomienie innego kodu podczas wyświetlania modalnego okna dialogowego.

Więcej informacji na temat korzystania z metody alert można znaleźć w temacie monitów modalnych .

Alerty są zwykle odradzane na korzyść innych metod, które nie blokują użytkownikom interakcji ze stroną - w celu zapewnienia lepszej wygody użytkownika. Niemniej jednak może być przydatny do debugowania.

Począwszy od Chrome 46.0, window.alert() jest blokowany w <iframe> chyba że jego atrybut sandbox ma wartość allow-modal .

Korzystanie z window.confirm ()

Metoda window.confirm() wyświetla modalne okno dialogowe z opcjonalnym komunikatem i dwoma przyciskami OK i Cancel.

Teraz weźmy następujący przykład:

result = window.confirm(message);
 

W tym przypadku komunikat jest opcjonalnym ciągiem wyświetlanym w oknie dialogowym, a wynikiem jest wartość logiczna wskazująca, czy wybrano OK, czy Anuluj (prawda oznacza OK).

window.confirm() jest zwykle używana do zapytania użytkownika o potwierdzenie przed wykonaniem niebezpiecznej operacji, takiej jak usunięcie czegoś w Panelu sterowania:

if(window.confirm("Are you sure you want to delete this?")) {
    deleteItem(itemId);
}
 

Dane wyjściowe tego kodu wyglądałyby tak w przeglądarce:

Okno dialogowe potwierdzenia jest bardzo proste: Wiadomość, OK, Anuluj

Jeśli potrzebujesz go do późniejszego użycia, możesz po prostu zapisać wynik interakcji użytkownika w zmiennej:

var deleteConfirm = window.confirm("Are you sure you want to delete this?");
 

Notatki

  • Argument jest opcjonalny i nie jest wymagany przez specyfikację.
  • Okna dialogowe są oknami modalnymi - uniemożliwiają użytkownikowi dostęp do reszty interfejsu programu, dopóki okno dialogowe nie zostanie zamknięte. Z tego powodu nie należy nadużywać funkcji tworzących okno dialogowe (lub okno modalne). Niezależnie od tego istnieją bardzo dobre powody, aby unikać używania okien dialogowych do potwierdzania.
  • Począwszy od Chrome 46.0, ta metoda jest blokowana w <iframe> chyba że jej atrybut piaskownicy ma wartość allow-modal.
  • Powszechnie przyjmuje się wywoływanie metody potwierdzenia z usuniętą notacją okna, ponieważ obiekt okna jest zawsze niejawny. Zaleca się jednak jawne zdefiniowanie obiektu okna, ponieważ oczekiwane zachowanie może ulec zmianie z powodu implementacji na niższym poziomie zakresu przy użyciu podobnie nazwanych metod.

Korzystanie z window.prompt ()

Prostym sposobem na uzyskanie danych wejściowych od użytkownika jest użycie metody prompt() .

Składnia

prompt(text, [default]);
  • tekst : tekst wyświetlany w polu zachęty.
  • default : Wartość domyślna dla pola wejściowego (opcjonalnie).

Przykłady

var age = prompt("How old are you?");
console.log(age); // Prints the value inserted by the user

Monituj

Jeśli użytkownik kliknie przycisk OK , zwracana jest wartość wejściowa. W przeciwnym razie metoda zwraca null .

Zwracana wartość prompt jest zawsze ciągiem, chyba że użytkownik kliknie przycisk Anuluj , w którym to przypadku zwraca null . Safari stanowi wyjątek, ponieważ gdy użytkownik kliknie przycisk Anuluj, funkcja zwraca pusty ciąg. Stamtąd możesz przekonwertować wartość zwracaną na inny typ, na przykład na liczbę całkowitą .

Notatki

  • Gdy wyświetlane jest okno zachęty, użytkownik nie ma dostępu do innych części strony, ponieważ okna dialogowe są oknami modalnymi.
  • Począwszy od Chrome 46.0, ta metoda jest blokowana w <iframe> chyba że jej atrybut piaskownicy ma wartość allow-modal.