← back to posts

First "real" experience with JavaScript


I have been reading a JavaScript book for a couple of months now… I didn’t learn much, unfortunately. I know this is becasue all reading need to be supplemented with some sorts of exercise, preferrably real world projects. Luckily, I have an idea for a project that will require some JavaSript.

So, instead of reading a book, I will start by formulating an idea and Googling it (or rather StackOverflowing it). In this post I will go over my first (baby) steps in JavaScript.

As far as I understand you can either write some JavaScrip (JS) directly in the html code, like so (the example is from W3Schoools:

<h2>My First JavaScript</h2>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

This will display the current time, after you click the button.

Another way is to create a separate javascript file and reference it in the html code, like so:

<script type="text/javascript" src="path-to-javascript-file.js"></script>

Usually, links scripts are referenced in the end of the <head> tag.

I am going to resort to the second option, since I feel like this is much cleaner and minimal.

So, what do I need? What is the first thing I am going to ateempt first?

Creating a form/input field with a press of a button

After googling for a bit I found that the way to create new html using javascript is with the function createElement. So this is what I am going to write in my main.js:

function inputJournal() {
  var z = document.createElement("FORM");
  z.setAttribute("id", "myForm");
  document.getElementById("new-journal").appendChild(z);

  var x = document.createElement("INPUT");
  x.setAttribute("type", "text");
  x.setAttribute("value", "Hello World!");
  x.setAttribute("id", "new-journal-name");
  document.getElementById("myForm").appendChild(x);

  var y = document.createElement("A");
  y.setAttribute("id", "add-button");
  var t = document.createTextNode("Add");
  y.appendChild(t);
  document.getElementById("myForm").appendChild(y);
}

Let’s go over what happened here:

  • I called my function “inputJournal”
  • created a variable z, which is a <form> with id=myForm
  • attached the form tag to the existing div with id=new-journal
  • Repeated the process for the <input> field and <a> field
  • Attached those 2 to the previously created form using document.getElementById("myForm").appendChild(y);

In my html file in the <head> section I will add:

<script type="text/javascript" src="main.js"></script>

And will create a “button” with an `onClick tag to load the javascript function noce the button pressed:

<p onclick="inputJournal(); this.onclick=null;">Press Here!</p>

<div id="new-journal"></div>

I’ve also added this.onclick=null to make sure that the code is only run once, otherwise we will create a ton of forms by pressing the button multiple number of times.

Finally, the div block is there, because we told the javascript code to getElementId("new-journal") and everything that is vreated with our coe wil be contained within this div, so that we can style it with CSS.

I think this covers it all. Everything is working for me. If you followed along, I hope it is working for you too.

If you have any questinos please let me know at any of the social lin ks on the top left.

Thanks for reading.