Скачать "18. CS50 на русском: Лекция #18 [Гарвард, Основы программирования, осень 2015 год]"

Обложка аудиозаписи

Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.

Предыдущее видео: 2. CS50 на русском: Лекция #2 [Гарвард, Основы программирования, осень 2015 год]Следующее видео: 19. CS50 на русском: Лекция #19 [Гарвард, Основы программирования, осень 2015 год]

19. CS50 на русском: Лекция #19 [Гарвард, Основы программирования, осень 2015 год]

19. CS50 на русском: Лекция #19 [Гарвард, Основы программирования, осень 2015 год]

Канал: JavaRush

2. CS50 на русском: Лекция #2 [Гарвард, Основы программирования, осень 2015 год]

2. CS50 на русском: Лекция #2 [Гарвард, Основы программирования, осень 2015 год]

Канал: JavaRush

13. CS50 на русском: Лекция #13 [Гарвард, Основы программирования, осень 2015 год]

13. CS50 на русском: Лекция #13 [Гарвард, Основы программирования, осень 2015 год]

Канал: JavaRush

7. CS50 на русском: Лекция #7 [Гарвард, Основы программирования, осень 2015 год]

7. CS50 на русском: Лекция #7 [Гарвард, Основы программирования, осень 2015 год]

Канал: JavaRush

6. CS50 на русском: Лекция #6 [Гарвард, Основы программирования, осень 2015 год]

6. CS50 на русском: Лекция #6 [Гарвард, Основы программирования, осень 2015 год]

Канал: JavaRush

3. CS50 на русском: Лекция #3 [Гарвард, Основы программирования, осень 2015 год]

3. CS50 на русском: Лекция #3 [Гарвард, Основы программирования, осень 2015 год]

Канал: JavaRush

8. CS50 на русском: Лекция #8 [Гарвард, Основы программирования, осень 2015 год]

8. CS50 на русском: Лекция #8 [Гарвард, Основы программирования, осень 2015 год]

Канал: JavaRush

5. CS50 на русском: Лекция #5 [Гарвард, Основы программирования, осень 2015 год]

5. CS50 на русском: Лекция #5 [Гарвард, Основы программирования, осень 2015 год]

Канал: JavaRush

22. CS50 на русском: Лекция #22 [Гарвард, Основы программирования, осень 2015 год]

22. CS50 на русском: Лекция #22 [Гарвард, Основы программирования, осень 2015 год]

Канал: JavaRush

15. CS50 на русском: Лекция #15 [Гарвард, Основы программирования, осень 2015 год]

15. CS50 на русском: Лекция #15 [Гарвард, Основы программирования, осень 2015 год]

Канал: JavaRush

сomputer science

основы программирования

cs50

cs50 на русском

cs50 javarush

18 лекция cs50

гарвардский курс

Week 9

00:00:00

вот сайт с шаурмой works

00:00:04

[музыка]

00:00:16

добро пожаловать в гарвард на курс си с

00:00:20

fifty

00:00:23

это сейчас fifty начала девятой неделе и

00:00:25

сегодня 200 день рождения джорджа буля

00:00:28

мы неоднократно ссылались на него при

00:00:30

использовании булевых переменных и

00:00:32

истина ложь и пол 10 и тому подобных

00:00:35

сегодня ему бы исполнилось 200 и google

00:00:38

отдает ему должное если хотите

00:00:40

присоединиться к ланчу с команды с фихте

00:00:42

ссылка на сайте курса вот эти ребята

00:00:45

ждут вас здесь кембридже а вот эти в

00:00:47

нью-хейвене и за кстати кен в них или не

00:00:49

сделал так называемую гифку и linea

00:00:52

недавней встрече

00:00:53

гибкой это знакомую вам формат

00:00:54

графических файлов он похож на что-то

00:00:56

такое просто последовательность

00:00:59

сути ну да ладно я не смешно вам в нюхаю

00:01:03

не мы повеселились в общем

00:01:05

присоединяйтесь здесь в гарварде в эту

00:01:08

среду для первокурсников студентов

00:01:10

вторых и даже третьих курсов и которые

00:01:13

хотят перейти в класс компьютерных налог

00:01:15

будет консультация в эту среду сразу

00:01:17

после занятия в четыре часа в здании

00:01:19

компьютерных наук максвелла дворкин а

00:01:21

подписан завтра эта информация также

00:01:24

появится на сайте говорят на закуску

00:01:26

будут и пончики ладно забавная история

00:01:30

я тут ковырялся в интернете и нашел

00:01:33

архивы своего старого сайта май

00:01:35

это оказалось очень вовремя потому что

00:01:37

снова на нас ул предвыборная гонка

00:01:39

студенческий совет в общем я тогда

00:01:43

участвовал в выборах и продолжим отчасти

00:01:45

наверно поэтому так тогда выглядел мой

00:01:48

сайт почему-то мне казалось интересным

00:01:50

прежде чем излагать народу суть своей

00:01:52

платформы причина голосовать за меня

00:01:53

заставлять их кликать чтобы войти и

00:01:55

получить информацию оглядываясь назад я

00:01:58

понимаю что идея была дурацкая летишь я

00:02:01

не знаю зачем я это сделал вот это

00:02:04

конечно ведь не помогло моей компании

00:02:06

еще к последнему курсу я понял у меня

00:02:09

был тогда календарь с маппетами маппеты

00:02:12

были в моде а может и нет но у меня

00:02:13

тогда был календарь с макетами и я решил

00:02:15

что будет круто назвать свой комп сети

00:02:17

гарварда fragman . стьюдента . гарвард .

00:02:21

идею в то время у всех нас были

00:02:23

уникальные имена хостов и можно было

00:02:26

выбрать себе новый

00:02:27

более звучное имя я почему-то выбрал

00:02:29

флагмана в общем я взялся

00:02:31

не кучу времени потратил на эти ссылки

00:02:33

сегодня утром вот страничка себе сейчас

00:02:36

она кажется прелестной но и по ней видно

00:02:38

как далеко ушел прогресс я имею ввиду

00:02:41

что 486 это была вещь сегодня это

00:02:45

очень-очень слабо

00:02:46

у нас в карманах наверняка есть штуки в

00:02:49

помощнее тут есть и другие поводы

00:02:51

краснее так что просто оставлю это здесь

00:02:53

но это была моя первая вылазка в сеть а

00:02:57

нет не первый мой первый экскурс в

00:02:59

веб-программировании вот этот сайт я про

00:03:02

него забыл научился тогда клепать

00:03:04

повторяющиеся картинки

00:03:05

эта плитка показалась мне эффектной

00:03:08

хоккеисты мячи для футбола и гольфа и

00:03:11

что там еще для спортивного сайта на

00:03:13

самом деле это был первый веб-проект

00:03:15

который я осилил может на втором или

00:03:18

третьем курсе окончив ses фихте исчез

00:03:20

fifty ван один из следующих классов нам

00:03:23

просматривая архивы я обнаружил что мой

00:03:25

друг и последователь ли

00:03:27

по переписал copyright на себя но все

00:03:29

равно стыдно должно быть мне

00:03:30

однако тогда как я говорил пару недель

00:03:33

назад это был первый сайт для записи

00:03:35

новичков твой спорт секции универа в

00:03:38

общем оказалось что такие фоновые

00:03:40

картинки иметь не лучшая мысль на веб

00:03:43

был новинкой

00:03:44

и мы все экспериментировали как раз этим

00:03:46

я тогда и занимался

00:03:48

ну ладно без дальнейших проволочек

00:03:49

переходим к последней теме которая будет

00:03:51

вам особенно полезно для выпускных

00:03:53

проектов и благодаря которой всемирная

00:03:55

паутина станет более понятной устала

00:03:57

быть мы знакомимся с еще одним языком

00:03:59

программирования под названием java

00:04:01

script который похож на ранее

00:04:02

рассмотренные языки да не совсем за

00:04:04

малыш поминаем и компилируемый язык

00:04:07

прогоняется через компилятор он

00:04:09

переводит исходный код в объектный то

00:04:10

есть единицы и нули и единицы и нули

00:04:13

которые понимают ваш cp он же

00:04:15

центральный процессор php наоборот не

00:04:18

компилируемый а какой интерпретируемый

00:04:23

язык

00:04:24

программа интерпретатор читает его

00:04:25

сверху вниз слева направо и вычисляет

00:04:27

что ваш синтаксис значит и должен делать

00:04:29

если там цикл условия или еще какая

00:04:32

программа к рукции вот что такое интерпретируемый

00:04:35

язык там ничего там мы изучали html

00:04:38

html даже не язык программирования как

00:04:40

бы моего назвали

00:04:41

язык разметки этот причудливый термин

00:04:44

значит что там нет программных

00:04:45

конструкций даже таких как мы видели

00:04:47

встреч

00:04:48

нет циклов нет условий этот язык может

00:04:50

только расставить даны отформатировать

00:04:52

их и как-то упорядочить

00:04:54

исчез с тоже не язык программирования он

00:04:56

еще больше служат эстетики позволяет

00:04:58

проводить в тонкую настройку

00:05:00

размер шрифта цвета и взаимное

00:05:02

расположение потом был сиквел сиквел

00:05:05

все-таки своего рода язык

00:05:07

программирования хотя заточенной

00:05:08

специально под базы данных мы изучили

00:05:10

только операции выборки вставки удаления

00:05:13

изменения и еще парочку но даже они

00:05:15

позволяют вам писать на секу и так

00:05:17

называемую функции и процедуры которые

00:05:19

похожи на функции php и sie ins

00:05:21

запомните что они есть ведь мы же не

00:05:24

будем с ними заморачиваться хватит пока

00:05:26

и шапочно вот видишь знакомства и вот

00:05:29

java-script последний из языков с

00:05:31

которыми мы познакомимся java-script кто

00:05:34

уже интерпретируемый язык кто в теме

00:05:36

скажите какие черты отличают его и от и

00:05:39

печки в чем разница

00:05:42

не услышал не компилируется то есть он

00:05:46

интерпретируемый они компилируемый

00:05:48

значит он похож на печь пирло кич и все

00:05:50

же он разительно отличается от печки

00:05:52

хотя бы в плане применения новой благин

00:05:54

да он обычно работает на клиенте вот

00:05:58

отличительная черта для нас на этом

00:06:00

этапе все работал на сервере в том плане

00:06:02

что мы все делали при докта recess fifty

00:06:04

тысяч пи до сих пор тоже работал на

00:06:06

сервере поскольку он интерпретируется

00:06:08

не компилируется а интерпретируется в

00:06:10

редакторе ses вести который и есть

00:06:12

сервер или группа серверов в облаке

00:06:14

почему нос java скриптом хоть вы начнете

00:06:16

писать на нем в рамках 8 задачника

00:06:19

медики и может финальных проектов вы

00:06:21

будете писать в редакторе ses fifty и

00:06:23

сохранять файлы в нем же

00:06:24

но не он не облачный сервер и где он

00:06:27

находится не будут интерпретировать и

00:06:29

выполнять ваш код вместо этого он в

00:06:32

неизменном виде будет передам в браузер

00:06:34

и уже эксплорер или chrome или firefox

00:06:37

или сафари или что то еще интерпретирует

00:06:40

его сверху в слева направо целый энди так ключевое

00:06:43

отличие на сегодня в том что java script

00:06:45

на клиенте копеечки к примеру на сервере

00:06:48

и тут есть ещё и подвох с точки зрения

00:06:51

интеллектуальной собственности в том

00:06:53

кому виден ваш код действительно вы

00:06:56

можете зайти в интернет и найти почти

00:06:58

любой код написанный на java script

00:07:00

иногда он разборчивый иногда затертый мы

00:07:03

к этому еще вернемся в общем синтаксис

00:07:07

java script на радость нам всю похож на

00:07:09

си и как печки в нем нет функции main

00:07:13

вы хотите писать код на java script

00:07:15

сегодня узнаете как просто начинайте мы

00:07:19

увидим что он особенно хорош для

00:07:21

веб-браузеров небольшая поправка на

00:07:23

сегодняшний день сейчас вы все шире

00:07:25

можете использовать java script и на

00:07:27

сервере с помощью мудреной платформы но

00:07:29

вгс так написаны некоторые приложения с

00:07:32

фифти-фифти использует на ручей но в

00:07:35

нашем курсе мы изучим javascript на

00:07:37

стороне клиента вот так прописываются

00:07:40

условия на печке простите на хотя так

00:07:43

тоже правильно также они выглядят на

00:07:46

java script по синтаксису он идентичен c

00:07:48

и php

00:07:49

булево выражение синтаксически одинаковы

00:07:52

все и печки плеч и операторы switch

00:07:55

java-script такие же меня тут у нас

00:07:58

аналогично циклы for a while и duvall

00:08:01

а вот и отличия в печка была конструкция

00:08:04

for each возможно вы на нее натыкались

00:08:07

оргию седьмом задачники java script есть

00:08:09

и ее особая версия буквально for work in

00:08:12

reality in обжиг travel что вкратце я

00:08:15

означает когда у меня есть объект к ним

00:08:18

и вскоре еще вернемся и я хочу пройтись

00:08:21

по всем его парам ключ-значение мне не

00:08:24

зачем придумывать им цифровую индексацию

00:08:26

0

00:08:27

123 я могу сказать прямо так и для

00:08:30

каждой итерации java script вместо меня

00:08:32

сам присваивает ключам номера по порядку

00:08:35

первые следующий и так далее и я могу

00:08:37

добраться до его значение работы java

00:08:40

script объектом ширине вот увидите как с

00:08:43

ассоциативным массивом с php

00:08:45

им печкой и так и если вы наконец

00:08:47

разобрались время что же такое

00:08:49

ассоциативный массив

00:08:50

печки можете пока считать что объект

00:08:53

java script это тоже самое хоть и не все

00:08:54

так просто массивы здесь очень похожи на

00:08:58

печке

00:08:59

но без одного знака тут не хватает чего

00:09:02

то что было в печке на прошлой неделе

00:09:04

чего нет ни знака доллара значит мы

00:09:08

вернулись в обычный мир где переменные

00:09:10

лишены денежных знаков но обычно перед

00:09:12

ними ставится вар вар вы реблог значит

00:09:15

переменная и еще в печке слабая

00:09:17

типизация то есть типа данных есть целые

00:09:20

числа числа с плавающей точкой строки и

00:09:22

так далее java-script они тоже есть его

00:09:25

слабая типизация заключается в том что

00:09:27

мы программисты не должны уточнить

00:09:29

достаточно знать что эти типы есть ips

00:09:31

экзист стало быть переменная вот так мы

00:09:34

можем объявить string хеллоу ворлд

00:09:37

обратите внимание все как в печке но без

00:09:39

доллара с этим мы еще не раз встретимся

00:09:42

сегодня вот вам объект с ключами

00:09:44

значениями как вы заметили по сравнению

00:09:46

с прошлой неделей синтаксис немного

00:09:47

другой приглядитесь am сколько ключей у

00:09:50

этого объекта думаете 4 и по вашему два

00:09:57

на самом деле их 2

00:09:58

набор из двух пар ключ-значение ключ под

00:10:01

названием символ его значение fb

00:10:03

ключ под названием цена его значение 100

00:10:06

153

00:10:07

и того две пары ключ-значение вспомните

00:10:10

печки снова небольшие отличия в синтаксисе

00:10:12

ничего особо умного интересного в печке

00:10:15

то же самое выглядело бы так

00:10:17

котировка равно это и меняя на

00:10:19

квадратные скобки на иной потом это я

00:10:22

меняю на слово цена в кавычках и еще

00:10:25

убираю : что я использовал на прошлой

00:10:28

неделе до равно и больше условная

00:10:31

стрелка на это же самое здесь и то же

00:10:35

самое здесь вот и все если это еще не

00:10:38

уложилась памяти ничего

00:10:40

страшного потому что это действительно

00:10:41

не интересно это всего лишь различия в

00:10:44

синтаксисе суть совершенно даже внутри

00:10:46

переменной котировках java script

00:10:48

находится коллекция пар ключ-значение

00:10:50

одна из которых символ а 2 цена

00:10:53

чтобы добраться до этих значений

00:10:54

используем вот такой синтаксис и как и в

00:10:57

печке я мог бы

00:10:58

лайк давайте это немного увеличим ой час

00:11:02

как из печки я мог бы без по черт но же

00:11:09

как и в печке

00:11:11

ладно будем использовать заметки как и в

00:11:14

печь pete's можно прописать доллар

00:11:16

котировка символ и получить значение

00:11:18

переменной символ и java script все

00:11:21

аналогично я могу сделать вот так просто

00:11:24

убрать знак доллара итак нам повезло

00:11:27

нового синтаксиса совсем мало

00:11:28

сосредоточимся сегодня на некоторых

00:11:31

идеях и приложениях писан первое

00:11:33

приложение вы уже видели если

00:11:35

заглядывали в 7 задачник выглядит она

00:11:37

вот так этот задачник даже если вы его

00:11:39

ещё не открывали содержат файл конфиг .

00:11:42

джейсон то есть java-script объект

00:11:45

наташин объектной аннотация у тещи зачем

00:11:49

мы решили предоставить вам образец

00:11:51

парами ключ-значение

00:11:53

и вот в списке указаны хвост и имя

00:11:55

сервера а также предоставлены

00:11:57

placeholder и для вашего имени

00:11:59

пользователя и для вашего пароля

00:12:01

если но еще этого не видели не парьтесь

00:12:03

еще есть руководство к седьмому

00:12:05

задачнику вам конечно нужно будет

00:12:06

заменить труду

00:12:07

ведь на входе в редактор счастливцу

00:12:09

каждого свой логин и пароль мы могли бы

00:12:11

здесь использовать более полудюжины

00:12:13

других форматов могли бы использовать

00:12:15

файл . тексте или с vip-file

00:12:17

или к примеру а.н. ai файл xml файл и

00:12:21

еще куча сокращения которых вы даже не

00:12:23

слышали по большому счёту это случайный

00:12:25

выбор но особой популярностью сегодня

00:12:27

пользуется текстовый формат джейсон

00:12:29

java-script обжиг натэйша это именно он

00:12:32

он выглядит непонятно но посмотрите на

00:12:34

шаблоны в начале открывающая фигурная

00:12:36

скобка в конце закрывающие внутри

00:12:38

какое-то содержание

00:12:40

пара ключ-значение то есть сейчас мы

00:12:42

видим на экране объект у которого один

00:12:45

ключ и одно значение если исходить из

00:12:47

уже знакомых шаблонов где здесь ключ

00:12:49

база данных то есть то что слева от :

00:12:53

получается что на этот раз значение это

00:12:56

несколько строк под назначение

00:12:58

начинается и заканчивается фигурной

00:12:59

скобкой как вы думаете какой тип

00:13:01

значению база данных словарь или проще

00:13:07

говоря объект так это такой тип данных

00:13:09

который может

00:13:10

внутри себя содержать другие типы и так

00:13:13

если это все зовется объектом а объект

00:13:15

значит набор пар ключ-значение то

00:13:17

значение базы данных и есть объект

00:13:20

значение база данных это целая связка

00:13:22

пар ключ-значение первый из них хост

00:13:24

потом имя затем имя пользователя пароль

00:13:27

каждая из этих значений не более чем

00:13:29

string в двойных кавычках если все еще

00:13:32

не до конца понятно но запомните что это

00:13:34

просто шаблон скучные способ

00:13:36

стандартизированного хранения информации

00:13:37

но вы можете часто допускать ошибки в

00:13:40

мелочах даже в седьмом задачники если

00:13:42

например случайно пропустите здесь , а

00:13:45

модель это приведет к тому что файл

00:13:46

скорее всего не запустится и если вы

00:13:48

случайно упустите кавычки он не

00:13:50

запустится так что формат довольно

00:13:51

капризный но очень распространенный и вы

00:13:54

будете им пользоваться даже если в целом

00:13:56

не применяется java script в седьмом

00:13:58

задачники хорошо запомните эту схему в

00:14:02

html мы говорили код может выглядеть так

00:14:05

это всего лишь халлоу голод поймать

00:14:06

написанные на языке разметки бы там быть

00:14:09

но потом мы решили что можно

00:14:10

рассматривать его как дерево

00:14:12

действительно структура слева которую мы

00:14:14

для легкости восприятия отформатировали

00:14:16

может быть представлены в виде такого

00:14:18

дерева твоем особый корневой элемент

00:14:21

который мы назовем общим словом документ

00:14:23

под ним корневой html элемент или т.к.

00:14:26

html

00:14:27

у которого два дочерних элементах

00:14:29

заголовок и тело опыту заголовка есть

00:14:32

название о названии текстовое значение и

00:14:34

у тела тоже есть текстовое значение

00:14:38

если вам так удобнее можете под этот код

00:14:41

html чертить такую схему это отличная

00:14:44

мысль иная модель

00:14:45

потому что теперь когда у нас есть java

00:14:47

script язык программирования который

00:14:49

браузер может выполнить

00:14:51

и интерпретировать вместо вас

00:14:52

оказывается что посредством кода мы

00:14:55

можем начать управлять этим деревом

00:14:56

данных в памяти лично мне нужно строить

00:14:59

дерево в памяти нам не нужно создавать

00:15:01

сложные структуры данных как в пятом

00:15:03

задачники браузер любят на

00:15:05

интерпретирует html сверху вниз слева

00:15:07

направо и без лишних усилий с нашей

00:15:09

стороны дает нам своеобразный указатель

00:15:11

на это дерево он делает всю черную

00:15:13

работу вот как она заботится mozilla

00:15:16

apple и другие с помощью java script мы

00:15:20

сможем управлять изменять и еще много

00:15:23

всего интересного делать с этим деревом

00:15:25

также известным как дом объектная модель

00:15:28

документа

00:15:29

что именно делать оказывается java

00:15:32

скрипте есть длиннющий список возможных

00:15:34

событий в отель мы не вспоминали этот

00:15:36

термин с нулевой неделе с 0 задачника

00:15:39

когда говорили про scratch наверное

00:15:42

немногие из вас использовали событие в

00:15:44

scratch проекте мой путь но может вы

00:15:46

помните простой пример с марко поло где

00:15:48

было два спрайта один из которой говорил

00:15:51

марка ну а второй услышав это событие

00:15:53

отвечал пола если не помните записи вам

00:15:55

в помощь

00:15:56

но это просто к слову а суть этих

00:15:59

слушателей понятно из их названия java

00:16:01

script дает нам способ

00:16:03

слушать как мышка движется вниз или

00:16:05

снова вверх как нажимается отпускается

00:16:08

клавиша как отправляется формы

00:16:10

происходит выделение и изменение размера

00:16:12

иначе говорят для любого действия

00:16:14

которой пользователь может совершить и

00:16:16

совершает каждый день в браузере

00:16:18

существует код который отследит его

00:16:21

и отреагирует определенным образом толпы

00:16:23

например тебе использовании google maps

00:16:25

что будет если вы нажмете на кнопку и

00:16:27

потащите мышкой кликните и потяните а ты

00:16:34

карту в точку карты начнет двигаться и

00:16:37

вы можете заглянуть

00:16:38

что здесь а что там и как google это

00:16:41

реализовал предполагаю что они

00:16:43

используют парочку слушатели событий

00:16:45

один из которых следит за нажатием мыши

00:16:47

когда пользователь нужен

00:16:48

трактат или на кнопку мыши а потом мы

00:16:50

начинаем следить за чем-то вроде

00:16:52

движения или другого события которая

00:16:54

передает нам перемещение перемещение

00:16:56

кстати тоже попала в этот длинный список

00:16:59

возможных вариантов выходит это мощный

00:17:01

механизм реакции на действия

00:17:02

пользователя еще до того как он или она

00:17:05

нажмет что-то очевидное вроде

00:17:07

подтвердить нам придется пройти еще пару

00:17:09

тем чтобы с этим разобраться но пока

00:17:12

давайте перейдем к реальному коду

00:17:13

откроем до 0 это очень простой пример

00:17:18

увеличим чтобы разглядеть

00:17:19

элементы и я напечатаю свое имя дэвид и

00:17:23

5 помоги нажму подтвердить и вот

00:17:26

выскакивает пусть корявые всплывающее

00:17:29

окно которое говорит привет , дэвид

00:17:31

это вроде того хеллоу ворлд которые мы

00:17:33

раньше писали такси и даже на печке так

00:17:36

как я динамически подставил свое имя я

00:17:39

могу подставить и чужое имя просто меняю

00:17:41

текст на хана и нажимаем подтвердить и

00:17:43

окошко меняется всплывающими окнами в

00:17:47

интернете реально злоупотребляют из-за

00:17:49

этого в свое время в моду вошли

00:17:50

блокираторы потому что определенные

00:17:52

сайты вероятно сомнительного содержания

00:17:54

начинали заваливать ваш экран пачками

00:17:57

всплывающих окон в общем это возможность

00:17:59

выставлять

00:18:00

окна на передний план было не очень

00:18:02

радушно и у принято человечеством вот

00:18:04

почему вы видите здесь предупреждение

00:18:06

которое так портит картинку

00:18:08

придется нам поискать для общения с

00:18:09

пользователем другой способ но пока и

00:18:11

так сойдёт все часть чисто интуитивно

00:18:14

вот что здесь происходит а я нажимаю

00:18:18

подтвердить называется какое-то событие

00:18:20

очевидно а чего не хватает из материала

00:18:23

прошлой неделе когда я нажимал

00:18:24

подтвердить чего нет на экране еще раз

00:18:30

перезагрузки ural не поменялся я сказал

00:18:33

что загружают дом но и это по-прежнему

00:18:35

дом но вообще-то мы должны были перейти

00:18:38

на другой url адрес но что-то вроде

00:18:39

реджистер . печки

00:18:41

но даже если я закрою окошко нажав ok

00:18:44

смотрите и rl остается но допустим если

00:18:47

я сомневаюсь что могу открыть chrome

00:18:49

открываю вкладку сеть мы видим она пуста

00:18:52

я перри подтверждаю марии видите нет

00:18:54

передачи данных по сети абсолютно нет

00:18:57

http и так если мы посмотрим на исходный

00:19:00

код давайте я закрою это окно и перейду

00:19:02

к исходнику

00:19:03

это интересно похоже тут появились новые

00:19:05

теги в том числе скрипка давайте

00:19:07

посмотрим в редакторе ses fifty что же я

00:19:09

отправил пользователю вот она смотрим

00:19:12

только на html тина луны это вторая

00:19:14

половина файла дом 0 . html видите здесь

00:19:18

тайтл так хоть так body так форм так

00:19:21

сразу бросается в глаза различия

00:19:23

особенно если вы раньше не писали на

00:19:25

java script прокрутим немного вправо

00:19:27

здесь так input и еще один input для

00:19:30

подтверждения и еще аиде немного

00:19:33

непривычно но с этим мы встречались в

00:19:35

css

00:19:36

а что абсолютно новое менял да тут он

00:19:40

сам вид

00:19:42

после дема да отлично дальше непонятно и

00:19:45

там где написано он сабмит смотрите что

00:19:48

дальше это называется атрибут согласно

00:19:51

терминологии html его значение вот эта

00:19:54

строка в кавычках на первый взгляд

00:19:56

смотрится странно это не html это не ссы

00:19:59

то как вы догадываетесь жало скрипт

00:20:01

похоже в вебстраницу встроена функция

00:20:03

под названием grid приветствие я прихожу

00:20:05

к такому выводу потому что после слова

00:20:07

grid идут круглые скобки и ; похоже на

00:20:10

функции все и на функцию в php конечно

00:20:13

эта функция java-script она возвращает

00:20:15

ложь мы к этому сейчас вернемся но где

00:20:17

же определение функции прокрутим верху

00:20:19

начало файла эта строка несмотря что в

00:20:22

длину не вызывая затруднений я немного

00:20:24

уменьшу масштаб

00:20:25

внимание на эти четыре строчки java

00:20:27

script как и в печь пиво буквально

00:20:29

пишите слова функция даете название

00:20:31

потому тут скобки с аргументами а в

00:20:33

данном случае без аргументов java script

00:20:36

как и в печке

00:20:37

нет возвращаемого значения тут все не

00:20:39

так строго как все

00:20:40

открываем и закрывая фигурной скобки

00:20:42

java script есть встроенная функция не

00:20:45

рекомендуемое под названием а лед

00:20:47

которая существует исключительно чтобы

00:20:49

показывать ужасной всплывающие окна

00:20:51

которые мы видели пока это все трудно

00:20:53

переварить что здесь происходит давайте

00:20:56

разбирать строку по частям ай лайк это

00:20:59

единственный арк

00:21:00

мент функции alert и что нам дает похоже

00:21:03

на обычный string оказывается в отличие

00:21:06

от печки и отжав оскар простите в

00:21:08

отличие от php и at sea

00:21:10

java script неважно что использовать

00:21:12

одинарные или двойные кавычки суть не

00:21:14

меняется честно говоря программиста на

00:21:16

java script почему-то предпочитают

00:21:18

одинарные кавычки дело вкуса мы могли бы

00:21:20

вместо них поставить двойные льюис до

00:21:22

блока здесь вот люс для нас новый символ

00:21:24

кто сталкивался с этим раньше что

00:21:26

означает плюс сми да конкатенация мы это

00:21:32

встречали в кличке

00:21:34

php оператор . склеивает две строки все

00:21:36

это настоящий головняк в шестом

00:21:38

задачники помните было марокко

00:21:40

стройке объединялись функции строке

00:21:42

после выделения памяти в стеке или на

00:21:44

куче

00:21:45

такие вот танцы с бубном просто чтобы

00:21:46

связать для строки в омске все просто

00:21:49

достаточно поставить между ними плюсы на

00:21:51

самое сложное у нас вот здесь потому что

00:21:54

в конце этой строки я просто добавляю !

00:21:57

итак если у нас выскакивали окнах и лу

00:21:59

дэвид хил у хана соло мария и тому

00:22:02

подобное все ясное дело что этот кусок

00:22:05

кода между двумя плюсами должен дать мне

00:22:07

доступ к чему что сюда напрашивается ну

00:22:16

притворимся что я слышал ответ имя

00:22:18

эти имена выскакивали в окне что все это

00:22:21

значит как я говорил при разборе этой

00:22:24

схемы у так называемого дома есть особый

00:22:27

корневой элемент на самой вершине момент

00:22:30

боятся документами

00:22:32

теперь оказывается что это особая

00:22:34

глобальная переменная java script пил в

00:22:36

которую зашита куча полезного

00:22:38

функционала days of полезный функционал

00:22:41

входит возможность получить доступ к

00:22:43

любому дочернему узлу

00:22:45

то есть все эти квадраты и

00:22:47

прямоугольники и эллипсы и есть те самые

00:22:50

узлы получается пел ты что в объекте

00:22:53

документ в java script is есть функция

00:22:56

или иначе говоря метод до называемый get

00:22:59

element buy айди

00:23:01

для вызова функции java script из

00:23:03

объекта из

00:23:05

или переменный используется . мы видели

00:23:09

лак все это синтаксис тракт юсси седьмом

00:23:12

задачники нечто подобное с fifty : : : :

00:23:18

php один из способов вызвать функцию без

00:23:21

внутри объекта java script с этим пока

00:23:23

справляется .

00:23:24

и эта функция как бы любезно сообщает

00:23:26

нам что она делает выдает элемент по его

00:23:29

идти один элемент всего лишь

00:23:31

альтернативное название тега или узла в

00:23:33

дом все стало быть получить элемент по

00:23:35

айди имя означает

00:23:37

вот мой html исходя из этого кода какой

00:23:41

узел или html тег илья программно получу

00:23:44

если вызову документ .

00:23:48

get element твой ай ди да точно

00:23:52

я получу значение от элемента чей айди

00:23:54

имя в кавычках так что в данном случае

00:23:56

это функция get element б иди как бы

00:23:59

возвращает нам указатель на определенный

00:24:01

узел в деве

00:24:02

само дерево мы не рисовали но это все

00:24:04

равно что при получить этот

00:24:06

прямоугольник или тот прямоугольник

00:24:08

обращаясь к нему по уникальному

00:24:10

идентификатору какая от этого польза

00:24:13

оказывается что когда вы достучались до

00:24:15

этого узла этого прямоугольника на схеме

00:24:18

но он в свою очередь выдает вам целую

00:24:21

пачку свойств данных или пар

00:24:24

ключ-значение

00:24:25

один из ключей под названием целью

00:24:27

значение а либо не просто получается это

00:24:29

объяснить но в конце концов единственная

00:24:31

цель состоит в том чтобы получить из

00:24:34

этой иерархии string введенный

00:24:36

пользователем кое что мне тут не

00:24:38

нравится

00:24:39

вернее кое-что по-прежнему вызывают

00:24:41

вопросы допустим это все работает но

00:24:44

почему по вашему я возвращаю ложь при

00:24:46

вызове grid это выглядит диковато от

00:24:49

того что здесь два выражения через точку

00:24:50

с запятой угадайте

00:24:53

если я уберу возвращаемое значение что

00:24:56

будет как думаете тесто инстинкты play

00:24:59

вы могли бы повторить

00:25:02

откроется куча окон пожалуй могло бы

00:25:05

случиться и что-то такое что еще

00:25:07

отправить запрос куда на ту же страницу

00:25:12

на ту же страницу уже ближе к истине

00:25:15

хотя в отличие от прошлых примеров я не

00:25:18

указывал атрибут action который для

00:25:20

этого ужин но оказывается он есть по умолчанию

00:25:23

где указывать action все равно что

00:25:25

проставить пустые кавычки или имя самого

00:25:28

файла в данном случае дом 0 . html это

00:25:32

своего рода подразумевается что же будет

00:25:35

если я этого не сделаю это я сохраняю

00:25:37

тут я убрал вернуть ложь снова открываю

00:25:39

пример и обновляю его наверное вы

00:25:41

заметили я все время советую насест

00:25:44

fifty дискос если что-то работает криво

00:25:46

и браузер ведет себя странно достаточно

00:25:48

просто зажать shift и крикнуть обновить

00:25:50

это перезагрузит любой файл и без

00:25:52

использование кэшированных данных или

00:25:54

копий из памяти

00:25:55

а теперь я открываю один спектр

00:25:59

вкладку сеть а ставлю галку сохранить

00:26:02

лог потому что мне не хочется чтобы

00:26:03

строки исчезли как только я куда-то

00:26:05

перейду open in теперь я тут печатаю и

00:26:08

не нажимаю подтвердить отлично похоже

00:26:10

все по плану

00:26:11

написано холо энди нажимаю ok интересно

00:26:14

смотрите страница обновилась вернулась в

00:26:17

стартовой а вот юрл чуть поменялся в

00:26:19

конце появился ? стандартный признак

00:26:22

того что мы подтверждали данные а внизу

00:26:24

для пущей наглядности

00:26:25

видим http запрос и ответ со статусом

00:26:28

200 вернул меня сюда

00:26:30

но нам ведь не это нужно правда я не

00:26:32

хочу перезагружать всю страницу вместо

00:26:34

этого лучше вернуть ложь чтобы сократить

00:26:36

стандартный алгоритм браузера суть

00:26:38

которого заключается перезагрузки

00:26:40

страницы

00:26:42

предлагаю посмотреть пример посерьезнее

00:26:44

это дом версия 1 смотрите сюда не

00:26:48

страшно если вы не въезжаете в отдельные

00:26:51

строки кода но в чем принципиальное

00:26:53

отличие этой реализацией договоримся что

00:26:56

она работает так же результат не

00:26:58

меняется что я сделал по-другому объект

00:27:06

помещен внутрь скрипт определена до

00:27:17

функция определяется по другому

00:27:19

иначе говоря ее нет в теге form в

00:27:22

седьмой строке то есть в 8 тут больше

00:27:25

нет атрибута он сабмит

00:27:27

а в прошлом примере он был и потом я

00:27:29

описал код прямо здесь в конце говорил

00:27:32

вернут ложь и если это еще вас не сбило

00:27:35

с толку тоже скоро должно как было с

00:27:38

html

00:27:39

когда мы принялись совмещать его с с в

00:27:42

атрибутах стиля сразу началась путаница

00:27:44

и появились сомнения здесь тоже самое

00:27:47

если вы напишите код html а потом плюх

00:27:49

нити в него java script виде строки в

00:27:52

кавычках поддерживать его будет сложно

00:27:54

так ведь

00:27:55

начала вообще непонятно делать где-то

00:27:58

java script

00:27:59

то так что с точки зрения хорошего

00:28:00

дизайна было бы неплохо разделять html и

00:28:03

java script to ride для этого здесь мы

00:28:05

сделали вот так использовали

00:28:07

html только для разметки алмой антологию

00:28:11

версии 1 у меня есть только так и форм с

00:28:14

уникальным айди а здесь ниже я

00:28:17

воспользовался особым функционалом java

00:28:19

script который дает мне так называемую

00:28:21

анонимную функцию оказываются если я

00:28:24

вызову документ .

00:28:26

get element buy a и d для дома никита

00:28:29

как бы получу указатель на этот узел

00:28:31

дерева на так называемый так формой

00:28:34

тесла ложим я немного знаю html или

00:28:36

читал в сети что элемент форм

00:28:38

поддерживают целую кучу слушателей

00:28:40

другими словами бесконечный список

00:28:42

long который мы видели чуть раньше

00:28:44

commander я знаю из справочников что он

00:28:46

сам нет подходящей слушатель и зал для

00:28:49

элемента форм о афон если я это знаю то

00:28:54

могу поступить вот так взять этот узел

00:28:56

дерева элемент форм и получить доступ к

00:28:59

его свойству он совместными попали .

00:29:02

просто значит что это свойство вроде

00:29:04

особого значения внутри него

00:29:05

а какой тип данных я присваиваю свойства

00:29:08

он сабмит которая фактически является

00:29:10

переменной в этом узле дерева время чай

00:29:14

это поле внутри структуры какой у него

00:29:18

тип данных до эта функция ср оказывается

00:29:21

есть такое в печке и хотя мы вам не

00:29:24

говорили все тоже есть указатели на

00:29:26

функции то есть возможность присваивать

00:29:28

функции в качестве значений переменных

00:29:31

но мы не будем возвращаться к си пока

00:29:33

будем считать что здесь справа хоть это

00:29:36

и звучит странно

00:29:37

говорится и брал

00:29:39

дай мне функцию я даже не буду

00:29:42

придумывать ей имя потому что собираюсь

00:29:44

приписать назовем это адресом напрямую к

00:29:47

он сабмит иначе говоря браузер тебе

00:29:49

незачем запоминать как эту функцию завод

00:29:52

тебе надо просто знать где она находится

00:29:53

в памяти так что можно поставить здесь

00:29:56

знак равенства и не заморачиваться на

00:29:58

название типов у или грипп или еще чего

00:30:01

то а здесь просто вопрос оформления я

00:30:04

могу сдвинуть фигурную скобку простите

00:30:06

на следующую строку как обычно все

00:30:09

свифти но в java script обычно оставляют

00:30:12

открывающую фигурную скобку на той же

00:30:14

строке

00:30:15

дальше ничего интересного открывающая

00:30:18

фигурная скобка просто отмечает начало

00:30:19

функции функция такая же только я

00:30:21

вставил вернуть ложь внутри функции

00:30:24

потому что оказывается об этом вы можете

00:30:26

узнать только и справочников

00:30:28

что если функция которую вы присваиваете

00:30:30

обработчику он сорбит возвращает ложь

00:30:33

браузер знает что не нужно отправлять

00:30:35

форму на сервер а если она возвращает

00:30:38

истину тонкие и отправит выйти и скоро

00:30:41

мы разберемся зачем я . запятой после

00:30:43

второй фигурной скобки значит я закончил

00:30:45

описание функции то знает что делать как

00:30:47

только получишь подтверждение хорошо

00:30:51

реплей но смотрится по-прежнему коряво

00:30:54

что ещё мы можем сделать

00:30:56

оказывается версии 2 оно же последнее

00:30:58

давайте разберем am рискуем все дальше

00:31:02

испортить но есть оказывается такая

00:31:04

библиотека как джек вере диджей к вере

00:31:07

мегапопулярной библиотека java script

00:31:09

настолько что многие некоторые вообще

00:31:12

путают джек верят java-script почему

00:31:14

java скрипт сам по себе чересчур

00:31:16

многословен моей документ .

00:31:18

get element buy айди бла бла бла бла бла

00:31:21

бла получается очень длинный код но

00:31:24

чудак по имени джон резик который сейчас

00:31:26

работает в одном стартапе а вот создал

00:31:28

библиотеку джек вере достаточно давно

00:31:30

екимов и многие с тех пор внесли в нее

00:31:33

свой вклад

00:31:34

так что ее синтаксис немного изменился

00:31:37

посмотрите сюда

00:31:38

вам непременно предстоит с этим

00:31:40

столкнуться если вы возьметесь за

00:31:42

финальный веб-проект это альтернативный

00:31:45

вариант написания тоже функции с помощью

00:31:47

этого

00:31:48

ли отёки воды мы не станем разжевывать

00:31:50

каждую строку просто выделим пару

00:31:53

шаблонов и сколько в этом фрагменте кода

00:31:56

анонимных функций функция или безымянных

00:31:59

функций о

00:32:00

или лямбда-функцию 2 да это понятно даже

00:32:05

если вы еще плаваете в теме потому что

00:32:07

слово функция с круглыми скобками

00:32:08

встречается дважды и так что же этот код

00:32:10

делает людей and перспективе мы еще и

00:32:13

призовем онлайн справочнике на помощь

00:32:15

сейчас это просто означает что когда

00:32:17

документ готов нужно зарегистрировать

00:32:19

следующую функцию как обработчик

00:32:20

он сабмит для html элементов айдида и

00:32:24

когда все сделано надо вызвать эти две

00:32:27

строчки кода а тот как ни прискорбно еще

00:32:30

более длинный способ вернуть ложь мы

00:32:32

иметь мы об этом говорим потому что вы

00:32:34

будете встречать такой код в сети и не

00:32:36

стает его пугаться просто уясните себе

00:32:38

что java-script это распространенные

00:32:40

парадигмы потому я вам ее и показываю ну

00:32:43

ладно не будем задерживаться на этом

00:32:45

синтаксисе у вас есть какие-то вопросы

00:32:47

или соображения по этим примером хорошо

00:32:52

что ж давайте попробуем применить это на

00:32:54

практике aubade бросить его веб

00:32:56

страничка которая просто говорит привет

00:32:58

не вызывает интересное не поражает

00:33:00

воображение это будет не намного

00:33:02

красивее но хотя бы полезный вернемся к

00:33:05

папке и откроем скажем у пин-ап форм 0 .

00:33:08

html пусть это будет стране с

00:33:11

регистрацией в спорт секции университета

00:33:13

без каких-либо стилей и дизайна я хочу

00:33:15

зарегистрироваться здесь ввести пароль

00:33:17

я прямо условия и нажму регистрация и

00:33:20

сайт скажет вы зарегистрированы но не

00:33:22

совсем вроде как будто сработала но

00:33:25

давайте я обновлю

00:33:26

а теперь напишу нет мой реальный адрес

00:33:29

тебе не нужен да просто напишу тут мэлон

00:33:33

пусть будет раз два три 4 5 а теперь

00:33:38

просто потому что я дурак я веду тут раз

00:33:41

два три 4 5 6 7 8 9 и не поставлю

00:33:43

галочку вот так да здесь есть над чем

00:33:47

поработать как вы знаете или узнать всей

00:33:49

бог задачники можно написать код и вам

00:33:52

придется писать код на php защищенный от

00:33:55

таких ошибок пользователя потому что

00:33:57

пользователь не всегда готов

00:33:58

сотрудничать

00:33:59

он может не предоставить всей нужной

00:34:01

информации или дать ее не в том формате

00:34:03

сумму от это 7 задачники вы увидите что

00:34:06

можно задать несколько условий чтобы

00:34:07

электронный адрес был в стиле

00:34:09

имя пользователя собачка что-то . идею а

00:34:12

если нет то можно извиниться перед

00:34:14

пользователем как в седьмом задачники

00:34:15

или если не поставлена галочка в печь и

00:34:18

это тоже можно отследить и конечно если

00:34:20

не совпадают по роли как в реджистер .

00:34:22

печь перед отец задачника и это можно

00:34:25

засечь но засада в том что нам нужно

00:34:27

идти аж на сервер сообщать пользователю

00:34:29

об ошибке и если не использовать более

00:34:31

хитрой техники ему придется нажимать на

00:34:33

стрелку назад

00:34:34

более не правда было бы лучше как на

00:34:36

современных сайтах чтобы программа

00:34:37

реагировала быстрее сразу же иначе

00:34:40

говоря давайте перейдем к версии 1 хотя

00:34:42

она будет не ход то есть не лучше но у

00:34:45

нее хотя бы уже есть determine такой

00:34:47

функционал млн раз два три 4 5 раз два

00:34:50

три 4 5 6 7 8 9

00:34:51

не ставлю галку регистрация пароль не

00:34:53

совпадают и хотя всплывающее окно кривое

00:34:56

со временем мы заменим его чем-то вроде

00:34:58

bootstrap а увидите в седьмом задачники

00:35:00

это популярный библиотека мы уже засекли

00:35:02

что пароли не совпадают

00:35:04

ладно исправлю от лица от пользователя

00:35:06

скажем раз два три 4 5 раз два три 4 5

00:35:09

опять не принимаю условия вы должны

00:35:12

принять условия вещи с но зачем и puede

00:35:15

я заявлял уже что есть способ и мы даже

00:35:18

задавали вам в седьмом задачники

00:35:20

засекать подобные ошибки на стороне

00:35:22

сервера так почему я должен то же самое делать

00:35:25

java-script вот каковы доводы в пользу

00:35:28

того что вот увидите ещё больше все

00:35:31

усложнит и а может их и нет

00:35:39

есть варианты который может быть

00:35:45

интересно возможная уязвимость конечно

00:35:48

если вы не собираетесь обрабатывать

00:35:49

ошибочные данные пользователя может

00:35:52

лучше чтобы они вообще не попадали к вам

00:35:54

на сервер вернуть все обратно мол

00:35:56

устраните сначала бы проблемы

00:35:57

справедливо еще варианты не безграничны

00:36:01

верно этот код как мы уже говорили

00:36:03

интерпретируется на клиенте он не

00:36:05

доходит до сервера и значит не влияет на

00:36:07

загрузку емкость сервера пока мы тут

00:36:09

развлекаемся это не так принципиально у

00:36:12

меня тут всего один пользователь пока но

00:36:14

если это сайт приличного размера или

00:36:16

один из крупных как фейсбук

00:36:17

то чем больше людей вы удержите в ней

00:36:19

сервер тем лучше потому что у сервера

00:36:21

конечно ограниченный запас оперативной

00:36:23

памяти ограниченное количество гигагерц

00:36:25

ограниченное количество действий в

00:36:27

единицу времени delta так что чем больше

00:36:29

в мире людей которые стучаться к вам на

00:36:32

сервер и неправильно латиница тем лучше

00:36:34

вам избавит сервер от этой загрузки к

00:36:36

тому же особенно для мобильных устройств

00:36:38

если вы логинитесь нам май гарвард или

00:36:40

йельский нет айди такие сайты грузятся

00:36:42

запозданием так что ходит черт подери

00:36:44

целые секунды или даже 2 а потом о боже

00:36:47

если вы опечатались вам придется

00:36:48

кликнуть назад и все сначала в общем

00:36:51

будет задержка особенно при плохом

00:36:53

подключение к интернету

00:36:54

хоть на java script пикать который

00:36:56

работает на клиенте и потому не должен

00:36:58

мотаться туда-сюда при плохом соединение

00:37:00

мы получаем обратную связь почти

00:37:01

мгновенно

00:37:02

и теперь идем сюда открываем форму 0 и

00:37:05

смотрим на html и просто прочитаем что

00:37:09

здесь это элемент форм чей action равен

00:37:12

резистор . печка

00:37:13

я использую get чтобы видеть верил но

00:37:15

для паролей мы бы конечно поменяли его

00:37:17

на фтор и здесь поле ввода типа текст

00:37:20

еще одну поле ввода типа пароль и и вот

00:37:23

еще может быть вам не знакомо поле ввода

00:37:26

типа checkbox но это не java-script

00:37:28

это просто html который открывает файл

00:37:31

дали g-star . печь при

00:37:32

аверс

00:37:33

один где выскакивали окна что же

00:37:35

происходит там версии 1 которую я сейчас

00:37:38

открою я думал что мне хватит слов но

00:37:42

кажется они закончились версии 1 версии

00:37:50

1 вот она

00:37:52

версии 1 смотрите сюда не лучшая

00:37:54

реализация зато самое первое тот тегом

00:37:57

форм у меня здесь так скрипт атек скрипт

00:38:00

значит а у браузер здесь кусок кода

00:38:02

обычно на java script и теперь смотрите

00:38:04

что я делаю в строке

00:38:06

еле видно делай строке 32 есть

00:38:09

переменная форм дай-ка мне переменную

00:38:12

форм а потом вызове документ . get

00:38:16

element buy иди по айди регистрация вот

00:38:19

откуда это давайте прокрутим вверх

00:38:21

выходит что я присвоил элемента форм

00:38:23

спорный но содержательный идентификатор

00:38:25

регистрация так я получаю переменную

00:38:28

которая позволит мне достать этот узел

00:38:30

этот прямоугольник из дерева под

00:38:32

названием форм форм . он фармит

00:38:34

значит а у браузер регистрирую слушатель

00:38:37

событий для элементов формы

00:38:38

о иначе говоря когда форму подтвердят

00:38:41

выполни следующий код это имя ему не

00:38:43

нужно потому что зачем нам его имя

00:38:45

достаточно знать что выполнять значит

00:38:48

это анонимно или лямбда функция и эта

00:38:51

функция расписано на нескольких строках

00:38:53

ниже а теперь честно говоря даже если вы

00:38:55

никогда не писали код на java script

00:38:57

следуя логике сие печки

00:38:59

если форм . и mail.ru равно равно пустые

00:39:02

кавычки то есть если поле емайл пустой

00:39:04

ругаем пользователя заполните более

00:39:07

адреса а иначе если форм . password . в

00:39:10

илью пустой снова ругаем пользователя

00:39:12

заполните более пароля маунти гораздо

00:39:15

интересней становится ряда форм .

00:39:16

паспорт . вэлью

00:39:18

не равно форм . confirmation . вэлью у и

00:39:21

откуда взялась confirmation white крутим

00:39:23

вверх так я назвал это поле ввода

00:39:26

password

00:39:27

а вот это я назвал канфер меньшим я мог

00:39:29

бы назвать его послал его

00:39:31

или как угодно от просто проверяю логику

00:39:33

чтобы они совпадали иначе снова

00:39:35

обращаемся к мистеру бульон логическому

00:39:37

значению чек боксах

00:39:38

итак если ! то есть если не

00:39:42

форм . и гривен . эффект снова выговор

00:39:45

пользователю как вы еще убедитесь этот

00:39:48

синтаксис широко распространён

00:39:49

java-script такая форма записи через .

00:39:51

сначала идет объект потом его значит и

00:39:53

свойства например пароль перед потом

00:39:56

фактическое значение

00:39:57

смотрите еще раз вот поле ввода вот его

00:40:00

название password

00:40:01

а его значение любой который ведет

00:40:03

пользователь во всех этих случаях я

00:40:05

возвращал ложь а иначе я возвращаю

00:40:07

истину вот она силой принуждения когда вы

00:40:10

возвращаете ложь чтобы прервать действие

00:40:12

пользователя и заставить его выбрать или

00:40:14

напечатать заново опять иначе

00:40:17

возвращайте

00:40:18

истину я покажу вам еще один вариант

00:40:21

этой задачи просто чтобы вы получше

00:40:23

прониклись версии 2 all in forum 2

00:40:27

исполнить легким движением руки вот это

00:40:30

для любопытных версия на джейк вере

00:40:33

может вам захочется покопаться в этой

00:40:35

библиотеке давайте приступим ок теперь

00:40:37

они не а есть вопросы приторможу на

00:40:40

секунду потому что мы гнали долго и

00:40:42

быстро хорошо еще что весь этот код

00:40:45

более или менее один и тот же

00:40:47

из нового материала что такое о том что

00:40:48

такое прямоугольники что такое класс вы

00:40:50

что такое анонимная функция что такое

00:40:52

обработчик событий однако большая часть

00:40:54

счастью повторяется с нулевой неделе ну

00:40:57

ладно перейдём к интересной частью для

00:40:59

начала давайте откроем google карты

00:41:01

google maps

00:41:02

обратите внимание на мгновение на долю

00:41:05

секунды

00:41:06

смотрите что будет если я буду кликать

00:41:08

быстро спин-офф нет подключения в

00:41:10

гарварде такая скоростная что вам даже

00:41:12

не видно но что вы должны увидеть если я

00:41:15

буду нажимать и тащить очень быстро кто

00:41:18

смотрит нас в сети если вы избавите

00:41:20

скорость в два раза вам будет видно

00:41:22

лучше что было до того как я нажал и потащил

00:41:25

давайте так сделаем по-другому например

00:41:29

90210

00:41:30

правился подальше от нет снова слишком

00:41:32

быстро а как насчет disney world а вот

00:41:36

она ага что вы увидели на долю секунды

00:41:39

что-то вроде квадратов до placeholder и

00:41:41

вместо плитки на что это было гугл мэпс

00:41:43

отличный пример технологии под названием

00:41:44

уикс и вот где использование java script

00:41:47

становится особенно соблазнительным

00:41:49

раньше был такой сайт назывался metk вес

00:41:52

надо было сделать скриншот еще в

00:41:53

девяностых там если вам нужно было

00:41:55

посмотреть по карте выше приходилось

00:41:57

нажать на стрелку вверх которая вела на

00:41:59

следующий квадрат карты если вам нужно

00:42:01

было сдвинуть ее влево приходилось снова

00:42:03

нажать на стрелку двигать до другого

00:42:04

квадрата карты некоторые сайты так

00:42:07

работают до сих пор ну нет квест

00:42:08

исправился как и google maps и google а

00:42:10

вместо этого сегодня многие сайты

00:42:12

используют

00:42:13

ой ок ой акс также известный как

00:42:15

асинхронные сценарий java script или xml

00:42:18

это просто сложное название технологии

00:42:21

или техники которая позволяет браузеру

00:42:23

используя java script делать

00:42:25

дополнительные http запросы после того

00:42:27

как страница загружена

00:42:28

и часть бен но что это значит но вам бы

00:42:31

надоело если бы dml каждый раз когда вам

00:42:33

нужно проверить после требовал нажать

00:42:35

control r или commander или кнопку

00:42:37

обновить чтобы вся чёртова страница

00:42:38

перегружались правда она восстановилась

00:42:41

белый на секунду вы посмотрели на

00:42:42

дурацкий индикатор загрузки чтобы

00:42:44

посмотреть есть ли у вас новое письмо

00:42:46

всю страницу и юрл адрес пришлось бы

00:42:48

перегружать на джимейл работает как-то

00:42:50

иначе так когда вы получаете новое

00:42:52

письмо отжимал как ведет себя экран

00:42:54

держу оно просто появляется сверху да она

00:42:56

волшебным образом появляется верхней

00:42:58

строкой в списке на самом деле это все

00:43:00

довольно сложно действительно если вы

00:43:01

подумайте об этом дереве хотя но и

00:43:03

простое и джимейл пришлось бы заглянуть

00:43:06

в код чтобы убедиться в этом скорее

00:43:08

всего используют html таблицу или

00:43:11

маркированный список виде которого он

00:43:12

выдает сообщение во входящих если

00:43:14

представить что это дерево памяти то при

00:43:17

использовании джи mail происходит что-то вроде этого когда

00:43:20

google поймет ой вам новое сообщение

00:43:22

админ но он не станет

00:43:24

перестраивать все дерево скорее он

00:43:27

найдет узел дерева который отличается

00:43:29

входящие и просто вставить новый узел

00:43:31

подобно задание из 5 задачника где вы

00:43:34

вставляли узлы втап хэш-таблицу

00:43:36

тоже делают и google его код java script

00:43:39

просматривает дерево выясняет где часть

00:43:42

окна ответственное за входящие и

00:43:43

вставляет новую строку

00:43:45

новая строка это просто один или

00:43:47

несколько новых узлов в дереве в общем

00:43:49

аякса особая техника созданная

00:43:52

специально для этого при посещении url

00:43:55

как бы долго он не грузился после полной

00:43:58

загрузки страницы

00:43:59

но вы все еще можете подтянуть новые

00:44:01

данные из интернета будь то сообщения

00:44:02

или плитка карты вынуть их из закромов

00:44:05

и вставить страницу так чтобы

00:44:07

пользователю не приходилось ждать также

00:44:09

работает messenger фейсбук какие угодно

00:44:11

сайты мог стать и даже так я хочу

00:44:14

сказать что это ужасно раздражает

00:44:15

последнее время если я начинаю искать

00:44:17

котиков с точки зрения пользователя это

00:44:19

кошмар он предлагает варианты вместо

00:44:21

меня все что он делает и url не менялся

00:44:24

с тех пор как я начал набирать текст но

00:44:25

что происходит с сетью

00:44:27

меня поступая интересно что происходит

00:44:30

сетью яркий и еще более странно ладно

00:44:34

давайте посмотрим код элемента а для

00:44:37

этого идем во вкладку сеть и попробуем

00:44:39

объяснить все по-научному без котиков и

00:44:41

пока я набираю дословно котики и вот что

00:44:46

происходит

00:44:49

не буду я сюда нажимать хорошо значит

00:44:53

здесь внизу что мы видим после каждого

00:44:55

символа который я ввожу 1 нижнем уровне

00:44:59

что происходит после каждого знака

00:45:00

введенного с клавиатуры да точно символы

00:45:05

попадают в google один за другим на

00:45:07

своем сервере они строят string который

00:45:09

представляет все что я уже напечатал

00:45:11

и каждый раз когда я добавляю знак они

00:45:13

замешивают свой секретный алгоритм

00:45:15

поиска и угадывают эту или не эту

00:45:17

страницу с котиками я им

00:45:19

виду в каком-то смысле это упрощает мне

00:45:21

жизнь потому что даже не нужно

00:45:23

заканчивать свою мысль нити к конечно

00:45:25

штука полезная автозаполнение в принципе

00:45:27

если их алгоритма достаточно хороши и

00:45:29

если мои запросы достаточно очевидны мне

00:45:32

не нужно записывать слова они сами

00:45:33

подскажут что я хочу найти так что

00:45:35

мгновенный поиск google это всего лишь

00:45:37

техника ajax использование кода который

00:45:40

позволяет

00:45:41

запросить дополнительный контент через

00:45:43

браузер за кадром используя этот новый

00:45:45

язык java script .

00:45:47

итак у нас осталось еще пару минут

00:45:49

давайте позовем на сцену моего приятеля

00:45:51

колтон авто что раз очень весело прошла

00:45:53

презентация технологией калык которым вы

00:45:56

проявили интерес у своих финальных

00:45:57

проекта хотя мы решили что можно

00:45:59

использовать добровольцы чтобы

00:46:00

продемонстрировать вам дополнение

00:46:02

которое позволит до эту руку я увидел

00:46:04

первый иди сюда очень здорово молодец

00:46:07

сейчас мы подключим это к монитору

00:46:09

описаны как тебя зовут чтобы все знали я

00:46:12

и fa fa fa fa fa fa

00:46:14

рад знакомству хорошо давай все

00:46:16

приготовил выйди сюда на середину вместе

00:46:18

с картоном в руках у колтона пульт

00:46:20

управления и вместо того чтобы стоять в

00:46:22

этом трехмерном мире оглядываясь по

00:46:23

сторонам как колтон в прошлый раз его

00:46:25

будет сегодня ходить вперед назад

00:46:27

налево-направо как джойстик nintendo или

00:46:29

x-box

00:46:31

я был стоят где-то здесь но все возможно

00:46:34

подарить его ладно надевая эту штуковину

00:46:38

давай я переключу картинку на монитор и

00:46:43

при тушим свет от инна колтон я встану

00:46:46

тут рядом с тобой расскажешь но микрофон

00:46:48

что происходит в делай вот он разумеется

00:46:51

мы сейчас и загружаем окулус оператив не

00:46:54

оперативную систему а основную программу

00:46:56

из которой есть доступ ко всем играм и

00:46:59

приложениям вашей коллекции сейчас она

00:47:02

скажет коснитесь тачпада чтобы начать

00:47:04

дочп этом находится справа на гарнитуре

00:47:07

можешь нажать у ей одну вот и поехали

00:47:13

его все видит в гораздо лучшем качестве

00:47:16

но картинка идет по вайфай теперь тебе

00:47:18

нужно посмотрите верхний правый угол

00:47:20

экрана да вот эта игра в самом верху

00:47:23

справа когда выберешь ее еще раз нажми

00:47:26

на touchpad похоже этот дуэт halls

00:47:29

а теперь появляется

00:47:33

давай я пока подержу твои очки и так я

00:47:38

отдал ему гарнитуру он может управлять

00:47:41

игрой

00:47:42

может передвигаться в пространстве и все

00:47:44

такое посмотри наверх

00:47:45

там написано новая игра вперед

00:47:48

приступаем теперь ты сможешь управлять

00:47:50

собой с помощью гарнитуры

00:47:52

как только игра загрузится возможно

00:47:58

будет страшновато самое время сказать об

00:48:02

этом да ладно проверю можешь ли ты

00:48:05

передвигаться получается отлично

00:48:08

посмотри вниз у тебя есть карта на карте

00:48:10

видно где ты находишься можешь осмотреть

00:48:13

комнату

00:48:14

можешь полностью повернуться вот так

00:48:16

поворачивайся смотри налево по моему там

00:48:21

на бочке лежит что то что можно

00:48:22

подобрать or как убрать карту с дороги

00:48:25

смотри выше

00:48:26

просто подними голову вот так получилось

00:48:28

пройди вперед и повернись смотри еще

00:48:35

левее смотри налево продолжаете влево так а

00:48:41

сюда да иди к ней с помощью гарнитуры

00:48:46

вот так сейчас появится подсказка

00:48:48

подбери вот она подбери флакон давай

00:48:51

выбираться из этой комнаты

00:48:53

эдикта и двери теперь тебе нужно нажать

00:48:57

там подсказка

00:48:58

нажать на кнопку чтобы она открылась

00:49:00

давай нажимай на кнопку вот она

00:49:03

открывается хорошо молодец и так мы

00:49:06

выходим из комнаты дальше давай думай

00:49:11

сам

00:49:12

посмотрим что ты еще найдешь и я не хочу

00:49:19

в эту темную комнату а стоп как мне

00:49:22

пройти через темный зал

00:49:23

нет лучше пойду обратно все хорошо там

00:49:31

еще полезные предметы подбери похоже на

00:49:34

монетке а это отмычка

00:49:35

если найдешь запертую дверь сможешь ее

00:49:38

использовать страшно пока нет ладно

00:49:47

притворись до

00:49:48

войди в роль будто ты там стоишь а если

00:49:51

повернешься к этому надо привыкнуть но

00:49:54

все логично а пока и поиграет это может

00:49:56

продолжаться целый день предлагаю

00:49:58

прокрасться отсюда на выход но у нас

00:50:00

есть еще две пары если вы захотите пойти

00:50:02

поиграть остальным увидимся в следующую

00:50:04

среду и спасибо за день волонтера

00:50:06

переведено и озвучено студией вверх

00:50:10

дайвер по заказу java rush

00:50:13

[музыка]

00:50:16

закрепляю байонет тпл фильтры низких

00:50:19

частот уже поменял да ты вообще делаешь

00:50:21

ну каждая из них смотри я покажу тебе к

00:50:25

примеру эту

00:50:26

видишь вот здесь по моему я наелся

00:50:28

хочешь еще не спасибо да ладно угощайся

00:50:38

другого цвета по сути эта штука

00:50:41

настраивает цвета

00:50:44

переведено и озвучено студией вверх

00:50:47

дайвер

Описание:

Доп. материалы и задачи к лекции - https://javarush.com/quests/lectures?quest=QUEST_HARVARD_CS50&level=9 Весь курс CS50 - https://javarush.com/quests/QUEST_HARVARD_CS50 CS50, или Computer Science 50 — это курс Гарвардского университета, посвящённый основам программирования. Тема восемнадцатой серии цикла — введение в ДжаваСкрипт и программирование на стороне клиента. Впервые в истории студенты двух учебных заведений — Гарварда и Йеля — при помощи современных технологий параллельно проходят обучение на курсе.

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "18. CS50 на русском: Лекция #18 [Гарвард, Основы программирования, осень 2015 год]"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "18. CS50 на русском: Лекция #18 [Гарвард, Основы программирования, осень 2015 год]" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "18. CS50 на русском: Лекция #18 [Гарвард, Основы программирования, осень 2015 год]"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "18. CS50 на русском: Лекция #18 [Гарвард, Основы программирования, осень 2015 год]" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "18. CS50 на русском: Лекция #18 [Гарвард, Основы программирования, осень 2015 год]"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "18. CS50 на русском: Лекция #18 [Гарвард, Основы программирования, осень 2015 год]"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.