Configuring the development environment

Congratulations on completing the first lesson! Now it’s time to prepare your groundwork for the adventure in the world of JavaScript.

In this lesson, you will learn to set up your development environment by installing essential tools to bring your code to life.

What you will learn:

• What a code editor is and why it is important.
• How to install Visual Studio Code, a popular and free code editor.
• How to install useful extensions for JavaScript development.
• How to create and execute your first JavaScript script.

Preparing your toolkit:

• Code editor: A code editor is like your development workshop, where you will write, edit, and run your JavaScript scripts. There are various options available, but Visual Studio Code is an excellent choice for beginners.

Installing Visual Studio Code:

1. Visit the website https://code.visualstudio.com/download.
2. Download the editor version compatible with your operating system.
3. Run the installer and follow the on-screen instructions.

Exploring Visual Studio Code:

• Interface: Visual Studio Code has an intuitive interface divided into different areas:
  • Menu Bar: Accesses features like new file, open folder, save, and run code.
  • Toolbar: Contains icons for common actions like cut, copy, paste, and undo.
  • Editor: Area where you will write your code.
  • Status Bar: Displays information about the open file and the current line.
  • Explorer: Allows navigation through your project’s files and folders.

Customizing your environment:

• Extensions: Visual Studio Code offers a variety of extensions that can be installed to add functionalities to the editor. Some useful extensions for JavaScript development include:
  • Prettier: Automatically formats your JavaScript code, making it more organized and readable.
  • ESLint: Checks your code for syntax and logic errors.
  • JavaScript IntelliSense: Auto-completes JavaScript keywords and functions.

Installing extensions:

1. Open the “View” menu and select “Extensions.”
2. Search for the desired extension in the search box.
3. Click the “Install” button to install the extension.

Creating your first JavaScript script:

1. Open Visual Studio Code and click on “File” > “New File.”
2. Save the file with the extension “.js.”
3. Type the following code in the file:

console.log(“Hello, world!”);

4. Click the “Run” button in the toolbar or press Ctrl+Shift+B.
5. Observe the message “Hello, world!” appear in the browser console.

Congratulations! You have set up your development environment and executed your first JavaScript script.

Challenge:

1. Create a JavaScript script that asks the user for their name and age and displays a personalized message in the console.
2. Use the prompt to obtain the user’s name and age.
3. Use string concatenation to create the personalized message.
4. Test the script and observe the result in the console.

Tips:

• Refer to the Visual Studio Code documentation to learn more about the editor: https://code.visualstudio.com/docs/
• Use online tutorials and courses to deepen your knowledge of JavaScript.
• Engage in online communities to interact with other developers and learn from their experiences.

Remember:

• Practice leads to perfection. Keep practicing and writing code to develop your skills in JavaScript.
• Don’t hesitate to seek help when necessary. Various online resources and communities are available to assist you on your journey.

Keep exploring the world of JavaScript! The upcoming lessons will guide you through the language fundamentals and prepare you to create amazing applications.

Compartilhar

Compartilhar

Siga-me