Introduction to JavaScript with Simple Tutorial
Published: 2021-10-02 20:56:37

# 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.
<br>
<br>
## 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.
![final image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqo6oig0pc1jixil1sud.png)_This is how it will look like._
<br>
<br>
## Preparation
Create HTML, CSS and JavaScript files. Copy and paste codes below.

```html
<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>
```
```css
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:
![After copying and pasting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wnzpu33ib7mmf6m8ve8.png)
<br>
<br>
## 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.
```javascript
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:
```javascript
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.
<br>
<br>
## Step 2: addEventListener()
Next step is to assign an event to execute when the button is clicked.
Copy and paste the code below.
```javascript
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](https://www.w3schools.com/jsref/met_element_addeventlistener.asp).
<br>
<br>
## Step 3: Retrieving value inside `input`
```javascript
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.
<br>
<br>
## Step 4: Date() Object
For calculating day from entered year, month and date, we will pass these values to Date() object.
```javascript
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](https://www.w3schools.com/jsref/jsref_obj_date.asp) 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.
<br>
<br>
## Step 5: textContent
Finally, we will reflect the result to the webpage.
```javascript
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.
<br>
<br>
## Conclusion
The whole JavaScript code should look like this.
```javascript
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!