You can include interactivity on your web page through a script tag using JavaScript, the third language of web development. The word “Java” in JavaScript has no relation to the Java programming language. Syntactically, JavaScript falls under the C family of languages.
<aside> 💡 The purpose of this page is to 1) explore JavaScript as a language, and 2) to understand the language as a method for adding dynamism and interactivity to a web page. Yes, JavaScript has many other purposes, but it’ll be incredibly useful to understand it in its original context: as a scripting language meant to interact with HTML and CSS. Idioms and patterns that you see in tools built on top of JavaScript stem from this original goal.
</aside>
JavaScript runs on the browser through an engine that manages the execution and memory of any scripts that you write. Browsers write their own engines, each different features and idiosyncrasies. This can be analogous to how C++ has different compilers that may implement the C++ specification in slightly different ways. The initial version of JavaScript was created in 10 days by Brendan Eich for the Netscape Navigator browser. JavaScript has its own specification called ECMAScript. As with other languages, the ECMAScript standard is not constant — it continues to evolve as people propose new features to be added to the language.
<aside> 🎒 To get a grasp of the syntax and some features, read through the MDN language overview. It will be useful to understand the sections between Data types and Functions, inclusive, but you should read through the entire page.
If you find that you don’t fully understand the section on asynchronous programming, don’t worry: asynchronicity is a difficult concept to understand and we’ll cover it in more depth.
</aside>
JavaScript is a dynamically-typed programming language. There is no compilation step that checks the type validity of your program’s expressions (as would happen in a language like C or C++ that is statically-typed). In the case of expressions with invalid types, a JavaScript program will throw an error during runtime (as opposed to C/C++ which would fail to compile). This has the benefit of rapid prototyping but results in potentially riskier and crash-prone code. We’ll revisit this aspect of JavaScript’s type system later.
You should also know that JavaScript is weakly typed in that it will implicitly convert the type of a value in cases of type mismatches. For example, the expression 42 + "1" evaluates to "421" instead of throwing an error. This type coercion has benefits at times, but is often a foot-gun.
You can include a script in a few ways. If you plan on writing a small script, you can include it directly inside the script tag.
<html>
<head></head>
<body>
<script>
const main = () => {
console.log("hello, world!");
}
main();
</script>
</body>
</html>
The console interface is an example of a Web API, a standard built-in interface specific to the browser context. The console API is an object that helps with debugging — you can find the hello, world output in your browser’s DevTools console tab. We’ll talk about other Web APIs later. But, know that Web APIs are distinct from standard objects, which are objects inherit to the language itself.
Alternatively, and usually preferably, you can also include a script with a src attribute with the value as the path to a JavaScript file. The src attribute need not be a relative local path — it can also be an HTTP URL. There are several CDNs like jsDelivr whose sole purpose is to host libraries.
<html>
<head></head>
<body>
<script src="./main.js"></script>
</body>
</html>
Standard objects are useful objects such as data structures and utility classes. Note that standard objects are different from the built-in Web APIs because these objects don’t tend to pertain directly to interacting with a website’s HTML. These objects are built into the “core” of JavaScript.
The Math object provides useful static variables such as mathematical constants, as well as static methods that can help find the minimum or maximum between numbers, trigonometric functions, absolute value, etc.