Forem: adebomiolusegun

Function declaration and Function Expression

adebomiolusegun — Mon, 02 Jan 2023 02:42:51 +0000

The function expression is nearly similar to the function declaration, but there are some differences.

The function declaration is created by first declaring the function keyword, followed by a code block where we put our code to be executed.

Function name(parameters){
  Our code to be executed 
}

name(argument);

And meanwhile, the function expression can be stored in a variable, which is then used as a function.

Const name = function ( parameters a, parameter b){

 Our code to be executed 
};

name(argument);

As an expression, the semicolon is placed at the end of the code block because that is where it is expected to be.

Hoisting

hoisting allows you to use functions and variables before they are declared.

This is done with function declaration but not with function expression.

Examples

name(argument);

Function name(parameters){
  Our code to be executed 
}

This is a function declaration; the code will be executed because JavaScript hoisting accepts it.

name(argument);

Const name = function ( parameters a, parameter b){

 Our code to be executed 
};

Meanwhile, because this is a function expression, the code will not run because JavaScript hoisting does not accept it.
It’s will display undefined.

I hope this is of great assistance to someone out there.

Javascript arrays and array methods

adebomiolusegun — Wed, 05 Oct 2022 22:56:00 +0000

What are Arrays?

An array is a collection of variables that store multiple values in a single variable. Arrays indicate the beginning and end of the element by using a square bracket.
example

let cities = ["Tokyo", "Mexico", "São Paulo", "Cairo"];

Javascript arrays make use of index numbers. It begins by counting the element by 0 (zero).

                   0        1        2          3
let cities = ["Tokyo", "Mexico", "São Paulo", "Cairo"];

Array Methods

The toString

Strings are automatically separated with commas using the toString method.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" , "Cairo"];
let x = cities.toString(2);
console.log(x);
output [Tokyo,Delhi,Mexico,São Paulo,Mumbai,Cairo]

The isArray method

The array method determines whether the value is an array and returns true if it is. Otherwise, a false positive is returned.

let cities = ["Tokyo", "Delhi", "Mexico",  "São Paulo", "Mumbai" ,"Cairo"];
let x = Array.isArray(cities);  
console.log (x); // As a result, this will return True.

let cities = "Mumbai";
let x = Array.isArray(cities);  
console.log (x);  
The result will be false.

The Push Method

The push method adds an element at the end of the array and returns the new length.
example

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities.push("Hong kong");  
console.log (x);  
x will have the value 7
This is the outcome ["Tokyo," "Delhi," "Mexico," "So Paulo," "Mumbai," "Hong Kong"];

You can add as many elements as you want using the push method.

The Pop Method

What the pop method does is remove the last element from an array and return that element.
example

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities.pop();    
console.log (x); 
 x will have the value Cairo.
 the outcome will be ["Tokyo," "Delhi," "Mexico," "So Paulo," and "Mumbai"];

The Shift Method

The shift method removes the first element from an array and returns the shifted element.
example

let cities = ["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cars.shift();  
console.log(x); 
the value of x will be Tokyo
This will be the result ["Delhi", "Mexico", "São Paulo", "Mumbai" , "Cairo"];

The Unshift Method

The unshift method adds an element to the beginning of an array and returns the length.
example

let cities = ["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities.unshift("Hong Kong"); 
console.log (x); 
x will be set to 7
The result will look like this [ "Hong Kong" "Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" "Cairo" ];

The IndexOf Method

indexOf returns the first index for an element. It will return -1 if the index is not found.
example

let cities = ["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" , "Mexico", "Cairo"];
let x = cities.indexOf("Mexico"); 
console.log (x); 
 returns a value of 2

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" , "Cairo"];
let x = cities.indexOf("Hong Kong"); 
console.log(x); 
//this will return -1 because we don't have Hong Kong in the list of our elements.

This will search Mexico starting from the 3.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" , "Cairo", "Mexico"];
let x =cities.indexOf("Mexico", 3); 
console.log(x); 
 this will return 6

The lastIndexOf Method

The lastIndexOf returns the last index of the last element. It will return -1 if the index is not found.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" , "Mexico", "Cairo"];
let x =cities.lastIndexOf("Mexico"); 
console.log (x); 
this will return a value of 5

The reverse method

The reverse method reverses the order of the elements in an array.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Mexico", "Cairo"];
let x =cities.reverse(); 
console.log(x);   
 The result will look like this ['Cairo', 'Mexico', 'Mumbai', 'São Paulo', 'Mexico', 'Delhi', 'Tokyo'].

The sort method

Arrays are sorted in descending order using the sort method.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Mexico", "Cairo"];
let x =cities.sort(); 
console.log(x);  
this will be the result ['Cairo', 'Delhi', 'Mexico', 'Mexico', 'Mumbai', 'São Paulo', 'Tokyo']

Strings can be sorted in descending order with the aid of the reverse method.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Mexico", "Cairo"];
let x =cities.sort(); 
cities.reverse();
console.log(x);  
The final result will be ['Tokyo,' 'So Paulo,' 'Mumbai,' 'Mexico,' 'Delhi,' 'Cairo.']

Numerical sorting

Sorting numbers is not similar to sorting alphabets. When sorting numbers, use the compare function.
Ascending order of numbers.

let cities =[5, 20, 40, 10, 30, 60, 50];
let x =cities.sort(function (a, b) {return a - b});
console.log(x); 
output [5, 10, 20, 30, 40, 50, 60]

Descending order of numbers.

let cities =[5, 20, 40, 10, 30, 60, 50];
let x =cities.sort(function (a, b) {return b - a});
console.log(x); 
output [60, 50, 40, 30, 20, 10, 5]

The method includes

The include method checks if an element is inside an array and it returns the result as a boolean (True or false).

let cities = ["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Mexico", "Cairo"];
let x = cities.includes("tokyo"); 
console.log(x); 
The result will be true.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Mexico", "Cairo"];
let x =cities.includes("Hong Kong"); 
console.log(x); 
The result will be false, because Hong Kong is not among the elements listed.

The join method

The join method concatenates every element in an array using a comma or another string separator, then returns the array as a string.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" , "Mexico", "Cairo"];
let x =cities.join(); 
console.log(x); 
 This will be the result  Tokyo,Delhi,Mexico,São Paulo,Mumbai,Mexico,Cairo

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Mexico", "Cairo"];
let x =cities.join(" - "); 
console.log(x); 
This will be the result Tokyo - Delhi - Mexico - São Paulo - Mumbai - Mexico - Cairo

When adding something to an array, it gives you the resulting length. When you remove it, it gives you the item that you removed.

The index number can also be used to access an array.

You can access an element by its index number.

let cities = ["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities[ 3];  
console.log(x);
The output will be São Paulo

You can change elements in an array by its index number. Look at the example below.

let cities = ["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities[3] = "Abuja";  
console.log(x);
"São Paulo" will be replaced with "Abuja"

The splice method

The splice method adds and removes array elements.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" , "Cairo"];
let x = cities.splice(7,0, "abuja");
console.log(cities);
output ['Tokyo', 'Delhi', 'Mexico', 'São Paulo', 'Mumbai', 'Cairo', 'abuja']

In the preceding example, we added an element at position 7. You can add more elements with this method.
New elements can also be inserted between existing ones.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities.splice(2,0, "abuja", "lagos");
console.log(cities)
output ['Tokyo', 'Delhi', 'abuja', 'lagos', 'Mexico', 'São Paulo', 'Mumbai', 'Cairo']

We added two elements to position 2.
We will see how we can remove the element.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities.splice(2,2);
console.log(cities);
output ['Tokyo', 'Delhi', 'Mumbai' ,'Cairo']

We removed two elements from position 2.
Elements can be replaced using the splice method.

let cities = ["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities.splice(2, 2, "abuja", "lagos");
console.log(cities);
The output ['Tokyo', 'Delhi', 'Mumbai', 'Cairo']

The slice method

The slice method slices a portion of an array and returns the sliced portion as the new array. It slices elements from beginning to end. The index of the element determines its beginning to end.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities.slice(2, 5);
console.log(x);
The output ['Mexico', 'São Paulo', 'Mumbai']

You can start from the end and slice.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities.slice( -4, -1);
console.log(x);
The output ['Mexico', 'São Paulo', 'Mumbai']

This example slices out a portion of an array starting from the 2 array element.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" , "Cairo"];
let x = cities.slice(2);
console.log(x);
The output ['Mexico', 'São Paulo', 'Mumbai', 'Cairo']

Conclusion

Arrays and objects are quite similar. The distinction is that objects use a named index while arrays use a numbered index in JavaScript.For further information on arrays, I suggest visiting w3schools.com and developer.mozilla.org.

Introduction to HTML and HTML Document Structure

adebomiolusegun — Sun, 02 Oct 2022 11:00:52 +0000

Introduction

If web development is something you are interested in, HTML will be the first thing you learn. Before understanding other languages, everyone who has become a web developer has learned HTML. Images, text, videos, and forms are all displayed on websites using the HTML markup language.

What is HTML

"HTML" stands for Hypertext Markup Language. It's the skeleton of a website. HTML is a combination of hypertext and a markup language. Hypertext refers to links that connect pages either within the website or between websites.

HTML Tag Structure

The website is structured using HTML elements, tags, and attributes. An HTML tag indicates the start and end of an HTML element. The HTML tags are enclosed by an angular bracket. As a result, it is important that you close a tag after opening it. To close a tag, we use the same angular brackets, but we must use a forward slash.

<h1> This is an opening tag.
</h1> This is a closing tag.

Element

Elements and tags are not the same thing. An element is anything within the starting and closing tags.

<h1>HEADING1</h1>
<h1></h1> Are the opening and closing tags. 
HEADING 1 is the content

Some elements have no content and no closing tags. Such elements are known as "empty elements."
Some examples of empty elements are provided below.

<br> 
<hr> 
<img> 
<area>
<input>

Attributes

HTML attributes are special words used inside the opening tag to modify the behavior of the element. Additional details about the HTML elements you're working with are provided by HTML attributes. Attributes are made up of two parts: name and value. A semicolon follows the attribute value.

<openin_tag attribute_name= attribute_value ("value")>Element</closing_tag>

For proper comprehension, we will discuss the various types of attributes below.

Types and examples of Attributes

Some attributes are universal and can be applied to any element. As a result, they're known as standard or global attributes.
Here are some examples of global attributes.

The Class Attribute The class attribute assigns one or more class names to an element.

<h1 class="firstheader">Header 1</h1>

The ID Attribute The id attribute is used to uniquely identify an element, and unlike the class attribute, multiple elements cannot have the same id name. The same class name, on the other hand, may apply to many elements.

<h1 id="myid">Header 1</h1>

The Title Attributes The title contains text that provides additional information about the element to which it belongs and will be displayed as a tooltip if you hover over the element.

<p title="your welcome">Hello.</p>

The value of the of the title attribute will be displayed if you hover your mouse above the element.

The style attributes Fonts, colors, and other elements get styles added through the style attribute.

<p style="color:blue;">Hello.</p>

Some attributes must be used with a particular element or set of elements. As a result, they're known as required and optional attributes.
Here are some examples of required and optional attributes.

The ALT Attribute The alt attribute is used to display text as an alternative when you cannot view an image in the browser due to a slow network or other reasons.

<img src="car.jpg" alt="This is a toyota car">

The alt attribute can be used with the following elements.

<area>
<input> 
<image>

The Src Attribute The src attributes specify the URL to the image to be displayed.

 <img src="car.jpg">
     You can also get images from a folder on your computer. 
    <img src="/images/car.jpg">

The href Attribute The href attribute indicates the link's destination.

<a href="https://www.toyota.com">Visit Toyota</a>

The alt attribute can be used with the following elements.

<area>
<link> 
<a>
<base>

The Checked Attribute It specifies that an element should be pre-selected when the page loads.

<form action="/action_page.php">

The alt attribute can be used with the following elements.

The last is the event attribute, Most elements support event attributes, which can be used to execute JavaScript when certain events occur, You'll use and understand more of these attributes when you start writing javascript.
Here are some examples of required and optional attributes.

The On Mouseover When the mouse is moved over an element, the onmouserover attribute is triggered.

<div class="circle" onmousemove="mouseMoveFn()" onmouseout="mouseOutFn()"></div>

The onclick This event attribute is triggered when a user clicks an element with the mouse, this works with all HTML element.

<p id="click" onclick="myFunction()">Click me to change my text color.</p>

The ononline When the browser starts working, this attribute becomes active. It works with the body tag only.

 <body ononline="myFunction()">

The onwaiting Both audio and video can be used with this attribute. It is triggered when the media is paused and ready to resume.

<audio onwaiting="myFunction()">
<video onwaiting="myFunction()">

THE HTML Document Structure

The Doctype declaration, HTML, head, title, body, and body content make up the structure of an HTML document. This is the information that HTML sends to web browsers.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, 
         initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>   

    </body> 
    </html>

The !DOCTYPE html

The first thing on the page should be the DOCTYPE declaration, which tells the browser that the current version of HTML is HTML 5.

The html

The root element in HTML is the next. Everything in the document, including the "head" and "body" tags, is contained in this tag.

The head

The head element tag comes after the root element tag. This is where the metadata is saved; the browser will only read it, it will not be displayed on the page.

The Meta

The meta tag contains information about the webpage and instructs the browser on how to display it to the user.

The charset="UTF-8"

The charset attribute tells the browser what character encoding is used to display content on the webpage. Character encoding instructs the computer on how to translate digital data into symbols, letters, and numbers.

The UTF-8

This is the version of the character set. It is the most widely used character encoding format on the web, covering nearly all of the world's characters and symbols.

Http-equiv

This attribute uses HTTP headers to provide information about the web page.

Name Viewport

The viewport meta tag enables us to specify the width and scaling of the viewport in order to properly size all devices. On a desktop computer, for instance, it will appear larger, medium on tablet, whereas on a mobile device, it will appear smaller.

initial-scale=1.0

The initial scale controls the browser's initial zoom level when the page is first loaded.

Content

The content attribute contains the value linked to the name or HTTP-equivalent.

The tittle

This is the title of the document, and it appears in the browser's title bar.

The body

The content of the body element is displayed on the web page for the user that visits your website,all the content you see on the web page, including images, videos, and text, is contained in the body section.

Conclusion

We've all read and understood the fundamentals of HTML and have a basic understanding of how it works, and you'll learn more about HTML and its elements, as well as how to use them to structure your website. If you want to learn more about it, I recommend w3schools.com and freecodecamp.org.