Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
The JavaScript Workshop

You're reading from   The JavaScript Workshop Learn to develop interactive web applications with clean and maintainable JavaScript code

Arrow left icon
Product type Paperback
Published in Nov 2019
Publisher Packt
ISBN-13 9781838641917
Length 802 pages
Edition 1st Edition
Languages
Arrow right icon
Authors (8):
Arrow left icon
Jahred Love Jahred Love
Author Profile Icon Jahred Love
Jahred Love
Alonzo L. Hosford Alonzo L. Hosford
Author Profile Icon Alonzo L. Hosford
Alonzo L. Hosford
Florian Sloot Florian Sloot
Author Profile Icon Florian Sloot
Florian Sloot
Daniel Rosenbaum Daniel Rosenbaum
Author Profile Icon Daniel Rosenbaum
Daniel Rosenbaum
Philip Kirkbride Philip Kirkbride
Author Profile Icon Philip Kirkbride
Philip Kirkbride
Nick Turner Nick Turner
Author Profile Icon Nick Turner
Nick Turner
Gaurav Mehla Gaurav Mehla
Author Profile Icon Gaurav Mehla
Gaurav Mehla
Joseph Labrecque Joseph Labrecque
Author Profile Icon Joseph Labrecque
Joseph Labrecque
+4 more Show less
Arrow right icon
View More author details
Toc

Table of Contents (17) Chapters Close

Preface 1. Getting to Know JavaScript 2. Working with JavaScript FREE CHAPTER 3. Programming Fundamentals 4. JavaScript Libraries and Frameworks 5. Beyond the Fundamentals 6. Understanding Core Concepts 7. Popping the Hood 8. Browser APIs 9. Working with Node.js 10. Accessing External Resources 11. Creating Clean and Maintainable Code 12. Using NextGeneration JavaScript 13. JavaScript Programming Paradigms 14. Understanding Functional Programming 15. Asynchronous Tasks Appendix

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:

  1. 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.
  2. 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.
  3. 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

    Figure 1.1: Much can be learned from examining the bare source code

  4. 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>
  5. 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">
  6. 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 type attribute included with the <script> tag specifying type="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.

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime