Джава скрипт для начинающих: Основы JavaScript

Курс JavaScript для начинающих. | Университет СИНЕРГИЯ

Курс JavaScript для начинающих. | Университет СИНЕРГИЯ

На данный момент язык программирования JavaScript является самым популярным. Изучив его, можно достаточно просто войти в сферу веб-разработки

Записаться на программу

Формат обученияОнлайн

Длительность58 часов

Продолжительность2 месяца

КатегорияПрограммирование

Стоимостьот 40000 ₽

Будущие возможности

Язык JavaScript — хороший вариант для начинающих разработчиков войти в IT-сферу. Он востребован, достаточно прост в изучении и подходит для выполнения всевозможных задач, к примеру, таких как создание сайтов и приложений

Кому подойдет

Новичкам

Начинающим специалистам

Frontend-разработчикам

Вы научитесь:

Программировать на языке JavaScript

Применять методологию объектно-ориентированного программирования

Взаимодействовать с HTML и CSS

Прототипировать сайты при помощи Figma

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

Работать с flexbox и Grid

Программа обучения

1. Основы программирования на JavaScript

2. Основы верстки при помощи HTML и CSS

3. Практический модуль

Как проходит обучение

Документ об образовании

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

Удостоверение о повышении квалификации

Сертификат об успешном прохождении обучения

Часто задаваемые вопросы

Что делать, если у меня проблема или срочный вопрос?

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

Сколько часов в неделю нужно уделять учебе?

В среднем на обучение уходит порядка 4−5 часов в неделю, что позволит вам совмещать учебу с текущей работой и личными делами.

Вы помогаете в трудоустройстве?

Мы гарантируем содействие в трудоустройстве. Мы заинтересованы в вашем результате, поэтому не бросаем своих студентов после обучения! Вы сможете обратиться за помощью к нашим карьерным консультантам из Центра Карьеры. Они помогут вам грамотно составить резюме для работодателя и оформить портфолио, а также подготовят к собеседованию на необходимую вакансию. Благодаря этому ваши шансы на трудоустройство значительно возрастут.

ПОДБЕРИ ПРОГРАММУ

ОБУЧЕНИЯ

Ответь на пять вопросов и узнай,

где будешь учиться!Подобрать программу

Образование для карьеры

К каким профессиям вы более склонны?

ТехническимГуманитарнымТворческимМедицинским

Какой у вас уровень образования?

Без образованияШкола 9-11 классКолледжБакалавриатМагистратураАспирантура

Какой формат обучения вам подходит?

ОчноЗаочноОнлайнПо выходным дням

Вас интересуют бюджетные места?

ДаНет

И последний вопрос. Вы из Москвы?

ДаНет

Мы подобрали вам программу обучения

Заполните форму, чтобы узнать больше о программе и наших предложениях

Я даю согласие на обработку персональных данных, согласен на получение информационных рассылок от  Университета «Синергия» и соглашаюсь c политикой конфиденциальности

Уважаемый посетитель!

Если у вас есть вопрос, предложение или жалоба, пожалуйста, заполните короткую форму и изложите суть обращения в текстовом поле ниже. Мы обязательно с ним ознакомимся и в  30-дневный срок ответим на указанный вами адрес электронной почты

Статус Абитуриент Студент Родитель Соискатель Сотрудник Другое

Филиал Абакан Актобе Алагир Алматы Алушта Анапа Ангарск Армавир Архангельск Асбест Астрахань Атырау Баку Балхаш Барановичи Барнаул Белая Калитва Белгород Бельцы Берлин Бишкек Благовещенск Бобров Бобруйск Борисов Боровичи Бронницы Брянск Бузулук Видное Владивосток Владикавказ Владимир Волгоград Волгодонск Волжск Воркута Воронеж Вёшенская Гана Гомель Гродно Грозный Дамаск Дербент Димитровград Дмитров Долгопрудный Домодедово Дубай Дубна Душанбе Евпатория Екатеринбург Елец Ереван Жлобин Жуковский Звенигород Златоуст Зубова Поляна Иваново Ижевск Иркутск Истра Казань Калининград Карабулак Караганда Каракол Кашира Кемерово Киев Кизляр Кинешма Киров Королев Кострома Красноармейск Красногорск Краснодар Краснознаменск Красноярск Курган Курск Кызыл Липецк Лобня Магадан Майкоп Махачкала Минеральные Воды Минск Могилев Моздок Мозырь Москва Мурманск Набережные Челны Нальчик Наро-Фоминск Нижневартовск Нижний Новгород Нижний Тагил Новокузнецк Новосибирск Новоуральск Ногинск Норильск Ноябрьск Нур-Султан Обнинск Одинцово Озёры Омск Орел Оренбург Орехово-Зуево Ош Павлодар Пенза Пермь Петропавловск Подольск Полоцк Псков Пушкино Пятигорск Радужный Ржев Ростов-на-Дону Рыбинск Рязань Сальск Самара Самарканд Санкт-Петербург Саратов Светлогорск Севастополь Северодвинск Сергиев Посад Серпухов Слоним Смоленск Солигорск Солнечногорск Ставрополь Сургут Сызрань Сыктывкар Тамбов Ташкент Тбилиси Тверь Терек Тихорецк Тобольск Тольятти Томск Троицк Тула Тюмень Улан-Удэ Ульяновск Ургенч Усть-Каменогорск Уфа Ухта Хабаровск Ханты-Мансийск Хива Худжанд Челябинск Череповец Черкесск Чехов Шымкент Щербинка Электросталь Элиста Юдино Якутск Ярославль

Тип обращения Вопрос Предложение Благодарность Жалоба

Тема обращения Поступление Трудоустройство Обучение Оплата Кадровый резерв Внеучебная деятельность Работа автоматических сервисов университета Другое

* Все поля обязательны для заполнения

Я даю согласие на обработку персональных данных, согласен на получение информационных рассылок от Университета «Синергия» и соглашаюсь c  политикой конфиденциальности

JavaScript.

20 уроков для начинающих

• Описание
• Детали
• Отзывы (0)

Описание

В книге 20 иллюстрированных уроков, 40 практических упражнений на тему программирования веб-сценариев и более 70 заданий для самостоятельной работы. Изложены основы JavaScript: данные и операторы, выражения и управляющие конструкции, функции, классы, объекты и массивы, средства отладки. Раскрыты механизмы управления веб-страницами: события и их обработка, управление элементами, графика и мультимедиа, веб-формы и элементы управления, регулярные выражения, навигация и управление окнами. Рассмотрена работа с HTML API и компонентное программирование: асинхронное программирование, работа с внешними данными, программная графика, объявление своих классов, создание компонентов.

Освещены технологии взаимодействия с сервером: AJAX, PHP, разработка фронтендов и бэкендов, серверные сообщения. Электронный архив на сайте издательства содержит коды всех примеров и результаты выполнения упражнений.  

Дронов Владимир Александрович, профессиональный программист, писатель и журналист, работает с компьютерами с 1987 года. Автор более 30 популярных компьютерных книг, в том числе «Django 2.1. Практика создания веб-сайтов на Python», “HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера“, «Python 3. Самое необходимое», «Python 3 и PyQt 5. Разработка приложений», “Laravel. Быстрая разработка современных динамических Web-сайтов на PHP, MySQL, HTML и CSS“, “Angular 4. Быстрая разработка сверхдинамических Web-сайтов на TypeScript и PHP” и книг по продуктам Adobe Flash и Adobe Dreamweaver различных версий. Его статьи публикуются в журналах “Мир ПК” и “ИнтерФейс” (Израиль) и интернет-порталах “IZ City” и “TheVista.ru”.

Детали

Артикул	2709
ISBN	978-5-9775-6589-9
Количество страниц	352
Серия	Для начинающих
Переплет	Мягкая обложка
Печать	Черно-белая
Год	2022
Габариты, мм	233 × 165 × 18
Вес, кг	0. 46

Дополнительные файлы скачать: Зеркало1Дополнительные файлы скачать (Chrome): Зеркало2

• ✓ Новинки на 2 недели раньше магазинов
• ✓ Цены от издательства ниже до 30%
• ✓ Акции и скидки только для подписчиков
• ✓ Важные новости БХВ

ПОЛЕЗНАЯ РАССЫЛКА КНИЖНЫХ НОВОСТЕЙ

Подписываясь на рассылку, вы соглашаетесь с политикой конфиденциальности и обработкой своих персональных данных.

Рекомендуем также

•  Дронов Владимир Александрович

  JavaScript. Дополнительные уроки для начинающих

  894 ₽
  760 ₽
•  

  HTML, JavScript, PHP и mySQL. Джентльменский набор Web-мастера, 5 изд. – Бумажная книга

  1 458 ₽ 1 239 ₽
•  Дронов Владимир Александрович

  HTML и CSS. 25 уроков для начинающих

  963 ₽
  819 ₽
•  

  PHP и MySQL. 25 уроков для начинающих – Бумажная книга

  1 031 ₽ 876 ₽

Введение в JavaScript (бесплатное руководство)

Веб-разработка для начинающих >

Урок 5: Введение в JavaScript

1

Учебник 1

2

Учебник 2

3

Учебник 3

4

Учебник 4 Учебник 5

6

Финальный тест Веб-разработка для начинающих

Предыдущий
Учебник Финальная викторина

💬 «В некотором смысле программирование похоже на рисование. Вы начинаете с чистого холста и некоторых основных материалов. Вы используете комбинацию науки, искусства и ремесла, чтобы определить, что с ними делать». (Эндрю Хант)

Почему JavaScript?

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

JavaScript, как вы, возможно, знаете, повсеместно используется в современном мире разработки программного обеспечения. Это основа фронтенд-разработки и ключевой компонент таких фреймворков, как ReactJS, Angular и VueJS. Он также может помочь в создании надежной серверной части с такими платформами, как Nodejs, запускать настольные приложения, такие как Slack, Atom и Spotify, и работать на мобильных телефонах как прогрессивные веб-приложения (PWA).

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

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

Введение

Теперь, когда мы получили представление о JavaScript с высоты птичьего полета, давайте перейдем к более техническим деталям. JavaScript был создан, чтобы оживить веб-страницы. Так же, как HTML и CSS, JavaScript записывается в виде простых текстовых файлов с расширением .js.

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

😎Совет от профессионала: Помимо самого названия, JavaScript не имеет никакого отношения к Java. Новички часто путаются между двумя языками. Помните, что Java — это совершенно другой язык, созданный для другой цели (хотя вы все равно обнаружите, что он работает на некоторых бэкендах веб-сайтов).

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

Что мы будем делать сегодня?

1. Основы использования JavaScript: переменные, функции и операторы
2. Выберите элементы HTML с JavaScript
3. Прикрепите прослушиватель кликов к элементам HTML-формы
4. Получить некоторые введенные пользователем значения
5. Проверить нашу форму с помощью JavaScript

Наконец-то ожидание закончилось! Давайте перейдем к делу.

1. Основы JavaScript

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

Начнем с основ.

Написание Javascript

Как и для CSS, мы создадим новый файл для написания JavaScript с именем ‘script.js’ в каталоге портфолио. Теперь откройте файл index.html и непосредственно перед закрывающим тегом body ( ) вставьте эту строку.

Посмотреть изменения кода на GitHub >

Вот и все. Мы связали наш файл сценария в нашем HTML. Чтобы убедиться, что это работает, напишите следующий код в файл script.js.

Сохраните и обновите страницу.

Посмотреть изменения кода на GitHub >

Обратите внимание на диалоговое окно вверху? Это ваша первая строка JavaScript, код предупреждения, выполняемый. Попробуйте изменить текст и обновить. Вы также можете сделать это в CodePen ниже!

Если вы выполнили действия, описанные в предыдущем разделе, вы правильно настроили файл сценария. Мы готовы написать немного JavaScript! Давайте рассмотрим некоторые важные понятия.

Переменные

Переменные — это понятные имена, содержащие данные. Подумайте о том, как вы называете человека по имени, а не «человек» или «одна голова, два глаза, один нос…» и так далее. Переменные — это просто понятные (и описательные) имена для фрагментов данных. Рассмотрим пример.

Здесь мы определяем переменную с именем «приветствие» и присваиваем ей значение «Привет, мир». Это звучит почти как по-английски: «пусть , приветствие , будет , привет, мир, » — видите? Теперь приветствие содержит в себе значение «Hello world» и может использоваться вместо обычного текста «Hello world».

Вы можете написать:

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

Вы заметили, что мы написали «let» перед именем переменной? Это один из способов объявления переменной в JavaScript. Вы можете узнать больше в этом руководстве Mozilla по объявлениям.

Также обратите внимание, что каждая строка заканчивается точкой с запятой (;). Это не обязательно (за исключением некоторых конкретных случаев), но рекомендуется использовать их, поэтому мы рекомендуем вам это сделать.

Арифметические операторы

JavaScript также можно использовать в качестве калькулятора. На самом деле, большая часть кода, который вы увидите в дикой природе, будет везде содержать базовые вычисления. Он поддерживает все обычные функции, называемые операторами, такие как плюс (+), минус (-), умножение (*), деление (/) и так далее. Вы можете сделать что-то вроде следующего, и он должен сказать 5, как и следовало ожидать. Попробуйте запустить CodePen ниже, и вы должны увидеть всплывающее окно в текущем окне браузера.

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

Попробуйте запустить; ты снова получил 5? Нет? Откройте Инструменты разработчика Chrome и перейдите на вкладку Консоль. Это что-нибудь говорит?

Ааа, ошибка в файле script.js в строке 4 (обратите внимание на script.js:4 в правом углу этого красного сообщения об ошибке). Вы заметили ошибку в строке 4? Это предупреждение, в котором отсутствует закрывающая скобка. Исправьте это и попробуйте снова запустить код.

Операторы сравнения

Операторы сравнения сравнивают два объекта вместе. На английском и других языках мы часто задаем такие вопросы, как «Сегодня теплее, чем вчера» или «Эти два здания одного размера?». Ответ на эти вопросы либо да, либо нет, и они обычно сравнивают две вещи (сегодня и вчера, здание 1 и здание 2 и т. д.). В терминах программирования это либо «истина», либо «ложь».

Мы тоже можем задавать вопросы, подобные тем, что в JavaScript! В JavaScript у нас есть следующие операторы сравнения:

Оператор	Вопрос в задании
===	Две вещи равны?*
!==	Две вещи неравны?*
>=	Первое больше второго или равно ему?
<=	Первое меньше второго или равно ему?
>	Первое больше второго?
<	Первое меньше второго?

*Есть менее строгие варианты, а именно == и !=, которые позволяют сравнивать две вещи, которые могут быть разных типов.

«1» == 1 верно, но «1» === 1 неверно, так как «1» — это строка, а 1 — это число.

Мы рекомендуем придерживаться строгого равенства/не равенства (=== и !==) и избегать использования == и !=

Функции

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

Посмотрите, как функция принимает два числа (число1 и число2, формально называемые параметрами функции), складывает их и «возвращает» результат; другими словами, отправляет вам результат. Здесь мы определили, как должна вести себя функция «добавить», но мы ее не используем. Чтобы использовать этот код, нам нужно его «вызвать». Вызов функции — это просто запись ее имени и использование круглых скобок для передачи «аргументов» (фактических параметров).

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

В этой функции alertMessage — это имя функции, message — это параметр, и у нас нет возвращаемого значения (обратите внимание на отсутствие оператора return).

Когда мы вызываем его как alertMessage('Hello World') , часть «Hello World» является аргументом функции. Это лишь верхушка айсберга в мире функций, но этого достаточно, чтобы двигаться вперед.

Возвращаясь к функции добавления, мы будем использовать ее следующим образом:

Она работает нормально? Если нет, загляните в консоль и посмотрите, нет ли у вас синтаксических ошибок.

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

Управление потоком

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

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

Если age меньше 18 , отобразите «Вы не взрослый», иначе отобразите «Вы взрослый»

В JavaScript вы ‘написал бы код следующим образом:

Обратите внимание, насколько простая английская версия похожа на код JavaScript. То, что мы только что написали, является примером оператора if..else. Обратите внимание на возраст до 18 лет часть. Это условие. Здесь мы использовали оператор меньше из раздела Операторы сравнения выше.

Общий синтаксис if..else:

Мы будем использовать if..else всякий раз, когда нам нужно будет принять решение в коде, например, убедиться, что наши пользователи ввели правильные данные.

Объекты

Последним важным понятием, необходимым для нашего веб-сайта, является объект JavaScript. Объекты — это просто контейнеры для пар ключ-значение, похожие на то, что вы найдете в словаре. В словаре ключ — это слово, а значение — это значение слова. В объекте JavaScript ключ — это имя, а значением может быть что угодно, даже другие объекты. Давайте рассмотрим пример:

В нашем примере объекта, который называется «fullName», firstName и lastName являются ключами, а «John» и «Doe» — значениями.

Мы можем получить доступ к firstName, используя нотацию с точкой (.). Далее будет показано предупреждение «Джон».

Как уже упоминалось, внутри объектов могут быть другие объекты и функции.

Мы можем отправить предупреждение, в данном случае с:

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

2. Выбор элементов HTML

Сила JavaScript в Интернете заключается в его способности выбирать и изменять HTML-код. Например, мы можем написать функцию на JavaScript, которая вызывается, когда мы нажимаем кнопку «Отправить» в нашей форме нижнего колонтитула.

Для этого давайте сначала выберем нашу кнопку отправки и прикрепим к ней функцию «прослушивания кликов». Когда мы прикрепляем прослушиватель кликов к элементу, он будет вызывать эту функцию прослушивателя при нажатии кнопки. Чтобы иметь возможность выбрать нашу кнопку, мы дадим ей атрибут ID с уникальным идентификатором в нашем файле HTML.

Теперь, когда у нас есть идентификатор для выбора, давайте перейдем к нашему файлу JavaScript и используем функцию JavaScript, document.querySelector(), чтобы выбрать наш элемент. Точно так же, как мы могли бы выбирать элементы HTML по их именам, атрибутам класса или идентификаторам в CSS, мы можем сделать то же самое в JavaScript, используя эту функцию.

document.querySelector принимает селектор в качестве параметра и возвращает HTML-элемент, соответствующий селектору, в форме объекта (помните, что объект — это просто контейнер для пар ключ-значение данных). Затем мы можем сохранить этот HTML-элемент в переменной и выполнять с ним всевозможные операции.

Обратите внимание, что идентификатор должен начинаться с символа решетки (#), точно так же, как при выборе идентификаторов в CSS. Если бы это было имя класса, вы бы использовали (как вы уже догадались) точку (.), например .submit-button

Совет для профессионалов: Если вы сомневаетесь, попробуйте console.log() to ‘ log», то есть для отображения определенного сообщения в консоли разработчика Chrome — переменной в JavaScript. Например, после написания предыдущей строки попробуйте записать переменную submitButton с

и проверьте вывод. Если вы видите «undefined» или «null», это означает, что что-то не так.

В общем, попробуйте поковыряться с инструментами разработчика. Это требует времени, но как только вы освоитесь, выяснение того, что пошло не так («отладка»), станет проще.

3. Присоединение прослушивателя кликов

Теперь, когда мы выбрали элемент HTML и сохранили его в переменной JavaScript, давайте добавим к нему функцию прослушивателя кликов. Слушатель кликов, как следует из названия, слушает или ждет клика. Мы прикрепляем прослушиватели кликов к определенным элементам, которые нас интересуют, например к кнопкам отправки формы. При нажатии на указанный элемент HTML вызывается функция прослушивания кликов.

Обратите внимание, что функция прослушивания кликов — это обычная функция, которую мы передаем функции addEventListener() (да, передача функций другим функциям в качестве аргументов возможна и очень распространена в JavaScript!).

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

Вы также можете попробовать запустить фрагмент кода CodePen. Нажмите кнопку «Отправить сообщение», а затем откройте консоль разработчика в том же окне, в котором вы читаете этот курс. Вы должны увидеть текст, нажатый в консоли.

По сути, мы берем параметр события, предоставленный нашей функции, который содержит сведения о событии клика (например, что было нажато, свойства кнопки и т. д.), и предотвращаем обновление страницы формой с помощью event.preventDefault()

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

Ура!! Оно работает.

Наш следующий шаг — получить значения, введенные в форму, с помощью JavaScript.

4. Получение введенных пользователем значений

У нас есть форма на нашей веб-странице, но мы не говорили о том, как мы будем извлекать данные, которые пользователь может ввести в нашу форму. Чтобы заставить любую форму «работать», мы обычно получаем данные (то есть текст в нашем случае) внутри элементов формы (вводные данные, текстовые области и т. д.) в переменные JavaScript, а затем отправляем их на сервер. При желании многие разработчики любят выполнять некоторые проверки (то есть проверки) данных перед их отправкой на сервер. Примером проверки может быть проверка формата введенного электронного письма.

Помните document.querySelector, который мы использовали в предыдущем разделе? Мы использовали его для выбора элементов HTML. Поскольку входные данные формы — это не что иное, как HTML-элементы, а данные, которые пользователь может ввести в эти входные данные, хранятся внутри HTML-элементов, мы могли бы использовать тот же document. querySelector и выбирать наши HTML-элементы.

Тогда нам нужно узнать важную информацию. Доступ к значению ввода HTML или данным внутри него можно получить с помощью ключа «значение». Помните объекты? Объект элемента ввода HTML будет иметь ключ «значение», который содержит текущий текст внутри элемента.

Наконец, мы выполним console.log значения из input и textarea и посмотрим, что мы получим в переменных emailText и messageText.

Посмотреть изменения кода на GitHub >

Отлично! Вы видели, как сообщение просто регистрируется, безупречно? Красиво, говорим мы. Вместо того, чтобы просто печатать emailText и messageText, мы немного отформатировали его, используя console.log('email:', emailText, …), который будет красиво печатать с меткой email: , напечатанной как есть.

Возможно, на этом этапе вы увидите некоторые ошибки. Просто вернитесь и убедитесь, что вы вводите его точно так, как есть. Поиграйте и попробуйте разные входы. Вы заметили какие-либо проблемы?

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

5. Проверка JavaScript

Если вы немного поиграли в предыдущем разделе, то заметили кое-что странное. Хотя в полях ввода написано электронная почта и сообщение, вы можете ввести в него что угодно, и оно все равно примет и распечатает его.

На самом деле, он даже позволяет ввести пустой адрес электронной почты и сообщение. Это не хорошо. Нам нужно будет установить некоторые ограничения на то, что вводится, особенно поле электронной почты. Для наших целей достаточно проверить, содержит ли текст, введенный в поле электронной почты, символ «@». В реальном мире вы захотите проводить более строгие проверки данных.

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

В нашем примере проверки адреса электронной почты наша проверка на «@» может выявить случай, когда наши пользователи забывают набирать «@» или опечатываются в своих адресах электронной почты.

Эта функция проверяет, содержит ли предоставленный текстовый параметр электронной почты символ «@». Он использует нечто, называемое условным оператором («если» и «иначе», которые вы видите). Вы можете прочитать это как, если да, он возвращает true. В противном случае возвращается ложь. Давайте проверим это в нашей функции clickListener, выполнив вход в консоль.

Ладно, работает! Он не идеален, но демонстрирует, насколько выразительным является JavaScript. Теперь мы можем собрать все вместе внутри нашей функции clickListener и отобразить соответствующее сообщение.

Попробуйте в CodePen и просмотрите результаты в консоли инструментов разработчика браузера.

Здесь мы сначала проверяем электронную почту. Если это не удается, мы регистрируем сообщение об ошибке и возвращаем false (это один из способов предотвращения дальнейшего выполнения функции, означающий, что наш последний console.log не будет выполнен).

Если блок if не выполняется (это означает, что return false не был обнаружен и функция все еще работает), мы предполагаем, что все прошло хорошо, и отображаем сообщение об успешном выполнении. Довольно мило, да?

Посмотреть изменения кода на GitHub >

Вы правильно поняли? Отличная работа! Если нет, просто внимательно посмотрите. Вы найдете ошибку. Помните, что отладка является важным навыком разработчика!

Резюме

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

Мы начали с настройки вашей среды разработки и написания в ней первых нескольких строк кода. Затем мы добавили к нему HTML и данные, а затем немного CSS. Затем было больше CSS, чтобы сделать страницу красивой. Наконец, мы добавили немного магии JavaScript и оживили страницу.

Мы гордимся тем, что вы дошли до конца, и надеемся, что это только начало вашего замечательного пути в веб-разработке.

🧐Ежедневное испытание

Итак, мы наконец подошли к нашему последнему ежедневному заданию. Вы в восторге от огромного мира веб-разработки, который лежит за пределами этого краткого курса? Мы уверены!

Вот задачи для сегодняшней задачи:

1. Подобно нашей функции emailValidate , напишите новую функцию validateNSFW (Not Safe For Work), которая будет принимать messageText и вернуть true, если сообщение безопасно для работы. Функция должна возвращать false, если в тексте есть слово «дерьмо». Вы можете использовать функцию .includes() для задачи.

Используйте ранее написанную функцию и подключите ее к функции clickListener аналогично тому, как мы сделали это для emailValidate и messageValidate , показывая ошибку, когда validateNSFW завершается ошибкой.

👋Отходящие слова — Пока до свидания!

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

У этого курса нет шестого дня, так что пока прощаемся. Но нам нравится думать об этом как о начале чего-то интересного, нового начала для вас. Если вы решите заняться веб-разработкой в ​​качестве карьеры, годы спустя вы оглянетесь на тот момент, когда успешно создали свой первый веб-сайт и сделали его красивым и функциональным.

Если вы хотите быть в курсе новых и интересных тем, связанных с веб-разработкой, рекомендуем вам заглянуть в наш блог! Наконец, помните, что бы ни случилось, никогда не переставайте учиться! Увидимся снова!

📗Ссылки

• Переменные
• if. .else (поток управления)
• Функции
• Объекты

❓ Часто задаваемые вопросы

В. JavaScript сильно отличается от того, что мы делали до сих пор. Почему это?

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

В. Это руководство было труднее понять, чем предыдущие?

A. Вы не одиноки, и это то, что чувствует каждый, когда впервые видит JavaScript. Но, как и во всем, вы можете улучшить это с практикой. Медленно, но верно он будет казаться таким же естественным, как английский.

В. Разве мы не должны использовать «функцию» для написания функций? Так было написано в некоторых примерах, которые я читал в Интернете.

A. Можно, но это так же хорошо. По мере того, как вы будете углубляться в JavaScript, вы узнаете, что существует несколько способов делать многие вещи, например, писать функции. Это сводится к варианту использования и вашим предпочтениям, но для простоты мы придерживаемся синтаксиса стрелки ( let name => { } ).

В. В курсе мы использовали прослушиватель кликов. Что делать, если я хочу обнаружить двойной щелчок? Должен ли я ждать два клика?

A. Нет, есть событие под названием dblclick . У вас может быть прослушиватель событий, прослушивающий это событие (используя синтаксис element.addEventListener(eventName, listenerFunction)). Есть много других полезных событий, которые вы можете прослушать — наведение, прокрутка, нажатие клавиши клавиатуры и т. д.

Предыдущий учебник
Финальная викторина

1

Учебник 1

2

Учебник 2

3

Учебник 3

4

Учебник 4 Учебник 5

6

Финальный тест

Алана

Старшая программа

Советник

JavaScript для начинающих | Coursera

Чему вы научитесь

• Работа с редактором кода, введение в структуры управления выбором, создание циклов и понимание основных структур программирования.

• Знакомит учащихся с популярной библиотекой jQuery и исследует синтаксические различия между JavaScript и jQuery с помощью небольших проектов.

---

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

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

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

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

Получите сертификат по завершении

100% онлайн-курсы

100% онлайн-курсы

Начните немедленно и учитесь по собственному графику.

Гибкий график

Гибкий график

Устанавливайте и соблюдайте гибкие сроки.

Начальный уровень

Начальный уровень

Предварительный опыт не требуется.

Часов до завершения

Приблизительно 4 месяца до завершения

Рекомендуемый темп 4 часа в неделю

Доступные языки

Английский

Субтитры: английский онлайн курсы

Начинайте немедленно и учитесь по собственному расписанию.

Гибкий график

Гибкий график

Устанавливайте и соблюдайте гибкие сроки.

Начальный уровень

Начальный уровень

Предварительный опыт не требуется.

Часов для завершения

Приблизительно 4 месяца для завершения

Рекомендуемый темп 4 часа в неделю

Доступные языки

Английский

Субтитры: английский

Как работает специализация

Пройти курсы0049

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

Практический проект

Каждая специализация включает практический проект. Вам нужно будет успешно завершить проект(ы), чтобы завершить специализацию и получить сертификат. Если специализация включает в себя отдельный курс для практического проекта, вам нужно будет пройти все остальные курсы, прежде чем вы сможете приступить к нему.

Получение сертификата

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

Инструктор

William Mead

Лектор

Дизайнерский отдел

42 494 Ученики

4 Университет 9004.