JavaScript is a powerful and versatile programming language that serves as one of the foundations
of modern web technology. Although it shares a name with Java, the two languages are completely independent and
different. JavaScript enables the creation of dynamic, interactive websites with the ability to manipulate HTML
elements, manage events, and perform complex operations in the browser. In addition to web development (front-end),
JavaScript is also used for server-side applications (back-end) via the Node.js platform. One of the most commonly
used methods is getElementById(), which allows dynamic modification of HTML element content.
JavaScript is an indispensable part of the modern web and one of the most important programming languages for web development. As a high-level programming language, it enables development on both the client side (front-end) and the server side (back-end). With JavaScript, we can create dynamic web applications, manage user experience, and develop complex web solutions. For efficient development, we use modern tools such as PHPStorm, Visual Studio Code, or simply Notepad – the choice depends on your needs and preferences.
We can choose a development environment from numerous options, ranging from advanced IDEs like WebStorm, NetBeans, and Eclipse, to simpler editors like Notepad++. Integrated Development Environments (IDEs) offer comprehensive development support with features such as intelligent code completion, real-time debugging, and integration with version control systems. Meanwhile, code editors are lighter and faster, but can be upgraded into powerful development tools with extensions. An IDE typically includes a code editor, compiler/interpreter, and debugger in one package, enabling efficient development of complex applications.
| Tool | Type | Description |
|---|---|---|
| Text Editors (Simple) | ||
| Notepad | Editor | A simple editor present in all operating systems. No syntax highlighting or autocomplete. Suitable for learning basics. |
| Notepad++ | Editor | Free editor for Windows with syntax highlighting, tabs, and find/replace. Excellent for quick editing. |
| Sublime Text | Editor | Fast editor with multi-cursor editing, command palette, and a rich plugin ecosystem. Paid (free for evaluation). |
| Code Editors (Powerful) | ||
| VS Code | Code Editor | The most popular free editor from Microsoft. IntelliSense, built-in terminal, Git support, thousands of extensions. Recommended! |
| Atom | Code Editor | Open-source editor from GitHub. Packages and themes, built-in Git. Archived (no longer in active development). |
| Brackets | Code Editor | Editor from Adobe with Live Preview functionality. Focused on web development. Archived. |
| Integrated Development Environments (IDE) | ||
| PhpStorm | IDE | Professional IDE from JetBrains for PHP, JavaScript, HTML/CSS. Deep code understanding, refactoring, debugging. Paid. |
| WebStorm | IDE | IDE from JetBrains specialized for JavaScript and TypeScript. Intelligent completion, testing, deployment. Paid. |
| NetBeans | IDE | Free open-source IDE for Java, PHP, HTML5, and JavaScript. Support for Maven, Gradle, and Git. |
| Eclipse | IDE | Free open-source IDE, primarily for Java, with plugins for JavaScript and web development. |
| Browser Tools | ||
| Chrome DevTools | Browser | Built-in tool in Chrome (F12). Console, debugging, profiling, Network, Elements. Indispensable! |
| Firefox Developer Tools | Browser | Built-in tool in Firefox. Excellent CSS Inspector, Console, Network monitor, and Performance tools. |
JavaScript is a powerful programming language that adds interactivity to websites, is versatile, and beginner-friendly. As we gain experience, we will be able to create games, develop 2D and 3D animations, build extensive applications based on databases, and much more. JavaScript itself is compact but highly adaptable, designed to unlock a vast array of functions.
These functions include the Programmatic Interface (API - Application Programming Interface), dynamic creation
of web pages, capturing and managing video streams from the user's webcam, or generating 3D graphics and audio
patterns. We have access to a huge library of third-party tools for HTML to accelerate the development of websites
and applications. In HTML, JavaScript code is inserted between the <script> and
</script> tags.
| Tool / Method | Type | Description |
|---|---|---|
| In <head> (without attributes) | Internal Script | The code loads before the content. It blocks page rendering until execution. Useful only for defining functions. |
| In <head> with <script defer> | External/Internal | Recommended! The code loads in the background and executes only after the HTML is finished. It does not block rendering. | ▶ View Code |
| At the top of <body> | Internal Script | Blocks the rendering of content below it. Rarely used as it slows down page loading. |
| At the bottom of <body> (before </body>) | Internal Script | Gold Standard. HTML is already loaded, elements are available. The page displays quickly. | ▶ View Code |
| <script src="file.js"> | External Script | Best for maintenance and caching. Can be used in <head> (with defer) or at the bottom of <body>. |
| <script src="file.js" async> | External Script | Loads asynchronously and executes immediately upon loading. Suitable for analytics, not for page logic. | ▶ View Code |
| onclick, onload, etc. | Inline Event | Not recommended! Mixes logic with design. Difficult to maintain. Use only for quick tests. | ▶ View Code |
The table below shows basic ways to comment code, types of dialog boxes for user interaction, and console methods for debugging. Examples in the "Example" column are ready for direct copying into your code.
| Property/Method | Example | Description |
|---|---|---|
| Comments | ||
// single-line comment | // This is a comment |
Single-line comment – the browser ignores it |
/* multi-line */ | /* This is a longer description spanning
multiple lines */ |
Multi-line comment – useful for longer descriptions |
/** JSDoc */ | /** @param {string} name - User name */ |
Documentation comment – used by IDEs to describe functions | ▶ View Code |
| Dialog Boxes | ||
alert() | alert("Hello!"); |
Displays a dialog box with a message and an "OK" button. Blocks execution until clicked. |
confirm() | confirm("Are you sure?"); |
Displays a box with "OK" and "Cancel" buttons. Returns true or false. |
prompt() | prompt("Enter name:", "Borut"); |
Displays a box with an input field. Returns entered text or null if cancelled. | ▶ View Code |
| Console | ||
console.log() | console.log("Message"); |
Outputs a message to the console (most commonly used for debugging) |
console.warn() | console.warn("Warning!"); |
Outputs a warning (yellow background in console) |
console.error() | console.error("Error!"); |
Outputs an error (red background in console) |
console.info() | console.info("Information"); |
Outputs an informational message |
console.table() | console.table([{a:1}, {a:2}]); |
Outputs data in table format (ideal for arrays and objects) |
console.clear() | console.clear(); |
Clears the console |
console.time() | console.time("timer"); ... console.timeEnd("timer"); |
Measures execution time between time() and timeEnd() |
console.group() | console.group("Group"); ... console.groupEnd(); |
Groups outputs into a collapsible group in the console | ▶ View Code |
JavaScript has a simple syntax based on code blocks, variables, and statements. Understanding basic syntax is crucial for writing correct code.
| Concept | Example | Description |
|---|---|---|
| Variables | ||
let | let x = 5; |
Declares a variable that can be changed |
const | const PI = 3.14; |
Declares a constant that cannot be changed |
var | var old = "old"; |
Old declaration (avoid using) | ▶ View Code |
| Data Types | ||
String | let name = "Borut"; |
Text in quotes |
Number | let age = 52; |
Integer or decimal numbers |
Boolean | let isActive = true; |
Logical value (true/false) |
Array | let colors = ["red", "blue"]; |
List of values |
Object | let person = {name: "Borut"}; |
Collection of key-value pairs | ▶ View Code |
| Operators | ||
+ | let sum = 5 + 3; |
Addition (or string concatenation) |
- * | let diff = 10 - 4; |
Subtract, multiply, divide |
=== | if (x === 5) {...} |
Equal (value and type) |
!== | if (x !== 5) {...} |
Not equal | ▶ View Code |
Loops allow you to execute code multiple times. This is one of the most powerful features of programming – instead of writing the same code 10 times, you write it once and let the loop execute it 10 times.
| Loop Type | Example | Description | Code Example |
|---|---|---|---|
| For Loop | |||
for | for(let i=0; i<5; i++) {...} |
Basic loop with a counter | ▶ View Code |
| While Loop | |||
while | while(condition) {...} |
Repeats as long as the condition is true | ▶ View Code |
| Do-While Loop | |||
do...while | do {...} while(condition); |
Executes code at least once, then checks condition | ▶ View Code |
| Loops for Arrays and Objects | |||
for...of | for(let item of array) {...} |
Iterates over values in an array | ▶ View Code |
for...in | for(let key in object) {...} |
Iterates over keys in an object | ▶ View Code |
| Switch statement | |||
switch | switch(value) { case x: ... } |
Selects one of many code blocks to execute | ▶ View Code |
