Основы web-разработки

Раздел 5. Основы JavaScript. Добавление интерактивного содержимого.

• Современный учебник JS Гиперссылка
• Скрипты имеют расширение .js и подключаются к HTML странице.
  

  <script src="URL к скрипту"></script> - подключение скрипта к странице.

  Также программа может быть записана на странице внутри тега <script> ..код.. </script>.
  

   

  let a; // создание переменной a

  a = 2; // присваивание переменной a числа 2

  a = "dva"; // присваивание переменной a строки dva

  a = "2"; // присваивание переменной a строки 2

  
  

  a = 2 + 5 * 2; // вычисление 2+5*2 и присваивание переменной a числа 12

  a = +"2"; // превращение строки 2 в число и присваивание переменной a

  a = 2 + 2 + "2"; // сложение чисел 2 и 2, а затем сложение числа 4 и строки 2, присваивание переменной a строки 42

  a = "ра" + "дуга"; // сложение строк ра и дуга и присваивание переменной a строки радуга

  
  

  alert("Hello"); // вывод строки Hello на экран

  let name = prompt("Как тебя зовут?", "Иван"); // создание переменной name, вывод вопроса Как тебя зовут? на экран и ввод значения в переменную с клавиатуры, изначальное значение - Иван

  
  

  
  

  Следующие четыре строчки являются одним примером:

  
  

  let zagolovok; // создание переменной zagolovok

  zagolovok = document.querySelector("h2"); // присваивание переменной zagolovok первого найденного объекта HTML с селектором h2
  

  alert(zagolovok.innerHTML); // вывод содержимого объекта, хранимого в переменной zagolovok

  zagolovok.innerHTML = prompt("Введите новый заголовок"); // присваивание объекту, который находится в переменной zagolovok, нового значения, введённого с клавиатуры

  
  

  Также можно к объекту HTML обратиться напрямую по атрибуту id:

  <h2 id="zag">Заголовок</h2>  <!-- описываем заголовок второго уровня с id значением zag -->
  

  <script> // описываем скрипт в теле HTML документа
  

  zag.innerHTML = "Заглавие"; // используем обращение zag.innerHTML вместо document.querySelector("#zag").innerHTML
  

  </script> 

  
  

  Обработка событий:

  document.querySelector("h2").onclick = function () { // запускаем функцию при клике на заголовок h2
  

  alert("Нажали на заголовок!"); // выводим сообщение
  

  }

  
  

  Ветвления:

  if (a == b) { // если две переменные равны
  

  alert ("a равен b"); // выводим сообщение
  

  } else { // иначе
  

  alert ("a не равен b"); // выводим сообщение
  

  }

  if (a > 5) && (b <= 2) || (a != b)  { // если a больше 5 и b меньше или равно 2 или a не равно b
  

  alert ("сложное условие выполнено"); // выводим сообщение
  

  }

  
  

  Цикл с условием:
  

  let a = 5; // задаём значение переменной a
  

  while (a > 0) { // пока a больше 0 выполняем цикл
  

  a = a - 1; // вычитаем из a единицу
  

  }

  
  

  Цикл со счётчиком:

  for (let i = 0; i < 3; i++) { // запускаем цикл по перемененной i от 0 до 2
  

  alert(i); // выводим значение i
  

  }
  

• page Файл
• script Файл
• Суперсекретные задания:

  1. Скачать файлы page.html и script.js. Открыть скачанную страницу и проверить, как она работает в браузере.
  2. Открыть файлы в редакторе, проинспектировать код скрипта.
  3. Придумать короткую историю. Попросить пользователя ввести некоторые детали истории: три текстовых строки и два числовых значения. Числовые значения должны обрабатываться математически.
     Пример:
     
     • Как зовут персонажа? (например: Джеймс)
       
     • Год рождения персонажа? (например: 1968)
     • Количество конфет у персонажа? (например: 12)
     • Любимый сорт конфет персонажа? (например: Ромашка)
       
     • Где хранятся конфеты у персонажа? (например: ящик)
       
  4. Провести обработку введённых данных, чтобы получился текст.
     Пример:
     

     • Джеймс был не особо юн, но и стариком его считать было бы ошибкой по местным меркам. Ему было 54. Хобби у него не было, но это не значит, что увлечения у него отсутствовали. Джеймс питал страсть к конфетам! С особым трепетом он поедал их все, пачками, прерываясь лишь на сон и прогулки (не делайте так, это вредно и не особо дальновидно!). Но больше всех прочих он предпочитал конфеты Ромашка. Он прятал их в кладовке. Именно там хранилось его сокровище - ящик с конфетами Ромашка. 12 сладостей в разноцветных обёртках напоминали драгоценные камни. А недавно их было 112, вот же дела! И куда пропала целая сотня конфет? Мы можем только гадать...
       

  
  

  Задания для супермолодцов:

  1. Попросить пользователя ввести два числа: a и b.
  2. Вычислить и вывести результаты:
     
     • \( c1 = a + b \)
     • \( c2 = a + 5 \)
     • \( c3 = c1 - c2 \)
     • \( c4 = c1 \times c2 \)
     • \( c5 = c4 \div c2 \)
     • \( c6 = \frac{c1 + c2 + c3 + c4 + c5}{a + b} \)
  3. Если a > b, то вывести a, иначе вывести b.
  4. Вывести число а количество раз, равное b.