SYSTEM NOTICE

Auto translation by AI. Be sure, accuracy, nuances and authorial intent may not be fully reflected.
見出し画像

#038 Front-side (4): Introduction to JavaScript

KINO↓

Introduction to JavaScript for Beginners

JavaScript is a magical language that makes websites come alive! Below, I will explain the main features of JavaScript in an easy-to-understand way.

What kind of language is JavaScript?

  1. Runs in web browsers

    • It runs in browsers you use every day, such as Google Chrome and Safari.

    • Browsers contain a special program called a "JavaScript engine," which understands and executes JavaScript.

    • However, you should be aware that it may behave slightly differently depending on the browser.

  2. Makes web pages fun With JavaScript, you can do things like the following:

    • Display pop-up messages (like "Hello!")

    • Change page content (like changing colors when clicked)

    • Make things happen when you press buttons, enter text, or scroll the page

    • Exchange information over the internet

  3. Can be used outside the browser

    • By using a special program called Node.js, you can use JavaScript in places other than the browser.

    • Using this, you can handle files on your computer or access databases.

Points to note

JavaScript has a name similar to another programming language called "Java," but they are completely different languages. JavaScript was named by borrowing the name of Java when it was popular. However, the contents are completely different, so be careful not to confuse them!

By using JavaScript, you can add movement and interactivity to static web pages. You can provide a more fun and convenient experience for people visiting your website.

Your first JavaScript app for beginners

Now, let's create your first JavaScript program! This program will display the message "Hello, JavaScript!" on your browser.

Steps

  1. First, create two files:

    • index.html (defines the structure of the web page)

    • app.js (where you write the JavaScript code)

  2. Write the following code in index.html:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>初めてのJavaScriptアプリ</title>
    <script src="app.js" defer></script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

What is this code doing?

  • It is creating the basic structure of the web page.

  • The line <script src="app.js" defer></script> loads the JavaScript file (app.js).

  • defer is an instruction that says, "Please execute the JavaScript after the page has finished loading."

Why specify defer?

The defer attribute is an important instruction that controls the timing of loading and executing JavaScript files. Let's briefly explain why.

Problems when not using defer

  1. HTML is loaded from top to bottom.

  2. If you write a script tag normally, it will interrupt the loading of the HTML as soon as it finds the JavaScript file and execute the script.

  3. At this time, even if JavaScript tries to manipulate HTML elements, there is a possibility that those elements have not been loaded yet.

  4. As a result, errors may occur or it may not work as expected.

Benefits of using defer

  1. It loads the HTML to the end without interrupting the loading process.

  2. It executes JavaScript after the HTML loading is complete.

  3. This ensures that JavaScript can reliably manipulate all elements of the HTML.

To use an analogy...

Imagine you are cooking a meal:

  • Without defer: It's like trying to start cooking before preparing the ingredients. You'll run into trouble because the necessary ingredients are missing.

  • With defer: It's like preparing all the ingredients before you start cooking. The cooking process goes smoothly.


Cooking after all ingredients are ready

By using defer, you can execute JavaScript while the stage (HTML) it operates on is fully prepared. This prevents many errors and enables smooth web page operation.

  1. Write the following code in app.js:

alert('Hello, JavaScript!');

What is this code doing?

  • alert() is a command that displays a message box on the browser.

  • 'Hello, JavaScript!' is the message you want to display.

Let's run the program!

Preparation: Installing the Go Live extension

  1. Open VSCode.

  2. Click the Extensions icon (shaped like a puzzle piece) in the left sidebar.

  3. Type "Live Server" into the search bar.

  4. Find "Live Server" by Ritwick Dey and click the "Install" button.

  5. Once the installation is complete, restart VSCode.

Steps to run index.html

  1. Open the project folder in VSCode.

    • Select "File" > "Open Folder" and choose the folder containing index.html.

  2. Find the index.html file in the file explorer on the left and click to open it.

  3. A "Go Live" button should appear in the status bar at the bottom of the screen.

    • If it does not appear, try restarting VSCode.

  4. Click the "Go Live" button.

  5. Your default web browser will automatically launch and display index.html.

    • The URL will typically look like http://127.0.0.1:5500/index.html or http://localhost:5500/index.html.

  6. Now, the JavaScript program will execute, and a "Hello, world!" alert will be displayed.


  • When you edit the index.html or app.js files, the browser will automatically refresh upon saving.

  • To finish your work, click the "Port : 5500" button in the VSCode status bar to stop the server.

Troubleshooting

  • If the "Go Live" button does not appear, try restarting VSCode.

  • If nothing is displayed in the browser, check the console (open with F12) for error messages.

Using this method, you can easily set up a local server to test your JavaScript programs.

Conclusion

Since this has become a bit long, I will wrap up the discussion here.
As this is my own personal study log, the writing may be disorganized.
I apologize for that.

Thank you for reading until the end.
I also gain many insights from reading everyone's notes.
I am truly grateful 🙏.
I look forward to your continued support.

いいなと思ったら応援しよう！