Introduction to JavaScript

JavaScript allows you to implement complex features on web pages—everything from updating the content of a webpage in real-time to animating images, controlling multimedia, and much more.

Basics of JavaScript

Syntax

console.log('Hello, world!');

Variables

let message = 'Hello, JavaScript!';
console.log(message);

Data Types

JavaScript is a loosely typed language, which means you don’t have to declare the type of a variable explicitly. The data types include:

  • String: Textual data, e.g., “Hello, World!”
  • Number: Numeric data, e.g., 42, 3.14
  • Boolean: true or false
  • Object: Collections of key-value pairs, e.g., { name: “John”, age: 30 }
  • Array: Lists of values, e.g., [1, 2, 3]
  • Function: Blocks of code designed to perform a particular task.

Functions

function greet(name) {
  console.log('Hello, ' + name);
}

greet('Alice');

Control Structures

If-else:

let hour = 18;
if (hour < 18) {
  console.log('Good day');
} else {
  console.log('Good evening');
}

For loop:

for (let i = 0; i < 5; i++) {
  console.log('Number ' + i);
}

Document Object Model (DOM)

document.getElementById('demo').innerText = 'Hello, DOM!';

Practice

The best way to learn JavaScript is by practice. Try modifying elements on a webpage, creating simple scripts to perform calculations, or even making a small game. There are also numerous online resources, tutorials, and courses available that can help you deepen your understanding of JavaScript and its applications.

Remember, JavaScript is a vast language with many features and nuances. What I’ve covered here is just the beginning. As you get more comfortable with the basics, you’ll discover there’s much more to learn and explore. Happy coding!

Coding with JavaScript: Hyperlinks and Interactivity

Hyperlinks are an important first step in creating a web page that responds to the user. But if we want to code a page that is really interactive and changes according to what the user does, we need to use a new programming language called JavaScript with our HTML. JavaScript is the most popular programming language in the world. It transforms an HTML and CSS web page by making it interactive. We need JavaScript to do all sorts of useful things, such as making buttons and alerts and storing information.

In this lesson, we are going to learn how we can use JavaScript with HTML to create a password so that the information about the secretinfo.html is kept safe from the cyber-criminals in the wild.

We saw earlier how HTML documents are made up of different elements and that you use attributes to change those elements. JavaScript also has its own syntax or set of rules, for writing code. JavaScript syntax is made up of pieces of code called statements, variables, operators and functions.

Let’s learn about them and see how we can use them to build the password.

Coding with JavaScript: Adding JavaScript to your HTML page

Before you can start writing JavaScript you need to tell your browser that you are switching from HTML to JavaScript. You do this by using the <script> tag.

If you don’t put your JavaScript code between the opening and closing <script> tags your code won’t run. You can have as many <script> tags as you want in your HTML document and you can put them inside either the <head> or <body> on your page.

<!DOCTYPE html>
<html>
<head>
    <title>Password</title>
</head>
<body>
    <script>
    </script>
</body>
</html>

Here the <script> tag is inside the <body> of our page.

Sometimes we call this a <script> block.

Coding with JavaScript: JavaScript Statements

When we write an instruction for our browser in JavaScript, we call this writing a statement. JavaScript programs normally contain many statements. A statement usually starts with a keyword that tells you what action it will perform.

It always ends with a semi-colon (;). Your browser runs one statement after another in the order they are written.

Let’s look at some JavaScript statements.

When we save this code and run it in our browser, this happens:

<!DOCTYPE html>
<html>
<head>
    <title>Password</title>
</head>
<body>
    <script>
alert("We need a password urgently!"); //these are statements followed by semi-colons
alert("Use the password GabbaGabbaHey"); //these are statements followed by semi-colons
    </script>
</body>
</html>

The statements in the code above are followed by the following code:

//these are statements followed by semi-colons

These are comments in JavaScript. Comments are for documentation purposes and do not affect the program execution in any way. Programmers use comments to keep the code documented and organized.

The two statements between the opening and closing <script> tags have run one after another, popping up two alert boxes with different messages inside.

An alert is a piece of JavaScript called a function, and it’s built into your web browser. We’ll learn more about it later.

JavaScript is case sensitive, so it’s important to make sure you have used the correct capital letters.

If you have to choose a name for a piece of JavaScript, you can’t leave spaces between words. A good way to write two words is to use camelCase.

CAMELCASE is the practice of joining two words together to form one word. The first word starts with a lower-case letter and the second word begins with an uppercase letter, but there is no space between them, just like the humps of a camel. An example of camelCase is sayHello.

Connected through code, Choose Your Platform!

About the Author: Bernard Aybout

In the land of bytes and bits, a father of three sits, With a heart for tech and coding kits, in IT he never quits. At Magna's door, he took his stance, in Canada's wide expanse, At Karmax Heavy Stamping - Cosma's dance, he gave his career a chance. With a passion deep for teaching code, to the young minds he showed, The path where digital seeds are sowed, in critical thinking mode. But alas, not all was bright and fair, at Magna's lair, oh despair, Harassment, intimidation, a chilling air, made the workplace hard to bear. Management's maze and morale's dip, made our hero's spirit flip, In a demoralizing grip, his well-being began to slip. So he bid adieu to Magna's scene, from the division not so serene, Yet in tech, his interest keen, continues to inspire and convene.