Introduction to JavaScript

Photo by Irvan Smith on Unsplash

Hey there👋

In my previous article I took you through Git and Version Control but in this article we will be looking into JavaScript. We will focus more on the core features and attributes of JavaScript, including its applications.

So without further delay, let’s get started🚀

Brief History of JavaScript

JavaScript was created in 1995 by Brendan Eich while he was an engineer at Netscape and became the ECMA-262 standard in 1997. Originally it was going to be named LiveScript but was renamed.

After Netscape handed JavaScript over to ECMA, the Mozilla foundation continued to develop JavaScript for the Firefox browser. Mozilla’s latest version was 1.8.5. (Identical to ES5).

What is JavaScript?

JavaScript is a client-side object-based scripting language that is used to handle and validate client-side data. JavaScript is also used to make the user interface of web pages more dynamic by making it responsive to events such as mouse click on certain HTML element, movement of mouse, button click, etc, which can help improve the user experience.

Based on ESCMAScripting standard, JavaScript is a light-weight scripting language. It runs on browser and therefore reduces the load on the server. JavaScript can be used to create cross-platform applications, SaaS applications or to create a server-side backend applications using Node.JS.

It is an interpreted language meaning JavaScript script is processed line by line and it is not compiled before processing. These scripts are interpreted by a built in component of web browser which is know as JavaScript interpreter. As things began to change, V8 engine in chrome and NodeJS was introduced, now just-in-time compilation is also used for JavaScript.

JavaScript is platform independent, this means that the script can only be written once and can run in any platform without affecting its output.

JavaScript was formerly called LiveScript and was developed by Netscape. It is also called ESCMAScripting because it was standardized by European Computer Manufacturer’s Associations(ESCMA)

To execute codes, browsers uses their JavaScript engines. Some of the mostly used browsers are:

• Firefox uses SpiderMonkey engine
• Chrome use a V8 engine
• Microsoft edges uses Chakracore engine
• Safari uses SquirrelFish engine

Features of JavaScript

Below are some of the important features of JavaScript:

• Object-based
• Dynamically Typed
• Functional
• Interpreted
• Light-weight
• Prototype-based
• Asynchronous
• Platform Independent

Now, let’s look into the meaning of the above features:

Object-based Language: JavaScript is an object-based scripting language containing built-in objects such as Math, String, Date, Array.

Dynamically Typed: JavaScript can support dynamic typing, meaning that types of variables are defined by the stored value.

Functional: This means that JavaScript uses a functional approach, even objects are created from the constructor functions and each constructor function represents a unique object-type.

Interpreted: JavaScript is an interpreted language because the scripts written in JavaScript are processed line by line and are compiled before execution takes place. This scripts are interpreted by JavaScript Interpreter which is a built-in component of the web browser.

Light-weight: JavaScript is lightweight scripting language because it handles data at browser level only.

Prototype-based: Every object in JavaScript has a built-in property, which is called its prototype. The prototype is itself an object, so the prototype will have its own prototype, making what's called a prototype chain. The chain ends when we reach a prototype that has null for its own prototype.

Asynchronous: JavaScript can be used to do complex processing asynchronously which means that the whole page will not have to wait for the JavaScript processing, and once the script processing completes we can easily modify the HTML code to show or hide data. Also, we can use JavaScript to send async HTTP requests to the server for server-side processing too.

Platform Independent: This implies that JavaScript is platform-independent or we can say it is portable; which simply means that you can simply write the script once and run it anywhere and anytime. In general, you can write your JavaScript applications and run them on any platform or any browser without affecting the output of the Script.

Get Joshua Ngene’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Attributes and Properties in JavaScript

Before we dive into discussing attributes and properties in JavaScript, it is paramount we understand how the DOM(Document Object Model) works because they work hand and in hand.

What is the DOM?

DOM stands for Document Object Model. Deep inside your browser, when page is rendering, the DOM is created from the HTML source code that is being parsed . HTML is a structural language, and that structure get mapped across to a JavaScript representation of that source code — giving us the “DOM”.

Take for example, the HTML such as <body id=”page”> would be composed into a DOM object which we could access via document.body.id.

The DOM gives us the ability to talk to different parts of our HTML structure, update them, create them, delete them — you name it. As the DOM is just a JavaScript object, all we need is knowledge of JavaScript to get started.

If you’ve done something like this, you’ve already used the DOM:

// returns a DOM Node object
document.querySelector('input');

Attributes verses Properties

Attributes exist in HTML. In JavaScript DOM, we can talk to and even update these attributes using properties that exist on elements which are known as DOM nodes, when we make a query. Firstly, let’s discuss attributes and after that when can jump into properties.

Attributes

An attribute could be something like value, for example with this piece of HTML below:

<input type="text" value="0">

When the HTML above is parsed and rendered, the attribute’s value will be '0' and of type string, not number. We’re only interested in the property. A property gives us access to read and write different values via JavaScript .

In plain JavaScript, let’s query our input element:

const input = document.querySelector('input');

console.log(input.value); // '0'

When we access input.value we are talking to property not attribute.

Now, if we want to change our value we use the property:

const input = document.querySelector('input');

// update the value property
input.value = 66;

// read the current value property
console.log(input.value); // '66'

This only updates the DOM and our JavaScript model. It does not update the HTML. If we check on Inspect Element, we’d see value="0" even though the actual DOM value is 66. This is because updating a property does not necessarily update an attribute, and this is a common gotcha for JavaScript developers of all skill levels.

If we actually want to change the HTML element’s attribute, we can do that through the setAttribute method:

const input = document.querySelector('input');

// update the value attribute
input.setAttribute('value', 99);

// read the current value property
console.log(input.value); // '99'

What is interesting here is that our HTML would update from the setAttribute method call, giving us an accurate reflection when we check Inspect Element. It also updates the DOM property too! Which is why console.log(input.value); gives99.

Why the Two?

The DOM is a JavaScript model, so we don’t need to keep updating the HTML attributes, it could actually be a resource waste. If we only need to use the DOM, we should do so and not store state inside the HTML as well. The DOM is optimized and fast, so using something like value over setAttribute makes much more sense.

Applications of JavaScript

The are so many applications of JavaScript that makes it useful as a scripting language. Some of them are listed below:

• Web Development
• Server Applications
• Mobile Applications
• Machine Learning
• Game Developments
• Smartwatch Apps

Limitations of JavaScript

• Complexity: To master a scripting language, programmers must have a thorough knowledge of all the programming concepts, core language objects, client and server-side objects otherwise it would be difficult for them to write advanced scripts using JavaScript.
• Security risks: JavaScript can be used to fetch data using AJAX or by manipulating tags that load data such as <img>, <object>, <script>. These attacks are called cross site script attacks. They inject JS that is not the part of the site into the visitor’s browser thus fetching the details.
• Weak error handling and type checking facilities: It is weakly typed language as there is no need to specify the data type of the variable. So wrong type checking is not performed by compile.

In Conclusion

So you now have a handful knowledge of what JavaScript really is. Having gone through this article, you can see that JavaScript is indeed an interesting language to learn. You can start your tech journey today! I urge you to give JavaScript a shot.