Introduction to JavaScript with Simple Tutorial

Introduction

Okay, you studied the core of HTML and CSS, and can create simple websites now. ...What next? Oh, JavaScript.

I assume that is the natural thinking process when you start to learn how to create websites. So you start studying JavaScript.
After several hours of going through JavaScript material, one question will cross your mind.

How JavaScript work with HTML and CSS?

In this article, I will give you an idea of how you can use JavaScript with HTML and CSS.

Overview of walkthrough

You will be creating a simple website that you can enter a specific year, month and day and it will show you the date.
This is how it will look like.

Preparation

Create HTML, CSS and JavaScript files. Copy and paste codes below.

<div class="outer-container">
        <div class="container">
            <input type="text" id="year" placeholder="year (yyyy)">
            <input type="text" id="month" placeholder="month (mm)">
            <input type="text" id="date" placeholder="date (dd)">
            <button id="button">Check</button>
            <h2></h2>
        </div>
</div>

body {
    background-color: cadetblue;
}

.outer-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.container {
    width: 300px;
    height: 200px;
    text-align: center;
}

input {
    height: 25px;
    width: 250px;
    margin: 10px;
}

button {
    height: 40px;
    width: 100px;
    background-color: #141414;
    color: white;
    border: none;
}

When you are done copying and pasting, it will look like this:

Step 1: querySelector()

You will want to execute a function that shows date when you click a button. To interact with HTML elements, you need to select them in JavaScript.
Write this line below in JavaScript file.

const btn = document.querySelector("button")

We are selecting a button element with document.querySelector() and assigning it to btn.

querySelector() method is useful as you can use not only element names, but also ids and class names.
For example:

document.querySelector("#id")
document.querySelector(".class")

There are also getElementById() and getElementsByClassName() methods to select ids and classes specifically. When using these methods, you don't need "#" and "." before name.

Step 2: addEventListener()

Next step is to assign an event to execute when the button is clicked.
Copy and paste the code below.

btn.addEventListener('click', function(){

})

The codes that are written inside function will be executed when the button is clicked.
There are several other events such as mouseover. You can check some of them here.

Step 3: Retrieving value inside input

btn.addEventListener('click', function(){
    const year = document.querySelector("#year").value
    const month = document.querySelector("#month").value
    const date = document.querySelector("#date").value

    const text = document.querySelector("h2")
})

Here, we are combining querySelector method and .value to get value from inputs. Also, we are selecting h2 element to show a result.

Step 4: Date() Object

For calculating day from entered year, month and date, we will pass these values to Date() object.

btn.addEventListener('click', function(){
    const year = document.querySelector("#year").value
    const month = document.querySelector("#month").value
    const date = document.querySelector("#date").value

    const text = document.querySelector("h2")

    const day = new Date(year, month-1, date)
})

Pass arguments and create an instance of Day().
Giving a small explanation of Day() function, it returns current time when no arguments are passed. It has several methods to acquire hours, milliseconds and such. (Read this for reference.)
If you check one part of code, which is const day = new Date(year, month-1, date), you might wonder why month is decreased by 1. This is because of the uniqueness of Day() object.
It returns month and day with numbers. For example, January is 0, February is 1, March is 2... and so on. That is why we need to decrease month input by 1.

Step 5: textContent

Finally, we will reflect the result to the webpage.

btn.addEventListener('click', function(){
    const year = document.querySelector("#year").value
    const month = document.querySelector("#month").value
    const date = document.querySelector("#date").value

    const text = document.querySelector("h2")

    const day = new Date(year, month-1, date)

    const daysList = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

    text.textContent = daysList[day.getDay()]
})

Let's break it down. Continuing from Step 4, I'll explain getDay() first.
At the last sentence, you can see text.textContent = daysList[day.getDay()].
getDay() is a method for Date() that returns day in numbers. Starting from Sunday which is 0, Monday is 1, Tuesday is 2... just like how numbers are assigned to each months.
To easily understand the result, we create an array, which is daysList in our code. day.getDay() becomes an index in daysList and is assinged to text.textContent.
This textContent is selecting inside text of h2 element so that when button is clicked, the result will be shown on screen.

Conclusion

The whole JavaScript code should look like this.

const btn = document.querySelector("button")


btn.addEventListener('click', function(){
    const year = document.querySelector("#year").value
    const month = document.querySelector("#month").value
    const date = document.querySelector("#date").value

    const text = document.querySelector("h2")

    const day = new Date(year, month-1, date)

    const daysList = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

    text.textContent = daysList[day.getDay()]
})

Did it work?
There are still a lot to improve. Even if you don't enter anything or month and date inputs are not between 1 - 12 and 1 - 31, it still returns something.
However, this tutorial is to give a rough idea of interacting with HTML through JavaScript. You can expand and go beyond from here.

I hope you are now a little familiar with DOM!