One is the == operator, and the other is the === operator.

But what are the differences between the two and when you should choose which?

Well, if you read this blog post till the end, you’re going to discover exactly that.

The Equal-To Operator

The first and most common operator is the equal-to aka the == operator.
It allows you to compare two values with each other and receive a Boolean as a result.

Example:

const name = "Jack";
console.log(name == "Jack"); // This should print out 'true'.

The operator takes two values, one on the left and one on the right.

But there’s a caveat with this operator. And that it doesn’t matter if the values are not of the same Datatype.

Example:

const num = 1;
console.log(num == "1"); // It would still print out 'true'.

But why is that?

Well, the equals-to-operator checks both values loosely. Meaning that it won’t care if both data types are not the same. All that matters is that the value provided has the same character.

This is not the case with the next operator.

The strict-equality operator

Just like the equal-to operator, it checks if both values are the same and if that’s the case. It will either return true or false.

But here’s where this operator is different.

For starters, the operator uses three = characters. ===

Instead of ‘loosely’ comparing the two values, it will strictly compare them.

This means that the datatypes of both values must be the same as well as the values.

Example:

const num = 1;
console.log(num === "1"); // Now, it would print out 'false'

This feature allows you to write safer code and more accurate code that’s also easier to read.

But how can I choose which?

Personally, it depends on your preference as a developer. I’ve seen many people use the == operator and others use the === operator.

It also depends on how strict you want your code to be.

Although I do have to mention that the === operator allows for more concise and safer code because it will prevent errors like trying to manipulate a number value while it’s a string. (Like in the example shown above.)

So that was the post. You should now have a clear understanding of what the differences are and when to choose which.

Let me know in the comments down below if you found this post helpful.

Oh and remember, your dream career is just one step away!

Michiel Out!

Btw, I recently opened a FREE giveaway where 5 lucky winners will receive two weeks of video materials for FREE, from my JavaScript Mastery Blueprint.

It’s a must-have for anyone who wants to become a professional JavaScript developer.

You can join here: https://michielarkema.com/jsmb-giveaway

The post What’s The Difference Between The equal-to & The strict-equality Operator In JavaScript? appeared first on Michiel Arkema's Blog.

So that’s why if you read this blog post till the end, you will discover exactly how to create a simple login form using only HTML and JavaScript.

If you’ve been following me on Facebook for awhile, you are probably aware that I love telling stories about how I learned everything. So let me tell you a quick story about the first time I created a form for my website.

A few years back while I was in college, the teachers gave us the job to create our own portfolio website. Me of course with my ADHD getting all exited about it, I quickly created the website within an hour, once it was finished, I was so proud of myself that I had managed to create my very first website from scratch ever.

Now looking back at this memory, the website was the ugliest thing that I’ve ever seen but hey, it was pretty good for the time being. But the coolest feature that I had added was a little contact form where people could fill in their email address, their full name, and a short message that they wanted to send me.

Again, of course, me being super happy and hyper about it, I immediately shared my website with my classmates. Which turned out to be a horrible idea because that resulted in me getting thousands of spam messages sent to my email inbox through the little contact form.

Creating The Login Form

The creation of the login form is going to be split up into two parts. First, we will create the JavaScript code, and then as second, we will add the html.

Writing the JavaScript code

First, we will write the JavaScript code. So let’s assume that our login form has two input fields and a submit button. So let’s create the code based on that idea.

// To get started, let's retrieve the form element from our document.
const loginForm = document.querySelector("#loginForm")

// Now, let's grab the onsubmit event (That will run when we press the submit button).
// And add our own callBack handler to it. 
loginForm.onsubmit = (ev) => {
  // preventDefault will prevent the page from changing.
  ev.preventDefault();
  // All code in here will be executed when we press the submit button.
  
  const emailAddress = loginForm.elements.namedItem("emailAddress").value
  const password = loginForm.elements.namedItem("password").value
  
  console.log("Email Address: " + emailAddress)
  console.log("Password: " + password)
}

So in a nutshell, the code above will above will print out the values that we put in our form into the console, once we click the submit button.

PS – Put the JavaScript into a separate file with the name ‘script.js’.

Now, let’s add the HTML to the web page.

Adding the HTML

The second step is to add the html to our web page. Now this is very straight forward so you can literally just copy & paste the code below…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome login form</title>
</head>
<body>
    <form id="loginForm">
        <label for="email">Email:</label>
        <input type="email" id="email" name="emailAddress" placeholder="email@website.com" required>
        <br>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <br>
        <button type="submit">Click Here To Login</button>
    </form>

    <script src="script.js"></script>
</body>
</html>

Now when looking at the code above, you might be wondering… Michiel why did you add the script tag at the bottom of your body element?

Well, I did that because, in our JavaScript, we grab the form element from the HTML so we can access its input elements. If I would add the script tag before our form element, the JavaScript code would be executed before the form would be loaded onto the screen, which would result in an error.

So that’s it, you now know how you can quickly & easy create your very own login form using only HTML and JavaScript.

If you did found this blog post helpful, leave a comment down below saying how it helped you and your over al opinion about the post itself :).

And Remember, your dream career is closer than you think it is!

Michiel Out!

The post How To Quickly & Easy Create A Login Form With Html and JavaScript appeared first on Michiel Arkema's Blog.