[03] JavaScript Untitled Document.md

한국어 English 日本語 简体中文 繁體中文
By Gi Pyeong Lee
javascript javascript ecma use 3-minute web study engineering
Untitled Document.md

3 Minutes: Chapter 3 JavaScript

_05 Javascript What is it?

JavaScript is an object-based script programming language. For more detailed information, please refer to Wikipedia .

In the previous chapter, we learned about CSS . Through CSS , we created something with certain properties . Now, we are going to tell it what it should do .

_06 Let's trigger an alert box when a button is clicked.

HTML 


<div class="button" id="id_button">Button</div>

CSS 


<style>
.button {
    background-color:green;
    color:white;
    width:auto;
    height:auto;
}
</style>

Javascript 


<script>
document.getElementById("id_button").addEventListener("click",function(){
alert("hello world");
});
</script>

If we put the above together in a .html file, it looks like this. 


<!DOCTYPE HTML>
<html>
<head>
<style>
.button {
    background-color:green;
    color:white;
    width:auto;
    height:auto;
}
</style>
</head>
<body>
<div class="button" id="id_button">Button</div>
<script>
document.getElementById("id_button").addEventListener("click",function(){
    alert("hello world");
});
</script>
</body>
</html>

The example above shows a string saying 'hello world' when the corresponding div tag is clicked.

Using JavaScript, you can assign specific actions to a tag through its id , class , etc.
Not just clicks, but you can also assign actions for mouse events such as mouseover and mouseout .

_07 Let's change the button's properties.

HTML 


<div class="button" id="id_button">Button</div>

CSS 


<style>
.button {
    background-color:green;
    color:white;
    width:auto;
    height:auto;
}
</style>

Javascript 


<script>
// Changes the color of id_button to red.
document.getElementById("id_button").style.color="red";
</script>

_08 Let's disable the button's stylesheet.

HTML 


<div class="button" id="id_button">Button</div>

CSS 


<style id="btn_css">
.button {
    background-color:green;
    color:white;
    width:auto;
    height:auto;
}
</style>

Javascript 


<script>
// Let's disable the style with the id 'btn_css' applied to the document.
document.getElementById("btn_css").disabled = true;
</script>

Today, we briefly looked at JavaScript. Think of the JavaScript I taught you as a vibe rather than a learning session .
Below are some simple learning materials for JavaScript.

MDN JavaScript Learning Materials

In reality, JavaScript is a scripting language that you must study to use properly. As you study JavaScript, you will hear the term ECMAScript .
It is easy to think of this term as the standardized scripting language for JavaScript.

cf.
When writing JavaScript in the future, you may see the phrase use strict at the top of the script.
This script indicates that it follows standards, which can be interpreted to mean it is designed to operate identically across various browsers.

Summary

- JavaScript makes HTML move.

- JavaScript can change property values applied to the document .

- JavaScript can autonomously change tags in the document .

- What we tasted today is about 1% of JavaScript. The other 99% is truly boundless.

3-Minute Spoiler

  • It seems too hard to learn and use JavaScript from scratch, is there a way to use it more easily?
AD