JavaScript для начинающих | Введение

Это вводный курс по JavaScript для начинающих. В плане очередности это третий по счету предмет, который необходимо знать грамотному веб-разработчику. Первые два — это HTML и CSS, разумеется. Вэлкам!

Язык сценариев JavaScript был разработан Бренданом Эйхом (Brendan Eich) в 1995 году, как одно из расширений для браузера Netscape Navigator 2.0, о котором мало уже кто помнит. Но сам язык живет и процветает.

В отличие от HTML и CSS это уже настоящий язык программирования. Можно сказать, что HTML и CSS — это только цветочки, а вот JavaScript — такие себе ягодки ягодки. Различаются они принципиально. HTML — банально разметка (или иначе — структура сайта), а CSS — внешний вид этой разметки. А вот JavaScript позволяет создавать именно программы, которые предписывают компьютеру пользователя выполнять активные действия.

Поэтому, если вы еще не знаете даже таких простых вещей, как HTML и CSS, то за JavaScript вам браться явно рановато.

Но пугаться не стоит. В отличие от старших братьев, типа Java или C++, JavaScript довольно простой язык. Освоить его может любой начинающий веб-разработчик. Во всяком случае, научиться им пользоваться совсем не трудно.

Программы, которые создаются на JavaScript, называются сценариями или скриптами. Следует четко понимать, что сценарии эти выполняются только на компьютере пользователя, а не где-то в сети. Поэтому во многом они зависят от настроек того же браузера, которые выставил у себя пользователь. Если он намеренно отключил у себя работу скриптов, то они попросту не сработают.

Зачем нужен JavaScript?

Зачем вообще использовать какие-то скрипты на стороне пользователя? Ключевое слово здесь — обработка событий. Таким событием может стать, например, клик по кнопке в форме отправки данных. Для этого предусмотрены специальные атрибуты, начинающиеся с on.

Примеры таких атрибутов:

onclick — одиночный щелчок мышью;
onmouseover — размещение курсора мыши в области, которую занимает какой-либо элемент страницы;
onfocus — выделение (фокусировка) элемента. Например, поля формы, куда установлен курсор.

Окей, скажете вы, а зачем использовать какой-то JavaScript для обработки той же формы? Есть же php для этого. Заполнил, что требуют, и отправил себе с миром.

Все верно, JavaScript не обрабатывает данные, это делает php на удаленном сервере.

Но что если пользователь не все заполнил? Если, к примеру, пропустил обязательные поля, помеченные звездочкой * . Что тогда? Тогда с сервера к нему прилетит новая страница, на которой будет написано, какой он лох.

Принципиальная разница тут вот в чем: без использования JavaScript при отправке формы запрос будет в любом случае отправлен на удаленный сервер, даже если форма заполнена неправильно или не полностью. И от сервера будет получен ответ с ошибкой. Пользователю придется все вводить заново. И так каждый раз. А если применить JavaScript, то страница с формой не будет отправлена на сервер до тех пор, пока пользователь не введет правильные данные.

То есть, скрипт, как говорится, «не отходя от кассы», прямо в браузере пользователя проверит форму и выдаст сообщение в случае неправильного или недостаточного ее заполнения. Здесь он выступает как контролирующий орган.

Согласитесь, что это гораздо удобнее, занимает меньше времени и, безусловно, съедает меньше трафика. А в случае с мобильным подключением к сайту это тем более существенно.

Таким образом, сценарии JavaScript — это удобные помощники, которые не только проверяют введенные данные, но и выполняют еще массу полезных действий на стороне пользователя. Взять, к примеру, те же выпадающие списки меню или сворачиваемые окна, всевозможные слайдеры и эффектные галереи картинок, подсветка активных полей формы или всплывающие подсказки на страницах сайта и многое другое.

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

— Ха! Так это же все можно сделать и на чистом CSS3 без всяких скриптов!

Согласен, кроме слова «все». Все да не все. Всякие свистелки и перделки можно и на чистом CSS3 сотворить, но проверить правильность заполнения формы CSS никак не может. А кроме этого существует еще тысячи способов использовать скрипты JavaScript для более серьезных вещей. Иначе умные люди не стали бы впихивать JavaScript в тот же Bootstrap или создавать мегаполезную библиотеку скриптов jQuery.

Как включить JavaScript в страницу сайта

Существует несколько вариантов подключения JavaScript на страницах сайта.

1. Небольшой код JavaScript можно внедрить непосредственно в тегах HTML. Например, следующий код будет выводить в поле формы текст «Ведите ваш E-mail», который при установке туда курсора будет автоматически исчезать, чтобы не мешать пользователю:

<input type="text" value="Введите ваш E-mail" onblur="if(this.value=='') {this.value='Введите ваш E-mail';}" onfocus="if(this.value=='Введите ваш E-mail') {this.value='';}" />

Как видите, нигде специально не обозначено, что это JavaScript, но браузеры это понимают и обрабатывают соответственно написанным командам.

Однако JavaScript активно использует те же символы, что применяются в HTML. Например, угловые скобки или прямые кавычки. Чтобы браузер не ошибся в интерпретации этих знаков, обычно сценарии записываются между специальными тегами:

<script></script>

2. Чуть более крупный код сценария JavaScript можно добавить непосредственно в том месте страницы, где ему надлежит срабатывать. Как было указано выше, его мы обрамляем тегами <script></script>.

Но это не всегда удобно, а в некоторых случаях и чревато.

К примеру, если пользователь отключил в своем браузере работу скриптов, то страница может «зависнуть» на этом месте и не загрузиться полностью. Поэтому обычно рекомендуется размещать скрипты в самом низу страницы перед закрывающим тегом </body>. В этом случае, даже если скрипт не сработает, то сама страница загрузится целиком и без лишних задержек.

3. Самый правильный способ подключения скриптов JavaScript — это вынести их в отдельный файл с расширением .js и подключить к странице посредством ссылки, как и в случае с листом стилей CSS, вынесенным в отдельный файл. Пример:

<script src="myscript.js"></script>

Кстати, подключать его тоже рекомендуется в самом низу страницы перед закрывающим тегом </body>. Это ускоряет загрузку страниц в целом.

На этом ознакомительный экскурс в JavaScript заканчиваем. В следующий раз напишем наш первый сценарий на этом замечательном языке. Подпишитесь на обновления блога Вебсовет, чтобы ничего не пропустить!

www.websovet.com

уроки с заданиями, примеры и решения

Выберите тему:

  
В сети Интернет Вы найдете довольно много материалов, посвященных языку. Наш ресурс не предполагает полное изложение информации, касающейся языка. Но JavaScript уроки, изложенные на сайте, наверняка могут быть полезными как для начинающих обучение, так и непосредственно для учителей и преподавателей.

Итак, приступим.

Для начала разберем, javaScript – что это такое и зачем он необходим в html?
Javascript — это алгоритмический язык программирования.

Рассмотрим схему взаимодействие браузера с сервером — клиент-серверную схему. Принцип работы строится на схеме запрос-ответ. Мы вбиваем адрес в строке адреса браузера, браузер отсылает запрос на сервер: «необходим такой-то ресурс». Сервер обрабатывает запрос и выдает ответ в виде html-страницы.

Схема хороша, пока на странице необходимо отображать обычные статические данные. Но в современное время страницы максимально интерактивны и позволяют всячески взаимодействовать с сервером. В html есть для этого элементы управления – кнопки, списки, переключатели и т.д. Набор элементов мы можем поместить на страницу и с помощью кнопки отправить их на сервер.

Но недостаток схемы в том, что взаимодействие клиент-сервер занимает какое-то время. И если мы хотим сделать интерактивную страницу, которая бы реагировала быстро на действия пользователя, то нам эта схема не подходит. И, кроме того, во многих случаях большинство действий со страницей и ее объектами можно выполнить на компьютере пользователя: например, подсветка пункта по наведению мыши. Зачем для подсветки загружать сервер, заставляя его заново формировать и выдавать страницу? Можно это сделать на клиентском компьютере.

Однако, язык html – декларативный язык, и он не может выполнять алгоритмические конструкции. Поэтому в середине 90-х годов прошлого века возникла идея встроить в html еще один язык, простой, и с его помощью выполнять простые программы без запроса-ответа к серверу. Идея появилась у программистов компании Netscape Communications. Они разработали javaScript — алгоритмический язык программирования и встроили в свой браузер Netscape Navigator. Назывался язык lifeScript (живой сценарий).

В середине 90 была популярна платформа java. Данный язык был настолько новаторским и популярным, что бытовало мнение, что в скором времени все будут программировать на java. Поэтому программисты Netscape переименовали свой lifeScript в javaScript и сделали синтаксис похожим, позаимствовав некоторые основные конструкции. Однако, javaScript и java — это два совершенно разных языка. В дальнейшем поддержку javaScript добавили и в другие браузеры. Стали разрабатывать и принимать стандарты javaScript (ECMA).

Итак, кратко по истории JavaScript:

  • Разработан в Netscape Communications как язык сценариев для обозревателей Netscape Navigator, начиная с версии 2.0 (декабрь 1995 ) (на основе языка Java от Sun Microsystems). Язык LifeScript =>JavaScript
  • К разработке подключается корпорация Microsoft, чьи обозреватели Internet Explorer поддерживают JavaScript, начиная с версии 3.0. В Internet Explorer JavaScript носит название Jscript
  • В июне 1997 г. была принята первая версия стандарта под названием ECMAScript (ECMA-262) – официальное название JavaScript.

labs-org.ru

Минипроекты JavaScript для новичков | Трепачёв Дмитрий

Перед решением задач изучите теорию к данному уроку.

ВНИМАНИЕ
Вместо задач этого урока вышел отдельный спец курс:
http://theory.phphtml.net/courses/javascript/practice/1/c.html
http://theory.phphtml.net/courses/javascript/practice/1/h.html
Меняйте число в адресе, будете попадать на следующий урок, всего 13 уроков (дз есть не везде).

ПЕРЕД этими уроками посмотрите урок на анонимные функции (он ниже по учебнику).

Задачи для решения

Урок

Реализуйте калькулятор. Должны быть кнопки цифр и операций. По нажатию
на кнопку ‘=’ должен посчитаться результат. Совет: используйте фунцию eval.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте игру крестики-нолики. Играет два человека, на одном поле по очереди.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте тест с вопросами. В каждом вопросе есть 5 вариантов ответов (один из них правильный)
— это будет 5 радио
кнопочек. После того, как человек ответит на все вопросы — покажите ему результат —
на какие вопросы он ответил верно, не верно, не дал ответ. Покажите также
процент правильно отвеченных вопросов.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Реализуйте тест, в котором показывается один вопрос, 5 чекбоксов для
ответа (может быть несколько правильных ответов). Под чекбоксами ссылка ‘следующий вопрос’.
По нажатию на эту ссылку вместо текущего вопроса показывается следующий.
Когда вопросы заканчиваются, в последнем вопросе будет стоять ссылка не ‘следующий вопрос’,
а ‘показать результат’.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Реализуйте опрос. В нем будет 5 вариантов ответа — 5 радио радио кнопочек,
а также инпут ‘свой ответ’. Если в инпуте есть ответ — значения радиокнопочек игнорируются.
Реализуйте кнопочку ‘пройти опрос заново’. Опрос можно проходить много раз, результаты
заносятся в массив и после прохождения опроса показывается процент ответов на каждый вопрос.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте чеклист. Должен быть инпут с добавлением задачи,
а над ним — список с задачами.
Возле каждой задачи чекбос. Если нажать на чекбокс — задача становится
выполненной, перечеркивается и становится серого цвета, чекбокс при этом пропадает.
Справа от любой задачи должен быть крестик для удаления этой задачи.

Задачу также можно поредактировать, если сделать двойной клик по ней —
в этом случае вместо пункта списка появляется инпут с текстом задачи, можно
поредактировать текст задачи, нажать Enter и задача изменится. Инпут
при этом исчезнет.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте автодополнение. Суть: дан, к примеру, массив стран. Дан инпут.
Когда вы вводите первые буквы страны под инпутом появляется выпадающий
список, в котором расположены страны, которые начинаются на те буквы, которые вы ввели.
Чем больше букв вы вводите — тем меньше стран в списке. Страну можно выбрать,
кликнув по ней мышкой — в этом случае ее название появится в инпуте.
Список стран храните в массиве.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Сделайте игру. Суть — дана таблица с числами, распаложенными в случайном
порядке в ячейках таблицы. Числа идут по порядку от 1 до N. Все числа разного размера и цвета.
Играющему необходимо по порядку кликать по числам — сначала 1, потом 2 и так далее
до N. Когда он кликает на правильную ячейку — она активируется и делает красный фон
(предыдущие правильные ячейки не снимают выделение). Должен тикать таймер, на игру
дается M секунд. Если не успел найти все числа по порядку — проиграл.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте попап. Суть: когда пользователь прокручивает страницу вниз на N
пикселей — появляется баннер поверх содержимого.
Этот баннер можно закрыть на крестик и он пропадет.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Решите предыдущую задачу, но при условии, что баннер появлятся не по прокрутке,
а через N секунд после захода пользователя на страницу.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте календарик сдедующего вида:
показаны дни текущего месяца (в ряд), слева стрелка ‘предыдущий месяц’,
справа ссылка ‘следующий месяц’. Сверху показан год и месяц, который мы смотрим.
Если мы смотрим текущий месяц текущего года — текущий день должен быть как-то выделен.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Реализуйте квадратный календарик (как в винде).

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте органайзер. Он представляет собой календарик,
нажимая на даты которого можно увидеть список задач, запланированных
на этот день.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Реализуйте вкладки — нажимая на каждую вкладку мы будем видеть
ниже текст, соответствующий этой вкладке.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Реализуйте аккордион (погуглите, что это).

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

Урок

Дана таблица. В верхнем ряду th. Сделайте так, чтобы по нажатию
на определенный th ряды таблицы сортировались по значениям этого столбца.

Образец того, что должно получится, он же ответ в исходном коде:

Вы можете открыть этот пример в отдельной вкладке браузера.

code.mu

Уроки по JavaScript для начинающих

Уроки по JavaScript для начинающих на BUNKERBOOK.RU.

Язык программирования JavaScript

Язык сценариев — это язык программирования, который интерпретируется во время выполнения, а не компилируется в машинный код. Язык может быть выполнен по-разному — интерпретирован или скомпилирован (для байт-кода или машинного кода). Традиционно, когда речь идет о различиях в сценариях и программировании, интерпретируются языки сценариев и компилируются языки программирования. В принципе, все языки сценариев — это языки программирования. Теоретическая разница между ними заключается в том, что языки сценариев не требуют этапа компиляции и скорее интерпретируются.

Спектр языков сценариев в диапазоне от очень маленьких и очень предметно-ориентированных языков для общего назначения языков программирования , используемых для сценариев. Основным интерфейсом сценариев, разработанным в W3C, является DOM, объектная модель документа, которая позволяет программам и сценариям динамически получать доступ и обновлять контент, структуру и стиль документов. Спецификации DOM составляют ядро DHTML . Сценарии могут сделать веб-страницы более динамичными. Например, без перезагрузки новой версии страницы она может допускать внесение изменений в содержимое этой страницы или разрешить добавление содержимого или отправку содержимого с этой страницы.

Языки сценариев становятся все более популярными из-за появления веб- приложений. Хотя сценарии широко используются в мире программирования, они в последнее время стали более тесно связанными с World Wide Web , где они широко используются для создания динамических веб-страниц. В то время как технически существует много языков сценариев на стороне клиента, которые могут использоваться в Интернете, на практике это означает использование JavaScript. Приложения для JavaScript распространяются от интерактивных веб-сайтов к Интернету Вещей, что делает его отличным выбором для начинающих и опытных разработчиков, желающих изучить новый язык программирования.

 Введение в JavaScript

 Основы JavaScript

 JavaScript: объектная модель документа

 Программирование на JavaScript

 Вопросы и ответы по собеседованию


By kametoh
Уроки по JavaScript




This ключевое слово является одним из самых запутанных и непонятных частей JavaScript. Ключевое слово this this ведет себя по-разному в JavaScript по сравнению с другим языком. В объектно-ориентированных языках ключевое слово «this» относится к текущему экземпляру класса. В JavaScript значение этого определяется главным образом контекстом вызова функции и где он вызывается. В большинстве случаев значение



By kametoh
Уроки по JavaScript




Существует множество способов блокировки объекта в соответствии с вашими потребностями. Object.freeze() Object.seal() Object.preventExtensions() Object.freeze() Чтобы предотвратить модификацию объектов JavaScript, одним из методов является использование Object.freeze(). Замораживание объекта не позволяет добавлять новые объекты к объекту и не позволяет удалить или изменить существующие свойства. Любая попытка сделать это потерпит неудачу, либо тихо, либо выбросив исключение TypeError (чаще




By kametoh
Уроки по JavaScript




В JavaScript у нас есть функции, и у нас есть аргументы, которые мы передаем этим функциям. Но как JavaScript обрабатывает то, что вы проходите, не всегда ясно. Нет никакой «передачи по ссылке» для любой переменной в JavaScript. Все переменные и аргументы назначаются значением, но для объектов значение переменной является ссылкой. Из-за этого, когда вы передаете




By kametoh
Уроки по JavaScript




Класс похож на план. Классический подход к созданию объекта состоит в том, чтобы определить структуру объекта, используя объявление CLASS и создать экземпляр этого класса для создания нового объекта. Объекты, созданные таким образом, имеют свои собственные копии всех атрибутов экземпляра, а также ссылку на единственную копию каждого из методов экземпляра. Наследование — это самое узкое соединение,




By kametoh
Уроки по JavaScript




Функциональное программирование вращается вокруг идеи о том, что программа состоит из набора функций, и они следуют определенным правилам. Это парадигма программирования, означающая, что это способ мышления о создании программного обеспечения, основанный на некоторых фундаментальных, определяющих принципах. Популярными языками программирования, поддерживающими методы функционального программирования, являются Python, Ruby и многие другие. Функциональное программирование — это чистая, надежная


bunkerbook.ru

Javascript для начинающих — уроки с нуля

Современный мир веба очень сложно представить без JS. JavaScript – это душа веб-сайта, так как все интерактивные действия выполняет JS. JavaScript является встроенным компонентом в веб-программировании, поэтому его не нужно устанавливать или настраивать.

JavaScript является преимущественно клиентским языком, обычно использующимся для работы на стороне клиента. С его помощью можно разрабатывать приложения с самым разнообразным функционалом. Это может быть: аналог механических часов, различная анимация, графические эффекты и другое. Ничего не мешает создать практически всё веб-приложение на JS.

Сегодня сложно переоценить роль JavaScript в вебе. Согласно статистике w3techs, сегодня свыше 95% сайтов применяют JS. Оставшиеся 5% — это преимущественно сайты визитки и одностраничники. Невероятная популярность языка делает его одним из самых желанных для изучения и выгодных в плане дальнейшего трудоустройства.

Основан в 1995 году компанией Netscape. Изначально предназначался в роли языка сценариев для их браузера Navigator 2. В начале пути носил название LiveScript. Разработчики воспользовались волной популярность Java и сменили название на JavaScript. Тем не менее по сей день их часто путают начинающие разработчики. Многие заявляют, что это одинаковые языки или имеют малозначимые отличия. Это совсем не так, JS и Java – совсем разные языки. Единственная схожесть в них – названия.

Изначально JS не имел большинства из сегодня доступных функций, его возможности были крайне скудными. Главной целью являлось лишь добавление небольшого интерактива странице. Разработчики хотели, чтобы результаты после нажатий на кнопки обрабатывались в пределах одной страницы.

По мере развития веба, вместе с релизом Node.js, JavaScript получил карт-бланш на активное развитие множества функций. Сегодня JS предоставляет намного больше возможностей для разработчика, чем когда-либо.

Сейчас JavaScript может использоваться и в качестве серверного языка. Прежде JS всегда рассматривался исключительно в качестве клиентского языка, работающего исключительно в браузере пользователя. Для работы с сервером приходилось пользоваться чем-то вроде Java, PHP, ASP.NET, Ruby. За счёт Node.js появилась возможность оперировать запросами на сервере посредством JS.

Несмотря на наличие возможности реализовать серверную часть на Node JS, большая часть веба использует для этого PHP. Это не только результат привычки, но и отсутствия необходимости в другом языке.

В современном мире бум разработки под мобильные устройства, где нашёл себе место и JavaScript. Это способствует повышение производительности мобильных гаджетов и повсеместное использование HTML5. JS позволяет реализовать самые разнообразные возможности даже в мобильных приложениях.

За счёт выхода новых версий Windows от 8 и новее, JavaScript стал использоваться для разработки десктопных приложений под перечисленные операционные системы. Иными словами, JS давно вышел за рамки веб-языка, который используется исключительно браузером.

Многое из того, что раньше называли фантастикой, сегодня успешно реализуется в JavaScript. Это особенно наглядно видно в популярном направлении программирования под IoT. Таким образом JS можно успешно применять для разработки программ вод все существующие умные устройства, поддерживающие работу с интернетом. Сегодня JS встречается практически везде, куда только добралась IT. Это в действительности популярный и невероятно функциональный язык, который планирует развиваться и дальше.

Ещё во время появления языка, браузеры Netscape и IE создали несколько отличающихся реализаций языка. Для унификации всех реализаций и восстановления общего знаменателя, разработали стандарт ECMAScript (управление стандартизацией взяла на себя ECMA). Если где-то увидите термин ECMAScript – это взаимозаменяемый синоним с JavaScript.

Уже сегодня ECMA разработала пару стандартов для JS, они удачно отражают прогресс в разработке самого языка. На сегодня актуальным считается ECMAScript 6 версии от 2015 года. Тем не менее многие браузеры ещё далеки от полной реализации данного стандарта. На завершение его внедрения может уйти ещё несколько лет. В силу этой причины довольно часто рассматривается стандарт ES5, как тот, который полностью поддерживается современными браузерами.

JavaScript – это интерпретируемый язык, то есть он выполняется посредством интерпретатора. Он получает все необходимые инструкции из JS и следует им, выполняя или интерпретируя код.

Инструменты разработки

Для создания кода на JS нужно всего лишь текстовый редактор и браузер, в котором можно тестировать результат. Один из простых и функциональных редакторов текста, который бы я советовал к использованию — Notepad++. Вообще можно использовать любой удобный.

JavaScript поддерживает и ряд сред разработки, вроде Visual Studio, WebStorm, Netbeans. Они помогают создавать код значительно быстрее и проще.

Дополнительные курсы

На нашем сайте вы можете найти дополнительные курсы по языку JavaScript. Все курсы представлены на этой странице.

itproger.com

Основы JavaScript для начинающих — Видеоуроки

  • Урок 1.
    00:00:29

    Welcome

  • Урок 2.
    00:04:41

    What is JavaScript?

  • Урок 3.
    00:03:10

    Setting Up the Development

  • Урок 4.
    00:03:48

    JavaScript in Browsers

  • Урок 5.
    00:02:05

    Separation of Concerns

  • Урок 6.
    00:01:51

    JavaScript in Node

  • Урок 7.
    00:05:37

    Variables

  • Урок 8.
    00:01:45

    Constants

  • Урок 9.
    00:03:11

    Primitive Types

  • Урок 10.
    00:03:18

    Dynamic Typing

  • Урок 11.
    00:05:15

    Objects

  • Урок 12.
    00:04:19

    Arrays

  • Урок 13.
    00:04:40

    Functions

  • Урок 14.
    00:03:17

    Types of Functions

  • Урок 15.
    00:00:41

    JavaScript Operators

  • Урок 16.
    00:03:40

    Arithmetic Operators

  • Урок 17.
    00:01:45

    Assignment Operators

  • Урок 18.
    00:02:02

    Comparison Operators

  • Урок 19.
    00:03:12

    Equality Operators

  • Урок 20.
    00:02:11

    Ternary Operators

  • Урок 21.
    00:05:31

    Logical Operators with Non-booleans

  • Урок 22.
    00:05:54

    Logical Operators with Non-Booleans

  • Урок 23.
    00:08:29

    BitWise Operators

  • Урок 24.
    00:01:15

    Operator Precedence

  • Урок 25.
    00:02:27

    Exercise- Swapping Variables

  • Урок 26.
    00:05:24

    If…else

  • Урок 27.
    00:04:42

    Switch…case

  • Урок 28.
    00:05:51

    For

  • Урок 29.
    00:02:12

    While

  • Урок 30.
    00:03:30

    Do…While

  • Урок 31.
    00:02:43

    Infinite Loops

  • Урок 32.
    00:04:26

    For…In

  • Урок 33.
    00:01:16

    For…of

  • Урок 34.
    00:02:35

    Break and Continue

  • Урок 35.
    00:04:00

    Max of Two Numbers

  • Урок 36.
    00:02:26

    Exercise- Landscape or Portrait

  • Урок 37.
    00:06:40

    Exercise- FizzBuzz

  • Урок 38.
    00:09:06

    Exercise- Demerit Points

  • Урок 39.
    00:02:03

    Exercise- Even and Odd Numbers

  • Урок 40.
    00:04:34

    Exercise- Count Truthy

  • Урок 41.
    00:02:59

    Exercise- String Properties

  • Урок 42.
    00:02:41

    Exercise- Sum of Multiples 3 and 5

  • Урок 43.
    00:06:33

    Exercise — Grade

  • Урок 44.
    00:02:34

    Exercise — Stars

  • Урок 45.
    00:08:25

    Exercise — Prime Numbers

  • Урок 46.
    00:04:54

    Basics

  • Урок 47.
    00:05:45

    Factory Functions

  • Урок 48.
    00:05:49

    Constructor Functions

  • Урок 49.
    00:02:04

    Dynamic Nature of Objects

  • Урок 50.
    00:02:25

    Constructor Property

  • Урок 51.
    00:04:48

    Functions are Objects

  • Урок 52.
    00:05:50

    Value vs. Reference Types

  • Урок 53.
    00:05:10

    Enumerating Properties of an Object

  • Урок 54.
    00:04:22

    Cloning an Object

  • Урок 55.
    00:01:15

    Garbage Collection

  • Урок 56.
    00:02:57

    Math

  • Урок 57.
    00:06:26

    String

  • Урок 58.
    00:04:53

    Template Literals

  • Урок 59.
    00:04:01

    Date

  • Урок 60.
    00:01:42

    Exercise 1- Address Object

  • Урок 61.
    00:03:03

    Exercise- Factory and Constructor Function

  • Урок 62.
    00:04:00

    Exercise 3- Object Equality

  • Урок 63.
    00:02:16

    Exercise 4- Blog Post Object

  • Урок 64.
    00:02:53

    Exercise 5- Constructor Functions

  • Урок 65.
    00:03:38

    Exercise 6- Price Range Objects

  • Урок 66.
    00:00:32

    Introduction

  • Урок 67.
    00:03:36

    Adding Elements

  • Урок 68.
    00:03:33

    Finding Elements (Primitives)

  • Урок 69.
    00:05:47

    Finding Elements (Reference Types)

  • Урок 70.
    00:01:35

    Arrow Functions

  • Урок 71.
    00:03:04

    Removing Elements

  • Урок 72.
    00:04:15

    Emptying an Array

  • Урок 73.
    00:03:41

    Combining and Slicing Arrays

  • Урок 74.
    00:02:26

    The Spread Operator

  • Урок 75.
    00:02:33

    Iterating an Array

  • Урок 76.
    00:03:12

    Joining Arrays

  • Урок 77.
    00:06:33

    Sorting Arrays

  • Урок 78.
    00:03:45

    Testing the Elements of an Array

  • Урок 79.
    00:02:47

    Filtering an Array

  • Урок 80.
    00:07:48

    Mapping an Array

  • Урок 81.
    00:06:44

    Reducing an Array

  • Урок 82.
    00:01:51

    Exercise 1- Array from Range

  • Урок 83.
    00:01:55

    Exercise 2- Includes

  • Урок 84.
    00:02:09

    Exercise 3- Except

  • Урок 85.
    00:06:32

    Exercise 4- Moving an Element

  • Урок 86.
    00:04:32

    Exercise 5- Count Occurrences

  • Урок 87.
    00:06:15

    Exercise 6- Get Max

  • Урок 88.
    00:04:39

    Exercise 7- Movies

  • Урок 89.
    00:03:19

    Function Declarations vs. Expressions

  • Урок 90.
    00:01:57

    Hoisting

  • Урок 91.
    00:04:16

    Arguments

  • Урок 92.
    00:04:39

    The Rest Operator

  • Урок 93.
    00:03:41

    Default Parameters

  • Урок 94.
    00:05:39

    Getters and Setters

  • Урок 95.
    00:05:36

    Try and Catch

  • Урок 96.
    00:04:45

    Local vs. Global Scope

  • Урок 97.
    00:05:53

    Let vs Var

  • Урок 98.
    00:07:23

    The This Keyword

  • Урок 99.
    00:07:01

    Changing This

  • Урок 100.
    00:03:43

    Exercise 1- Sum of Arguments

  • Урок 101.
    00:01:54

    Exercise 2- Area of Circle

  • Урок 102.
    00:02:50

    Exercise 3- Error Handling

  • coursehunters.net

    JavaScript для начинающих — Блог веб-разработчиков

    Содержание курса лекций «Javascript для начинающих«.

    Ссылки на лекции будут добавляться в содержание по мере их публикации. Чтобы не пропустить новые лекции, подпишитесь на обновления.

    0. Введение

    1. Основы синтаксиса

    1.1 Литералы
    1.2 Переменные
    1.3 Комментарии, пробелы и табуляция, точка с запятой и символ перевода строки
    1.4 Встроенные функции
    1.5 Встраивание js-кода в html-документ. Пишем первый скрипт
    1.6 Учимся использовать js-консоль
    1.7 Арифметические операторы
    1.8 Логические и побитовые операторы
    1.9 Операторы сложного присваивания
    1.10 Операторы ветвления кода
    1.11 Циклы
    1.12 Массивы
    1.13 Объекты
    1.14 Собственные функции
    1.15 Встроенные методы для работы с массивами
    1.16 Приведение типов
    1.17 Синтаксис регулярных выражений
    1.18 Использование регулярных выражений
    1.19 Область видимости переменной
    1.20 Функции как данные

    2. ООП

    2.1 Что такое ООП
    2.2 Функции-конструкторы
    2.3 Прототипы и наследование
    2.4 Расширение встроенных типов

    3. JS в браузере

    3.1 Иерархия объектов
    3.2 DOM
    3.3 Отбор DOM-узлов
    3.4 Свойства и атрибуты. css-свойства
    3.5 Добавление и удаление DOM-узлов
    3.6 События
    3.7 Работа с куками

    4. Ajax

    4.1 http-запрос
    4.2 Создание объекта xmlHttpRequest. Посылка запроса. Обработка ответа
    4.3 Формат данных JSON

    true-coder.ru