BeingXpert Learn & Build Future

1. JavaScript Introduction

What you will learn

  • What JavaScript is and what it can do
  • How it works with HTML and CSS
  • How to read and change a first JavaScript example

What is JavaScript?

JavaScript is the programming language of the web. HTML gives a page its structure, CSS gives it its look, and JavaScript makes it do things: react to clicks, check forms, update content, and much more.

JavaScript is not the same as Java. They are different languages that share part of a name for historical reasons.

What can JavaScript do?

  • Change the content and styles of a page while it is open.
  • React to events such as clicks, key presses, and form input.
  • Check what a visitor typed before sending a form.
  • Load new data without reloading the whole page.
  • Store small pieces of information in the browser.
  • Run outside the browser too, for example on servers with tools such as Node.js.

HTML, CSS, and JavaScript

Language Job Example
HTML Structure and content A button and a paragraph
CSS Appearance The button is blue and rounded
JavaScript Behaviour Clicking the button changes the paragraph

A first example

Press Try it Yourself, click the button in the result, then change the message in the code and run it again.

Example

<p id="demo">Click the button.</p>
<button id="btn" type="button">Click me</button>

<script>
  document.getElementById("btn").addEventListener("click", function () {
    document.getElementById("demo").textContent = "Hello from JavaScript!";
  });
</script>

Output (before clicking; run it in the editor to see the change)

Click the button.

How the example works

  1. The HTML creates a paragraph with the id demo and a button with the id btn.
  2. The <script> element holds JavaScript code.
  3. document.getElementById("btn") finds the button on the page.
  4. addEventListener("click", ...) says: “when this button is clicked, run the following function”.
  5. Inside the function, the paragraph is found the same way, and its textContent is replaced with a new message.

Do not worry if some words are new. You will learn each idea step by step in the next lessons.

Where does JavaScript run?

In a web page, the browser runs your JavaScript on the visitor’s device. Every modern browser has a JavaScript engine built in, so there is nothing to install to start learning.

Common mistakes

  • Thinking JavaScript and Java are the same.
  • Using JavaScript for things HTML or CSS can already do, such as simple links or hover colours.
  • Expecting every browser feature to work the same in very old browsers.
  • Trusting JavaScript checks for security. Visitors can change or switch off JavaScript, so the server must check important data too.

Exercise

Change the code so that clicking the button shows the message I am learning JavaScript.

Show solution 
<p id="demo">Click the button.</p>
<button id="btn" type="button">Click me</button>

<script>
  document.getElementById("btn").addEventListener("click", function () {
    document.getElementById("demo").textContent = "I am learning JavaScript";
  });
</script>

Knowledge check

1. Which language adds behaviour to a web page?

JavaScript.

2. Is JavaScript the same as Java?

No. They are different languages.

3. Which HTML element holds JavaScript code?

<script>

Summary

  • JavaScript makes web pages interactive.
  • HTML is structure, CSS is style, and JavaScript is behaviour.
  • Browsers run it, so you can start with only a text editor and a browser.
Scroll to Top