The first thing everyone learns in JavaScript
Tags: javascript, tutorial, learning, journey
Published: 2020-07-30 06:25:50

---
title: The first thing everyone learns in JavaScript
published: true
description: The first thing to learn in Javascript is Hello World. Everyone always starts here.
tags: javascript, tutorial, learning, journey
cover_image: https://garrettmickley.com/wp-content/uploads/2020/07/greg-rakozy-vw3Ahg4x1tY-unsplash.jpg
series: "G Learns JavaScript"
canonical_url: https://garrettmickley.com/the-first-thing-everyone-learns-in-javascript/
---
I've tried and failed to learn to program many times in my life.

I've spent thousands of dollars and hundreds of hours.

Enough is enough.

Now that I'm focused on privacy and OSINT, it's time for me to really learn to program.

I have lots of ideas for tools to make my job easier.

Here I am learning Javascript.

I will also be focusing on learning Python in the future.

Right now I'm focused on Javascript.

## The first thing everyone always learns is "Hello World."

But I found three ways to write Hello World in Javascript.

I'm sure there are at least 100 more ways, but these three seem to be the three most important places to start.

All three will be used heavily throughout our lives programming.

If you're brand new to programming, they're called functions.

In JavaScript, we always end with a semicolon <code>;</code>.

<!-- wp:heading -->
<h2>First, we start with <code>console.log()</code>.</h2>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>console.log("Hello World!");</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>The function <code>console.log()</code> is important because we will use it a lot for testing.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Having a message display in the console doesn't modify the page at all.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We can have it return information to confirm our code works as intended, or return errors if it doesn't.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Sometimes pieces of our code won't have any other way of clearly displaying whether it's working as intended or not.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We use <code>console.log()</code> to return messages with information in the browser console.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Just type <code>console.log()</code> and then, in between the parenthesis, add your message in quotes <code>""</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Don't forget your semicolon <code>;</code> at the end.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>console.log("Hello World!");</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Play with it on Codepen (click the "Edit on Codepen" and then delete the <code>//</code> before the <code>console.log()</code> line):</p>
<!-- /wp:paragraph -->

{% codepen https://codepen.io/quadiumstaral/pen/wvMLWjZ %}

<!-- wp:heading -->
<h2>Next we move on to <code>alert()</code>.</h2>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>alert("Hello World!");</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>While we use <code>console.log()</code> to notify us, the programmer, of errors, <code>alert()</code> is one thing we can use to notify the user of an error.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The <code>alert()</code> function creates a small popup window with brief message.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Just like with <code>console.log()</code>, add your message in quotes <code>""</code> between the parenthesis of <code>alert()</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>And again, don't forget your semicolon <code>;</code> at the end.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>alert("Hello World!");</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Play with it on Codepen (click the "Edit on Codepen" and then delete the <code>//</code> before the <code>alert()</code> line):</p>
<!-- /wp:paragraph -->

{% codepen https://codepen.io/quadiumstaral/pen/wvMLWjZ %}

<!-- wp:heading -->
<h2>We close this lesson with <code>document.write()</code>.</h2>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>document.write("Hello World!");</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>The function <code>document.write()</code> is just one of the many ways to modify a web page with JavaScript.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It's just as easy as <code>console.log()</code> and <code>alert()</code>, but it will make a visible change to the web page we are viewing.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Just like with <code>console.log()</code> and <code>alert()</code>, add your message in quotes <code>""</code> between the parenthesis of <code>document.write()</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I keep repeating this because it's a common problem people have: don't forget to end with a semicolon <code>;</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>document.write("Hello World!");</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Play with it on Codepen (click the "Edit on Codepen" and then delete the <code>//</code> before the <code>document.write()</code> line):</p>
<!-- /wp:paragraph -->

{% codepen https://codepen.io/quadiumstaral/pen/wvMLWjZ %}

<!-- wp:heading -->
<h2>This has been pretty boring so far.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is only the first post.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The first thing we've learned.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It will get better.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I'll kick it up a notch for the next post.</p>

Please follow me on Dev.to and join me on this journey of learning JavaScript.

{% user garrett %}

<hr class="wp-block-separator"/>

<span>Photo by <a href="https://unsplash.com/@grakozy?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Greg Rakozy</a> on <a href="https://unsplash.com/s/photos/javascript?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>