Introduction to JavaScript Basics: Understanding the Fundamentals

WebIntroduction to JavaScript Basics: Understanding the Fundamentals

Introduction to JavaScript Basics: Understanding the Fundamentals

11 mins Read

Build with Radial Code

Radial Code Enterprise gives you the power to create, deploy and manage sites collaboratively at scale while you focus on your business. See all services.

Contact sales

What is JavaScript?

JavaScript (commonly known as JS) is a programming language designed to add interactivity to websites. For example, it’s used to:

Update content without refreshing the page (think about social media feeds).
Handle user input (like form submissions).
Create animations (like sliding images or interactive buttons).

It's important to note that JavaScript runs inside the browser (like Chrome, Firefox, or Safari), meaning it works directly on the user's device without needing to refresh the webpage.

How to Use JavaScript

JavaScript can be included in a website in three ways:

1. Inline JavaScript: Written directly in an HTML element.

Here’s an example of how to use internal JavaScript:

<!DOCTYPE html>
<html>
<head>
    <title<JavaScript Example</title>
</head>
<body>
    <h1<Welcome to JavaScript!</h1>

   <!-- Inline JavaScript inside the onclick attribute -->
    <button onclick="alert('Hello, JavaScript is running!')">Click me!</button>
</body>
</html>

In this example, when the button is clicked, a popup message will appear saying, "Hello, JavaScript is running!

2. Internal JavaScript: Written within a <script> tag in the HTML file.

Example:

<!DOCTYPE html>
<html>
<head>
    <title<JavaScript Example</title>
</head>
<body>
    <h1<Welcome to JavaScript!</h1>

  <button onclick="sayHello()">Click me!</button>

    <script>
        function sayHello() {
            alert('Hello, JavaScript is running!');
        }
    </script>
</body>
</html>

3. External JavaScript: Stored in a separate file with a .js extension and linked to the HTML file.

Example:

<!DOCTYPE html>
<html>
<head>
    <title<JavaScript Example</title>
</head>
<body>
    <h1<Welcome to JavaScript!</h1>
<!-- The button calls a function defined in the external JavaScript file -->
  <button onclick="sayHello()">Click me!</button>
 <!-- Link to the external JavaScript file -->
    <script src="script.js"></script>
</body>
</html>

External JavaScript File (script.js):

// This is the external JavaScript file
function sayHello() {
    alert('Hello, this is external JavaScript!');
}

Variables in JavaScript

Variables are like containers that store data values. In JavaScript, variables can be declared using the keywords: var, let, or const .

var : The old way of declaring variables. It is not commonly used in modern code.
let: Used to declare variables that can change (are mutable).
const: Used to declare variables that cannot change (are immutable).

Example:

let name = 'Alice'; // You can change this later
const age = 25; // This value cannot be changed

Data Types

In JavaScript, there are different types of values you can store in variables. The most common ones are:

String: Text values, surrounded by quotes "Hello, World!".
Number: Numeric values 25,3.14.
Boolean: True or false values true,false.
Array: A list of values ['apple', 'banana', 'orange'].
Object: A more complex structure that holds multiple properties { name: 'Alice', age: 25 }.

Example:

let greeting = "Hello, World!"; // String
let score = 90; // Number
let isActive = true; // Boolean
let fruits = ['apple', 'banana', 'orange']; // Array
let person = { name: 'Alice', age: 25 }; // Object

Functions

Function Declarations
This is the most basic way to declare a function in JavaScript. A function declaration defines a named function that can be called anywhere in the code after it has been defined.

function greetUser(name) {
    console.log("Hello, " + name + "!");
}

greetUser('Alice'); // Output: Hello, Alice!

Key features:

Can be called before it is defined (hoisting).
The function name is mandatory.

Function Expressions
In a function expression, the function is defined as part of an expression. This type of function is assigned to a variable, and the function can only be invoked after the variable is defined.

const greetUser = function(name) {
    console.log("Hello, " + name + "!");
};

greetUser('Bob'); // Output: Hello, Bob!

Key features:

Not hoisted, so it cannot be called before its definition.
The function can be anonymous (no name required).

Arrow Functions (ES6)
Arrow functions provide a shorter syntax for writing functions and do not have their own this context, which makes them especially useful in callback functions and when working with object methods.

const greetUser = (name) => {
    console.log("Hello, " + name + "!");
};

greetUser('Charlie'); // Output: Hello, Charlie!

Key features:

Compact syntax.
Does not bind its own this , arguments, super, or new.target.
Cannot be used as constructors (i.e., they cannot be used with new).

Constructor Functions
Constructor functions are used to create objects. They are defined like regular functions but are intended to be called with the new keyword, which allows them to return a new object.

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const person1 = new Person('Alice', 25);
console.log(person1.name); // Output: Alice

Key features:

Used with new the keyword to instantiate objects.
Sets the context this to the newly created object.

Conditions and Loops

In JavaScript, you often need to perform certain actions based on conditions or repeat actions multiple times. You can do this using if/else statements and loops.

Conditions if/else
In JavaScript, the if/else statement allows you to execute certain blocks of code based on whether a condition is true or false. If the condition is true, one set of instructions runs; if it's false, another set runs instead. This helps in controlling how your program behaves under different circumstances. Example:

let temperature = 30;

if (temperature >= 25) {
    console.log("It's hot outside.");
} else {
    console.log("It's cold outside.");
}

Output

Here’s how it works:

Variable Declaration:

We first declare a variable called temperature and set its value to 30.

let temperature = 30;

If Condition:

The if statement checks a condition to see if it's true. In this case, it checks if temperature is greater than or equal to 25.

if (temperature >= 25) {

The condition temperature >= 25 means "Is the temperature greater than or equal to 25?".
If the condition is true (the temperature is 25 or higher), the code inside the curly braces {} immediately following the if statement is executed.

console.log("It's hot outside.");

Since temperature is 30, which is greater than 25, the condition is true, so the message "It's hot outside." is printed to the console.

Else Block:

If the condition in the if statement is false (i.e., temperature is less than 25), the code inside the else block is executed instead.

else {
    console.log("It's cold outside.");
}

In this example, the else block won’t run because the if condition is true (temperature is 30).

Loops (forloop):
In JavaScript, a forloop is used to repeatedly execute a block of code as long as a specified condition is true. It allows you to define a starting point, a condition to check on each iteration, and how the loop should progress, making it ideal for running code multiple times efficiently.

let fruits = ['apple', 'banana', 'orange'];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

This loop goes through each fruit in the fruits array and print it.

while loop:
In JavaScript, a while loop repeatedly runs a block of code as long as a given condition remains true. It checks the condition before each iteration, making it useful when you don't know in advance how many times the loop should run.

let counter = 1;

while (counter <= 5) {
    console.log("Counter is: " + counter);
    counter++; // Increase the counter by 1
}

In this example, the loop will keep printing the value of counterand increasing it by 1 until counteris greater than 5.

do whileloop:
In JavaScript, a do ...while loop runs a block of code at least once, and then continues executing the code as long as a specified condition is true. The condition is checked after the code runs, ensuring the loop executes at least one time.

let count = 1;

do {
    console.log("Count is: " + count);
    count++;
} while (count <= 3);

In this case, the do while loop will print the value of countand increase it by 1, repeating until countexceeds 3.

Here’s a comparison table outlining the differences between different types of loops in JavaScript:

Loop Type	Syntax	Description	When to Use	Example
forloop	for (initialization; condition; increment) { // code }	Repeats a block of code a specified number of times based on a condition.	When you know exactly how many times you want the loop to run.	javascript for (let i = 0; i < 5; i++) { console.log(i); }
whileloop	while (condition) { // code }	Repeats a block of code as long as a specified condition is true.	When the number of iterations is unknown, and you need to keep looping until a condition becomes false./p>	javascript let i = 0; while (i < 5) { console.log(i); i++; }
do...whileloop	do { // code } while (condition);	Executes the code block once before checking the condition, then repeats the loop while the condition is true.	When you want the loop to run at least once, regardless of the condition.	javascript let i = 0; do { console.log(i); i++; } while (i < 5);

Events

JavaScript can respond to different actions performed by the user, such as clicks, key presses, or mouse movements. These actions are called events.
For example, when you click a button, you can use JavaScript to run a function that performs an action:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="myButton">Click me</button>
    <script>
   document.getElementById('myButton').addEventListener('click', function() {
    alert('Button clicked!');
});
    </script>
  </body>
</html>

Here, when the button with the ID myButton is clicked, an alert will appear.

The DOM (Document Object Model)

The DOM is like a bridge between JavaScript and the HTML on your web page. It represents the structure of the webpage and allows JavaScript to make changes to the HTML or CSS.

For example, you can change the text of an element using JavaScript:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="heading"></h1>
    <script>
      document.getElementById("heading").innerHTML = "JavaScript is awesome!";
    </script>
  </body>
</html>

This code finds the element with the ID headingand changes its content to "JavaScript is awesome!"

Conclusion

JavaScript is an essential tool for modern web development, allowing you to make your websites more interactive and engaging. By learning the basics, such as variables, data types, functions, conditions, and events, you're well on your way to creating dynamic and responsive web pages. Remember, practice makes perfect! Try experimenting with small JavaScript projects, and as you grow more comfortable, you can start building more complex applications. For more information and to learn further, visit Radial code .