What is Javascript?

____________ is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else.

JavaScript

What happens when you load a web page in a browser?

When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).

A web page with no dynamically updating content is referred to as static — it just shows the same content all the time.

[ ]

APIs are like "ready-made furniture kits." It is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then put them together to make a bookshelf.

[ ]

APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement.

[ ]

Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser.

[ ]

Each browser tab has its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure

[ ]

JavaScript is a scripting or programming language that allows you to implement complex features on web pages

[ ]

Reusable code blocks are called "functions"

[ ]

Scripts loaded using the async attribute (see below) will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading. You get no guarantee that scripts will run in any specific order, only that they will not stop the rest of the page from displaying. It is best to use async when the scripts in the page run independently from each other and depend on no other script on the page.

[ ]

Scripts loaded using the defer attribute (see below) will run in the order they appear in the page and execute them as soon as the script and content are downloaded

[ ]

Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, ASP.NET and... JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment

[ ]

The word dynamic is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required.

[ ]

There are actually two modern features we can use to bypass the problem of the blocking script — async and defer

[ ]

When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in.

[ ]

async and defer both instruct the browser to download the script(s) in a separate thread, while the rest of the page (the DOM, etc.) is downloading, so the page loading is not blocked by the scripts.

[ ]

async should be used when you have a bunch of background scripts to load in, and you just want to get them in place asap.

[ ]

the defer attribute

[ ]

Document Object Model API

allows you to manipulate HTML and CSS, creating, removing and changing HTML, dynamically applying new styles to your page, etc.

What is Javascript capable of creating?

displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc

Interpreted code

the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it. The code is received in its programmer-friendly text form and processed directly from that.

What is the script loading strategy for external Javascript?

the defer attribute

Compiled code

transformed (compiled) into another form before they are run by the computer. For example, C/C++ are compiled into machine code that is then run by the computer. The program is executed from a binary format, which was generated from the original program source code.

API

Application Programming Interface

If your scripts should be run immediately and they don't have any dependencies, then use async.

[ ]

What are the two ways that you can write comments in Javascript?

A single line comment is written after a double forward slash (//), e.g. // I am a comment A multi-line comment is written between the strings /* and */, e.g. /* I am also a comment */

JavaScript is a lightweight interpreted programming language.

From a technical standpoint, most modern JavaScript interpreters actually use a technique called just-in-time compiling to improve performance; the JavaScript source code gets compiled into a faster, binary format while the script is being used, so that it can be run as quickly as possible. However, JavaScript is still considered an interpreted language, since the compilation is handled at run time, rather than ahead of time.

Browser APIs are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things.

Browser APIs

What are the two categories of APIs?

Browser APIs and Third Party APIs

______ is a language of style rules that we use to apply styling to our HTML content, for example setting background colors and fonts, and laying out our content in multiple columns.

CSS

What is the script loading strategy for internal Javascript?

DOMContentLoaded

A very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API.

Document Object Model API

______ is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page.

HTML

What are the 3 standard web technologies?

HTML, CSS and Javascript

Third party APIs are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web.

Third party APIs

What is DOMContentLoaded? What is it for?

This is an event listener, which listens for the browser's "DOMContentLoaded" event, which signifies that the HTML body is completely loaded and parsed. The JavaScript inside this block will not run until after that event is fired, therefore an error is avoided