Forem: Eddah Chebet

Modern JavaScript for everyone: Mastering Modern JavaScript the Right Way

Eddah Chebet — Thu, 03 Mar 2022 21:53:15 +0000

JavaScript is a scripting language for creating dynamic, user-interactive online content. The interactive nature of JavaScript refers to how a user and a web page interrelate.

Today's major web browsers have an in-built JavaScript execution engine for running JavaScript code.

As a web developer, you will have to deal with JavaScript at some point. You have to confront it now or tomorrow. Become a master of JavaScript before the time comes, and you will be ready when the time arrives.

In this article, you will learn how to stay ahead of the curve for web development and improve your JavaScript the right way.

STEP 1: Build a firm foundation by grasping the basics
It sounds so naïve and a cliché to learn and practice the basics, but a small colon or inverted commas could lead to code error or JavaScript code malfunctioning.

Mastering JavaScript begins with building a complex base by brushing up on JavaScript basics, making it easy to create complex logic and reputation.

STEP 2: Implement the Object-Oriented Approach

The most well-known method of programming nowadays is the object-oriented approach. You may think of an object as a foundation for anything you do in programming.

Whenever possible, begin by writing your code in an object-oriented fashion rather than the more traditional procedural one. Reading other people's codes exposes you to object-oriented design.
Having your hands on OOP is essential if you want to grasp JavaScript.

STEP 3: JavaScript code Testing & Error Handling

By performing tests on various code samples, you can uncover issues that would otherwise go undetected during actual development.

Writing better code and creating an excellent website are made easier by testing. A better understanding of the product's aesthetics will help you become a better JavaScript expert.

console.log has been used to record errors. However, they take a long time to complete. The Error Objects may help you deal with issues more quickly.

STEP 4: A synchronicity

In JavaScript, asynchronicity occurs while running asynchronous code. Asynchronous code pulls you out of the program flow and returns callbacks. Often common in todays JavaScript since they enable other code to run simultaneously.
JavaScript mastery requires an understanding of asynchronicity at the fingertips.

STEP 5: Understanding the Document Object Model

When a page is loaded into a browser, the browser creates a DOM or Document Object Model. Access to the many components is made simple by the several levels of this structure. If you are a programmer, you should be aware of the impact on the page's overall design of updating child and parent properties simultaneously.
One of every JavaScript developer's most fundamental and critical skills is understanding the Document Object Model (DOM).

STEP 6: Bookmark reliable sources

Reliable sources can be anything from a well-known programmer/author to large corporations like Microsoft or even highly regarded websites like w3schools. Reliable JavaScript sources should always be bookmarked when surfing the internet. JavaScript does not remain static is getting bigger and constantly evolving. It is easy to find what you are looking for by bookmarking these pages. Mozilla's Developer Network is a good example of a trustworthy source.

STEP 7: Go for a framework

Most web browsers already run a JavaScript engine; hence, there is no need to re-invent the cycle. JavaScript has seen numerous frameworks throughout its lifespan. React.js, Node.js and Vue.js. Check out these 2022 JavaScript Frameworks
Today, excellent firms and successful initiatives don’t go for the thorough approach of creating everything from scratch. They prefer selecting frameworks and libraries.

What is the use of studying so much JavaScript when you cannot comprehend the people's code written in a framework?

STEP 8: Explore JavaScript and solve complex things

Along with figuring out how to fix problems and create new websites, do your best to embrace the challenges that come your way. There are various ways to challenge yourself, such as brainstorming a complicated feature for a website, maybe as a trial run. This will allow you to go deeper into JavaScript than other people. You may have to learn a new library or idea to get that one functionality, but it will pay off in the long run. As a result, you will learn more than anything if you continually develop novel ideas.

To wrap this up:

Mastering JavaScript is a process with three Phases:

1. Learning Phase in which you begin to learn and understand the new concepts. It would help if you established a foundation for yourself in the language. 
2. Practice Phase in which you put what you learned into practice in the previous phase.
3. Expert Phase, this is not the end. The experience you have gained along the way has helped you get to where you are now, but you must continue to improve.

Developing JavaScript is straightforward, but mastering JavaScript requires more effort. Keeping these guidelines handy can help you track what you need to do. Once you have completed the tasks outlined in each section, you are ready to take on the rest of the website-building world and create anything.

Happy Coding!!

Introduction to Data Structures and Algorithms with Modern JavaScript

Eddah Chebet — Mon, 21 Feb 2022 19:49:41 +0000

Definition of Terms

A Data Structures is a mode of organizing and storing data in a computer for easy modification and access.
Data structures refers to the collection of data values and their relationship, and the operations that can be performed on the data.
Data structures in JavaScript include: linked lists, queues, stack, heap, trees and hash table.

Algorithms are step by step instructions on how to perform an operation.

Algorithms help to breakdown and solve a programming problem into smaller parts of code.
JavaScript algorithms include: sorting, searches, math, strings, graphs, and trees.
Step by step Discussion

Arrays

An array is a liner collection of elements accessed via index often used to compute offsets.
Arrays are created by declaring am array variable using the square bracket operator []

 Example: 
 var numbers = [10, 20, 40, 99, 44, 456, 67];

Alternatively they can be created by calling an array constructor using set of elements as constructor arguments.

var numbers = new Array(6,7,8,9);
print(numbers.length);
Output: 5

The isArray() function is used to verify if n object is an array.

var numbers = 4;
var arr = [20, 24, 2456, 78];
print(Array.isArray(number));   //it outputs false
print(Array.isArray(arr)); // it outputs true

Arrays can be created by calling the array constructors.

var clients = new Array();
print (clients.length); 
output is 0.

Heads up: A JavaScript array is a special type of JavaScript object.

Lists

Lists are ordered sequence of data.
An Element is a data type item stored in a list.
Empty list: refers to a list without elements.
listSize() variable is used to store a number of elements in a list.
pos() method to show current position in a list.
this.dataStore[ ] is used to initialize an empty array that stores a list of elements.

Functions in a list

Append() : used to add elements at the end of a list
Insert(): used to add elements into a list either at the beginning of a list or after an already existing element.
remove(): used to delete elements from a list.
clear(): removes current elements in a list
moveTo(): moves the current position of an element to specified position
front(): used to set the current position to first element in the list.
end(): used to set current position to the last element in the list.

Implementation of Lists

Create a variable containing fruit list;

var fruits = new List();
fruits.append(“Avocado”);
fruits.append(“Mangoes”);
fruits.append(“Apples”);
fruits.append(“Strawberries”);
fruits.append(“Kiwi”);
fruits.append(“Pomegranate”);

An operation to move the first element of list and display it;

fruits.font();
print(fruits.getElement());
Output is : Avocado

Moving forward one element and display the elements value:

fruits.next();
print(fruits.getElement());
the output is : Mangoes.

Removing elements from the list:

fruits.remove(“Kiwi”);
print(fruits.toString());
The output includes: 
Avocado, Mangoes, Apples, Strawberries, Pomegranate

Queues

A queue is a type of a list where elements are inserted at the end and removed from the top. The store data in their order of occurrence.

Queue operations include:

Inserting into an end of a queue (enqueue)
Removal of elements from the front(dequeue)
Peek operation, used to view elements at the front of a queue.

A queues Test program:

var q = new Queue();
q.enqueue(“Eddah”);
q.enqueue(“Vannex”);
q.enqueue(“Mary”);
print(q.toString());
q.dequeue();
print(q.toString());
print(“The front of the queue: “ + q.front());
print(“The back of the queue: “ + q.back());

The program output include:
Eddah
Vannex
Mary

Eddah
Vannex

The front of the queue: Eddah
The back of the queue: Vannex

Below is a diagram implementation of Queue operations:

Note Below:
A queue is a First in, First out (FI-FO) data structure

Stacks

A stack is a list of elements that can only be accessible from the top of the list. Stack operations include PUSH and POP.

PUSH operation used to add elements into a stack.
POP operation is used to take elements off a stack

Below is an implementation of stack operations:

Example of stack implementation:

var s= new Stack();
s.push(“CSS”);
s.push(“JavaScript”);
s.push(TailWind”); 
print(“length:  + s.length());
print(s.peek());
var popped = s.pop();

print(“The Popped element is : + popped);
print(s.peek());
s.push(“HTML”);
print(s.peek());
s.clear();
print(“length: + s.length());
print(s.peek());
s.push(“web3”);
print(s.peek());

the function peek() returns the top element of the stack.
The output of the above program:
length is 3
Tailwind
The popped element is TailWind
JavaScript
HTML
Length: 0
Undefined
Web3

REMEMBER:
A stack is an example of Last -in First out (LI-FO) data structure.

Palindromes and recursions are implemented using stacks

JavaScript 101: Ultimate JavaScript Guide

Eddah Chebet — Sun, 13 Feb 2022 20:00:20 +0000

Introduction to JavaScript

JavaScript is a fast, flexible and powerful programming language designed to interact with webpage elements and complex web development
JavaScript has three parts in the web browsers;

Document Object Model; delivers interface for elements interaction on a webpage.
Browser Object Model; grants browser API for web browser interaction.
ECMAScript: offers JavaScript fundamental functionality.

JavaScript is Case Sensitive.

The semi colon ; is used to terminate JavaScript Statements.

In JavaScript, console.log () is a special object included in the browser for developers to test and debug code in the interactive terminal.

History of JavaScript

Ever wondered of “ES6” and “JavaScriptES6” meaning?

                                    Read on to Find out More

JavaScript was introduced by NETSCAPE Communications in 1995 for programmers and web designers.

In 1996, Netscape acquiesced JavaScript to ECMA international to establish the scripting language standards. Thereafter in 1997 ECMA released ECMA-262 initial version of ECMAScript (ES) language.

ECMAScript standards grant rules on the JavaScript features and architecture and ensures consistency between new and previous JavaScript versions.

What is the difference between ECMAScript and JavaScript?
JavaScript is used in creating applications or programs while ECMAScript outlines the guidelines of developing a new scripting language. ES6 is a sixth edition of ECMAScript.

ES6 is the greatest update on ECMAScript following its 1997 first edition release to aid JavaScript developers. ES6 enables programmers to write more concise code and save on developer time.

These great features include:

Asynchronous action promises
Classes creation
Arrow functions
Default value parameters
let and const Keywords to declare variables.

Installation of JavaScript Source Code Editor

The JavaScript code editor has syntax indentation, autocomplete, brace matching, debugging and highlighting features.

The commonly used editors include

Java Script Hello world Program

  **Using the Console**

Type the “Hello world” in the Console.log ()method.

console.log(‘Hello World’);
log() is used to print values to the console

JavaScript Fundamentals

Data types
Variables
Methods
Libraries
Conditionals(loops)
Scope
Arrays
Iterators
Objects