DEV Community: jC-blip-ux

What is a Web API in JS?

jC-blip-ux — Wed, 24 Nov 2021 07:05:00 +0000

A Web API is an ultimate developer goal which can help increase the functionality of the browser, making it more efficient and friendly in its own kind.
The most complex functions and readability can be managed by simplifying with the use of API's.
Easy syntax can be brought into consideration, as it has been a task to work upon complex code.

An API?
API stands for Application Programming Interface.
It can be considered to be part of either a Web, Browser or Server as mentioned can provide the functionality to a web browser.

A Web API is an application programming interface for the Web.

A Browser API can extend the functionality of a web browser.

A Server API can extend the functionality of a web server.

Third Party APIs
Third party APIs are not built into your browser. These are also used as an extension and can be downloaded from the web of an already existing platform supporting API's

To use these APIs, you will have to download the code from the Web.

Examples:

YouTube API - Allows you to display videos on a web site.
Twitter API - Allows you to display Tweets on a web site.
Facebook API - Allows you to display Facebook info on a web site.

To fetch an API from a file
We can come across this with an example, given below:

A Fetch API Example
The example below fetches a file and displays the content:

Example:

fetch(file)
.then(x => x.text())
.then(y => myDisplay(y));

Since Fetch is based on async and await, the example above might be easier to understand like this:

Example:

async function getText(file) {
  let x = await fetch(file);
  let y = await x.text();
  myDisplay(y);
}

Or even bettter: Use understandable names instead of x and y:

Example:

async function getText(file) {
  let myObject = await fetch(file);
  let myText = await myObject.text();
  myDisplay(myText);
}

We can also add API's from our own History!

The Web History API provides easy methods to access the windows.history object.

The window.history object contains the URLs (Web Sites) visited by the user.

The History back() Method

The back() method loads the previous URL in the windows.history list.

the "back arrow" in your browser can also be used as an alternative.

Example:

<button onclick="myFunction()">Go Back</button>

<script>
function myFunction() {
  window.history.back();
}
</script>

JavaScript - Strict Mode

jC-blip-ux — Wed, 24 Nov 2021 06:33:55 +0000

The "use strict"; Defines that JavaScript code should be executed in "strict mode".
Why Strict Mode?
Strict mode makes it easier to write "secure" JavaScript.

Strict mode changes previously accepted "bad syntax" into real errors.

As an example, in normal JavaScript, mistyping a variable name creates a new global variable. In strict mode, this will throw an error, making it impossible to accidentally create a global variable.

In normal JavaScript, a developer will not receive any error feedback assigning values to non-writable properties.

In strict mode, any assignment to a non-writable property, a getter-only property, a non-existing property, a non-existing variable, or a non-existing object, will show an error.

The "use strict" directive was new in ECMAScript version 5.It is not a statement, but a proper expression, which was ignored by earlier versions of JavaScript.

The purpose of this is to indicate that the code should be executed in only "strict mode".

With strict mode, you can not, for example, use undeclared variables.

All modern browsers support "use strict" except Internet Explorer 9 and lower: Such as google chrome, firefox, opera.. etc

While Declaring Strict Mode:

Strict mode is declared by adding "use strict"; to the beginning of a script or a function.

It has global scope meaning, all lines in the code will execute in strict mode-

For example:

"use strict";
x = 3.14;       // This will cause an error because x is not declared

Another similar example:

"use strict";
myFunction();

function myFunction() {
  y = 3.14;   // This will also cause an error because y is not declared
}

x = 3.14;       // This will not cause an error.
myFunction();

function myFunction() {
  "use strict";
  y = 3.14;   // This will cause an error
}

Using an object, without declaring it, is not allowed:

"use strict";
x = {p1:10, p2:20}; 
     // This will cause an error

Deleting a variable (or object) is not allowed.

"use strict";
let x = 3.14;
delete x;                // This will cause an error

Similarly,
Duplicating a parameter name is not allowed
Octal numeric literals are not allowed
Octal escape characters are not allowed
Writing to a read-only property is not allowed
The word arguments cannot be used as a variable
The with statement is not allowed

JavaScript and its DataTypes

jC-blip-ux — Sat, 02 Oct 2021 07:55:08 +0000

JavaScript has data types to hold different types of values. And the two types of data types in JavaScript are:

Primitive data type
Non-primitive (reference) data type

JavaScript is a dynamic type language, means you don't need to specify type of the variable because it is dynamically(accepting in real-time) used by JavaScript engine. We need to use var here to specify the data type. It can hold any type of values such as numbers, strings etc.
For example:
var a=80; //holds the number

var b="Sam";//holds the string

The five type available are:
tring
number
boolean
undefined
null

Visual Studio Code:

jC-blip-ux — Sat, 02 Oct 2021 07:39:43 +0000

Visual Studio Code: It is an open source-code editor that uses programming languages such as Java, c++, python etc. It uses top extensions like enable additional languages, themes, debuggers, commands, and much more. It allows one to test code, confidently.It is more stream-lined and by providing quick code, debug to full IDE. It also runs on web applications like Windows, Linux, and macOS.

This helps in understanding the structure of the IDE which can help us understand such platforms better and implement quick code in real-time. Many sections cover different functionalities and help progress our projects with ease and short-cut methods.

The VS Code is divided into five main regions:

The activity bar
The side bar
The Editor groups
The panel
The status bar