Чтобы изучить JavaScript, мы должны изучить основы.

В этой статье мы рассмотрим самые основные части языка JavaScript.

Открытие всплывающих окон

Мы можем открывать всплывающие окна с помощью метода window.open.

Например, мы можем написать:

const monkeyWindow = window.open();

Чтобы добавить контент в окно, мы можем написать:

const monkeyWindow = window.open();
const windowContent = `<h1>hello world</h1>`;
monkeyWindow.document.write(windowContent);

Мы вызываем document.write на monkeyWindow, чтобы показать содержимое.

Кроме того, мы можем показать содержимое URL-адреса с помощью метода location.assign:

const monkeyWindow = window.open();
monkeyWindow.location.assign("https://www.google.com");

Теперь мы должны увидеть Google в новом окне.

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

const monkeyWindow = window.open();
monkeyWindow.location.href = "https://www.google.com";

сделать то же самое.

Чтобы закрыть окно, мы можем написать:

const monkeyWindow = window.open();
monkeyWindow.location.href = "https://www.google.com";
monkeyWindow.close();

Управление размером и расположением окна

Мы можем установить размер и расположение всплывающего окна с помощью строки в третьем аргументе window.open.

Например, мы можем написать:

const monkeyWindow = window.open("https://www.google.com", "win1", "width=420,height=380");

Теперь окно имеет ширину 420 пикселей и высоту 380 пикселей.

Чтобы изменить его местоположение, мы можем написать:

const monkeyWindow = window.open("https://www.google.com", "win1", "width=420,height=380,left=200,top=100");

добавить клавиши left и top для установки положения.

Проверка формы

Мы можем добавить в форму проверку формы.

Например, мы можем написать следующий HTML:

<form onSubmit="return checkForLastName();">
  Please enter your last name.<br>
  <input type="text" id="lastNameField">
  <input type="submit" value="Submit">
</form>

И мы можем добавить следующий JavaScript, чтобы добавить проверку:

const checkForLastName = () => {
  if (document.getElementById("lastNameField").value.length === 0) {
    alert("Please enter your last name");
    return false;
  }
}

В функции checkForLastName мы получаем значение ввода с идентификатором lastNameField.

Если value ‘s length равно 0, мы показываем предупреждение.

return в значении атрибута onSubmit гарантирует, что мы предотвратим поведение отправки по умолчанию вместе с return false в checkForLastName, чтобы мы могли запустить проверку JavaScript.

Чтобы улучшить взаимодействие с пользователем, мы можем вызвать focus для элемента:

const checkForLastName = () => {
  const lastNameField = document.getElementById("lastNameField")
  if (lastNameField.value.length === 0) {
    alert("Please enter your last name");
    lastNameField.focus();
    return false;
  }
}

Мы вызываем focus для элемента ввода, чтобы пользователь мог вводить текст, не нажимая на ввод.

Кроме того, мы можем добавить цвет фона, чтобы пользователю было легче видеть поле ввода:

const checkForLastName = () => {
  const lastNameField = document.getElementById("lastNameField")
  if (lastNameField.value.length === 0) {
    alert("Please enter your last name");
    lastNameField.focus();
    lastNameField.style.background = "yellow";
    return false;
  }
  lastNameField.style.background = "white";
}

Мы устанавливаем цвет фона, задав свойство lastNameField.style.background.

Заключение

Мы можем открывать окна с нашим собственным содержимым.

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

Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube!