JavaScript Basics — Generators and the Web
By: John Au-Yeung
Tags: Technology, JavaScript, Software Development, Programming, Web Development

Photo by Krzysztof Niewolny on Unsplash

JavaScript is one of the most popular programming languages in the world. To use it effectively, we’ve to know about the basics of it.

In this article, we’ll look at how to define and use generators and web communication.

Generators

Generator functions let us create functions that can be paused and resumed.

It’s indicated by the functuion* keyword.

For instance, we can write:

function* random() {

while (true) {

yield Math.random();

}

}

We defined a random function which keeps generating random numbers as many times as we call it.

It’s paused when yield is run.

We can have an infinite loop since the loop only runs when we run the returned generator explicitly.

To use it, we can write:

const ran = random();

console.log(ran.next());

console.log(ran.next());

Then we get something like:

{value: 0.6168149388512836, done: false}

{value: 0.7733643240483823, done: false}

We called our generator function and the call next on the returned generator ran .

Also, we can create an iterator object to return a an array of numbers sequentially.

For instance, we can write:

const obj = {

*[Symbol.iterator]() {

const arr = [1, 2, 3];

for (const a of arr) {

yield a;

}

}

}

We have the Symbol.iterator method, which is a generator function that yields each item of arr .

It’s paused when yield is run.

Then we can use it with a for-of loop by running:

for (const o of obj) {

console.log(o);

}

The async function is a special type of generator.

It produces a promise when it’s called, which is resolved or rejected.

When it yields or awaits a promise, the result of the promise or the exception value is the result of the await expression.

Event Loop

Async programs are run a piece by piece.

Each piece may start some action and schedule code to be run when an action finishes or fails.

The program sits idle in between the pieces.

Async actions happen on its own call stack.

This is why we need promises to manage async actions so that they run one by one.

JavaScript and the Browser

JavaScript is used to build almost all browser apps.

Browser users the HTTP protocol to communicate with the Internet.

HTTP stands for Hypertext Transfer Protocol.

Every time we run something in the browser, we make an HTTP request.

We make them download web pages, send data to servers, and many more.

The Transmission Control Protocol (TCP) is a protocol is the common protocol of the Internet.

It lets computers communicate with each other by having one computer listen to data and one computer sending it.

Each listener has a port number associated with it.

If we want to send emails, we use the SMTP protocol, which communicates through port 25.

We have a 2-way pipe for communication. One piece of data can flow from one computer to the other.

The Web

The browser communicates via the world wide web, known as the web for short.

We can communicate on the web by putting our computer on the Internet and listen to port 80 so we can communicate with HTTP.

For instance, we can make a request to http://example.com , which is a URL that tells us where to make the request to.

A URL is just a piece of text in a fixed format to let us locate the resources that we need.

The URL first has the protocol, which is http , then the server name, which is example.com .

It can also have a path, like http://example.com/foo.html . foo.html is the path in the URL.

Photo by Nicolas Picard on Unsplash

HTML

HTML stands for the Hypertext Markup Language.

It’s the document format for storing web pages.

It contains text and tags that we can use to give structure to the text.

We use it to describe links, paragraphs, headings, and more.

For instance, we may write:

<!doctype html>

<html> <head>

<meta charset="utf-8">

<title>hello</title>

</head> <body>

<h1>Hello</h1>

<p>Read my work

<a href="http://example.com">here</a>.</p>

</body> </html>

All HTML documents start with <!doctype html> to indicate that it’s an HTML document.

Then they have the head tag which has some metadata like the title and meta tags with extra metadata.

The body tag has the main content.

It has heading tags like h1 and p tag for paragraphs and a tag for links to other pages.

We can change HTML with JavaScript dynamically.

Conclusion

We can create generators to create functions that can be paused and resumed.

JavaScript is useful for creating web apps. They communicate via HTTP, which communicates over TCP.

JavaScript In Plain English

Enjoyed this article? If so, get more similar content by subscribing to our YouTube channel!