Introduction to JavaScript and Programming Fundamentals

Introduction to JavaScript

JavaScript is a programming language used to make websites interactive, dynamic and responsive to user actions. While HTML provides the structure of a webpage and CSS controls its appearance, JavaScript provides behaviour and logic.

For example, HTML can create a button, CSS can make the button attractive, and JavaScript can determine what happens when the user clicks that button.

JavaScript is one of the most important technologies in modern web development and is widely used for websites, web applications, dashboards, online platforms, mobile applications, servers and many other software systems.

HTML, CSS and JavaScript

A useful way to understand the three core frontend technologies is to compare them to the parts of a building.

• HTML provides the structure and content.
• CSS provides presentation, layout and visual styling.
• JavaScript provides behaviour, interaction and programming logic.

A modern website often combines all three technologies.

What Can JavaScript Do?

JavaScript can perform many tasks inside a webpage.

• Respond to button clicks.
• Validate form information.
• Show and hide elements.
• Change text and HTML content.
• Change CSS styles.
• Create interactive menus.
• Build sliders and image galleries.
• Display notifications.
• Perform calculations.
• Communicate with web servers and APIs.
• Update webpage content without refreshing the entire page.
• Create complete web applications.

Where Does JavaScript Run?

JavaScript can run in several environments. In frontend web development, JavaScript commonly runs inside a web browser such as Chrome, Firefox, Safari or Edge.

Browsers contain JavaScript engines that read and execute JavaScript programs.

JavaScript can also run outside the browser using environments such as Node.js. This allows developers to use JavaScript for server-side programming and other software development tasks.

Adding JavaScript to HTML

JavaScript can be added to an HTML document using the <script> element.

<script>
console.log("Hello, Dwallnet!");
</script>

External JavaScript Files

For larger projects, JavaScript is usually stored in a separate file. This makes the code easier to maintain and organize.

<script src="script.js"></script>

JavaScript Statements

A JavaScript program is made up of statements. A statement is an instruction that tells the browser or JavaScript engine to perform an operation.

let name = "David";

console.log(name);

Variables

Variables are containers used to store values that a program needs to work with.

Using let

let score = 50;

score = 75;

console.log(score);

Using const

const course = "Web Development";

console.log(course);

Variable Naming Rules

• A variable name can contain letters, numbers, underscores and dollar signs.
• A variable name cannot begin with a number.
• JavaScript variable names are case-sensitive.
• Reserved JavaScript keywords should not be used as variable names.

let studentName = "John";
let studentAge = 20;

console.log(studentName);
console.log(studentAge);

JavaScript Data Types

• String — text values.
• Number — numeric values.
• Boolean — true or false.
• Undefined — a variable without an assigned value.
• Null — an intentional absence of a value.
• Object — collections of related data.
• Array — ordered collections of values.

Strings

let studentName = "Ada";

Numbers

let age = 21;
let price = 150000;

Booleans

let isStudent = true;
let isAdmin = false;

Operators

Operators are symbols or keywords used to perform operations on values.

Arithmetic Operators

let a = 10;
let b = 5;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);

Comparison Operators

let age = 20;

console.log(age === 20);
console.log(age !== 18);
console.log(age > 18);
console.log(age < 30);

Logical Operators

let age = 20;
let hasAccount = true;

console.log(age >= 18 && hasAccount);

Expressions

10 + 5

let price = 1000;
let quantity = 3;

let total = price * quantity;

console.log(total);

Console Output

let message = "Welcome to Dwallnet";

console.log(message);

Comments

// Store the student's name

let studentName = "Grace";

/*
This program stores
basic student information.
*/

let studentName = "Grace";

JavaScript and User Interaction

<button id="welcomeButton">
    Click Me
</button>

<script>

const button = document.getElementById("welcomeButton");

button.addEventListener("click", function () {

    alert("Welcome to Dwallnet!");

});

</script>

JavaScript Is Case-Sensitive

let studentName = "Daniel";

console.log(studentName);

Why Learn JavaScript?

JavaScript is an essential skill for frontend developers because modern websites depend heavily on interaction and dynamic behaviour.

Learning JavaScript also introduces important programming concepts such as variables, data types, operators, conditions, functions, loops, objects and events.

Practice Exercise

Create a simple JavaScript program that stores your name, age, course and student status. Display each value in the browser console.

const name = "Your Name";
let age = 18;
const course = "Web Development";
const isStudent = true;

console.log(name);
console.log(age);
console.log(course);
console.log(isStudent);

Mini Project

Build a small webpage containing a heading, a paragraph and a button. Use JavaScript to display a welcome message when the button is clicked.

Conclusion

JavaScript adds programming logic and interaction to websites. In this lesson, you learned what JavaScript is, how it works with HTML and CSS, how to declare variables, how to work with basic data types and operators, and how to produce output using the browser console.

In the next lessons, we will build on these fundamentals by learning conditions, functions, loops, arrays, objects, events and DOM manipulation.