What Is JavaScript and How Is It Used?
JavaScript is a weakly-typed, multi-paradigm, event-driven, object-oriented programming language. It includes the ability to work with strings, dates, arrays, objects, and more. It is generally used on the client-side within web browser environments but can also be used in other environments such as servers and desktop applications. The runtime environment is very important for JavaScript—especially since it, by itself, does not include any networking, file, graphics, or storage capabilities on its own.
JavaScript versus Other Languages
If you are approaching JavaScript with experience in other languages such as Java or Python, things might seem a bit odd. While many languages (such as Java) must be compiled to run, JavaScript is run exactly as-is and does not require this additional step.
Though the language is used within many environments and for many purposes, JavaScript is fundamentally one of the three languages that are native to the web. The other two languages are the HTML semantic markup language and the CSS styling and layout language. All three are very different from one another in purpose and function, but they are all meant to work together in a single environment. Let's go over them:
- Hypertext Markup Language (HTML): This is the most fundamental of these three languages as it defines the elements that compose an HTML page and defines the flow of basic information that's presented to the user.
- Cascading Style Sheets (CSS): This is used to define a set of stylistic layout rules, which adds visual flourish and advanced layout to defined HTML elements.
- JavaScript(JS): This works to enable interactivity in web pages and is what will be the focus of this book.
With all three of these languages, there is a basic understanding of the separation of concerns, that is, HTML provides the content and structure, CSS provides the styling and layout, and JavaScript provides the interactivity. While this understanding still holds sway, many frameworks do not exactly abide by this separation and mix these various languages together in some shape or form. Some developers are okay with this, while others are not. It's definitely an issue to be aware of when getting into this field, but it is ultimately up to you which stance you take, based on your particular needs. In my opinion, there is no hard and fast answer to a question like this.
Exercise 1.01: Languages Discovery
Let's go ahead and examine a website to see whether we can spot how HTML, JavaScript, and CSS are all represented. You can choose any website you like for this exercise.
Note
All the examples and screenshots in this book will use Google Chrome as the web browser of choice. You can use the browser you prefer, though some of the steps that are shown may differ between various browsers.
Let's get started:
- Within your web browser, enter a URL in the address bar and press Enter/Return to load the chosen resource. For this example, let's use https://packt.live/2oXOE67—the Angular website. Of course, you can choose any website that you'd like to explore.
- Now, right-click anywhere within the browser viewport to summon a contextual menu. Select the option that allows you to view the source code of the page. In Chrome, this is labeled
View Page Source. - The source code for the page will then appear in a new tab. You can examine how the page is structured and pick out the various HTML, CSS, and JavaScript elements from the bare source code:
Figure 1.1: Much can be learned from examining the bare source code
- With the source code exposed, scroll down and identify the various HTML elements within the page structure. You'll likely find a
<head>tag and a<body>tag (which are mandatory), along with various<p>and<h1>to<h6>tags within the page.Here is an example of some basic HTML content (not actually from the Angular website):
<body> <h1>Welcome!</h1> <p>Angular is a framework used to build web applications.</p> <p>Create high-performing and accessible applications using Angular.</p> </body>
- Now, try and locate either embedded CSS rules within a
<style>element, or even a linked CSS file. Here is an example of some embedded CSS:<style> color: red; margin-top: 40px; position: relative; text-align center; </style>
And here is a linked CSS file:
<link rel="stylesheet"href="styles.css">
- Finally, we'll locate some JavaScript. Much like CSS, JavaScript can be found embedded within a page using the
<script>tag, or entire JavaScript files can be linked though a similar mechanism. Here, we are locating some embedded JavaScript:<script> function writeMessage() { document.getElementById("message").innerHTML = "Hello From JavaScript!"; } </script>Here is a linked JavaScript file:
<script src="main.js"></script>
Choosing to view the source code of public web pages like this was once a common way to learn about web technologies.
Note
In various websites and examples, you may see a
typeattribute included with the<script>tag specifyingtype="text/javascript". In HTML5, this is not necessary and is the default attribute. If you must target previous versions of HTML, you will need to specify it.
So far, we have introduced the JavaScript programming language and examined its primary runtime environment (the web browser). We also had a brief look at JavaScript's relationship to HTML and CSS as one of the three native web technologies.
In the next section, we'll take a look at the history of JavaScript and how it has evolved over the years.