#10 CS50 на русском 2016 — язык Javascript

Приветствую Вас, дорогие друзья!
Неделя 10 курса Гарвардского университета по основам программирования CS50 2016 года на русском языке. Неделя 10 посвящается рассмотрению языка Javascript. На десятой Неделе мы рассмотрим язык Javascript, который позволяет взаимодействовать с пользователем на стороне клиента, в браузере. Язык Javascript дает возможность динамически генерировать содержимое страницы без ее перезагрузки, а также изменять структуру элементов DOM. В начале Недели 10 мы вспомним язык SQL, язык разметки HTML и CSS.

00:00:00 — Обзор Недели 10
00:01:27 — язык JavaScript
00:02:52 — Frosh IMs
00:03:51 — Синтаксис JavaScript
00:09:23 — Компоненты JavaScript
00:16:37 — dom0.html
00:25:25 — dom1.html
00:29:11 — dom2.html
00:35:51 — form0.html
00:38:13 — form1.html
00:44:12 — form2.html
00:47:49 — form3.html
00:52:35 — blink.html
00:58:07 — storage.html
01:01:02 — geolocation.html
01:03:25 — Ajax
01:05:08 — ajax0.html
01:12:12 — ajax1.html
01:17:10 — ajax2.html
01:25:16 — map.html
01:34:50 — Bootstrap
01:36:35 — Изображения и язык JavaScript
01:40:27 — Итоги

Словарь Недели 10

  1. Drag -перетаскивание
  2. Click -нажатие кнопки мыши
  3. Get quote —получить котировку
  4. Agree — согласие
  5. GUI — графический интерфейс пользователя
  6. Dorm — общежитие
  7. Callback -обратный вызов
  8. Demo -демо
  9. Finance -финансы
  10. Submit — отправить
  11. Get — получить
  12. Element -элемент
  13. Summer — лето
  14. Ready -готовый
  15. Event — событие
  16. Alert — предупреждение
  17. Prevent -препятствовать
  18. UX (User experience) — пользовательский опыт
  19. Confirmation — подтверждение
  20. Agreement — соглашение
  21. Register -регистрировать
  22. Required -обязательный
  23. Error — ошибка
  24. Blink — мигание
  25. Visible — видимый
  26. Hidden — скрытый
  27. Visibility — видимость
  28. Unvisible — невидимый
  29. Local storage — локальное хранилище
  30. Geolocation — геолокация
  31. Allow — разрешение
  32. JSON (JavaScript Object Notation) — текстовый формат обмена данными
  33. Price — цена
  34. Symbol — символ

HTML, CSS и язык Javascript

На Неделе 6 мы познакомились с простейшими веб-страницами, которые выглядели следующим образом:

<!DOCTYPE html>
<html>

<head>

<title>Привет, мир!</title>

</head>

<body>

Привет, мир!

</body>

</html>

Такого рода страницы являются статическими, то есть «жестко» закодированными. Они написаны на языке HTML, который понимают все браузеры, благодаря чему воспроизводят веб-страницу на экране пользователя. Кроме того, мы видели, что HTML элементы выстраиваются браузером в определенной последовательности, которая похожа на дерево tree из языка C, но называется DOM (Document Object Model). У каждой веб-страницы существует DOM, который выглядит следующим образом:

DOM

Давайте поговорим о том, каким образом мы можем генерировать DOM динамически, чтобы у нас была возможность взаимодействовать с пользователем. Мы уже частично рассматривали этот вопрос при знакомстве с языком Python, который позволял динамически генерировать веб-страницу. После этого, сгенерированная веб-страница загружалась в браузер к пользователю и мы видели обновленную информацию. Однако проблема заключается в том, что нам приходилось каждый раз обращаться к серверу затем, чтобы загрузить оттуда сгенерированную информацию. Оказывается, что этого можно избежать, используя язык Javascript, который может не обращаясь к серверу, генерировать DOM в браузере пользователя. Язык Javascript использует Ajax (Asynchronous Javascript and XML), что не требует перезагрузки страницы. Соответственно уменьшает нагрузку на сервер, уменьшает трафик и ускоряет реакцию интерфейса на действия пользователя. 

События в языке Javascript

язык Javascript

Язык Javascript является событийно-ориентированным, а именно использующим события DOM. Самые популярные из них представлены в таблице:

Тип событияНазвание событияОписание
События мышиonclickСобытие, возникающее, когда пользователь нажимает на элемент
События мышиoncontextmenuСобытие, возникающее, когда пользователь нажимает правой кнопкой на элемент, чтобы открыть контекстное меню
События мышиondblclickСобытие, возникающее, когда пользователь нажимает на элемент дважды
События клавиатурыonkeydownСобытие, возникающее, когда пользователь осуществляет ввод с клавиатуры
События объектовonloadСобытие, возникающее, когда объект был загружен
События объектовonresizeСобытие, возникающее, когда окно браузера изменило размер
События объектовonscrollСобытие, возникающее, когда произошла прокрутка полосы прокрутки элемента
События формonsubmitСобытие, возникающее, когда произошла отправка формы
События перемещенияondragСобытие, возникающее, когда произошла произошло перемещение элемента
События перемещенияondropСобытие, возникающее, когда перемещаемый элемент был отпущен над заданной областью
События буфера обменаoncopyСобытие, возникающее, когда пользователь копирует контент элемента

Существует гораздо большее количество событий DOM, полный перечень можно увидеть на сайте w3school.

Язык Javascript и библиотека Jquery

Для написания кода, используя язык Javascript, необходимо заключить его в специальные теги <script></script>. Например, вот так:

<!DOCTYPE html>
<html>
<head>

<script>

function greet(){

alert('hello, ' + document.getElementById(name).value);

}

</script>

<title>Пример 1</title>

</head>

<body>

<form id="demo" onsubmit="greet(); return false;">

<input id="name" placeholder="name" type="text" />

<input type="submit" />

</form>

</body>

</html>

Помните, в языке Python мы рассматривали фреймворк Flask? В языке Javascript существует нечто похожее, а именно — мегапопyлярная библиотека Jquery. Эта библиотека используется практических на всех сайтах и позволяет значительно ускорить работу и написание кода, используя язык Javascript.

jquery logo

Подключается библиотека Jquery, в тех же тегах <script></script>. Существует огромное количество мест, откуда ее можно загрузить или подключить, одним из таких мест является сайт Jquery

<script scr=»https://code.jquery.com/jquery-latest.min.js»></script>

Кстати, стоит отметить, .min означает, что библиотека в сжатом состоянии, то есть занимает меньше места. Соответственно Вам нужно меньше данных загружать с сервера, что позволит быстрее загрузить сайт. Стоит также сказать, что, как правило, скрипты располагаются в конце страницы, перед закрывающим тегом </body> и выносятся в отдельный файл, который находится в сжатом состоянии. Это позволяет настроить загрузку структуры документа и стилей, а затем загрузить скрипты. Это положительно сказывается на SEO оптимизации сайта.

Поделиться:

Оцените запись:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (5 оценок, среднее: 5,00 из 5)
Загрузка...

Комментариев к записи “#10 CS50 на русском 2016 — язык Javascript”: 2

  1. Меня переполняют эмоции, у меня восторг и восхищение от курса CS50, это НЕЧТО. Спасибо за перевод! Не останавливайтесь, пожалуйста, на достигнутом!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*Комментарий - обязательное поле для ввода
* Имя - обязательное поле для ввода
* Email - обязательное поле для ввода