YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Ukrainian subtitles

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

Get Embed Code
7 Languages

Showing Revision 1 created 02/28/2017 by Anton Bilohai.

  1. >> Давайте почнемо із index.html

  2. Не хвилюйтесь HTML досить
    простий
  3. Він описує зміст та макет елементів
    веб-сторінки
  4. Ми будемо порівнювати що бачимо тут
    порівнянно із веб-сторінкою
  5. В цій верхній секції ми бачимо тег head
    сторінки
  6. Ми часто будемо знаходити посилання на
    CSS в JavaScript як це
  7. Всередині body тексту ми бачимо зміст
    "Hello world" (Привіт світ)
  8. А тепер переключимось до Chrome
    і ось він є.
  9. Якщо ти хочешь вивчити більше про
    HTML
  10. Глянь посилання в примітках ментора
  11. Проглядаючи код нашего резюме помітні
    декілька елементів які варто відзначити
  12. Як цей div id = main
  13. Я бачу що він вказує що Hello world тут
    і він з'явився на сайті
  14. Div представляє собою різні елементи
    сторінки
  15. можеш про них думати як про порожні
    універсальні коробки
  16. В цьому випадку ми даємо div унікальний
    ідентифікатор-main
  17. до якого JavaScript буде звертатись
    пізніше
  18. Ти не бачиш ще чогось, Джеймс?
  19. >> Воно не виглядає як резюме зараз
  20. проте я бачу структуру для нього
  21. Виглядає ніби тут є виділені розділи для
    освіти, досвіду та проектів
  22. Може вже пора наповнювати резюме
    інформацією?
  23. >> Так
  24. Ти знаеш веб-розробники мають декілька
    варіантів побудови крутих веб-сторінок
  25. Я гадаю тут є дві очевидні стратегії
  26. Вони можуть вписати інформацію прямо в
    HTML
  27. таким чином фіксуючи контент видимий
    користувачам
  28. Або вони можуть використовувати HTML
    шаблон
  29. та програмно його заповнювати коли
    користувач запитує сторінку
  30. В цьому випадку ми бачимо 2 секції
    о досвіді
  31. В версії із зафіксованим контентом ми
    бачимо всю інформацію Филпа Дж.
  32. Фрая перелічену тут
  33. А в варіанті із макетом ми бачимо лише
    розділ для досвіду
  34. Проте зараз він пустий
  35. >> Фіксований контент це хороший початок
    проте це
  36. не довгострокове рішення
  37. Коли нам буде потрібно змінити сторінку
  38. нам доведеться відкривати HTML файл робити
    зміни вручну що може бути досить боляче
  39. Для проекту із резюме ми будемо
    використовувати макет
  40. Що ти гадаеш?
  41. >> Так, це гарна ідея
  42. до того ж в іншому випадку цей курс був би
    про HTML
  43. а він про інше
  44. >> Так, до того ж інший крутий стартовий
    курс про HTML
  45. Переглянь нотатки ментора за посиланнями
  46. Вгорі HTML файлу є посилання до jQuery.js
    бібліотеку jQuery
  47. Також є helper.js
  48. який простий допоміжний JavaScript який
    ми приготували для твого проекту
  49. Ми повернемось до нього через декілька
    хвилин
  50. >> У нас ще є декілька тегів скриптів
    внизу HTML
  51. Цей тег для resumeBuilder.js вказує
    браузеру завантажити та
  52. виконати деякий JavaScript
  53. Ми будемо використовувати цей скрипт аби
    додати зміст до головних секцій HTML
  54. >> Браузер відобразить цю сторінку лише
    із написом Hello world
  55. Аби дати кращій огляд що тут коїться
  56. ми зменшили сторінки аби ти одразу бачив
    все що одразу
  57. Ми маємо Hello world тут декілька пустих
    секцій резюме і потім якийсь JavaScript
  58. И на цій стороні
  59. Ми бачимо як воно буде взагалі
    виглядати в браузері
  60. Ми друкуємо Hello world та
  61. потім йдуть наші секції резюме
  62. І коли ми потрапимо в секцію що включає
    будівника резюме
  63. браузер запустить скрипт
  64. Котрий змінить HTML в секціях про
    досвід роботи та
  65. сторінка тепер відобразить наше резюме
  66. >> Проте зачекай,
  67. Ти можешь спитати, що такого в секції про
    досвід роботи
  68. Вони ніби в резюме проте
  69. їх не видно зараз
  70. Це через те що ці розташовані внизу
  71. Використовуючи JavaScript, ми перевіряємо
  72. чи є в цих секціях якась інформація
  73. Якщо ні то ми їх ховаємо
  74. Ми ще повернемось до цих сецій JavaScript
    пізніше