Introduction to JavaScript

Lesson Overview

Welcome to JavaScript Essentials! JavaScript is a programming language that powers the modern web, making websites interactive and dynamic. In this first lesson, you'll learn what JavaScript is, its core capabilities in the browser, and how to set up the simple tools you need to start coding.

What You'll Learn:

• What JavaScript is and its role in web development
• What JavaScript can (and can't) do in a web browser
• The core technologies that make JavaScript unique
• How to set up your code editor
• How to use your browser's developer console
• How to write and run your first JavaScript code

Key Concepts:

• JavaScript: A high-level, interpreted programming language.
• ECMAScript: The official specification that JavaScript is based on.
• Browser Engine (V8, SpiderMonkey): The "engine" inside browsers that reads and runs JavaScript.
• HTML/CSS Integration: JavaScript's ability to natively manipulate web page structure and style.
• Code Editor: Software used to write code (e.g., VS Code).
• Developer Console: A tool in your browser for running code and seeing errors.

What is JavaScript?

JavaScript (often shortened to JS) is a programming language that was initially created to "make web pages alive". It's a high-level, interpreted language that follows the ECMAScript specification.

When you load a webpage, JavaScript code runs directly in your browser. It doesn't need to be compiled into a separate program. Along with HTML and CSS, JavaScript is one of the three core technologies of the World Wide Web.

• HTML: Defines the structure and content of a web page (the nouns, like headings and paragraphs).
• CSS: Describes the presentation and styling of the page (the adjectives, like colors and fonts).
• JavaScript: Controls the behavior and interactivity of the page (the verbs, like "hide," "show," or "calculate").

Modern JavaScript is a "safe" language. It doesn't provide low-level access to the computer's memory or CPU. It was created for browsers, which don't require it.

What can in-browser JavaScript do?

JavaScript running in a browser can:

• Add new HTML to the page, change the existing content, and modify styles.
• React to user actions, like mouse clicks, pointer movements, and key presses.
• Send requests over the network to remote servers, download and upload files (known as AJAX and COMET technologies).
• Get and set cookies, ask questions to the visitor, and show messages.
• Remember data on the client-side ("local storage").

What can't in-browser JavaScript do?

For safety reasons, JavaScript's capabilities in the browser are limited. This prevents an evil webpage from accessing private information or harming your data.

These limitations include:

• JavaScript on a webpage cannot read or write arbitrary files on your hard drive, copy them, or execute programs. It has no direct access to the operating system.
• Different tabs/windows generally do not know about each other. A script from one page on site.com cannot access a page from othersite.com (though there are ways to work around this if both pages agree).
• JavaScript can easily communicate with the server that the current page came from. But its ability to receive data from other sites/domains is restricted.

What makes JavaScript unique?

There are three key things that make JavaScript a powerful and popular language:

1. Full integration with HTML/CSS: No other language is so deeply integrated with the browser.
2. Simple things are done simply: Basic actions are easy to write and execute.
3. Supported by all major browsers: It is enabled by default on all major browsers, including on mobile devices.

These three features make JavaScript the most widely used tool for creating browser-based user interfaces.

Setting Up Your Development Environment

To start learning, you only need two things: a modern web browser and a code editor.

1. Web Browser

Your browser already includes a JavaScript engine and essential developer tools.

Recommended Browsers:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari

2. Code Editor

You can write code in a simple text editor, but a specialized code editor makes your life much easier with features like syntax highlighting, code completion, and file management.

Popular Free Options:

• Visual Studio Code (Free, highly recommended)
• Sublime Text
• Atom

3. Developer Console

The Developer Console is a panel inside your browser that is invaluable for development. You can use it to inspect errors, see log messages, and run JavaScript commands directly.

How to Open Developer Tools:

• Chrome/Edge/Firefox: Press F12 (or Cmd+Opt+I on Mac).
• Safari: You must first enable the "Develop" menu in Preferences → Advanced.

Once open, click on the "Console" tab.

Writing Your First JavaScript Code

Let's write "Hello, world!" using JavaScript.

Method 1: The <script> Tag

You can add JavaScript directly into your HTML file using the <script> tag.

1. Create a file named index.html.
2. Paste the following code into it:

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
</head>
<body>
    <h1>My First JavaScript</h1>
    
    <script>
        alert('Hello, World!');
    </script>

</body>
</html>