Hello World

1. The "Hello, World!" Program Simplified

Why "Hello, World!"? It's like a welcome handshake in the world of programming. Even though it's more of a tradition than anything else, it's a great way to start learning a new programming language. Forget about its history; let's focus on how it works.

The goal is simple: make the computer say "Hello, World!" on the screen. Why do we do this? Well, it serves a few purposes:

Learning the Basics: It helps us understand the basic structure of a programming language and how it compares to others.
Easy Testing: It's a super simple program that anyone can write or find online. It's a great way to check if our tools and environment are set up correctly.
Feedback: It's a program that produces some output, so it tells us if it ran correctly or not.

Now, let's see how this works in client-side JavaScript. There are two ways to make the computer say "Hello, World!" here:

Method 1: We can use JavaScript to change things on a web page, like inserting text or modifying titles. This way, we control what's displayed visually on the website.

Method 2: We can use the console, a hidden part of developer tools, to write information. It's not visible by default and needs to be enabled. For our needs, the console is more convenient because we don't have to worry about the website's structure.

Now, what's this console? It's a place where messages are shown, usually not seen by regular website users. These messages can be generated by JavaScript when it encounters an error or when we tell it to print something using a function.

The key function we use to write to the console is console.log. It's like telling the computer to "log" or write something down.

So, to make our computer say "Hello, World!" in JavaScript, we simply write:

console.log("Hello, World!");

Think of console.log like a command. We're telling the computer, "Hey, log this message, which is 'Hello, World!'." The computer understands this because it's following our instructions.

2. Understanding the Basics of Web Development

In web development, we're often dealing with different pieces that work together to create a website. Let's break down some key concepts to help you understand how it all fits together.

2.1 HTML - The Structure

HTML (HyperText Markup Language) is like the backbone of a web page. It's made up of tags, which are enclosed in angle brackets (< >). Tags define the structure of a webpage, like headings, paragraphs, lists, and more. They're often used in pairs, with an opening tag and a closing tag. For example, a paragraph is defined like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

<!DOCTYPE html>: This declaration tells the browser that the document follows HTML5 standards.
<html>: The root element that contains all other elements.
<head>: Contains metadata about the document, like the title that appears in the browser's title bar.
<body>: Where the visible content of the web page goes, like headings and paragraphs.

2.2 JavaScript - The Behavior

JavaScript is a programming language of the web, and it adds interactivity to websites. In a client-side setup, JavaScript code is embedded within an HTML document. Here's how it's included:

<script> // JavaScript code goes here </script>

Or you can link to an external JavaScript file:

<script src="my-script.js"></script>

JavaScript is executed by the browser, and it can modify the web page's content and respond to user actions.

2.3 CSS - The Styling

CSS (Cascading Style Sheets) is used to control the appearance of a web page. It's like the fashion designer for your website, determining how things look. For instance, you can define the font, background color, and layout of elements.

While HTML is essential for structure and JavaScript for behavior, CSS is about presentation. You can create a web page with just HTML and JavaScript, but CSS enhances its visual appeal.

2.4 Bringing It All Together

HTML gives your webpage structure using tags.
JavaScript makes it interactive and dynamic.
CSS styles the page, making it visually appealing.

Remember, HTML is a must for creating a webpage, while CSS and JavaScript enhance it further. These are the building blocks of web development, and understanding their roles will help you create functional and visually pleasing websites.

3. Running Your JavaScript Code

Let's make running JavaScript simpler. Imagine you have a browser, and you want to make it do something with JavaScript. Here's how it works:

User's Side: You, the user, open your web browser like Chrome. You want to use some special tools, so you enable the developer tools (we'll explain how later). This isn't something you need for everyday browsing; it's for when you're working on websites.
You Type a URL: You type a website address like "https://test.org" in the browser's address bar. This is where your browser will get a webpage from. In our example, "https://test.org" is just made up, so don't try to visit it for real.
Server's Side: On a remote server somewhere (far away on the left side of the picture), there's a web server. It's like a computer that stores web pages. When you ask for a page by typing in a URL, the server prepares a response for you.
Getting the Webpage: The server sends you back a response, which includes an HTML file. Think of HTML as the structure of a webpage. If there's some content defined in that HTML (like a paragraph with text), your browser will show it to you.
JavaScript Time: Now, here's the fun part. Inside that HTML file, there might be something like <script> tags with JavaScript code inside. This code will run in your browser. If you've enabled developer tools and opened the console, you can see the results there.
Hello, World!: So, if the HTML has JavaScript code that says "Hello, World!", and your developer tools are ready, your console will show "Hello, World!"

That's the basic idea of how JavaScript code on a webpage runs in your browser.

But what if you want to work with your own HTML and JavaScript files, like when you're developing? You can do that too!

Local HTML File: You can load an HTML file that's on your computer into the browser. If this HTML file references a JavaScript file using a <script> tag, that JavaScript file will also be loaded.
Local Path: To load a local HTML file, you can type "file:///" followed by the file's path in the address bar. Or, you can simply open the file in your browser using the menu.

That's how you can run your own HTML and JavaScript files locally without needing a remote server.

So, whether you're testing a webpage online or working with your own files, you now know how to make JavaScript come to life in your browser!

4. Running Your JavaScript Code Locally

Let's make running your JavaScript code locally straightforward:

1. Set Up Your Files: Open your preferred code editor. Create a new file with the extension .html. It's a good practice to avoid spaces in the file name. In this HTML file, put the following code and save it:

<!DOCTYPE html>
<html>
  <head>
    <title>Empty Page</title>
    <script src="main.js"></script>
  </head>
  <body>
  </body>
</html>

Now, create another file in the same editor, this time called main.js. It should contain just one line:

console.log("Hello, World!");

Save the changes.

2. Open Your Browser: Open your web browser and open a new tab. Enable the developer tools (they are specific to each tab) and select the console tool. Familiarize yourself with the developer tools layout.
3. Run Your Code: Ensure that the focus is on the browser window (the new tab). Then, using the appropriate keyboard shortcut, open the HTML file you just created. If everything is done correctly, you should see "Hello, World!" in the console.
4. Challenge: Try to modify the HTML file so that it doesn't refer to the main.js file. Instead, place the same JavaScript code directly after the <script> tag.

If you encounter any issues, refer back to the first drawing in this section for guidance.

5. Running Code in the Console

Running short JavaScript code snippets in the browser's console is convenient. Here's how to do it:

1. Blank HTML Page: Open a new tab and type about:blank in the address bar. This instructs your browser to generate and load a minimal blank HTML page.
2. Open Developer Tools: Enable developer tools, and you can check the minimal HTML generated by the browser by selecting the Elements tool (in Chrome) or Inspector (in Firefox). You'll see basic HTML structure:

<html>
  <head></head>
  <body></body>
</html>

3. Access the Console: Select the console tool in the developer tools. You'll see a prompt with a cursor.
4. Run Code: Enter an instruction, like console.log("Hello, World!");, and hit Enter. The console will display the text you specified.
5. Browser Variations: The layout and appearance of developer tools may vary slightly depending on your browser's version and operating system, but the core functionality remains the same.

That's how you can run JavaScript directly in the console. It's handy for quick tests and experiments.

Remember, for most of our examples and exercises, you can work in an online environment. However, trying them in your local environment is valuable as it closely resembles how web developers work. For simple instructions, you only need an empty page with the console (e.g., about:blank). For more extensive code, create a minimal HTML file that references your JavaScript file using a <script> tag.

End Of Article