javascript wat presentation

Destroy All Software

A lightning talk by Gary Bernhardt from CodeMash 2012

This talk does not represent anyone's actual opinion. For a more serious take on software, try Destroy All Software Screencasts: 10 to 15 minutes every other week, dense with information on advanced topics like Unix, TDD, OO Design, Vim, Ruby, and Git.

If you liked this, you might also like Execute Program : interactive courses on TypeScript, Modern JavaScript, SQL, regular expressions, and more. Each course is made up of hundreds of interactive code examples running live in your browser.

Kevin Chisholm – Blog

Web Development Articles and Tutorials

JavaScript: WAT!

If you think javascript is an odd language, just wait: a few experiments with the addition operator will really leave you scratching your head.

Every now and then, I am reminded that as corny as the term “web surfing” may sound, it is sometimes an amazing experience. Recently, while digressing from a sub-reference of a side-topic that was tangentially related to a random blog post I stumbled across while procrastinating, I found a video titled: “WAT”. If you have even the slightest appreciation for, or hatred of JavaScript, it is a hilarious four minutes.

SPOILER ALERT: Try to watch the video before going any further. It’s much more enjoyable if you don’t know what is coming.

https://www.destroyallsoftware.com/talks/wat

Now that you have (hopefully) watched the video:

I have no idea who Gary Bernhardt is, but he makes some interesting points. Here are a few highlights:

QUESTION: What is the return value of this expression? [] + [];

ANSWER: An empty string

QUESTION: What is the return value of this expression? [] + {};

ANSWER: “[object Object]”

QUESTION: What is the return value of this expression? {} + [];

There are a few more examples, but the overall message is: the JavaScript addition operator produces very odd results in corner cases. I must admit, I’ve never thought to explore this behavior and not only were my answers to all three of the above questions wrong, but I was pretty shocked by the correct answers.

Inspired, I decided to try a few of my own.

Array + Object

While [] + {} does return “[object Object]”, that return value is not an object, but simply a string whose value is: “[object Object]”. To prove this, I did the following:

Array + Function

The return value of this is the exact same thing as foo.toString();

Object + Function

As I tried yet another combination, I started to notice a pattern. When using the typeof operator, the return value was a concatenation of the “toString” methods for each value that was being added. So, if the expression is: {} + foo(), the result is “object” and “true” combined, which is: “ objecttrue “. ok, got it.

But the fact that foo + {} returns NaN, makes no sense to me. And then there are a few more adventurous roads one might waddle down:

OK Kevin, so what’s your point?

That’s a fair question. Ultimately, since we never do those kinds of things in our JavaScript code (right? right? : – ), none of this should matter. But as I played around with these examples, two important things came to mind:

Troubleshooting

If you ever replicate these kinds of patterns by accident, it results in the kind of hair-pulling frustration that makes you start to actually believe that there is a dark lord of JavaScript controlling your browser. When trying to track down what seems like unexplainable behavior in your code that is clearly a bug, in addition to that missing semi-colon, implied global, or accidental use of “=” instead of “===”, consider these kinds of patterns. While they all seem very unlikely, typos can happen, and are sometimes hard to spot.

A Deeper Understanding

JavaScript is a truly odd specification. While there are plenty of odd things about it that we do know, there are always a few strange patterns like these that one might not have come across yet. There may or may not be anything useful about all of this, but as JavaScript’s ubiquity and maturity continue, any deep understanding of its quirks and idiosyncrasies can only benefit the developer.

VIDEO LINKS

Jump to: 1:22 for the good parts

(If this video link ever stops working, just google: “A lightning talk by Gary Bernhardt from CodeMash 2012”. There are many pages out there that feature this video)

https://www.youtube.com/watch?v=Othc45WPBhA

The Reasons behind WAT in JavaScript: Explanation and Solutions

WAT Javascript   has known because of the talk shows that represents serious opinion with regard to software.

If you have some experience in the JavaScript community, you may have encountered Gary Bernhardt’s famous “Wat” A lightning talk.

If you’re a bit confused and you haven’t seen the video. I’ll give you an overview.

Overview of the video

At CodeMash 2012, A lightning talk,  Gary Bernhardt  discusses the unexpected behavior found in Ruby and JavaScript.

Honestly, in my own opinion, the way JavaScript’s addition operator works can lead to some unusual outcomes in specific cases.

Understanding JavaScript WAT

JavaScript approaches it differently, but that doesn’t necessarily mean it’s incorrect.

These are sequences of characters enclosed in either single quotes (‘abc’) or double quotes (“abc”). They are commonly used to represent text.

3. Booleans

Array + array = empty string.

In the example code, we declare two empty arrays, array1, and array2.

Finally, we log the result, which will be an empty string.

Array + Object = ‘[object Object]’

We call the toString() method on both the array and the object, and then concatenate them using the + operator.

Object + Object = NaN (not a number)

By adding these two NaN values together using the + operator, we obtain the output NaN .

Object + Array = 0

Its value is obtained by converting an empty array into a string using the toString method and then converting that string into a number using the Number function.

Two Empty array are the not the same

However, something interesting happens in the next line of code that catches our attention.

This might seem implausible, right?

Deeper explanation:

During this comparison, the empty array is coerced into an empty string, which is then further coerced into zero. Similarly, false is also coerced into zero.

Since both resulting zero values are identical, the comparison ultimately yields true . This behavior can be unexpected and might bring a confusion.

Array plus (+) Object

It is merely a string with the specific value of “[object Object].”

Double equal sign (==) and triple equal sign (===)

The rules governing type conversion can be intricate, difficult to remember, and sometimes even incorrect, as you’ll soon find out.

The “===” operator adheres to a more reliable approach known as ECMAScript’s Abstract Equality Comparison Algorithm, which helps avoid the pitfalls of type coercion.

The article also discusses the fundamental data types in JavaScript and emphasizes that JavaScript’s approach may differ from other languages but isn’t necessarily wrong.

Thank you for reading itsourcecoders  😊.

Leave a Comment Cancel reply

Analyzing the JavaScript Examples in Gary Bernhardt's "Wat" Talk

This post is an homage to Gary Bernhardt's fantastic "Wat" talk in which he points out the peculiarities of some language constructs in Ruby and JavaScript. If you haven't watched the talk yet, I strongly recommend you take the time and do precisely that! It's only about 4 minutes long and highly entertaining, I promise.

In his talk, Gary shows off these four fragments of JavaScript code:

We see lots of brackets, braces, and plus signs. Here's what these fragments evaluate to:

• [] + [] == ""
• [] + {} == "[object Object]"
• {} + [] == 0
• {} + {} == NaN

When I saw these examples for the first time, I thought: "Wow, that looks messy!" The results may seem inconsistent or even arbitrary, but bear with me here. All of these examples are actually very consistent and not as bad as they look like!

# Fragment #1: [] + []

Let's start with the first fragment:

As we can see, applying the + operator to two empty arrays results in an empty string. This is because the string representation of an array is the string representation of all its elements, concatenated together with commas:

An empty array doesn't contain any elements, so its string representation is an empty string. Therefore, the concatenation of two empty strings is just another empty string.

# Fragment #2: [] + {}

So far, so good. Let's now examine the second fragment:

Note that because we're not dealing with two numbers, the + operator once again performs string concatenation rather than addition of two numeric values.

In the previous section, we've already seen that the string representation of an empty array is an empty string. The string representation of the empty object literal here is the default "[object Object]" value. Prepending an empty string doesn't change the value, so "[object Object]" is the final result.

In JavaScript, objects can implement a special method called toString() which returns a custom string representation of the object the method is called on. Our empty object literal doesn't implement such a method, so we're falling back to the default implementation of the Object prototype.

# Fragment #3: {} + []

I'd argue that so far, the results haven't been too unexpected. They've simply been following the rules of type coercion and default string representations in JavaScript.

However, {} + [] is where developers start to get confused:

Why do we see 0 (the number zero) if we type the above line into a JavaScript REPL like the browser console? Shouldn't the result be a string, just like [] + {} was?

Before we solve the riddle, consider the three different ways the + operator can be used:

In the first two cases, the + operator is a binary operator because it has two operands (on the left and on the right). In the third case, the + operator is a unary operator because it only has a single operand (on the right).

Also consider the two possible meanings of {} in JavaScript. Usually, we write {} to mean an empty object literal, but if we're in statement position , the JavaScript grammar specifies {} to mean an empty block . The following piece of code defines two empty blocks, none of which is an object literal:

Let's take a look at our fragment again:

Let me change the whitespace a little bit to make it clearer how the JavaScript engine sees the code:

Now we can clearly see what's happening here. We have a block statement followed by another statement that contains a unary + expression operating on an empty array. The trailing semicolon is inserted automatically according to the rules of ASI ( automatic semicolon insertion ).

You can easily verify in your browser console that +[] evaluates to 0 . The empty array has an empty string as its string representation, which in turn is converted to the number zero by the + operator. Finally, the value of the last statement ( +[] , in this case) is reported by the browser console.

Alternatively, you could feed both code snippets to a JavaScript parser such as Esprima and compare the resulting abstract syntax trees. Here's the AST for [] + {} :

And here's the AST for {} + [] :

The confusion stems from a nuance of the JavaScript grammar that uses braces both for object literals and blocks. In statement position, an opening brace starts a block, while in expression position an opening brace starts an object literal.

# Fragment #4: {} + {}

Finally, let's quickly take a look at our last fragment {} + {} :

Well, adding two object literals is literally "not a number" — but are we adding two object literals here? Don't let the braces fool you again! This is what's happening:

It's pretty much the same deal as in the previous example. However, we're now applying the unary plus operator to an empty object literal. That's basically the same as doing Number({}) , which results in NaN because our object literal cannot be converted to a number.

If you want the JavaScript engine to parse the code as two empty object literals, wrap the first one (or the entire piece of code) within parentheses. You should now see the expected result:

The opening parenthesis causes the parser to attempt to recognize an expression , which is why it doesn't treat the {} as a block (which would be a statement ).

You should now see why the four code fragments evaluate the way they do. It's not arbitrary or random at all; the rules of type coercion are applied exactly as laid out in the specification and the language grammar.

Just keep in mind that if an opening brace is the first character to appear in a statement, it'll be interpreted as the start of a block rather than an object literal.

JavaScript Oddities from the WAT Video, Explained

• Post author By Joey deVilla
• Post date January 29, 2012

If you watched the WAT video that I pointed to in this earlier post , you saw some really counterintuitive behaviour from JavaScript and probably laughed and facepalmed at the same time.

A Stack Overflow user going by the handle of Ventero has taken it upon himself/herself to explain each of those JavaScript oddities, by way of pointing to the ECMA-262 standard. If you were scratching your head trying to figure out why those JavaScript statements were full of WAT, your answers are there!

This article also appears in the Shopify Technology Blog.

Yassine Moumen

DevOps Cloud

JavaScript Says WAT!

Enough making fun of languages that suck. Let’s talk about JavaScript. Gary Bernhardt

A popular pastime among programmers is to make fun of programming languages, or at least the one you choose not to use. For example, Gary Bernhardt’s 5-minute talk WAT is all about unexpected behavior, mostly in Javascript.

A brief summary of the video:

On January 12, 2012, at the CodeMash conference in a Sandusky, Ohio indoor water park, Gary Bernhardt presented a lightning talk titled WAT. Bernhardt displayed some absurd anomalies in Ruby and JavaScript. After each example, he showed a funny picture that was captioned with “WAT”. The crowd loved it. It is a classic bit. Wat has become The Aristocrats of JavaScript.

But seriously though, JavaScript?!, what’s up with this:

JavaScript does it differently, and this doesn’t mean it’s wrong:

Many of the jokes are due to the type coercion algorithms behind JavaScript’s “==” (equal sign equal sign) and “+” (plus sign) operators. The type coercion rules are complex, unmemorable, and in some cases, as you will see, wrong. That is why it is not recommend to use of “==” (equal sign equal sign). It implements ECMAScript’s Abstract Equality Comparison Algorithm. It is a can of worms that is not worth opening. it is better to use “===” (equal sign equal sign equal sign) instead. Some people do not like “===” (equal sign equal sign equal sign) because it looks 50% stupider than “==” (equal sign equal sign) which is itself twice as stupid as “=” (equal sign). Nevertheless, the correct equality operator in JavaScript is “===” (equal sign equal sign equal sign).

The empty string is a falsy value, so a sloppy equals operator might want to conflate it with false . An empty array is not falsy, yet it also compares to false . And null and undefined are falsy values, but neither compares to false .

Two empty arrays are not the same object, so they are not equal. But the second line is surprising. It appears that JavaScript is a language in which x and not x can be equal to each other, which would be a seriously laughable incompetence. This is what is happening:

An empty array is truthy, so ![] is false . The sloppy equals operator wants to compare [] and false as numbers even though neither is a number. The empty array is coerced to empty string which is coerced to zero. And false is also coerced to zero. Zero equals zero, so the answer is true .

If you want to know more about equality in JavaScript, I highly recommend giving the JavaScript-Equality-Table a look.

All of these cases should produce NaN . This is what NaN is for. Instead, because the values are not numbers, “+” (plus sign) wants to concatenate them. First it has to coerce them to strings. The Array.prototype.toString() method converts an empty array to an empty string. It would be better if it acted like JSON.stringify() and returned “[]”. The worthless Object.prototype.toString() method renders the objects as “[object Object]”. Then those strings get concatenated together.

I know this is not bad code as such, but it does not provide the expected result, thus you may see something that looks extraordinarily complicated – a usual sign of bad code – which is necessary because the simple version does not work.

If you want a more in-depth explanation of each WAT in this presentation, check out this stackoverflow response .

Why is JavaScript so often the butt of the joke?

Part of the reason is that it is a language that beginners pick up and never quite mange to learn – so they end up churning out some very bad code. It is also the case that JavaScript looks like a trivial language; this means you can get a long way without having to learn anything new so, again, the result is bad code. Many programmers think that when they see bad code in a language, then it is the language’s fault. Of course, you can see bad code in many languages. But JavaScript has a reputation for it that goes well beyond what seems reasonable.

In conclusion

This isn’t to say that all languages are equal, there are better and worse, of course. But too often I hear people ranting about a language being stupid for some decision, without bothering to find out why it was done that way, and what benefit they might get from it. To which, I say: WAT!?

Further Reading

• https://medium.com/dailyjs/the-why-behind-the-wat-an-explanation-of-javascripts-weird-type-system-83b92879a8db
• https://stackoverflow.com/questions/9021109/what-is-in-javascript/9021351#9021351
• https://blog.caplin.com/2012/01/27/the-why-of-wat/
• https://missingtoken.net/ruby/2014/11/13/the-why-of-wat-ruby-edition/
• https://project-awesome.org/JanVanRyswyck/awesome-talks
• https://github.com/denysdovhan/wtfjs

Javascript WAT: ECMAScript Abstract Equality Comparison Algorithm

I'm assuming most of you saw Gary Bernhardt's talk from CodeMash 2012 on some WAT™ features in Ruby and JavaScript.

I'm assuming most of you saw Gary Bernhardt's talk from CodeMash 2012 on some WAT™ features in Ruby and JavaScript. If not, I highly recommend you do as it's thouroughly amusing. No, seriously. Go ahead, I'll wait...

Before I say anything else, I am going to go on the record and say that I love JavaScript. It is one of my favorite programming languages. I find it therapeutic most of the time. It is a prototypal, dynamic and "weakly typed" programming language that treats functions as first class citizens. Transitioning from a class based OOP to a prototypal OOP can be a struggle at first, but as soon as you accept the simple truth that there is no spoon, you will realize that you know kung-fu.

That being said, every once in a while you will run into a JavaScript "feature" that will have you scratching your head and going:

I recently watched JSConf video by Shirmung Bielefeld on equality operators in JavaScript and I found the following conundrum in the comment section:

Now, the if statement makes sense. I know that all objects in JavaScript are truthy (even empty objects) and JS arrays are objects , so the if statement evaluates to true as expected. However, [] == false evaluating to true is a prime example of JS WAT™ moment. I would expect both 2. and 3. to evaluate to false, or at worst [] to resolve to its truthy value and 3. to evaluate to true and 2. to evaluate to false. However, that would make sense and would make JS gremlins unhappy and ain't nobody got time for that.

On a serious note, the answer to this lies in ECMAScript's spec for Abstract Equality Comparison Algorithm - better known as: == operator. Let's go step by step and take a look at how the JavaScript engine interprets [] == false.

So it is not a gremlin, it's a "feature" after all. Now we know ECMAScript spec for == operator and we can develop some intuition to how objects will be evaluated via Abstract Equality Comparison Algorithm . Using the same logic as above, we know that {} == false will also be evaluated to true, right? Wrong! The difference is subtle and consistency is overrated. I'll leave this one for you to figure out. If you get stuck and if you are interested as to why this is, leave a comment below and I'll follow up. Or even better, share your favorite WAT™ JavaScript moment.

Similar posts

Autocomplete, clearing form values and drupal form fields.

Some browsers like to be helpful and help by remembering certain form fields. I was having a problem with Firefox auto-populating my some of my form...

Drupal/AJAX: Exercise caution when using special foreign characters

I was recently working on a Brazilian Drupal 6.x site that uses CCK forms and needed some functionality to map a dropdown select list of states to...

Revenge of the node comments: a pure jQuery comment pager

A previous post described how to reposition node comments with Drupal's hook_menu_alter(), to facilitate a tabbed interface. One side effect that...

Get notified on new marketing insights

Be the first to know about new B2B SaaS Marketing insights to build or refine your marketing function with the tools and knowledge of today’s industry.

What is JavaScript?

Discover the basics of JavaScript, a popular programming language used for creating interactive web pages. Learn through simple examples and gain a better understanding of its versatility and ease of use, perfect for beginners in web development.

Updated: March 11, 2023

This YouTube channel is packed with awesome videos for coders!

Tons of videos teaching JavaScript and coding. Cool live streams!

JavaScript is a programming language that allows you to create dynamic and interactive web pages. It’s an essential tool for web developers who want to create engaging user experiences and add website functionality.

At its core, JavaScript is a scripting language designed to run in web browsers. This means that it can be used to manipulate web pages in real time, allowing you to create animations, interactivity, and user-friendly features.

One of the most basic examples of JavaScript in action is the “alert” function. This function displays a pop-up message to the user like this:

This code displays the message “Hello, world!” in a pop-up window when the user loads the web page.

Another common use of JavaScript is form validation. You can use JavaScript to check whether a user has filled out a form correctly before submitting it.

Here’s an example:

This code checks whether a form’s “name” field has been filled out. If it hasn’t, it displays a pop-up message asking the user to enter their name. JavaScript is a versatile language that can be used for a wide range of applications, from web development to game development to desktop and mobile applications. It’s also constantly evolving, with new features and updates being released regularly.

In conclusion, JavaScript is a powerful and essential tool for web developers who want to create dynamic and interactive web pages. Whether you’re just starting out or an experienced developer, learning JavaScript is a great way to enhance your programming skills and take your web development projects to the next level.

• Español – América Latina
• Português – Brasil
• Tiếng Việt

Welcome to Learn JavaScript!

JavaScript is responsible for the "interactive layer" of a web page, complementing the " structural " layer provided by markup and "presentational" layer provided by CSS . JavaScript lets developers modify the structure and presentation of a page by adding, removing, and altering markup and styles in response to any combination of user interaction and internal logic. JavaScript can give you a tremendous amount of control over the rendering and behavior of a web page, even letting you alter some of the browser's built-in behaviors.

This course covers the fundamentals of JavaScript, from the basic rules that govern how the language is written to the built-in methods and properties it provides.

• Introduction to JavaScript
• Data types and structures
• Comparison operators
• Control flow
• Collections

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2024-03-31 UTC.

Learn JavaScript

Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.

Skill level

Time to complete

Certificate of completion

Prerequisites

About this course

You interact with JavaScript code all the time — you just might not realize it. It powers dynamic behavior on websites (like this one) and plays an important role in many fields, like front- and back-end engineering, game and mobile development, virtual reality, and more. In this course, you’ll learn JavaScript fundamentals that will be helpful as you dive deeper into more advanced topics.

Skills you'll gain

Build core programming concepts

Learn object-oriented concepts

Read and write JavaScript

Welcome to Learn JavaScript

Learn about what the JavaScript course has in store!

Introduction

In this course, you will learn about JavaScript data types, built-in methods, and variables.

Conditionals

Learn how to use if, else if, else, switch, and ternary syntax to control the flow of a program in JavaScript.

Learn about JavaScript function syntax, passing data to functions, the return keyword, ES6 arrow functions, and concise body syntax.

Learn about global and block level scope in JavaScript.

In this course, you will learn about arrays, a data structure in JavaScript used to store lists of data.

In this course, you will learn how to use for and while loops to execute blocks of code multiple times.

The platform

Hands-on learning

Projects in this course

Kelvin weather, magic eight ball.

Learn JavaScript course ratings and reviews

• 5 stars 65%
• 4 stars 23%

Our learners work at

• Google Logo
• Amazon Logo
• Microsoft Logo
• Reddit Logo
• Spotify Logo
• YouTube Logo
• Instagram Logo

Frequently asked questions about JavaScript

What is javascript.

JavaScript is one of the most popular languages in the world. It’s powerful and versatile, and with HTML and CSS, it forms the foundation of modern web development.

What does JavaScript do?

What kind of jobs can javascript get me, why is javascript so popular as a first coding language, why is javascript so popular, what do i need to know before learning javascript, are java and javascript the same, join over 50 million learners and start learn javascript today, looking for something else, related resources, javascript: all the cool kids are doing it, why learn javascript foundations, javascript versions: es6 and before, related courses and paths, learn javascript: iterators, learn javascript: functions and scope, create video games with phaser.js, browse more topics.

• Web Development 7,160,177 learners enrolled
• Code Foundations 13,622,738 learners enrolled
• JavaScript 3,872,048 learners enrolled
• For Business 10,016,428 learners enrolled
• Computer Science 7,855,396 learners enrolled
• Data Science 6,089,551 learners enrolled
• Python 4,775,550 learners enrolled
• Cloud Computing 4,341,841 learners enrolled
• Data Analytics 4,170,364 learners enrolled

Unlock additional features with a paid plan

Practice projects, assessments, certificate of completion.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

JavaScript basics

• Overview: Getting started with the web

JavaScript is a programming language that adds interactivity to your website. This happens in games, in the behavior of responses when buttons are pressed or with data entry on forms; with dynamic styling; with animation, etc. This article helps you get started with JavaScript and furthers your understanding of what is possible.

What is JavaScript?

JavaScript is a powerful programming language that can add interactivity to a website. It was invented by Brendan Eich.

JavaScript is versatile and beginner-friendly. With more experience, you'll be able to create games, animated 2D and 3D graphics, comprehensive database-driven apps, and much more!

JavaScript itself is relatively compact, yet very flexible. Developers have written a variety of tools on top of the core JavaScript language, unlocking a vast amount of functionality with minimum effort. These include:

• Browser Application Programming Interfaces ( APIs ) built into web browsers, providing functionality such as dynamically creating HTML and setting CSS styles; collecting and manipulating a video stream from a user's webcam, or generating 3D graphics and audio samples.
• Third-party APIs that allow developers to incorporate functionality in sites from other content providers, such as Disqus or Facebook.
• Third-party frameworks and libraries that you can apply to HTML to accelerate the work of building sites and applications.

It's outside the scope of this article—as a light introduction to JavaScript—to present the details of how the core JavaScript language is different from the tools listed above. You can learn more in MDN's JavaScript learning area , as well as in other parts of MDN.

The section below introduces some aspects of the core language and offers an opportunity to play with a few browser API features too. Have fun!

A "Hello world!" example

JavaScript is one of the most popular modern web technologies! As your JavaScript skills grow, your websites will enter a new dimension of power and creativity.

However, getting comfortable with JavaScript is more challenging than getting comfortable with HTML and CSS. You may have to start small, and progress gradually. To begin, let's examine how to add JavaScript to your page for creating a Hello world! example. ( Hello world! is the standard for introductory programming examples .)

Warning: If you haven't been following along with the rest of our course, download this example code and use it as a starting point.

• Go to your test site and create a new folder named scripts . Within the scripts folder, create a new text document called main.js , and save it.
• In your index.html file, enter this code on a new line, just before the closing </body> tag: html < script src = " scripts/main.js " > </ script >
• This is doing the same job as the <link> element for CSS. It applies the JavaScript to the page, so it can have an effect on the HTML (along with the CSS, and anything else on the page).
• Add this code to the main.js file: js const myHeading = document . querySelector ( "h1" ) ; myHeading . textContent = "Hello world!" ;
• Make sure the HTML and JavaScript files are saved. Then load index.html in your browser. You should see something like this:

Note: The reason the instructions (above) place the <script> element near the bottom of the HTML file is that the browser reads code in the order it appears in the file .

If the JavaScript loads first and it is supposed to affect the HTML that hasn't loaded yet, there could be problems. Placing JavaScript near the bottom of an HTML page is one way to accommodate this dependency. To learn more about alternative approaches, see Script loading strategies .

What happened?

The heading text changed to Hello world! using JavaScript. You did this by using a function called querySelector() to grab a reference to your heading, and then store it in a variable called myHeading . This is similar to what we did using CSS selectors. When you want to do something to an element, you need to select it first.

Following that, the code set the value of the myHeading variable's textContent property (which represents the content of the heading) to Hello world! .

Note: Both of the features you used in this exercise are parts of the Document Object Model (DOM) API , which has the capability to manipulate documents.

Language basics crash course

To give you a better understanding of how JavaScript works, let's explain some of the core features of the language. It's worth noting that these features are common to all programming languages. If you master these fundamentals, you have a head start on coding in other languages too!

Warning: In this article, try entering the example code lines into your JavaScript console to see what happens. For more details on JavaScript consoles, see Discover browser developer tools .

Variables are containers that store values. You start by declaring a variable with the let keyword, followed by the name you give to the variable:

A semicolon at the end of a line indicates where a statement ends. It is only required when you need to separate statements on a single line. However, some people believe it's good practice to have semicolons at the end of each statement. There are other rules for when you should and shouldn't use semicolons. For more details, see Your Guide to Semicolons in JavaScript .

You can name a variable nearly anything, but there are some restrictions. (See this section about naming rules .) If you are unsure, you can check your variable name to see if it's valid.

JavaScript is case sensitive. This means myVariable is not the same as myvariable . If you have problems in your code, check the case!

After declaring a variable, you can give it a value:

Also, you can do both these operations on the same line:

You retrieve the value by calling the variable name:

After assigning a value to a variable, you can change it later in the code:

Note that variables may hold values that have different data types :

So why do we need variables? Variables are necessary to do anything interesting in programming. If values couldn't change, then you couldn't do anything dynamic, like personalize a greeting message or change an image displayed in an image gallery.

Comments are snippets of text that can be added along with code. The browser ignores text marked as comments. You can write comments in JavaScript just as you can in CSS:

If your comment contains no line breaks, it's an option to put it behind two slashes like this:

An operator is a mathematical symbol that produces a result based on two values (or variables). In the following table, you can see some of the simplest operators, along with some examples to try in the JavaScript console.

There are a lot more operators to explore, but this is enough for now. See Expressions and operators for a complete list.

Note: Mixing data types can lead to some strange results when performing calculations. Be careful that you are referring to your variables correctly, and getting the results you expect. For example, enter '35' + '25' into your console. Why don't you get the result you expected? Because the quote marks turn the numbers into strings, so you've ended up concatenating strings rather than adding numbers. If you enter 35 + 25 you'll get the total of the two numbers.

Conditionals

Conditionals are code structures used to test if an expression returns true or not. A very common form of conditionals is the if...else statement. For example:

The expression inside the if () is the test. This uses the strict equality operator (as described above) to compare the variable iceCream with the string chocolate to see if the two are equal. If this comparison returns true , the first block of code runs. If the comparison is not true, the second block of code—after the else statement—runs instead.

Functions are a way of packaging functionality that you wish to reuse. It's possible to define a body of code as a function that executes when you call the function name in your code. This is a good alternative to repeatedly writing the same code. You have already seen some uses of functions. For example:

These functions, document.querySelector and alert , are built into the browser.

If you see something which looks like a variable name, but it's followed by parentheses— () —it is likely a function. Functions often take arguments : bits of data they need to do their job. Arguments go inside the parentheses, separated by commas if there is more than one argument.

For example, the alert() function makes a pop-up box appear inside the browser window, but we need to give it a string as an argument to tell the function what message to display.

You can also define your own functions. In the next example, we create a simple function which takes two numbers as arguments and multiplies them:

Try running this in the console; then test with several arguments. For example:

Note: The return statement tells the browser to return the result variable out of the function so it is available to use. This is necessary because variables defined inside functions are only available inside those functions. This is called variable scoping . (Read more about variable scoping .)

Real interactivity on a website requires event handlers. These are code structures that listen for activity in the browser, and run code in response. The most obvious example is handling the click event , which is fired by the browser when you click on something with your mouse. To demonstrate this, enter the following into your console, then click on the current webpage:

There are a number of ways to attach an event handler to an element. Here we select the <html> element. We then call its addEventListener() function, passing in the name of the event to listen to ( 'click' ) and a function to run when the event happens.

The function we just passed to addEventListener() here is called an anonymous function , because it doesn't have a name. There's an alternative way of writing anonymous functions, which we call an arrow function . An arrow function uses () => instead of function () :

Supercharging our example website

With this review of JavaScript basics completed (above), let's add some new features to our example site.

Before going any further, delete the current contents of your main.js file — the bit you added earlier during the "Hello world!" example — and save the empty file. If you don't, the existing code will clash with the new code you are about to add.

Adding an image changer

In this section, you will learn how to use JavaScript and DOM API features to alternate the display of one of two images. This change will happen as a user clicks the displayed image.

• Choose an image you want to feature on your example site. Ideally, the image will be the same size as the image you added previously, or as close as possible.
• Save this image in your images folder.
• Rename the image firefox2.png .
• Add the following JavaScript code to your main.js file. js const myImage = document . querySelector ( "img" ) ; myImage . onclick = ( ) => { const mySrc = myImage . getAttribute ( "src" ) ; if ( mySrc === "images/firefox-icon.png" ) { myImage . setAttribute ( "src" , "images/firefox2.png" ) ; } else { myImage . setAttribute ( "src" , "images/firefox-icon.png" ) ; } } ;
• Save all files and load index.html in the browser. Now when you click the image, it should change to the other one.

This is what happened. You stored a reference to your <img> element in myImage . Next, you made its onclick event handler property equal to a function with no name (an "anonymous" function). So every time this element is clicked:

• The code retrieves the value of the image's src attribute.
• If it is, the code changes the src value to the path of the second image, forcing the other image to be loaded inside the <img> element.
• If it isn't (meaning it must already have changed), the src value swaps back to the original image path, to the original state.

Adding a personalized welcome message

Next, let's change the page title to a personalized welcome message when the user first visits the site. This welcome message will persist. Should the user leave the site and return later, we will save the message using the Web Storage API . We will also include an option to change the user, and therefore, the welcome message.

• In index.html , add the following line just before the <script> element: html < button > Change user </ button >
• In main.js , place the following code at the bottom of the file, exactly as it is written. This takes references to the new button and the heading, storing each inside variables: js let myButton = document . querySelector ( "button" ) ; let myHeading = document . querySelector ( "h1" ) ;
• Add the following function to set the personalized greeting. This won't do anything yet, but this will change soon. js function setUserName ( ) { const myName = prompt ( "Please enter your name." ) ; localStorage . setItem ( "name" , myName ) ; myHeading . textContent = ` Mozilla is cool, ${ myName } ` ; } The setUserName() function contains a prompt() function, which displays a dialog box, similar to alert() . This prompt() function does more than alert() , asking the user to enter data, and storing it in a variable after the user clicks OK . In this case, we are asking the user to enter a name. Next, the code calls on an API localStorage , which allows us to store data in the browser and retrieve it later. We use localStorage's setItem() function to create and store a data item called 'name' , setting its value to the myName variable which contains the user's entry for the name. Finally, we set the textContent of the heading to a string, plus the user's newly stored name.
• Add the following condition block after the function declaration. We could call this initialization code, as it structures the app when it first loads. js if ( ! localStorage . getItem ( "name" ) ) { setUserName ( ) ; } else { const storedName = localStorage . getItem ( "name" ) ; myHeading . textContent = ` Mozilla is cool, ${ storedName } ` ; } This first line of this block uses the negation operator (logical NOT, represented by the ! ) to check whether the name data exists. If not, the setUserName() function runs to create it. If it exists (that is, the user set a user name during a previous visit), we retrieve the stored name using getItem() and set the textContent of the heading to a string, plus the user's name, as we did inside setUserName() .
• Put this onclick event handler (below) on the button. When clicked, setUserName() runs. This allows the user to enter a different name by pressing the button. js myButton . onclick = ( ) => { setUserName ( ) ; } ;

A user name of null?

When you run the example and get the dialog box that prompts you to enter your user name, try pressing the Cancel button. You should end up with a title that reads Mozilla is cool, null . This happens because—when you cancel the prompt—the value is set as null . Null is a special value in JavaScript that refers to the absence of a value.

Also, try clicking OK without entering a name. You should end up with a title that reads Mozilla is cool, for fairly obvious reasons.

To avoid these problems, you could check that the user hasn't entered a blank name. Update your setUserName() function to this:

In human language, this means: If myName has no value, run setUserName() again from the start. If it does have a value (if the above statement is not true), then store the value in localStorage and set it as the heading's text.

If you have followed all the instructions in this article, you should end up with a page that looks something like the image below. You can also view our version .

If you get stuck, you can compare your work with our finished example code on GitHub .

We have just scratched the surface of JavaScript. If you enjoyed playing, and wish to go further, take advantage of the resources listed below.

Dive into JavaScript in much more detail.

This is an excellent resource for aspiring web developers! Learn JavaScript in an interactive environment, with short lessons and interactive tests, guided by an automated assessment. The first 40 lessons are free. The complete course is available for a small one-time payment.

JS Tutorial

Js versions, js functions, js html dom, js browser bom, js web apis, js vs jquery, js graphics, js examples, js references, javascript introduction.

This page contains some examples of what JavaScript can do.

JavaScript Can Change HTML Content

One of many JavaScript HTML methods is getElementById() .

The example below "finds" an HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello JavaScript":

JavaScript accepts both double and single quotes:

JavaScript Can Change HTML Attribute Values

In this example JavaScript changes the value of the src (source) attribute of an <img> tag:

The Light Bulb

Try it Yourself »

Advertisement

JavaScript Can Change HTML Styles (CSS)

Changing the style of an HTML element, is a variant of changing an HTML attribute:

JavaScript Can Hide HTML Elements

Hiding HTML elements can be done by changing the display style:

JavaScript Can Show HTML Elements

Showing hidden HTML elements can also be done by changing the display style:

Did You Know?

JavaScript and Java are completely different languages, both in concept and design.

JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.

ECMA-262 is the official name of the standard. ECMAScript is the official name of the language.

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

The HTML Presentation Framework

Created by Hakim El Hattab and contributors

Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com .

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Even Prettier Animations

Point of view.

Press ESC to enter the slide overview.

Hold down the alt key ( ctrl in Linux) and click on any element to zoom towards it using zoom.js . Click again to zoom back out.

(NOTE: Use ctrl + click in Linux.)

Auto-Animate

Automatically animate matching elements across slides with Auto-Animate .

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Add the r-fit-text class to auto-size text

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

Tiled backgrounds, video backgrounds, ... and gifs, background transitions.

Different background transitions are available via the backgroundTransition option. This one's called "zoom".

You can override background transitions per-slide.

Iframe Backgrounds

Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.

Marvelous List

• No order here

Fantastic Ordered List

• One is smaller than...
• Two is smaller than...

Tabular Tables

Clever Quotes

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

There's a speaker view . It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Export to PDF

Presentations can be exported to PDF , here's an example:

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

• Right-to-left support
• Extensive JavaScript API
• Auto-progression
• Parallax backgrounds
• Custom keyboard bindings

- Try the online editor - Source code & documentation

Create Stunning Presentations on the Web

reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an <iframe> or add your own custom behavior using our JavaScript API .

The framework comes with a broad range of features including nested slides , Markdown support , Auto-Animate , PDF export , speaker notes , LaTeX support and syntax highlighted code .

Ready to Get Started?

It only takes a minute to get set up. Learn how to create your first presentation in the installation instructions !

Online Editor

If you want the benefits of reveal.js without having to write HTML or Markdown try https://slides.com . It's a fully-featured visual editor and platform for reveal.js, by the same creator.

Supporting reveal.js

This project was started and is maintained by @hakimel with the help of many contributions from the community . The best way to support the project is to become a paying member of Slides.com —the reveal.js presentation platform that Hakim is building.

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.

DEV Community

Posted on Jan 11, 2019

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

Building beautiful presentations is hard. Often you're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Well not anymore.

Today, we're going to learn how to create a stunning and animated presentation using HTML, CSS, and JavaScript.

If you're a beginner to web development, don't fret! This tutorial will be easy enough to keep up with. So let's slide right into it!

We're going to be using an awesome framework called Reveal.js . It provides robust functionality for creating interesting and customizable presentations.

• Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

• Change directories into your newly cloned folder and run npm install to download the package dependencies. Then run npm start to run the project.

The index.html file holds all of the markup for the slides. This is one of the downsides of using Reveal.js; all of the content will be placed inside this HTML file.

Built-In Themes

Reveal includes 11 built-in themes for you to choose from:

Changing The Theme

• Open index.html
• Change the CSS import to reflect the theme you want to use

The theme files are:

• solarized.css

Custom Themes

It's quite easy to create a custom theme. Today, I'll be using my custom theme from a presentation I gave called "How To Build Kick-Ass Website: An Introduction To Front-end Development."

Here is what my custom slides look like:

Creating A Custom Theme

• Open css/theme/src inside your IDE. This holds all of the Sass files ( .scss ) for each theme. These files will be transpiled to CSS using Grunt (a JavaScript task runner). If you prefer to write CSS, go ahead and just create the CSS file inside css/theme.
• Create a new  .scss file. I will call mine custom.scss . You may have to stop your localhost and run npm run build to transpile your Sass code to CSS.
• Inside the index.html file, change the CSS theme import in the <head> tag to use the name of the newly created stylesheet. The extension will be  .css , not  .scss .
• Next, I created variables for all of the different styles I wanted to use. You can find custom fonts on Google Fonts. Once the font is downloaded, be sure to add the font URL's into the index.html file.

Here are the variables I chose to use:

• Title Font: Viga
• Content Font: Open Sans
• Code Font: Courier New
• Cursive Font: Great Vibes
• Yellow Color: #F9DC24
• Add a  .reveal class to the custom Sass file. This will wrap all of the styles to ensure our custom theme overrides any defaults. Then, add your custom styling!

Unfortunately, due to time constraints, I'll admit that I used quite a bit of  !important overrides in my CSS. This is horrible practice and I don't recommend it. The reveal.css file has extremely specific CSS styles, so I should have, if I had more time, gone back and ensured my class names were more specific so I could remove the  !importants .

Mixins & Settings

Reveal.js also comes with mixins and settings you can leverage in your custom theme.

To use the mixins and settings, just import the files into your custom theme:

Mixins You can use the vertical-gradient, horizontal-gradient, or radial-gradient mixins to create a neat visual effect.

All you have to do is pass in the required parameters (color value) and voila, you've got a gradient!

Settings In the settings file, you'll find useful variables like heading sizes, default fonts and colors, and more!

The structure for adding new content is:

.reveal > .slides > section

The <section> element represents one slide. Add as many sections as you need for your content.

Vertical Slides

To create vertical slides, simply nest sections.

Transitions

There are several different slide transitions for you to choose from:

To use them, add a data-transition="{name}" to the <section> which contains your slide data.

Fragments are great for highlighting specific pieces of information on your slide. Here is an example.

To use fragments, add a class="fragment {type-of-fragment}" to your element.

The types of fragments can be:

• fade-in-then-out
• fade-in-then-semi-out
• highlight-current-blue
• highlight-red
• highlight-green
• highlight-blue

You can additionally add indices to your elements to indicate in which order they should be highlighted or displayed. You can denote this using the data-fragment-index={index} attribute.

There are way more features to reveal.js which you can leverage to build a beautiful presentation, but these are the main things which got me started.

To learn more about how to format your slides, check out the reveal.js tutorial . All of the code for my presentation can be viewed on GitHub. Feel free to steal my theme!

Top comments (18)

Templates let you quickly answer FAQs or store snippets for re-use.

• Joined Oct 2, 2018

I really love reveal.js. I haven't spoken in a while so I haven't used it. I've always used their themes and never thought about making my own. This is probably super useful for company presentations, too. I'm SO over google slides. Trying to format code in those is a nightmare LOL

• Location Stockholm
• Education Siena College
• Work Software Engineer at Spotify
• Joined Dec 21, 2018

Yeah it is time consuming, but the result is much better

• Location Antibes, France
• Work Senior Software Engineer at Spotify
• Joined Oct 16, 2017

The best thing in this - and now I'm not being ironic - is that while you work on a not so much technical task - creating a presentation - you still have to code. And the result is nice.

On the other hand, I know what my presentation skills teachers would say. Well, because they said it... :) If you really want to deliver a captivating presentation, don't use slides at all. Use the time to prepare what you want to say.

I'm not that good - yet, but taking their advice, if must I use few slides, with little information on them and with minimal graphical distractions. My goal is to impress them by what I say, not is what behind my head.

I'm going to a new training soon, where the first day we have to deliver a presentation supported by slides at a big auditorium and the next day we have to go back and forget about the slides and just get on stage and speak. I can't wait for it.

• Location Lake Villa, IL
• Education Bachelor in Electronics Engineering
• Work Computer & Technology Enthusiast
• Joined Oct 8, 2017

How about github.com/team-fluxion/slide-gazer ?

It's my fourth attempt at creating a simple presentation tool to help one present ideas quickly without having to spend time within a presentation editor like Microsoft PowerPoint. It directly converts markdown documents into elegant presentations with a few features and is still under development.

• Location Singapore
• Work Web Developer at FirstCom Solutions
• Joined Jan 15, 2019

Yup, RevealJS is awesome !

Previously I either used PPT or Google Slides. One is a paid license and the other requires an internet connection.

The cool thing about it is that since it's just HTML files behind the scenes, the only software you need to view it with is a web browser. Has amazing syntax-highlighting support via PrismJS. And as a web developer, it makes it simple to integrate other npm packages if need be...

I actually just used it to present a talk this week!

• Email [email protected]
• Location Indianapolis, IN
• Education Purdue University
• Pronouns he/him
• Work Senior Frontend Engineer at Whatnot
• Joined Aug 3, 2017

Great article, Emma! I love Reveal and this is a great write up for using it!

• Email [email protected]
• Location New Delhi, India 🇮🇳
• Joined Dec 5, 2018

I think its a coincidence 😅 I was just starting to think to use reveal.js and suddenly you see this post 🤩

• Location Saratoga Springs,NY
• Education BA, University of Michigan
• Work Documentarian
• Joined Sep 7, 2018

Check out slides.com If you want to skip the heavy lifting and/or use a presentation platform based on reveal.js.

Everything is still easy to customize. The platform provides a UI to work from and an easy way to share your stuff.

BTW - I have no affiliation with slides.com, or even a current account. I used the service a few years back when I regularly presented and wanted to get over PowerPoint, Google Slides, Prezi, etc.

• Location Toronto, ON
• Education MFA in Art Video Syracuse University 2013 😂
• Work Cannot confirm or deny atm
• Joined May 31, 2017

Well I guess you get to look ultra pro by skipping the moment where you have to adjust for display detection and make sure your notes don’t show because you plugged your display connector in 😩 But If the conference has no wifi then we’re screwed I guess

• Location Palm Bay, FL
• Education FullSail University
• Work Developer Relations Manager at MetaMask
• Joined Sep 16, 2018

I like Reveal, but I still have not moved past using Google docs slides because every presentation I do has to be done yesterday. Hoping that I can use Reveal more often this year as I get more time to work on each presentation.

• Email [email protected]
• Location Abuja Nigeria
• Work Project Manager Techibytes Media
• Joined Feb 19, 2019

Well this is nice and I haven't tried it maybe because I haven't spoken much in meet ups but I think PowerPoint is still much better than going all these steps and what if I have network connection issues that day then I'm scrolled right?

• Email [email protected]
• Joined Apr 16, 2018

Using Node and Soket.io remote control (meant to be used on phones) for my school's computer science club, it also features some more goodies which are helpful when having multiple presentations. It can be modded to use these styling techniques effortlessly. Feel free to fork!

SBCompSciClub / prez-software

A synchronized role based presentation software using node, prez-software.

TODO: Make system to easily manage multiple presentations Add Hash endocing and decoding for "sudo" key values TODO: Document Code

Run on Dev Server

npm i nodemon app.js Nodemon? - A life saving NPM module that is ran on a system level which automatically runs "node (file.js)" when files are modified. Download nodemon by running npm i -g nodemon

Making a Presentation

• Copy an existing presentation folder
• Change the folder name (which should be located at public/slides) with the name day[num of day] ex(day2)

Making a Slide

Making a slide is pretty simple. Just add a HTML section. <section> <!--slide content--> </section> inside the span with the class of "prez-root". Also keep in mind that you will need to copy and pate the markup inside the prez root to the other pages (viewer & controller).

Adding Text

You may add text however you desire, but for titles use the…

Awesome post! I’m glad I’m not the only one who likes libraries. 😎

• Location Los Angeles
• Education Engineering, Physics, and Math
• Joined Sep 6, 2018

Fantastic post. I just loved it.

• Location France
• Work Co-Founder of Depot
• Joined Sep 2, 2017

Awesome introduction! I feel like I need to give this a try the next time I create a presentation.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Your AWS app in depth like never before with sls-mentor

Pierre Chollet - Jun 11

Create A YouTube Homepage Clone in ReactJS and Tailwind CSS

CodingNepal - Jun 13

Preventing account sharing with Clerk

Tan Shun Yuan - Jun 3

Alternatives to npm: Exploring Different Package Managers for JavaScript Development

Vishal Yadav - Jun 13

We're a place where coders share, stay up-to-date and grow their careers.

• DSA with JS - Self Paced
• JS Tutorial
• JS Exercise
• JS Interview Questions
• JS Operator
• JS Projects
• JS Examples
• JS Free JS Course
• JS A to Z Guide
• JS Formatter
• JavaScript Tutorial

JavaScript Basics

Introduction to javascript.

• JavaScript Versions
• How to Add JavaScript in HTML Document?
• JavaScript Statements
• JavaScript Syntax
• JavaScript Output
• JavaScript Comments

JS Variables & Datatypes

• Variables and Datatypes in JavaScript
• Global and Local variables in JavaScript
• JavaScript Let
• JavaScript Const
• JavaScript var

JS Operators

• JavaScript Operators
• Operator precedence in JavaScript
• JavaScript Arithmetic Operators
• JavaScript Assignment Operators
• JavaScript Comparison Operators
• JavaScript Logical Operators
• JavaScript Bitwise Operators
• JavaScript Ternary Operator
• JavaScript Comma Operator
• JavaScript Unary Operators
• JavaScript Relational operators
• JavaScript String Operators
• JavaScript Loops
• 7 Loops of JavaScript
• JavaScript For Loop
• JavaScript While Loop
• JavaScript for-in Loop
• JavaScript for...of Loop
• JavaScript do...while Loop

JS Perfomance & Debugging

• JavaScript | Performance
• Debugging in JavaScript
• JavaScript Errors Throw and Try to Catch
• Objects in Javascript
• Introduction to Object Oriented Programming in JavaScript
• JavaScript Objects
• Creating objects in JavaScript
• JavaScript JSON Objects
• JavaScript Object Reference

JS Function

• Functions in JavaScript
• How to write a function in JavaScript ?
• JavaScript Function Call
• Different ways of writing functions in JavaScript
• Difference between Methods and Functions in JavaScript
• Explain the Different Function States in JavaScript
• JavaScript Function Complete Reference
• JavaScript Arrays
• JavaScript Array Methods
• Best-Known JavaScript Array Methods
• What are the Important Array Methods of JavaScript ?
• JavaScript Array Reference
• JavaScript Strings
• JavaScript String Methods
• JavaScript String Reference
• JavaScript Numbers
• How numbers are stored in JavaScript ?
• How to create a Number object using JavaScript ?
• JavaScript Number Reference
• JavaScript Math Object
• What is the use of Math object in JavaScript ?
• JavaScript Math Reference
• JavaScript Map
• What is JavaScript Map and how to use it ?
• JavaScript Map Reference
• Sets in JavaScript
• How are elements ordered in a Set in JavaScript ?
• How to iterate over Set elements in JavaScript ?
• How to sort a set in JavaScript ?
• JavaScript Set Reference
• JavaScript Date
• JavaScript Promise
• JavaScript BigInt
• JavaScript Boolean
• JavaScript Proxy/Handler
• JavaScript WeakMap
• JavaScript WeakSet
• JavaScript Function Generator
• JavaScript JSON
• Arrow functions in JavaScript
• JavaScript this Keyword
• Strict mode in JavaScript
• Introduction to ES6
• JavaScript Hoisting
• Async and Await in JavaScript

JavaScript Exercises

• JavaScript Exercises, Practice Questions and Solutions

What is JavaScript ?

JavaScript is a lightweight, cross-platform , single-threaded, and interpreted compiled programming language. It is also known as the scripting language for webpages. It is well-known for the development of web pages, and many non-browser environments also use it.

JavaScript is a weakly typed language (dynamically typed) . JavaScript can be used for Client-side developments as well as Server-side developments. JavaScript is both an imperative and declarative type of language. JavaScript contains a standard library of objects, like Array , Date , and Math , and a core set of language elements like operators , control structures , and statements . 

• Client-side: It supplies objects to control a browser and its Document Object Model (DOM). Like if client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks , form input , and page navigation . Useful libraries for the client side are AngularJS , ReactJS , VueJS, and so many others.
• Server-side: It supplies objects relevant to running JavaScript on a server. For if the server-side extensions allow an application to communicate with a database, and provide continuity of information from one invocation to another of the application, or perform file manipulations on a server. The useful framework which is the most famous these days is node.js .
• Imperative language – In this type of language we are mostly concerned about how it is to be done. It simply controls the flow of computation. The procedural programming approach, object, oriented approach comes under this as async await we are thinking about what is to be done further after the async call.
• Declarative programming – In this type of language we are concerned about how it is to be done, basically here logical computation requires. Her main goal is to describe the desired result without direct dictation on how to get it as the arrow function does.

How to Link JavaScript File in HTML ?

JavaScript can be added to HTML file in two ways :

• Internal JS: We can add JavaScript directly to our HTML file by writing the code inside the <script> tag. The <script> tag can either be placed inside the <head> or the <body> tag according to the requirement.
• External JS : We can write JavaScript code in another files having an extension.js and then link this file inside the <head> tag of the HTML file in which we want to add this code.

Output: The output will display on the console.

History of JavaScript

It was created in 1995 by Brendan Eich while he was an engineer at Netscape. It was originally going to be named LiveScript but was renamed. Unlike most programming languages, JavaScript language has no concept of input or output. It is designed to run as a scripting language in a host environment, and it is up to the host environment to provide mechanisms for communicating with the outside world. The most common host environment is the browser. 

Features of JavaScript

According to a recent survey conducted by Stack Overflow , JavaScript is the most popular language on earth.  With advances in browser technology and JavaScript having moved into the server with Node.js and other frameworks, JavaScript is capable of so much more. Here are a few things that we can do with JavaScript: 

• JavaScript was created in the first place for DOM manipulation. Earlier websites were mostly static, after JS was created dynamic Web sites were made.
• Functions in JS are objects. They may have properties and methods just like other objects. They can be passed as arguments in other functions.
• Can handle date and time.
• Performs Form Validation although the forms are created using HTML.
• No compiler is needed.

Applications of JavaScript

• Web Development: Adding interactivity and behavior to static sites JavaScript was invented to do this in 1995. By using AngularJS that can be achieved so easily.
• Web Applications: With technology, browsers have improved to the extent that a language was required to create robust web applications. When we explore a map in Google Maps then we only need to click and drag the mouse. All detailed view is just a click away, and this is possible only because of JavaScript. It uses Application Programming Interfaces(APIs) that provide extra power to the code. The Electron and React are helpful in this department.
• Server Applications: With the help of Node.js, JavaScript made its way from client to server and Node.js is the most powerful on the server side.
• Games: Not only in websites, but JavaScript also helps in creating games for leisure. The combination of JavaScript and HTML 5 makes JavaScript popular in game development as well. It provides the EaseJS library which provides solutions for working with rich graphics.
• Smartwatches: JavaScript is being used in all possible devices and applications. It provides a library PebbleJS which is used in smartwatch applications. This framework works for applications that require the Internet for their functioning.
• Art: Artists and designers can create whatever they want using JavaScript to draw on HTML 5 canvas, and make the sound more effective also can be used p5.js library.
• Machine Learning: This JavaScript ml5.js library can be used in web development by using machine learning.
• Mobile Applications: JavaScript can also be used to build an application for non-web contexts. The features and uses of JavaScript make it a powerful tool for creating mobile applications. This is a Framework for building web and mobile apps using JavaScript. Using React Native, we can build mobile applications for different operating systems. We do not require to write code for different systems. Write once use it anywhere!

Limitations of JavaScript

•   Security risks: JavaScript can be used to fetch data using AJAX or by manipulating tags that load data such as <img>, <object>, <script>. These attacks are called cross-site script attacks. They inject JS that is not part of the site into the visitor’s browser thus fetching the details. 
• Performance: JavaScript does not provide the same level of performance as offered by many traditional languages as a complex program written in JavaScript would be comparatively slow. But as JavaScript is used to perform simple tasks in a browser, so performance is not considered a big restriction in its use.
• Complexity: To master a scripting language, programmers must have a thorough knowledge of all the programming concepts, core language objects, and client and server-side objects otherwise it would be difficult for them to write advanced scripts using JavaScript.
• Weak error handling and type checking facilities: It is a weakly typed language as there is no need to specify the data type of the variable. So wrong type checking is not performed by compile.

Why JavaScript is known as a lightweight programming language ?

JavaScript is considered lightweight due to the fact that it has low CPU usage, is easy to implement, and has a minimalist syntax. Minimalist syntax as in, has no data types. Everything is treated here as an object. It is very easy to learn because of its syntax similar to C++ and Java.

A lightweight language does not consume much of your CPU’s resources. It doesn’t put excess strain on your CPU or RAM. JavaScript runs in the browser even though it has complex paradigms and logic which means it uses fewer resources than other languages. For example, NodeJs, a variation of JavaScript not only performs faster computations but also uses fewer resources than its counterparts such as Dart or Java.

Additionally, when compared with other programming languages, it has fewer in-built libraries or frameworks, contributing as another reason for it being lightweight. However, this brings a drawback in that we need to incorporate external libraries and frameworks. 

Is JavaScript Compiled or Interpreted or both ?

JavaScript is both compiled and interpreted. In the earlier versions of JavaScript, it used only the interpreter that executed code line by line and shows the result immediately. But with time the performance became an issue as interpretation is quite slow. Therefore, in the newer versions of JS, probably after the V8, the JIT compiler was also incorporated to optimize the execution and display the result more quickly. This JIT compiler generates a bytecode that is relatively easier to code. This bytecode is a set of highly optimized instructions.  The V8 engine initially uses an interpreter, to interpret the code. On further executions, the V8 engine finds patterns such as frequently executed functions, and frequently used variables, and compiles them to improve performance.

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples .

Please Login to comment...

Similar reads.

• javascript-basics
• Web Technologies

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Top 10 JavaScript frameworks to create presentation slides

Presentation frameworks are tools or libraries that can help you create presentations using web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You’ll have full control over the appearance and layout of your slides.

They allow you to export your slides as HTML files that can be viewed in any modern browser. You don’t need to install any software or plugin to view your slides. You can also share your slides online using platforms such as Slides.com, GitHub Pages, Netlify.

Reveal.js ( 67.1k ⭐) — An open source HTML presentation framework that allows you to create beautiful and interactive presentations using web technologies. You can use HTML, CSS, JavaScript, Markdown, LaTeX, and more to create stunning slides with animations, transitions, code highlighting, and other features.

Impress.js ( 37.5k ⭐) — Another open source HTML presentation framework that is similar to reveal.js, but with a different approach, inspired by the idea behind prezi.com. It uses CSS3 3D transforms to create dynamic and spatial presentations that can zoom, rotate, and pan across the slides.

Slidev ( 31.5k ⭐) — A web-based slides maker and presenter that is designed for developers. It allows you to create beautiful and interactive presentations using Markdown, HTML, Vue components, and other web technologies. You can also use features such as live coding, recording, drawing, LaTeX, diagrams, icons, and more to enhance your slides.

MDX Deck ( 11.3k ⭐) — A library based on MDX that allows you to create presentations using Markdown and React components. You can write your slides in a single MDX file and separate them with --- . You can also import and use any React component in your slides, as well as customize the theme and layout of your presentation.

Spectacle ( 9.7k ⭐) — A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code, created and maintained by Formidable Labs. You can use it to create beautiful and interactive slides with animations, transitions, code highlighting, and other features.

Code Surfer ( 6.3k ⭐) — A library that allows you to create presentations using Markdown and React components. You can write your slides in a single MDX file and separate them with --- , add code highlighting, code zooming, code scrolling, code focusing, code morphing, and fun to MDX Deck slides.

WebSlides ( 6.2k ⭐) — A library that allows you to create beautiful HTML presentations and websites. Just choose a demo and customize it in minutes. 120+ slides ready to use. You can use HTML, CSS, JavaScript, Markdown, LaTeX, and more to create stunning slides with animations, transitions, code highlighting, and other features.

Fusuma ( 5.4k ⭐) — A tool that allows you to create slides with Markdown easily. You can use HTML, CSS, JavaScript, Markdown, Vue components, and other web technologies to create stunning slides with animations, transitions, code highlighting, and other features.

md2googleslides ( 4.4k ⭐) — Generate Google Slides from markdown & HTML. Run from the command line or embed in another application. While it does not yet produce stunningly beautiful decks, you are encouraged to use this tool for quickly prototyping presentations.

PptxGenJS ( 2.5k ⭐) — A JavaScript library that allows you to create presentations, compatible with PowerPoint, Keynote, and other applications that support the Open Office XML (OOXML) format. You can use it to generate PPTX files with just a few simple JavaScript commands in any modern desktop and mobile browser. You can also integrate PptxGenJS with Node, Angular, React, and Electron.

Common features

Presentation frameworks typically share several common features that aim to enhance the creation and delivery of visually engaging and interactive presentations. Here are some of the common features you can find:

Ease of use : They allow you to use web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You don’t need to learn a new software or tool to create your slides. You can also use your favorite code editor or IDE to write and edit your slides.

Nested slides : They allow you to create sub-sections or sub-topics within your presentation. You can use nested slides to organize your content, add more details, or create interactive menus.

Markdown support : Markdown is a lightweight markup language that allows you to format text using simple syntax. You can use Markdown to write your slides in a plain text editor and then convert them to HTML. Markdown makes it easy to create headings, lists, links, images, code blocks, and more.

Auto-Animate : A feature that automatically animates the transitions between slides or elements to create smooth and dynamic effects for your presentation, detect the changes between slides and animate them accordingly.

PDF export : You can use PDF export to print your presentation, share it online, or view it offline. PDF export can also preserve the layout, fonts, and images of your presentation.

Speaker notes : You can use speaker notes to prepare your speech, add additional information, or provide references. Speaker notes are usually hidden from the audience but visible to you in a separate window or screen.

LaTeX support : LaTeX is a document preparation system that allows you to create high-quality typesetting for mathematical and scientific expressions. You can use LaTeX to write complex formulas, equations, symbols, and diagrams in your presentation. LaTeX can also handle cross-references, citations, and bibliographies.

Syntax highlighted code : You can use syntax highlighted code to display your source code in your presentation. Syntax highlighted code can make your code more readable, understandable, and attractive.

You might also like

The WHY behind the WAT- An explanation of JavaScript’s type system

January 18, 2018

Note: This article was originally posted on Medium.com via Daily JS. However, I’m reposting on my blog to preseve the text. Unfortunately, images did not transfer over so well…

So if you’ve been in the JavaScript world for a bit, you’ve probably come across Gary Bernhardt’s “Wat” talk.

For those of you who haven’t seen it, you are seriously missing out and I would highly suggest that you go and check the talk out .

A brief summary of the video:

Bernhardt (the person giving a presentation at CodeMash 2012) discusses some of the unexpected behavior in Ruby and JavaScript. Around two minutes into the presentation, he starts ripping into JavaScript specifically with his hilarious use of sarcasm to get one point across:

JavaScript is…weird (to say the least).

To illustrate this point, he brings up a few examples of illogical operations that produce unexpected results.

Now imagine that you are an undergraduate and you’re the instructor for an Intro to JavaScript class. You thought it’d be comical to show Bernhardt’s video in the first lecture to show how quirky and funny JavaScript is, and then you go onto to talk about basic JS syntax, types, functions, closures, etc. But before you do that, someone asks you

“Why is array plus array equal to empty string?”

That’s when it hits you that you have no idea what is going on in that video or JavaScript’s type system in general…at least that’s where I found myself about a week ago.

So, in order to prevent developers from giving semi-coherent, hand-wavy explanations of why JS works in the way it does (and of course to educate you, the reader), let’s dive into the Why behind the WAT.

I can do types good, right?

So let’s begin at the basics. There are 5 different literal (things you can declare instantaneously) types that exist in JS:

Numbers (e.g. 1 , 2 , 1.28 , NaN , Infinity , etc.)…note that NaN (not a number) is a number. From the ECMA spec:

4.3.20 Number type: set of all possible Number values including the special “Not-a-Number” (NaN) values, positive infinity, and negative infinity

Strings (e.g. 'xyz' , "abc" ) Pretty straightforward

Boolean (just true and false )…there’s a whole article that can be written about truthy vs falsy values. But for the moment, we’re going to skip that.

Objects (e.g. {name:'abhi', dob: '1997'} )

Array (e.g. [1,2,'hi'] )

Of these literals, only booleans, numbers, and strings are primitives. There are also a couple of other primitive values ( undefined and null ).

**Let’s do an exercise: **Given that the typeof function will output a string representing the type of a variable passed to it, what is typeof([1,2,3]) ?

Well…it’s actually 'object' .

In JavaScript, objects and arrays are handled nearly identically because arrays are just instantiations of objects. The difference is the following:

• While objects are just an unordered map from string keys to values, arrays are an ordered list of values with integer keys.

Keep that idea in mind, knowing that an array is really an object helps you gain intuition for WAT is happening.

Okay…so I know how to type good, but can i do the adding thingy?

Well…let’s see.

https://www.ecma-international.org/ecma-262/6.0/Ecma_RVB-003.jpg

The addition operator in JavaScript (as formally defined in 11.6.1 of the ECMA spec) is the following:

The production AdditiveExpression : AdditiveExpression + MultiplicativeExpression is evaluated as follows: 1. Let lref be the result of evaluating AdditiveExpression 2. Let lval be GetValue ( lref ). 3. Let rref be the result of evaluating MultiplicativeExpression. 4. Let rval be GetValue ( rref ). 5. Let lprim be ToPrimitive ( lval ). 6. Let rprim be ToPrimitive ( rval ). 7. If Type ( lprim ) is String or Type ( rprim ) is String, then return the String that is the result of concatenating ToString ( lprim ) followed by ToString ( rprim ) 9. Return the result of applying the addition operation to ToNumber ( lprim ) and ToNumber ( rprim ). See the Note below 11.6.3 .

Oh boy that’s a lot to look through.

https://tgimworklife.files.wordpress.com/2010/10/overwhelmed.jpg

Breaking it down, we’re just going to be calling this function GetValue on the left and right hand side of the addition operator. For the two results we get back from GetValue , we then call a function ToPrimitive . If the results of ToPrimitive on both sides are strings, just concatenate them. Otherwise, just add them (according section 11.6.3).

Alright…so what are these GetValue and ToPrimitive functions?

Per the ECMA spec, GetValue will just return the value associated with the variable passed into it (ref section 8.7.1 ). The more interesting part is what happens next.

ToPrimitive takes in an input argument and a PreferredType optional argument. The addition operation doesn’t specify a second arg to ToPrimitive , so the results are as follows:

Basically, for all of the primitive types undefined , null , boolean , number , string , we don’t do anything and leave them as is. For everything else (ie an object), we called another function called DefaultValue on the object itself specified in section 8.12.8 of the ECMA spec.

The spec says that when DefaultValue is called with no hint (what we are doing in this case), then it behaves as if the hint were Number. In that case, we call the valueOf method on the argument of DefaultValue . If that result is a primitive value, just return that. Otherwise, we call toString on the argument! If this str is a primitive value then return it. Otherwise, throw a type error exception.

The next question is what happens when we call toString (I promise we’re almost done here). Well, according to section 9.8 of the spec, we output the following

Okay, for an object, it says to go back to ToPrimitive and pass in a hint of String …going back, we see that calling ToPrimitive on an object with a hint (i.e. PreferredType of String ) leads us to go back to the DefaultValue method, but this time with a hint of String as well. In this case, if there exists a toString method on argument passed in, just return that string.

Whew…I think we’re done. But what does this all mean?

Well…let’s take a look at the first example in Bernhardt’s talk.

Array plus Array equals empty string..right?

Okay so, walking through our line of logic, recall that an array is of type object. What happens when I call ToPrimitive(GetValue(([])) on the empty array?

By the line of reasoning I went through above, we’ll just end up calling toString on the array. Per section 15.4.4.2 of the spec, we call join on the array with no arguments. And per section 15.4.4.5 (specifying the join operation), we just concatenate all the elements of the array separated by commas. So [].toString() = '' .

Recall that the addition operator actually does call GetValue followed by ToPrimitive on each of the operands. So we’ll end up with an expression as follows

And voila, we are done. Moving on.

Array plus Object equals uhh…why is it [object Object]?

http://i0.kym-cdn.com/entries/icons/mobile/000/021/464/14608107_1180665285312703_1558693314_n.jpg

Try looking up Object.prototype.toString() in the ECMA spec. You’ll see that in section 15.2.4.2 , it defines that if toString is called on an object you output [object + class + ] . The class variable is determined by getting the internal class of a given object (the equivalent of calling variable.constructor.name ).

For a regular object, this is just {}.constructor.name = 'Object' . So the final toString() output on an object {} is [object Object] .

Going through the whole chain again…

Okay, this next one is very weird:

Object plus Object equals [object Object][object Object] right?

Kinda. So in some cases if you type in {} + {} into a web browser console, it will output [object Object][object Object] (it does this in the Chrome REPL and the node REPL). But for some other browsers, you’ll get NaN (e.g. Firefox). What’s going on?

It totally depends on how the individual browser implements the ECMA spec. In the first case, the browser just considers the first and second operands as objects, and calls the typical toString methods on them and concatenates the resulting strings.

But the first {} can also be interpreted as a code block which can essentially be thought of as…nothing. So our {} + {} actually boils down to +{} .

This +{} is referred to as unary addition. The main difference with unary addition is that it only works with one operand (in this case {} ) and does ToNumber(ToPrimitive(GetValue({}))) instead of a ToPrimitive(GetValue({})) call. The ToNumber operation is specified in section 9.3.1 , but I won’t go through explaining everything…because there are a lot of cases. General rules of thumb:

• If the value looks like a number, it gets cast to a number.
• If it is an empty string, it gets cast to 0.
• Other truthy and falsy values get cast to 1 and 0 respectively.
• Anything else is NaN

So let’s evaluate the original expression.

Ah so Object plus Array equals…0?

Yes! You’re getting it (at least I am hoping you get it…medium articles are not a great way to get user feedback). Let’s just walk through this quickly.

The first {} is considered a code block (this is surprisingly consistent across browsers). So, we’re now going to do unary addition on empty array.

Async/await

There’s a special syntax to work with promises in a more comfortable fashion, called “async/await”. It’s surprisingly easy to understand and use.

Async functions

Let’s start with the async keyword. It can be placed before a function, like this:

The word “async” before a function means one simple thing: a function always returns a promise. Other values are wrapped in a resolved promise automatically.

For instance, this function returns a resolved promise with the result of 1 ; let’s test it:

…We could explicitly return a promise, which would be the same:

So, async ensures that the function returns a promise, and wraps non-promises in it. Simple enough, right? But not only that. There’s another keyword, await , that works only inside async functions, and it’s pretty cool.

The syntax:

The keyword await makes JavaScript wait until that promise settles and returns its result.

Here’s an example with a promise that resolves in 1 second:

The function execution “pauses” at the line (*) and resumes when the promise settles, with result becoming its result. So the code above shows “done!” in one second.

Let’s emphasize: await literally suspends the function execution until the promise settles, and then resumes it with the promise result. That doesn’t cost any CPU resources, because the JavaScript engine can do other jobs in the meantime: execute other scripts, handle events, etc.

It’s just a more elegant syntax of getting the promise result than promise.then . And, it’s easier to read and write.

If we try to use await in a non-async function, there would be a syntax error:

We may get this error if we forget to put async before a function. As stated earlier, await only works inside an async function.

Let’s take the showAvatar() example from the chapter Promises chaining and rewrite it using async/await :

• We’ll need to replace .then calls with await .
• Also we should make the function async for them to work.

Pretty clean and easy to read, right? Much better than before.

In modern browsers, await on top level works just fine, when we’re inside a module. We’ll cover modules in article Modules, introduction .

For instance:

If we’re not using modules, or older browsers must be supported, there’s a universal recipe: wrapping into an anonymous async function.

Like promise.then , await allows us to use thenable objects (those with a callable then method). The idea is that a third-party object may not be a promise, but promise-compatible: if it supports .then , that’s enough to use it with await .

Here’s a demo Thenable class; the await below accepts its instances:

If await gets a non-promise object with .then , it calls that method providing the built-in functions resolve and reject as arguments (just as it does for a regular Promise executor). Then await waits until one of them is called (in the example above it happens in the line (*) ) and then proceeds with the result.

To declare an async class method, just prepend it with async :

The meaning is the same: it ensures that the returned value is a promise and enables await .

Error handling

If a promise resolves normally, then await promise returns the result. But in the case of a rejection, it throws the error, just as if there were a throw statement at that line.

…is the same as this:

In real situations, the promise may take some time before it rejects. In that case there will be a delay before await throws an error.

We can catch that error using try..catch , the same way as a regular throw :

In the case of an error, the control jumps to the catch block. We can also wrap multiple lines:

If we don’t have try..catch , then the promise generated by the call of the async function f() becomes rejected. We can append .catch to handle it:

If we forget to add .catch there, then we get an unhandled promise error (viewable in the console). We can catch such errors using a global unhandledrejection event handler as described in the chapter Error handling with promises .

When we use async/await , we rarely need .then , because await handles the waiting for us. And we can use a regular try..catch instead of .catch . That’s usually (but not always) more convenient.

But at the top level of the code, when we’re outside any async function, we’re syntactically unable to use await , so it’s a normal practice to add .then/catch to handle the final result or falling-through error, like in the line (*) of the example above.

When we need to wait for multiple promises, we can wrap them in Promise.all and then await :

In the case of an error, it propagates as usual, from the failed promise to Promise.all , and then becomes an exception that we can catch using try..catch around the call.

The async keyword before a function has two effects:

• Makes it always return a promise.
• Allows await to be used in it.

The await keyword before a promise makes JavaScript wait until that promise settles, and then:

• If it’s an error, an exception is generated — same as if throw error were called at that very place.
• Otherwise, it returns the result.

Together they provide a great framework to write asynchronous code that is easy to both read and write.

With async/await we rarely need to write promise.then/catch , but we still shouldn’t forget that they are based on promises, because sometimes (e.g. in the outermost scope) we have to use these methods. Also Promise.all is nice when we are waiting for many tasks simultaneously.

Rewrite using async/await

Rewrite this example code from the chapter Promises chaining using async/await instead of .then/catch :

The notes are below the code:

The function loadJson becomes async .

All .then inside are replaced with await .

We can return response.json() instead of awaiting for it, like this:

Then the outer code would have to await for that promise to resolve. In our case it doesn’t matter.

The error thrown from loadJson is handled by .catch . We can’t use await loadJson(…) there, because we’re not in an async function.

Rewrite "rethrow" with async/await

Below you can find the “rethrow” example. Rewrite it using async/await instead of .then/catch .

And get rid of the recursion in favour of a loop in demoGithubUser : with async/await that becomes easy to do.

There are no tricks here. Just replace .catch with try..catch inside demoGithubUser and add async/await where needed:

Call async from non-async

We have a “regular” function called f . How can you call the async function wait() and use its result inside of f ?

P.S. The task is technically very simple, but the question is quite common for developers new to async/await.

That’s the case when knowing how it works inside is helpful.

Just treat async call as promise and attach .then to it:

• If you have suggestions what to improve - please submit a GitHub issue or a pull request instead of commenting.
• If you can't understand something in the article – please elaborate.
• To insert few words of code, use the <code> tag, for several lines – wrap them in <pre> tag, for more than 10 lines – use a sandbox ( plnkr , jsbin , codepen …)

Lesson navigation

• © 2007—2024  Ilya Kantor
• about the project
• terms of usage
• privacy policy

This is a potential security issue, you are being redirected to https://csrc.nist.gov .

You have JavaScript disabled. This site requires JavaScript to be enabled for complete site functionality.

An official website of the United States government

Here’s how you know

Official websites use .gov A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS A lock ( Lock Locked padlock icon ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

Pulses of Unpredictability: Notes on the NIST Reference for Randomness Beacons

Description.

This talk gives a few notes about the NIST Reference for Randomness Beacons, mentioning some conceived applications, the NIST project on Interoperable Randomness Beacons, and the pulse format. The talk also includes considerations about the signature scheme, combining randomness from various beacons, and future work.

Presented at

Parent project, related topics.

Security and Privacy: cryptography

You must have javascript enabled to use this website.

• This week's best tech deals
• Apple plans for thinner hardware
• Anker's charging gear is 50 percent off
• Amazon Prime Day is coming in July
• The next Nintendo Direct is on June 18

WWDC 2024: How to watch Apple’s keynote on iOS 18, AI and more

The event starts at 1pm et, with news on ios 18, macos, visionos and more..

Apple’s Worldwide Developers Conference (WWDC) keynote is imminent . The festivities kick off later today — Monday, June 10 at 1PM ET. The keynote address is available to the public and you can watch it via Apple’s event website or on the company’s YouTube channel . And if you don't want to click away, the latter feed is embedded directly below.

This is WWDC, so it’ll be a software-focused event . Expect that Apple will showcase updates across its full panoply of operating systems, including iOS 18 and iPadOS 18, as well as watchOS, macOS and even visionOS, which is the operating system behind the Vision Pro headset.

But the big news is expected in the AI space, where Apple has has to elevate its games to compete with the likes of Microsoft and Google. To that end, per Bloomberg ’s Mark Gurman , Apple is expected to spend nearly half of the keynote's running time touting a bevy of new AI initiatives, some of which are expected to be powered by a new partnership with OpenAI, the company behind ChatGPT. If Gurman is right, and he usually is, we’ll see Siri getting some long overdue AI upgrades, including the ability to issue commands inside specific apps.

As for software updates, it looks like iOS 18 will finally bring RCS support to Messages . This messaging protocol offers end-to-end encryption and better media sharing. It’ll also improve texting compatibility with Android devices. Rumors indicate that Apple Music may get an OpenAI-powered tool that auto-generates playlists and Notes might get a voice-recording option. Other apps like Mail, Fitness and Health are expected to get new features, too. (Again, hit up that recent preview from Bloomberg ’s Mark Gurman , which is chock full of details.)

There’s also those ever-tantalizing words of “just one more thing.” Last year, the company used WWDC to officially unveil the Vision Pro . Apple won’t introduce a new device category this year, the AVP was its first since Apple Watch, but there should be a Vision Pro global availability announcement and some updated features.

Despite last year's Vision Pro reveal, we're not expecting a lot of hardware news. It’s possible we’ll get a new Apple TV streaming box and, if we’re lucky, an AirPods Max refresh with USB-C. Don’t hold out hope for new tablets or laptops, as Apple recently released both iPads and MacBooks — though Apple could drop the just-released M4 chip in the MacBook Pro. The Mac mini and Mac Studio are both overdue for an update, as well. But it's possible we get none of the above. There won’t be new iPhones until September, and the same goes for Apple Watch.

• Advertisement