JavaScript Basics: The Language of the Interactive Web
JavaScript brings interactivity and dynamism to the web. Here you learn the embedding, the central language concepts and the interaction with the DOM.
What you will learn
- What JavaScript is and what it is used for on the web
- How to embed JavaScript into a web page
- Which basic concepts (variables, functions, events) there are
- How JavaScript interacts with HTML via the DOM
- Where JavaScript is used beyond the browser
What is JavaScript?
JavaScript is, alongside HTML and CSS, one of the fundamental web technologies. HTML provides the structure, CSS the appearance – and JavaScript brings interactivity and dynamic content. From animations through complex web applications to server-side programming, the language is extremely versatile.
JavaScript is a dynamic, interpreted programming language. "Interpreted" means: the code is executed line by line directly in the execution environment – usually the browser – without a prior compilation step. Originally, JavaScript was meant to make web pages "come alive" in the browser. Its core tasks in the web:
- Access: access HTML elements of a page and reference them.
- Manipulation: change elements, their content or properties.
- Reaction: react to events like clicks, keyboard input or mouse movements.
- Communication: exchange data with servers without reloading the page (AJAX).
Embedding JavaScript into web pages
There are two main ways to embed JavaScript. Internal JavaScript is placed directly in the HTML within <script> tags:
External JavaScript is in a separate .js file and is linked via the src attribute – the preferred choice for larger projects:
The placement affects loading time and behavior. Scripts are often placed at the end of the <body> so that the HTML is fully loaded before the script accesses it. Alternatively, in the <head> you use the attributes async or defer so as not to block the loading of the HTML.
Basic concepts
Variables
Variables store data values. They are declared with let or const: const for constants whose value is immutable, let for changeable values.
Data types and operators
JavaScript knows, among others, Strings (character strings), Numbers (numbers), Booleans (true/false), Objects, Arrays (ordered lists) as well as null and undefined. Operators process these values: arithmetic (+, -, *, /), assignments (=, +=), comparisons (=== strictly equal, !==, <, >) and logical (&&, ||, !).
Conditions and functions
With if...else you execute code depending on a condition. Functions are reusable blocks of code that you define once and call as often as you like:
Events
Events are actions in the browser – a click, the loading of a page, a keyboard input. JavaScript can "listen" for them and react, usually via addEventListener().
Interaction with the DOM
The Document Object Model (DOM) is a programming interface for HTML documents. It represents the page as a tree of objects, with each object representing a part of the document. JavaScript uses the DOM to access elements and change them.
To select an element, document.querySelector() is often used. It returns the first element that matches the specified CSS selector:
Once an element is selected, you change its properties: textContent changes the text content, setAttribute() sets an attribute, getAttribute() reads it out. A small example that changes the heading dynamically:
Combined with an event listener, the page becomes interactive – such as an image that changes on click:
JavaScript accesses individual HTML elements via the DOM and changes them dynamically.
JavaScript beyond the browser
Although JavaScript originated in the browser, its use today extends far beyond that. Thanks to environments like Node.js, JavaScript also runs server-side – for building web servers, command-line tools or for accessing file systems. This has made JavaScript a full-stack technology. For development, the browser developer tools help (especially the console for errors and console.log() outputs), numerous web APIs like the DOM or Web Storage API as well as frameworks and libraries like React, Vue.js or Angular, which simplify complex applications.
JavaScript and SEO
Because many modern pages load content via JavaScript, the interplay with search engines is a topic of its own. So that Google can capture JavaScript-generated content, the page must be renderable and crawlable. How this works in detail and what you have to watch out for is covered in the separate article JavaScript SEO. This article lays the linguistic foundations for it.
Conclusion
JavaScript is the backbone for interactive and dynamic web pages. The possibilities range from changing text content through reacting to user actions to communicating with servers. With the basics – variables, functions, events and interaction with the DOM – you can already implement impressive effects. Anyone who wants to go deeper expands their knowledge with asynchronous programming, a framework or server-side JavaScript via Node.js.
FAQ
Frequently asked questions
No. This article covers the JavaScript programming language and its basics. "JavaScript SEO" deals with how search engines crawl and render JavaScript-generated content – a topic of its own that builds on these basics.
Variables declared with let can change their value. Constants declared with const keep their once-assigned value. For values that should not change, const is the right choice.
The Document Object Model is an interface that represents an HTML document as a tree of objects. JavaScript uses the DOM to access elements and change them – for example with document.querySelector().
Often at the end of the <body> so that the HTML is fully loaded before the script accesses it. Alternatively, in the <head> you use the attributes async or defer so as not to block the loading of the page.
Quiz
Test your knowledge
Five questions on the JavaScript basics.
Question 1 of 5
What role does JavaScript take on in the web?