Курс по Javascript для начинающих

Поделитесь новостью в соц-сетях!

Самый простой и легкий для понимания курс по Javascript от Евгения Попова. В каждом уроке он подробно показывает и объясняет технологию программирования пользовательского интерфейса браузеров. Наверное каждый видел на сайтах раскрывающееся или выпадающее меню, красивые диалоговые окна и т.п. Все это сделано с помощью Javascript.

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

Многие в интернете критикуют курсы Евгения Попова. Действительно, некоторые курсы по PHP недоработаны и не показывают всех возможностей. Но в данном курсе все сделано правильно, а материал с подачи Евгения может освоить даже ребенок. Все просто, доступно и понятно, а домашние задания, приведенные в курсе позволяют понять Javascript еще глубже. Рекомендую к освоению начинающим, а для себя использую просто как шпаргалку.


Скачать дополнительные материалы



Автор: Евгений Попов
Сайтhttps://evgeniypopov.com/


Список уроков

    Основы

  1. 1. Вводный
  2. 2. Что нам понадобится для работы
  3. 3. Наш лучший друг волшебник Javascript
  4. 4. История про могущественного мера
  5. 5. Метод write объекта document
  6. 6. Отлов ошибок и комментарии
  7. 7. Суть и создание переменных
  8. 8. Использование переменных
  9. 9. Какие имена можно давать переменным
  10. 10. Операции над переменными
  11. 11. Изменение значений переменных
  12. Домашнее задание к 11-му уроку
    Ваша задача состоит в том, чтобы создать четыре переменных (названия выбирайте на своё усмотрение).Первую - для хранения количества дней. Присвойте ей значение - 365. Вторую - для хранения названия нашей планеты Земля. Третью - для хранения примерного количества жителей нашей планеты, присвойте ей значение 7 млрд. Четвертую - для хранения слова Солнца.

    Далее, используя текст и переменные, Вы должны вывести на экран такой абзац:Мы живем на планете Земля, она делает один оборот вокруг Солнца за 365 дней. Население нашей планеты составляет примерно 7 млрд. человек.
  13. 11_1. Решение домашнего задания
  14. Массивы

  15. 12. Введение в массивы
  16. Домашнее задание к 12-му уроку
    Создайте два массива.1-й - это массив из пяти стран на ваш выбор.2-й - это массив количества населения в этих странах (этот массив состоит исключительно из цифр).

    А затем с помощью метода document.write() выведите на экранпять строк, где каждая строка - это назване страны и численность ее населения.
  17. 12_1. Решение домашнего задания
  18. 13. Свойство length + Добавление и удаление элементов
  19. Домашнее задание к 13-му уроку
    1. Создайте массив с фруктами: апельсин, банан, груша.
    2. Выведите на экран, сколько на данный момент у вас фруктов в массиве.
    3. С помощью методов, изученных в предыдущем уроке, добавьте в конец массива два фрукта - яблоко и ананас, а в начало массива - грейпфрут.
    4. Выведите на экран, сколько на данный момент у вас фруктов в массиве.
    5. С помощью методов, изученных в предыдущем уроке, удалите из массива последний и первый элемент.
    6. Выведите на экран, сколько на данный момент у вас фруктов в массиве.
  20. 13_1. Решение домашнего задания
  21. 14. Метод splice
  22. Домашнее задание к 14-му уроку
    У Вас есть массив, про который заранее известно, что в нем точно больше одного элемента. Но сколько именно - неизвестно. Пусть это будет такой массив с фруктами:var fruits = ["яблоко", "апельсин", "груша", "гранат"];Напомню, что по условиям Вы не знаете сколько точно в нем элементов, их может быть и 100 и 200.Ваша задача состоит в том, чтобы с помощью метода splice заменить в массиве предпоследний фрукт на "ананас" и вывести весь массив на экран.

    Когда это будет сделано, проверьте свой код на таком массиве:var fruits = ["банан", "мандарин", "манго"]; В этом массиве у Вас мандарин должен будет замениться на ананас.
  23. 14_1. Решение домашнего задания
  24. 15. Другие методы для работы с массивами
  25. 16. Многомерные массивы
  26. Конструкция if-else

  27. 17. if-else. Основы
  28. Домашнее задание к 17-му уроку
    Возьмите массив студентов из 15-го урока:var students = ["Абаканов Сергей", "Гагарин Матвей", "Хантухова Лейла", "Алалина Алина", "Сакуров Иоган"];

    Напишите условие, которое проверяет, если количество элементов в массиве больше или равно 3, то выводится сообщение о том, что это большой массив, в котором как минимум 3 элемента. А иначе, выведите на экран сообщение о том, что это маленький массив, в котором менее 3-х элементов.
  29. 17_1. Решение домашнего задания
  30. 18. Множественные условия
  31. Домашнее задание к 18-му уроку
    У Вас есть массив: var students = ["Дмитрий", "Алексей", "Петр", "Виктор"];
    Вам нужно написать условие, что, если длина этого массива равна 4 и последним элементом является "Виктор", то вывсти на экран сообщение "Этот массив мне подходит", а иначе вывести на экран, что массив вам не подходит.
  32. 18_1. Решение домашнего задания
  33. 19. Несколько условий одновременно
  34. Домашнее задание к 19-му уроку
    Напишите множественное условие для действий при различных сигналах светофора.Если сигнал красный, то надо стоять, иначе, если желтый, то надо приготовиться, а иначе, можно идти.
  35. 19_1. Решение домашнего задания
  36. 20. Это важно знать
  37. Циклы

  38. 21. Цикл while
  39. 22. Проработка массива в цикле while
  40. Домашнее задание к 22-му уроку
    Есть массив студентов:
    students2 = ['Абаканов Сергей', 'Алалина Алина', 'Гагарин Матвей', 'Хантухова Лейла', 'Викторов Сергей', 'Масалкин Андрей', 'Петравкин Алексей', 'Московин Павел', 'Данилов Станислав'];
    С помощью цикла while вам нужно вывести на экран всех студентов начиная с Гагарина Матвея и заканчивая Петравкиным Алексеем. При условии, что мы видим массив и знаем, как расположены студенты в массиве.
  41. 22_1. Решение домашнего задания
  42. 23. Цикл for
  43. Домашнее задание к 23-му уроку.
    Написать цикл для вывода квадратов всех чисел от 1 до 7.

    В итоге вы должны получить такую картину:
    Квадрат 1 = 1
    Квадрат 2 = 4
    Квадрат 3 = 9
    Квадрат 4 = 16
    Квадрат 5 = 25
    Квадрат 6 = 36
    Квадрат 7 = 49
  44. 23_1. Решение домашнего задания
  45. Методы объекта Window

  46. 24. Методы alert, prompt и confirm
  47. Первое домашнее задание к 24-му уроку
    Ваша задача написать код, который бы спрашивал у пользователя сколько ему лет. Вы должны проанализировать полученный ответ, и если человеку больше 20 лет, то вам нужно вывести на экран фразу "Вы уже взрослый человек!", а если меньше 20 или равно 20, то вывести "Вы еще молоды, у Вас все впереди!".

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

    Например, человек ввел что ему 30 лет, и сейчас 2010 год.
    Вам в итоге надо вывести наэкран
    В 2009 году Вам было 29 лет
    В 2008 году Вам было 28 лет
    и т.д.
    Для создания цикла можете использовать while или for, которые мы с вами прошли в предыдущих уроках.
  50. 24_2. Решение домашнего задания
  51. Функции

  52. 25. Введение в функции
  53. Первое домашнее задание к 25-му уроку
    качестве домашнего задания вам надо написать функцию, которая бы вычисляла квадрат переданного ей числа и выводила бы его на экран.
  54. 25_1. Решение домашнего задания
  55. Второе домашнее задание к 25-му уроку
    Написать функцию, которая бы запрашивала у пользователя число и выводила бы на экран куб, указанного пользователем числа.
  56. 25_2. Решение домашнего задания
  57. 26. Область видимости переменных
  58. 27. Возвращение результата функцией
  59. Домашнее задание к 27-му уроку
    Создать функцию fio(), которая поочередно запрашивает у пользователя имя, фамилию и отчество, а в качестве результата своей работы возвращает ФИО одной строкой с пробелами между словами.
  60. 27_1. Решение домашнего задания
  61. Свойства и методы строковых объектов

  62. 28. Свойство length
  63. Первое домашнее задание к 28-му уроку
    1. Напишите функцию, которая в качестве параметра получает строку, а как результат своей работы, возвращает количество символов в этой строке (не печатает на экран, а именно возвращает).

    2. Запросите у пользователя ввод любого слова и поместите этот ввод в переменную.

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

    4. Напечатайте на экран сообщение о том, сколько же символов оказалось в введенном пользователем слове.
  64. 28_1. Решение домашнего задания
  65. Второе домашнее задание к 28-му уроку
    1. Напишите функцию, которая в качестве параметра получает строку, а как результат свой работы вычисляет, в строке больше 10 символов или меньше.

    2. Запросите у пользователя ввод любого слова и поместите этот ввод в переменную.

    3. Вызовите вашу функцию, а в качестве параметра передайте то самое слово, которое вы сохранили в переменную.

    4. Напечатайте на экран сообщенеи о том, больше 10 символов в этом слове, меньше или равно 10.
  66. 28_2. Решение домашнего задания 2
  67. 29. Методы toLowerCase, toUpperCase
  68. Домашнее задание к 29-му уроку
    В качестве домашнеего задания задайте человеку вопрос через метод prompt().
    Правильный ответ заранее поместите в перменную var answer.
    Правильный ответ запишите полностью маленькими буквами.

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

    Если ответ верный, то выведите сообщение, что ответ верный, если нет, то сообщение о том, что неверный.

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

    Попробуйте на время убрать метод toLowerCase() из скрипта и посмотрите, что произойдет.
  69. 29_1. Решение домашнего задания
  70. 30. Методы indexOf и lastIndexOf
  71. Домашнее задание к 30-му уроку
    У вас есть переменная - var mySite = "http://ruseller.com";

    Вам надо написать функцию, которая примет эту переменную в качестве параметра, а в теле функции проверит с помощью метода indexOf, встречается ли в этой переменной подстрока "http://".

    Если да, то вывести на экран сообщение, что в названии сайта присутствует указание протокола "http://", иначе - вывести, что не присутствует.
  72. 30_1. Решение домашнего задания
  73. 31. Метод slice
  74. Домашнее задание к 31-му уроку.
    У вас есть строка var myStr = "Хороший день.";Ваша задача поместить слово "день" из этой строки в переменную day с помощью метода slice.Вывести эту перменную на экран.
  75. 31_1. Решение домашнего задания
  76. 32. Методы chartAt и chartCodeAt
  77. Домашнее задание к 32-му уроку.
    У вас есть массив: var students = ["Илья","Greg", "Алина"];Вам надо пройтись по каждому элементу этого массива и выяснить в каком элементе массива есть буквы, которые не попадают в диапазон русских букв.

    Подсказка. При решении нужно использовать цикл внутри цикла. В первом цикле вы перебираете элементы массива, а во внутреннем цикле уже каждый символ текущего элемента массива. Для внутреннего цикла можете назвать счетчик var j = 0;
  78. 32_1. Решение домашнего задания
  79. 33. Метод search Введение в регулярные выражения
  80. 34. Методы search продолжение
  81. Домашнее задание к 34-му уроку
    Написать функцию, которая получает в качестве параметра переменную содержащую строку и с помощью регулярного выражения проверяет, начинается ли содержимое этой переменной с цифры или нет.

    Результат своей работы функция выводит на экран.

    Переменная для передачи в функцию: var forTesting = "8 пингвинов и 9 карасей.";
  82. 34_1. Решение домашнего задания
  83. 35. Метод match
  84. 36. Ищем сайты в строке
  85. Домашнее задание к 36-му уроку
    Вам нужно написать регулярное выражение для поиска в тексте номера кредитной карты.Текст: "Иван вчера потерял свою кредитку, ее номер 1178-9087-2384-8787. Поэтому он пошел в банк и описал ситуацию. Там пошли ему навстречу и выдали новую кредитку под номером: 1103-8899-0811-1722".

    Напомню, что кредитные карты имеют формат: xxxx-xxxx-xxxx-xxxx

    Например: 1178-9087-2384-8787

    При этом, вам нужно найти только те номера, в которых первые 4 цифры содержат только 0, или 1 или 2, или 3,т.е. вас, например, устроит номер 1103-8899-0811-1722, но не устроит 1490-8877-7345-8111 (т.к. здесь присутствует цифры 4 и 9, не удовлетворяющие нашим условиям).

    При этом номер кредитки нужно не просто найти, а вытащить в переменную result и вывести на экран.
  86. 36_1. Решение домашнего задания
  87. 37. Метод replace
  88. Домашнее задание к 37-му уроку.
    Написать функцию, которая меняет слэши на дефисы.

    Ваша задача состоит в том, чтобы написать функцию, которая принимает два параметра.1. Переменная, в которой содержится номер телефона, записанный с помощью слэшей.
    var tel = "8/927/31/10/765";
    2. Знак, на который нужно заменить слэш.
    var sign = "-";

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

    В качестве результата, нужно вывести уже измененный телефонный номер на экран.

    Подсказка. Помните, что слэш это символ, который используется для создания регулярного выражения (также как и точка, скобки и т.д.) поэтому, чтобы сообщить волшебнику, что надо искать именно слэш, вы должны экранировать его обратным слэшем.
  89. 37_1. Решение домашнего задания
  90. 38. Готовые регулярные выражения и сервисы
  91. Функции и методы числовых объектов

  92. 39. Функция isNaN
  93. Домашнее задание к 39-му уроку
    Написать функцию, которая получает в качестве параметра массив, затем перебирает все его элементы и выводит на экран, какая информация содержится в каждом элементе: число или нечисло.Массив для примера: var randSimbol = ["Молоко", 77, 11, "Мед", -88];
  94. 39_1. Решение домашнего задания
  95. 40. Функции parceInt, parceFloat и Number
  96. Домашнее задание к 40-му уроку
    Напишите функцию, которая получает в качестве параметра массив и перебирает его на предмет преобразования строк, начинающихся с числа в обычные числа. В результате работы функции, массив должен изменить свои значения на полностью числовые.

    Массив для задания:

    var myArray = ["100 попугаев", "201 рубль", "624 доллара", "109 кроликов", "33 весельчака", "62 кабана"];
  97. 40_1. Решение домашнего задания
  98. 41. Метод toFixed
  99. Домашнее задание к 41-му уроку
    Напишите функцию, которая получает в качестве параметра массив и перебирает его на предмет преобразования чисел из простых, в такие, у которых есть два знака после запятой., т.е., если в исходном массиве было число 11, то на выходе должно быть 11.00.

    В результате работы функции массив должен изменить свои значения.

    Массив для примера:
    var randSimbol = [10.5, 15, 112, 77.6];
  100. 41_1. Решение домашнего задания
  101. 42. Объект Math и его методы round, ceil, floor
  102. Домашнее задание к 42-му уроку
    Ваша задача написать функцию, которая принимает два параметра.
    1. Массив, состоящий из чисел с дробями.
    2. Метод округления "round", "ceil" или "floor".

    На выходе функция должна выводить этот же массив, но при этом все элементы массива, должны быть округлены с помощью указанного во втором параметре метода объекта Math.

    Исходный массив:
    var numberArray = [34.82, 12.90, 17.01, 78.51];
  103. 42_1. Решение домашнего задания
  104. 43. Объект Math и его метод random
  105. Домашнее задание к 43-му уроку
    Вам нужно создать функцию, которая будет принимать три параметра.
    1. Массив, состоящий из 10 пустых элементов.
    2. Начальное значение интервала
    3. Конечное значение интервала.

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

    Исходный массив для примера:
    var randomArray = new Array(10);
  106. 43_1. Решение домашнего задания
  107. Работа с датами в Javascript

  108. 44. Введение в объект Date
  109. Первое домашнее задание к 44-му уроку
    Ваша задача, используя методы объекта date, вывести на экран время в формате: час:минута:секунда (пример: 14:23:11)

    При этом, если секунды и минуты попадают в интервал от 0 до 10, они должны выводиться с нулем впереди.т.е. вместо 18:7:3 у Вас должно выводиться 18:07:03
  110. 44_1. Решение домашнего задания
  111. Второе домашнее задание к 44-му уроку
    Помните, мы вычисляли, как вывести день недели.Чтобы узнать день недели, используйте метод getDay() Он выдаст вам число от 0 до 6, где 0 это восресенье, а 6 - суббота.

    var day = now.getDay();
    alert("На дворе день недели:" + day);

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

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

    Подсказка: Создайте массив с названиями дней недели и используйте его при выводе. Если необходимо, повторите урок про создание массивов и вывода из них информации. Помните, что дни недели в javascript начинаются с воскресенья.
  112. 44_2. Решение домашнего задания 2
  113. 45. Практический пример по объекты Date
  114. Домашнее задание к 45-му уроку
    Написать функцию, которая выводит на экран дату, которая наступит через n дней от сегодняшней. n - количество дней, которое нужно запросить у пользователя при загрузке страницы. Это значение передаете в функцию в качестве параметра. При этом итоговую дату надо вывести в нормальном формате на русском языке.
    Например так (пример для ввода числа 79):

    Через 79 дней будет вот такая дата:
    День недели: Воскресенье
    Число: 10
    Месяц: Октябрь
    Год: 2010

    При этом пользователь должен ввести число от 1 до 1000. Если он не попал в интервал или ввел не число, то надо вывести ошибку. Проверку можно осуществлять за пределами функции.

    Подсказка. Если задание кажется сложным, не спешите смотреть ответ. Постарайтесь разбить задачу на как можно более мелкие шажки и для начала попробуйте написать код просто для конкретного числа дней, вообще не используя функцию.
  115. 45_1. Решение домашнего задания
  116. Это может пригодиться

  117. 46. Функции setTimeout,setInterval, clearInterval
  118. 47. Функция typeof
  119. 48. Условный опрератор case
  120. 49. Тернарный оператор
  121. 50. Создание собственного объекта
  122. 51. Создание методов для собственного объекта
  123. 52. Вывод на экран всех свойств объекта и их значений
  124. 53. Объекты navigator, screen, location и их свойства
  125. Домашнее задание к 53-му уроку
    Выясните с какого браузера человек зашел на вашу страничку и, в зависимости от браузера, выведите на экран информацию.

    Если firefox: "Ваш браузер Firefox."
    Если opera: "Ваш браузер Opera."
    Если chrome: "Ваш браузер Chrome."
    Если ie: "Ваш браузер Internet Explorer."
  126. 53_1. Решение домашнего задания
  127. Модификация веб-страниц

  128. 54. Введение
  129. 55. DOM объектная модель документа
  130. 56. Подготовка к дальнейшей работе
  131. 57. Выбор элементов методом getElementsByTagName
  132. 58. Выбор элементов методом getElementById
  133. 59. Выбор родственных элементов
  134. 60. Свойства innerText и innerHTML

Комментарии