Return to Video

Implementowanie JS w stronach internetowych.

  • 0:01 - 0:06
    Prosta strona, jak moja,
    zawiera tagi HTML, takie jak te.
  • 0:07 - 0:12
    A żeby nadać stronie styl,
    jak wprowadzamy CSS?
  • 0:13 - 0:15
    Dodajemy tag "style".
  • 0:15 - 0:17
    Przeglądarka, widząc ten tag, wie,
  • 0:17 - 0:20
    że do jego przetwarzania
    ma używać CSS-u.
  • 0:21 - 0:24
    Zwykle tag "style"
    umieszczamy w "head",
  • 0:24 - 0:27
    by mieć pewność, że przeglądarka
    przetworzy style,
  • 0:28 - 0:30
    zanim wykona tagi HTML.
  • 0:31 - 0:35
    Inaczej, jeśli umieścimy "style"
    tutaj, u dołu,
  • 0:36 - 0:40
    nastąpi tzw. błąd FOUC
    (flash of unstyled content)
  • 0:41 - 0:44
    i ludzie zobaczą
    naszą stronę gołą. Fuj!
  • 0:45 - 0:48
    Niech ten tag wróci na miejsce.
  • 0:49 - 0:52
    No dobrze. Teraz strona ma styl.
  • 0:52 - 0:55
    A jak wprowadzamy JavaScript,
  • 0:56 - 0:58
    żeby strona była interaktywna?
  • 0:59 - 1:02
    W tym celu dodajemy
    tag "script".
  • 1:02 - 1:06
    Najlepiej będzie wpisać go
    na samym dole strony,
  • 1:08 - 1:10
    tuż przed tagiem końcowym "/body".
  • 1:11 - 1:15
    Umieściłam go tutaj.
    Później objaśnię, dlaczego.
  • 1:16 - 1:19
    A co mogę wpisać
    w tym tagu "script"?
  • 1:20 - 1:25
    Każdy prawidłowy kod
    JavaScript, np. "var four = 2 +2;".
  • 1:26 - 1:30
    Ale to nieciekawe,
    bo na stronie nie dzieje się nic,
  • 1:30 - 1:34
    a użytkownicy Khan Academy wiedzą,
    że 2 + 2 = 4.
  • 1:35 - 1:38
    Żeby sprawdzić, czy to działa,
  • 1:38 - 1:40
    napiszę tu tę linię kodu.
  • 1:42 - 1:46
    Dobrze. Nic nie widzicie, prawda?
  • 1:46 - 1:49
    Może jeszcze nie znacie tej funkcji.
  • 1:50 - 1:52
    Funkcja "console.log"
    jest stosowana
  • 1:53 - 1:56
    w wielu środowiskach JS,
    m.in w przeglądarkach.
  • 1:56 - 1:59
    Będziemy wpisywać różne rzeczy
    w konsolę JS.
  • 1:59 - 2:02
    Znajdziecie ją w swojej przeglądarce.
  • 2:02 - 2:05
    Trzeba wcisnąć Command-Option-I
  • 2:06 - 2:10
    lub Control-Option-I,
  • 2:11 - 2:15
    albo wcisnąć prawy przycisk myszy
    i wybrać "Zbadaj element".
  • 2:15 - 2:20
    Przerwijcie oglądanie i wywołajcie
    konsolę, żeby zobaczyć, jak wygląda.
  • 2:22 - 2:24
    Widzieliście? Świetnie.
  • 2:25 - 2:28
    Już możecie zamknąć.
    Zajmuje dużo miejsca!
  • 2:28 - 2:33
    I rozprasza nas, bo pokazuje
    każdy błąd w trakcie pisania.
  • 2:33 - 2:35
    Ale to świetne narzędzie
    do debugowania,
  • 2:36 - 2:38
    nie zapomnijcie o nim.
  • 2:39 - 2:42
    Zrobię coś na stronie
    za pomocą JavaScript.
  • 2:42 - 2:46
    Użyję kodu, który na razie
    wyda się bezsensowny.
  • 2:51 - 2:55
    ...na stronie...
  • 2:57 - 3:00
    Widzicie, co się stało?
    Strona zniknęła.
  • 3:01 - 3:03
    Widać komunikat hakera.
  • 3:03 - 3:08
    Później objaśnię szczegółowo,
    jak działa ten program.
  • 3:08 - 3:12
    W skrócie: znalazł tag "body"
    i zastąpił zawartość.
  • 3:12 - 3:16
    A co by było, gdybym skopiowała
    i wkleiła ten tag "script"
  • 3:17 - 3:20
    do tagu "head" razem z tagiem "style"?
  • 3:21 - 3:23
    Nie działa. Dlaczego?
  • 3:24 - 3:29
    Bo strona odczytuje tag "script",
    zanim zobaczy tag "body".
  • 3:29 - 3:34
    I mówi: "Jeszcze nie widziałam
    `document.body`,
  • 3:34 - 3:38
    a wy przy nim majstrujecie.
    Tak nie wolno!".
  • 3:39 - 3:44
    Dlatego musimy umieścić
    tag "script" u dołu strony.
  • 3:44 - 3:47
    Żeby strona najpierw
    zobaczyła tag "body"
  • 3:47 - 3:51
    i całą jego zawartość. Dopiero
    wtedy możemy coś z tym zrobić.
  • 3:51 - 3:55
    Najpierw upewnijmy się,
    że strona istnieje.
  • 3:55 - 3:57
    W języku CSS jest inaczej:
  • 3:57 - 4:00
    tag "style" umieszczamy na początku,
    bo analizator CSS
  • 4:00 - 4:04
    bez problemu nadaje styl
    rzeczom, których jeszcze nie ma.
  • 4:05 - 4:10
    Zastosuje go, gdy się pojawią.
    JavaScript DOM tak nie robi.
  • 4:10 - 4:12
    Wpisujcie więc ten tag u dołu.
  • 4:14 - 4:19
    Spróbujcie dodać "script" w następnym
    zadaniu. Pamiętajcie, ma być u dołu.
  • 4:19 - 4:24
    A później opowiem więcej
    o tej linii kodu.
Title:
Implementowanie JS w stronach internetowych.
Description:

To tylko zapis naszych interaktywnych sesji poświęconych kodowaniu, stworzony by ułatwić ich przełożenie na inne języki.
Polecamy obejrzenie oryginalnej sesji na Khan Academy, gdzie możecie zatrzymać sesje, by edytować własny kod, jak również zobaczyć zapis kodu w wyższej rozdzielczości:
http://www.khanacademy.org/computer-programming
more » « less
Video Language:
English
Duration:
04:26

Polish subtitles

Revisions

Our website uses cookies for analysis purposes.