Curso em Vídeo Watch on YouTube

Criando o seu primeiro script - Curso JavaScript #04

3 min read 2 hours ago
Published on Oct 16, 2025 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial will guide you through the essentials of creating your first JavaScript script. You'll learn how to differentiate between HTML, CSS, and JavaScript, organize your project files in Visual Studio Code, check your Node.js installation, and use basic JavaScript commands like alert, confirm, and prompt. Following these steps will help you build a solid foundation in JavaScript programming.

Step 1: Set Up Your Project Structure

Proper organization of your project files is crucial for efficient coding and maintenance.

  1. Create a Project Folder

    • Choose a location on your computer.
    • Name the folder (e.g., MeuProjetoJavaScript).

  2. Create Subfolders

    • Inside your project folder, create the following subfolders:
      • html
      • css
      • js

  3. Add Your Files

    • Create an HTML file (e.g., index.html) in the html folder.
    • Create a CSS file (e.g., styles.css) in the css folder.
    • Create a JavaScript file (e.g., script.js) in the js folder.

Step 2: Write Your First HTML File

Your HTML file is the backbone of your project, structuring the content that users will see.

  1. Open index.html

    • Use Visual Studio Code to open your HTML file.

  2. Basic HTML Structure

    • Add the following code to your index.html file:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/styles.css">
    <title>Meu Primeiro Script</title>
</head>
<body>
    <h1>Bem-vindo ao Meu Primeiro Script!</h1>
    <script src="../js/script.js"></script>
</body>
</html>

Step 3: Write Your First JavaScript Code

Now that you have your HTML set up, it's time to add some JavaScript functionality.

  1. Open script.js

    • Access your JavaScript file in Visual Studio Code.

  2. Add Basic Commands

    • Write your first JavaScript code:
    alert("Olá, mundo!");

  3. Test Your Code

    • Open index.html in a web browser.
    • You should see an alert box with the message "Olá, mundo!".

Step 4: Use confirm and prompt

Enhance user interaction with confirm and prompt commands.

  1. Add a Confirm Command

    • In your script.js, add the following code:
    let userConfirmed = confirm("Você deseja continuar?");
if (userConfirmed) {
    alert("Você escolheu continuar!");
} else {
    alert("Você escolheu cancelar!");
}

  2. Add a Prompt Command

    • Next, implement a prompt to get user input:
    let userName = prompt("Qual é o seu nome?");
alert("Bem-vindo, " + userName + "!");

  3. Test Your Code Again

    • Refresh your browser to see the changes in action.

Step 5: Check Node.js Installation

Before diving deeper into JavaScript, ensure that Node.js is installed correctly on your machine.

  1. Open Terminal or Command Prompt

    • Type the following command:
    node -v

  2. Verify Installation

    • If Node.js is installed, you’ll see the version number.
    • If not, download and install Node.js from nodejs.org.

Conclusion

Congratulations! You have successfully set up your first JavaScript script. You learned how to organize your project, create an HTML structure, and use JavaScript commands to interact with users. As a next step, consider exploring more complex JavaScript concepts and practicing coding exercises to solidify your understanding. Happy coding!

Table of Contents

Recent