itProger Видеокурсы Обучение технологиям в одном видеоуроке Изучение JavaScript в одном видео за час!

Изучение JavaScript в одном видео за час!

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

Видеоурок

В уроке мы с вами прошли очень много информации, касающийся языка JavaScript. Если вы хотите углубиться более детально в изучение JavaScript, то вам следует посмотреть полноценный видео курс по этому языку: https://itproger.com/course/javascript

Исходный код

Весь JavaScript код

function validateForm () {
  var element = document.forms["myForm"]["fname"].value;
  var tel = document.forms["myForm"]["ftel"].value;
  if (element == "") {
    alert ("Имя должно быть заполнено");
    return false;
  } else if (tel == "") {
    alert ("Укажите ваш телефон");
    return false;
  }
}

function changeColor (newColor) {
  var element = document.getElementById("text");
  element.style.color = newColor;
}

// Объекты в JavaScript
function Fruit (color, shape) {
  this.color = color;
  this.shape = shape;
}

var melon = new Fruit ('yellow', 'round');
var apple = new Fruit ('red', 'round');

var apple = new Object ();
apple.color = 'green';
apple.shape = 'round';

melon.describe = function () {
  return 'A melon is ' + this.color;
}

console.log (melon.describe ());

// Создание объектов
var person = {
  firstName: 'Brad',
  age: 45,
  children: ['Liza', 'Perya'],
  adress: {
    street: '555 Some st',
    city: 'Boston',
    state: 'MA'
  },
  NameAge: function () {
    return this.firstName + ", age is - " + this.age;
  }
}

console.log (person.NameAge ());

// Функции
function summ (a, b) {
  return a + b;
}

document.write (summ (23, 34));

// Операторы условий
var num_1 = 223;
var num_2 = 223;
if (num_1 == num_2) {
  console.log (num_1 + " > " + num_2);
} else if (num_1 == num_2) {
  console.log (num_1 + " = " + num_2);
} else {
  console.log (num_1 + " < " + num_2);
}

var bool = false;
if ((!bool || num_1 != 223) || num_2 != 223) {
  console.log (bool + " is false");
}

var res = 5;
switch (res) {
  case 1:
      alert ("Res is 1");
    break;
  case 2:
      alert ("Res is 2");
    break;
  case 3:
      alert ("Res is 3");
    break;
  default:
    alert ("Res is unknown");
}

// Циклы
var i = 20;
do {
  console.log (i);
} while (i < 10);

var i = 200;
while (i >= 10) {
  console.log(i);
  i /= 2;
}

var colors = new Array ("Red", "Blue", "Green");
for (var i = 0; i < colors.length; i++)
  console.log(colors [i]);

// Массивы
var colors = new Array ("Red", "Blue", "Green");
colors.push ("Grey");

// Математические операции
var firstNum = 12;
var secondNum = 24;
firstNum--;
document.write (Math.abs (-222) + "<br>");
document.write ("Результат: ", firstNum % secondNum);

// Работа с переменными
var num = 1.45;
var Num = "String";
var bool = true;
console.log (bool);

var name = prompt ("Как вас зовут?");
console.log ("Ваше имя " + name);

Весь html код из видео урока

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Изучение JavaScript</title>
  <script src="javascript.js"></script>
</head>
<body>
  <p id="text">Какой-нибудь текст</p>
  <button onmouseover="changeColor('blue');">Синий</button>
  <button onclick="changeColor('red');">Красный</button>
  <br>
  <form name="myForm" action="" onsubmit="return validateForm()" method="post">
    Имя: <input type="text" name="fname">
    Телефон: <input type="text" name="ftel">
    <input type="submit" value="Submit">
  </form>
</body>
</html>

Задание к уроку

Простое задание

Спросите у пользователя в сплывающем окне сколько ему лет. Если ему больше 18, то в консоль напишите фразу "Ура, тебе уже все можно!".

Посмотреть ответ

Чтобы осуществить подобную задачу вам понадобиться такой код:

var age = prompt ("Сколько вам лет?");
if (age > 18)
  console.log ("Ура, тебе уже все можно!");

Работа с циклами

Сделайте массив элементов, в котором будут возраста и имена (пример: "Кирилл, 35, Саша, 42..."). То есть поочередно, сначала имя, потом возраст. Теперь в цикле переберите все элементы и выведите на экран всех людей в такой фразе, пример: "Кирилл имеет возраст 35".

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

Посмотреть ответ

Вот решение подобной задачи:

var people = new Array ("Кирилл", 35, "Саша", 45, "Дмитрий", 23, "Анатолий", 33, "Сергей", 27);
for (var i = 0; i < people.length; i += 2)
  document.write (people[i] + " имеет возраст " + people [i + 1] + "
");

Получить остальные домашние задания можно после подписки на проект