Highlights of JavaScript — Popup Windows and Input Validation

To learn JavaScript, we must learn the basics.

In this article, we’ll look at the most basic parts of the JavaScript language.

Opening Popup Windows

We can open popup windows with the window.open method.

For example, we can write:

const monkeyWindow = window.open();

To add some content to the window, we can write:

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

We call document.write on the monkeyWindow to show the content.

Also, we can show the content of a URL with the location.assign method:

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

Now we should see Google displayed in the new window.

We can also write:

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

to do the same thing.

To close a window, we can write:

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

Controlling the Window’s Size and Location

We can set the popup window’s size and location with a string in the 3rd argument of window.open .

For example, we can write:

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

Now the window is 420px in width and 380px for height.

To change its location, we can write:

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

to add the left and top keys to set the position.

Form Validation

We can add form validation to a form.

For example, we can write the following HTML:

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

And we can add the following JavaScript to add the validation:

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

In the checkForLastName function, we get the value of the input with the ID lastNameField .

If the value ‘s length is 0, then we show the alert.

The return in the onSubmit attribute value makes sure that we prevent the default submit behavior along with the return false in checkForLastName so that we can run the JavaScript validation.

To improve the user experience, we can call focus on the element:

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

We call focus on the input element so that the user can type in the text without clicking on the input.

Also, we can add background color so that the user can see the input field more easily:

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";
}

We set the background color by setting the lastNameField.style.background property.

Conclusion

We can open windows with our own content.

Also, we should add form validation for fields so that users always input valid data.