Starting with JavaScript

by

“The World’s Most Misunderstood Programming Language” – Douglas Crockford

That was the sentence that got me into JavaScript. I still believe that Crockford’s introduction to JavaScript is the most accurate definition of the language.

It was about my 3rd year in university that I decided I wanted to learn a programming language that would let me develop any kind of software I wanted, be it web apps, mobile apps, video games or desktop apps. I was looking for a language that had such capabilities. My first move was to learn Java because of its Write Once, Run Anywhere (WORA) slogan. I soon came to realize that WORA is a pipe dream (especially with Java). So, after doing a little research I figured out 2 languages that could help me achieve what I wanted (more or less)

  • C#
  • JavaScript

C# is a great language but I had 2 problems with it. One, it was a closed source language that was really good for development on windows based systems but not so much on *nix based systems. Two, Microsoft. So, I opted to go for JavaScript as it has an open standard, most of it’s implementations are open-source and it is one of the most popular languages of this time.

So let’s say you wanted to get started with JavaScript today. What would be the first step? Well the first step is running JS in its most natural environment, the browser.

So, let’s start with a basic HTML page.

<html>
<head>
    <title>My First JS Program</title>
</head>

<body>
    <h1 id="heading">Hello, World!</h1>
</body>

</html>

Save that as index.html on your desktop and simply open it with any web browser. You should see the following,

Hello, World!

So, we have a basic HTML page. Also, this is our canvas that we can paint on using JavaScript. You may be wondering why I added the id attribute to the h1 tag. id attributes are what JavaScript uses to select and manipulate content in the browser. We’ll be using it shortly.

JavaScript is the default programming language in all web browsers and it enables us to change web pages in several ways. Here are some of the most common uses for JavaScript on the web

  • Changing the content displayed on the page
  • Adding animations
  • Interacting with the user
  • Receiving user input
  • Getting files and content from different servers
  • Playing audio and video files
  • and much, much more…

So, let’s spice up our simple web page using some JavaScript.

To do that we will have to add <script> tag in our web page. 

<html>
<head>
    <title>My First JS Program</title>
</head>

<body>
    <h1>Hello, World!</h1>

    <script type="text/javascript">

    </script>
</body>

</html>

The best practice for adding JS scripts is before the closing tag of the body. Notice the type="text/javascript" attribute. This tells the browser that the code which will go inside the script tag will be JavaScript. It is optional in most browsers, since JS is the default language but it is still a good practice to include it.

Now, let’s add some code:

<script type="text/javascript">
    var heading = document.getElementById('heading');
    heading.innerText = "Hello, Osama!"
    heading.style.color = "red";
</script>

Okay, so I’ve added 3 lines of JavaScript in the script tag. Let’s go over what this program does;

The document global variable represents the HTML document the JavaScript script is embedded in. Using, document I can access and modify any part of the HTML. I use the .getElementById() method to retrieve the h1 tag using the id I defined previously. Now, I am able to modify the heading element however I wish. For now, I simply changed the text from Hello, World! to Hello, Osama and colored it red. Let’s see the output!

Great! It worked!

Getting Input from the User

Write, what our JavaScript program does is pretty basic and static. It changes the content of the string and colors it red. Let’s say we wanted the user to input his or her name, and then also input the color. We can simply use the prompt() function for that.

Modified code

<script type="text/javascript">
    var heading = document.getElementById('heading');
    var name = prompt("Hey there, what's your name?")
    heading.innerText = "Hello, " + name;
    var color = prompt("Hello " + name + ", what is your favorite color?");
    heading.style.color = color;
</script>

Now, when you refresh the web page, you will be prompted to enter your name and your favorite color. And the heading content will be dependent upon your inputs, e.g. for the input of “Arshad” and “magenta”, the output would be:

Arshad in Magenta

Cool. So, you can see how JavaScript adds interactivity to a webpage.

Moving on

What we have seen here is a very, very, basic example of how JavaScript can add interactivity to a web page, and we haven’t even touched the tip of the tip of the iceberg. To actually get more hands-on experience in the language I recommend the following sites

  • https://www.freecodecamp.org
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript

During the past 20 or so years, JavaScript has gone from being a simple small, scripting language to one of the most important programming languages of the modern age. I began learning it during my university years and I am still learning it to this day.

I hope I can share more of my knowledge of JS on this blog soon. Just have to overcome my laziness a bit.