Return to Video

HTML Резюме - Основи JavaScript

  • 0:05 - 0:08
    >> Давайте почнемо із index.html
  • 0:08 - 0:11
    Не хвилюйтесь HTML досить
    простий
  • 0:11 - 0:14
    Він описує зміст та макет елементів
    веб-сторінки
  • 0:15 - 0:19
    Ми будемо порівнювати що бачимо тут
    порівнянно із веб-сторінкою
  • 0:19 - 0:23
    В цій верхній секції ми бачимо тег head
    сторінки
  • 0:23 - 0:27
    Ми часто будемо знаходити посилання на
    CSS в JavaScript як це
  • 0:28 - 0:32
    Всередині body тексту ми бачимо зміст
    "Hello world" (Привіт світ)
  • 0:34 - 0:38
    А тепер переключимось до Chrome
    і ось він є.
  • 0:39 - 0:41
    Якщо ти хочешь вивчити більше про
    HTML
  • 0:41 - 0:44
    Глянь посилання в примітках ментора
  • 0:44 - 0:50
    Проглядаючи код нашего резюме помітні
    декілька елементів які варто відзначити
  • 0:50 - 0:53
    Як цей div id = main
  • 0:53 - 0:57
    Я бачу що він вказує що Hello world тут
    і він з'явився на сайті
  • 0:58 - 1:00
    Div представляє собою різні елементи
    сторінки
  • 1:00 - 1:04
    можеш про них думати як про порожні
    універсальні коробки
  • 1:04 - 1:08
    В цьому випадку ми даємо div унікальний
    ідентифікатор-main
  • 1:08 - 1:10
    до якого JavaScript буде звертатись
    пізніше
  • 1:11 - 1:13
    Ти не бачиш ще чогось, Джеймс?
  • 1:13 - 1:16
    >> Воно не виглядає як резюме зараз
  • 1:16 - 1:18
    проте я бачу структуру для нього
  • 1:18 - 1:23
    Виглядає ніби тут є виділені розділи для
    освіти, досвіду та проектів
  • 1:23 - 1:26
    Може вже пора наповнювати резюме
    інформацією?
  • 1:26 - 1:27
    >> Так
  • 1:27 - 1:31
    Ти знаеш веб-розробники мають декілька
    варіантів побудови крутих веб-сторінок
  • 1:31 - 1:34
    Я гадаю тут є дві очевидні стратегії
  • 1:34 - 1:37
    Вони можуть вписати інформацію прямо в
    HTML
  • 1:37 - 1:41
    таким чином фіксуючи контент видимий
    користувачам
  • 1:41 - 1:43
    Або вони можуть використовувати HTML
    шаблон
  • 1:43 - 1:46
    та програмно його заповнювати коли
    користувач запитує сторінку
  • 1:46 - 1:49
    В цьому випадку ми бачимо 2 секції
    о досвіді
  • 1:49 - 1:52
    В версії із зафіксованим контентом ми
    бачимо всю інформацію Филпа Дж.
  • 1:52 - 1:55
    Фрая перелічену тут
  • 1:55 - 1:58
    А в варіанті із макетом ми бачимо лише
    розділ для досвіду
  • 1:58 - 1:59
    Проте зараз він пустий
  • 2:00 - 2:04
    >> Фіксований контент це хороший початок
    проте це
  • 2:04 - 2:05
    не довгострокове рішення
  • 2:05 - 2:07
    Коли нам буде потрібно змінити сторінку
  • 2:07 - 2:12
    нам доведеться відкривати HTML файл робити
    зміни вручну що може бути досить боляче
  • 2:12 - 2:16
    Для проекту із резюме ми будемо
    використовувати макет
  • 2:16 - 2:17
    Що ти гадаеш?
  • 2:17 - 2:19
    >> Так, це гарна ідея
  • 2:19 - 2:21
    до того ж в іншому випадку цей курс був би
    про HTML
  • 2:21 - 2:24
    а він про інше
  • 2:24 - 2:28
    >> Так, до того ж інший крутий стартовий
    курс про HTML
  • 2:28 - 2:30
    Переглянь нотатки ментора за посиланнями
  • 2:30 - 2:35
    Вгорі HTML файлу є посилання до jQuery.js
    бібліотеку jQuery
  • 2:35 - 2:38
    Також є helper.js
  • 2:38 - 2:43
    який простий допоміжний JavaScript який
    ми приготували для твого проекту
  • 2:43 - 2:45
    Ми повернемось до нього через декілька
    хвилин
  • 2:45 - 2:49
    >> У нас ще є декілька тегів скриптів
    внизу HTML
  • 2:49 - 2:53
    Цей тег для resumeBuilder.js вказує
    браузеру завантажити та
  • 2:53 - 2:55
    виконати деякий JavaScript
  • 2:55 - 3:00
    Ми будемо використовувати цей скрипт аби
    додати зміст до головних секцій HTML
  • 3:00 - 3:03
    >> Браузер відобразить цю сторінку лише
    із написом Hello world
  • 3:05 - 3:08
    Аби дати кращій огляд що тут коїться
  • 3:08 - 3:11
    ми зменшили сторінки аби ти одразу бачив
    все що одразу
  • 3:11 - 3:17
    Ми маємо Hello world тут декілька пустих
    секцій резюме і потім якийсь JavaScript
  • 3:17 - 3:18
    И на цій стороні
  • 3:18 - 3:22
    Ми бачимо як воно буде взагалі
    виглядати в браузері
  • 3:22 - 3:24
    Ми друкуємо Hello world та
  • 3:24 - 3:28
    потім йдуть наші секції резюме
  • 3:28 - 3:32
    І коли ми потрапимо в секцію що включає
    будівника резюме
  • 3:32 - 3:34
    браузер запустить скрипт
  • 3:34 - 3:38
    Котрий змінить HTML в секціях про
    досвід роботи та
  • 3:38 - 3:41
    сторінка тепер відобразить наше резюме
  • 3:41 - 3:42
    >> Проте зачекай,
  • 3:42 - 3:45
    Ти можешь спитати, що такого в секції про
    досвід роботи
  • 3:45 - 3:47
    Вони ніби в резюме проте
  • 3:47 - 3:48
    їх не видно зараз
  • 3:48 - 3:51
    Це через те що ці розташовані внизу
  • 3:51 - 3:54
    Використовуючи JavaScript, ми перевіряємо
  • 3:54 - 3:56
    чи є в цих секціях якась інформація
  • 3:56 - 3:58
    Якщо ні то ми їх ховаємо
  • 3:58 - 4:01
    Ми ще повернемось до цих сецій JavaScript
    пізніше
Tytuł:
HTML Резюме - Основи JavaScript
Opis:

more » « less
Video Language:
English
Team:
Udacity
Projekt:
ud804 - Javascript Basics
Duration:
04:01

Ukrainian subtitles

Revisions