JavaScript Head to Toe

come let’s conquer a new technology

Photo by Claudio Schwarz on Unsplash

In this article, using W3schools and many other sources, you and I are going knee-deep into JavaScript because at long last it is time. It’s time for you and me to stop running from the inevitable and begin to learn JavaScript. Life’s according to how my favourite artist put it…

Exactly what you run from you end up chasing — Tyler, the creator

I ran from JavaScript in HighSchool now my undergraduate internship requires me to learn it. Here’s the catch though this article is going to follow my real-time learning of JavaScript so it would be updated daily. So…

What is JavaScript?

JavaScript is the most widely used programming language worldwide that is according to Stack Overflow’s 2020 Developer Survey. In addition to that, the Web’s primary programming language is JavaScript because making interactive web pages is possible with JavaScript, a text-based computer language used both on the client-side and server-side. JavaScript adds interactive aspects to online pages that keep users interested, whereas HTML and CSS are languages that give web pages structure and style. JavaScript is frequently used in everyday applications like the search bar on Amazon, the news summary video that is embedded in The New York Times, and refreshing your Twitter feed. Okay, so other than that…

Why should we learn JavaScript?

Because in actuality, learning JavaScript is simple. How? Well, JavaScript can be written in small, individual chunks, even for the most complicated lines of code. It can also be tested concurrently on the web browser. In addition to that, one of the three languages that every web developer must understand is JavaScript.

• The first is HTML to specify the web page content
• The second is CSS to help define the design of websites
• Next is what we are about to learn, JavaScript. Which is used to code the behaviour of web pages

Okay now that we have self-motivated ourselves let’s begin:

1. First, to write our first JavaScript code (w3schools). You and I need to create a directory (a.k.a folder) on whichever device we use. A directory which we are going to call “practise”.

2. Then inside that directory let’s create a file called “index.html” inside the index the “index.html” file. Input the following code and save it.

NOTE: Above I’m using a code editor called V.S code to input the needed code into the “index.html” file. I could have easily done that with any other text editor including Notepad. Yes, Notepad.

So take it from me who has wasted a lot of time on trivial nonsense like these you don’t need a fancy code editor to code. For now, it’s the knowledge that matters not the tool. The only reason I’m using V.S code is that that’s what I’m used to.

Now back to the regular scheduled program — j.cole👇

If you successfully inputted and saved the code above into our “index.html”. Opening the file on a browser preferably Chrome would produce the following:

before clicking on the button

after clicking on the button

Lovely, now for the first time, you and I ( or maybe only I 😅) wrote some JavaScript code. Where? You may be asking. Well, inside the button tag the values written inside the “onclick” attribute are all valid JavaScript code that makes the webpage interactive.

How? You see whenever a user clicks on the button we created. JavaScript, using its in-built Date() function, injects HTML text (to be specific the current date and time) into the p tag with the id “demo”. Cool, right?

explaining with a diagram

A lot more of these little JavaScript practice exercises are going to be coming up so ready yourself in body and soul. We are going to be doing it this way because according to the popular idiom “Practice makes Perfect”. Tbh, I’m not a perfectionist and I don’t believe in killing yourself for perfection so I prefer the revised version of that idiom that is…

Practice doesn’t make perfect. Practice reduces the imperfection. — Toba Beta

After all, the only way to get better at anything is to Practice Practice Practice Practice.

Okay, see uhm… — Tyler the creator

Now that you and I have gotten our hands dirty with a little bit of JavaScript code and seen a little bit of what we can do with Java. The question arises…

What else can we do with JavaScript?

Firstly, you need to know that now we are just getting ourselves acquainted with JavaScript and not getting into the nitty-gritty of the code. So if you don’t understand anything now chances are We’ll go through that concept later. So 🎵don’t worry be happy🎵. Hence, to answer our question:

1. We can use JavaScript to alter HTML content: We’ve done this already using one of the many JavaScript functions, specifically, we used getElementbyId() . We used this method to target the p tag in which we inject the current date and time.

Let’s add another example, a customary one for that matter. As it is customary to always start learning a programming language by printing out “Hello World” to your device’s screen ( Don’t ask me why cuz I have no idea why it is so 🤷‍♂️). Anyways tradition is tradition so let’s do that.

• I’m assuming you know how but in case you don’t here’s how I would create a new HTML file in my “practise” directory ( a.k.a folder). By the way I changed the name of my directory from “practise” to ‘’javascriptPractise”. Anyways the name of the HTML file I would be creating is called “helloWorld.html”
• Step one: In V.S code hover my mouse over the name of my directory which is “javaScriptPractise” in this case till three icons appear.

• Step two: I would then click on the first one i.e the one with the icon that looks like a Paper with the plus sign at the lower right corner.

• Step three: Afterwhich I would input the name of the file I which to create that is “helloWorld.html” and press enter. Thereby leaving me with what’s needed to go on with this article.

At this point we can both input the following code into our “helloWorld.html” file and save it:

If you and I were successful in doing the needful when we open “helloWorld.html” in a browser preferably Chrome we should see the following:

before pushing the button.

after pushing the button.

Lovely... Quick Quiz: Make another button to say “Goodbye World”. That should be a breeze for you and me.

2. We can use JavaScript to modify HTML Attribute values: Let’s do that right now. You know the drill. We are gonna be creating a file called “blackAndYellow.html” in the “practice” directory.

To be continued

Promises — 05/07/2022

The object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Simply put:

“Producing code” is code that can take some time

“Consuming code” is code that must wait for the result

A Promise is a JavaScript object that links producing code and consuming code

Promise Object Properties

A JavaScript Promise object can be:

• Pending
• Fulfilled
• Rejected

The Promise object supports two properties: state and result.

Mastering JavaScript — 07/07/2022

Mastering JavaScript Requires an in-depth understanding of how the entire ecosystem works. The core ecosystem of JavaScript consists of 3 main components which are ECMAScript, JavaScript Engine, and JavaScript Runtime.

Basically, we to understand what ECMAScript is and how it differs from JavaScript and followed by an understanding of what a JavaScript Engine is and what a JavaScript runtime is.

JavaScript Runtime

It’s because of JavaScript Runtime that NodeJS and Google Chrome can use the same JavaScript Engine. So…

What is a JavaScript runtime?

A JavaScript Runtime (Or a JavaScript Host) is a container that uses JavaScript Engine to generate APIs that can be used by software developers to create applications using JavaScript. A JavaScript runtime in a browser would typically contain the implementations of JavaScript which are more specific to a browser. However, a runtime for something like NodeJs would have specific implementations that are more specific to running and building a server-side application using JavaScript.

What happens when JavaScript is being run on a Browser?

For however long JavaScript is being run on any browser that is the JavaScript runtime. Running in the background are three important components:

1. ECMAScript on which the core is based: The base implementation of JavaScript with all the input and output functions that the developers can use.
2. Document Object Model (DOM): This is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document ( which in this case is our HTML).
3. Browser Object Model (BOM): This is what permits us, developers, to manipulate the browser window. Using the BOM, we can access the browser and manipulate it outside of the context of the DOM ( that is the page being rendered). E.g with JavaScript you can send an alert to the screen.

Let’s talk better about these components in detail…

ECMAScript on which the core is based

Simply put JavaScript is an implementation of ECMAScript and ECMAScript is a general-purpose scripting language that has been built over the standards defined in ECMA-262 by the European Computer Manufacturers Association (ECMA). This was done with the goal of standardizing JavaScript during the year 1997. If you would like to know more about this you can read up on the history of JavaScript.

But to summarize, ECMAScript and JavaScript are different from each other. All browsers have to adhere to ECMAScript while creating their JavaScript engine and runtime environment. ECMAScript does not contain any I/O functions, instead, it’s JavaScript that implements the various functions using the guidelines set by ECMAScript.

Unto the next component …

Document Object Model or the DOM.

The Document Object Model is a language-neutral interface (meaning it can work for XML as well as HTML) that maps out the entire document ( which in our case is HTML). The DOM maps out the entire document as a hierarchy of nodes creating a tree-like representation. Here’s a diagrammatic representation of a DOM. But written in code, it looks something like this.

it’s my opinion ( Grammarly helped me correct my spelling) 😅

So Storytime, Once upon a time In Ancient Rome. Scratch that, in the early days of the internet.

Photo by Ugi K. on Unsplash

There were two browsers that were used by most people. These browsers were Netscape Navigator 4 and Internet Explorer 4. Both browsers used a different version of DHTML — Dynamic HTML. This one feature caused an uproar of fear among the early humans. By humans, I mean the early users of the internet. Anyways, a new group of heroes called the World Wide Web Consortium (W3C) was created. They made it their responsibility to maintain the standards of web communication and that was when they started working on the DOM. Now it is because of the DOM that JavaScript gets the ability to create dynamic HTML and a developer can manipulate the various nodes of a document. W3schools has provided a list of all the properties and methods of the document object in the browser. You should check it out.

The last component is …

The BOM — that is the Browser Object Model

The Browser Object Model is the interface to interact with the browser outside the context of the document itself ( That is outside the HTML ). The BOM wanted to be a villain for some period of time since it was the only part of JavaScript without any standard governing it. However, HTML5 arose and defeated BOM by making most features related to BOM become apart of the official standard of HTML5. Which led to a massive reduction in the confusion surrounding the BOM

The BOM can be accessed using the window object which represents the browser window. All the global variables are a part of the window object in the browsers. Here is the official list of all the properties and methods of the Browser Object Model. You should check it out.

So those are the three components that form the JavaScript runtime in the browser and give you an API to interact with the JavaScript Engine.

That would be all for Now Folks See you soon ✌ — 07/07/2022