JavaScript 101: Ultimate JavaScript Guide

Javascript is a scripting language that works alongside HTML and CSS to enhance code functionality and add interactive elements. It can be embedded in HTML using the tag and is an interpreted language, which means it is not compiled.<br> As a beginner, the best approach to JavaScript would be to understand its basic building blocks. Here goes:-</p> <p>JavaScript Variables<br> A variable is a container in which you place any literal value into, or assign it to represent an object that you have created.<br> Variables can be changed or operations performed on them. Each variable created can be associated with an object or datatype that you can access the properties and methods<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>var a = 5; a = 10; var b = 3; var c = a + b; var person1 = "Bill"; var person2 = "Sara"; var myText = person1 + "went to school with + person2; </code></pre></div> <p></p> <p>Variable declaration and initialization examples<br> There are three different variable types: <code>var</code>, <code>let</code>, and <code>const</code>. Each of these variables has several rules around how they should be used and have different characteristics.</p> <p>Javascript Arrays<br> An array is a variable type in any programming language used to store multiple values simultaneously. Arrays store data in the form of elements, therefore, an array is a collection of elements.</p> <p>We can store multiple data types in arrays, like strings, integers, arrays, or even functions.</p> <p>Array are divided into four types:</p> <p>Homogeneous arrays<br> Heterogeneous arrays<br> Multidimensional arrays<br> Jagged arrays. read more <a href="https://linuxhint.com/javascript-arrays-beginner-guide/">https://linuxhint.com/javascript-arrays-beginner-guide/</a><br> </p> <div class="highlight"><pre class="highlight plaintext"><code>var languages = ["javascript", "python", "java"]; </code></pre></div> <p></p> <p>Array example<br> Javascript Object<br> A JavaScript object is an unordered collection of key-value pairs. Each key-value pair is a property. The key can be a string and the value of a property can be of any value eg. string, number, array and function.</p> <p>There are many ways to create an object, the most commonly used one is the object literal notation. To create an object with properties you use the key-value pair with curly braces.<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>let person = { firstName: "John", lastName: "Doe", } </code></pre></div> <p></p> <p>An object<br> There are Standard built-in objects that you will need to be familiar with. They include:-</p> <p>String Object<br> Array Object<br> Date Object<br> Math Object<br> Number Object<br> RegExp Object<br> Boolean Object<br> Function Object<br> JavaScript Functions<br> JavaScript code is run inside a function. They allow us to write code that will be used over and over again keeping your code dry. A function is executed when ‘something’ invokes/ calls it:-</p> <ul> <li>when an event occurs (click event).</li> <li>When it is invoked from JS code.</li> <li>When it’s an automatic call (self invoked).</li> </ul> <p>Also, learn how to use arrow functions in JavaScript ES6.<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>function name(parameter1, parameter2, parameter3) { //code to be executed } </code></pre></div> <p></p> <p>A basic function example<br> JavaScript Conditions and loops<br> Conditions evaluate things and add logic to your scripts<br> You require a full understanding of the comparison operators essential for conditional programming.<br> They include:-</p> <ul> <li>if-else</li> <li>switch-break</li> <li>ternary</li> </ul> <p>A loop is a programming construct that repeatedly executes a piece of code as long as a certain condition is met.<br> JavaScript now supports five different types of loops:</p> <ul> <li>while</li> <li>do…while</li> <li>for</li> <li>for…in</li> <li>for…of</li> </ul> <p>Summary</p> <p>ECMAScript 2015 also known as ES6 was the second major revision to JavaScript that came with important new features that you need to be familiar with. <a href="https://www.w3schools.com/js/js_es6.asp">https://www.w3schools.com/js/js_es6.asp</a> read more on JavaScript ES6.</p> <p>This article will give you an overview guide to learning JavaScript’s basic concepts the best way.</p> <p>follow me on twitter<a href="https://twitter.com/MaxwellmuneneM"></a></p>