Learn JavaScript from Scratch: Practical Examples to Get You Started

JavaScript is the essential programming language for creating interactive websites and dynamic web applications. If you're just starting your journey into the world of web development, mastering JavaScript will be an invaluable skill. To help you on this path, I have prepared a selection of basic JavaScript code examples that will guide you through the fundamentals of the language.

Variables in JavaScript

Variables are containers for storing data. In JavaScript, you can declare variables with var, let, either const.

let message = 'Hello, world!'; console.log(message); // Output: Hello, world!

In this code, message is a variable that contains the text string 'Hello, world!'. Then we use console.log to print the contents of the variable to the console.

Type of data

JavaScript is a weakly typed language, which means that you do not need to declare the data type of a variable. Basic data types include:

• String: Text string.
• number: Integer or floating point numbers.
• Boolean: Values true (true) or false (false).
• object: Data collections.
• array: Ordered lists of data.
• undefined: A variable that has not been assigned a value.
• null: A null or "empty" value.

let name = 'Nelko'; // String let age = 25; // Number let isDeveloper = true; // Boolean let object = { name: 'Nelko', age: 25 }; // Object let list = ['HTML', 'CSS', 'JavaScript']; // Array let notDefined; // undefined let nullValue = null; //null

Control Structures

Conditionals

Conditionals allow you to execute code depending on whether a condition is true or false.

let age = 18; if (age >= 18) { console.log('You are of legal age.'); } else { console.log('You are not of legal age.'); }

Loops

Loops are useful when you want to execute a block of code multiple times.

• for: Executes a block of code a specified number of times.

for (let i = 0; i < 5; i++) { console.log('The value of i is: ' + i); }

• while: Executes a block of code while a specified condition is true.

let i = 0; while (i < 5) { console.log('The value of i is: ' + i); i++; }

Features

Functions are blocks of code that perform a specific task and you can reuse them in your code.

function greet(name) { return 'Hello, ' + name + '!'; } console.log(greet('Nelko')); // Output: Hello, Nelko!

Events

Events in JavaScript are actions that can be detected by your script. For example, when a user clicks a button.

Greet

document.getElementById('greetingbutton').addEventListener('click', function() { alert('Hello, nelkodev.com visitor!'); });

This binds a click event to the button with id "greeting button" and when clicked, displays an alert message.

DOM – Document Object Model

The DOM is a representation of the HTML of your web page. With JavaScript, you can manipulate the DOM to change the content, structure, and style of your site.

document.getElementById('title').innerHTML = 'Welcome to nelkodev.com!';

This code will search for an element with the id "title" and it will change its internal HTML content.

JSON – JavaScript Object Notation

JSON is a text format for data exchange. It is easy for humans to understand and easy for machines to analyze.

let Jsondata = '{"name":"Nelko","website":"nelkodev.com"}'; let object = JSON.parse(Jsondata); console.log(object.name); // Output: Nelko console.log(object.website); // Output: nelkodev.com

First, we define a text string in JSON format. Then, we use JSON.parse to convert that string into a JavaScript object.

AJAX – Asynchronous JavaScript and XML

AJAX is a technique that allows parts of a web page to be updated without having to completely reload it, by sending an asynchronous request to the server.

let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }; xhr.open("GET", "https://api.nelkodev.com/data", true); xhr.send();

This example shows how you can make a GET request to a server to get data without reloading the page.

Debugging Tools

Learning to debug your code is as important as writing it. Most browsers have built-in developer tools to help you with this.

let badNumber = '5' + 9; // There is an error here, it should be a sum of numbers console.log(incorrectNumber); // Output: "59" console.assert(typeof badnumber === 'number', 'The variable badnumber is not a number');

The method console.assert will display an error message in the console if the condition you pass to it is false.

With these examples, you have taken your first steps in JavaScript. To delve deeper into these topics and many others, I invite you to visit nelkodev.com. And if you have questions or need additional guidance, don't hesitate to get in touch at nelkodev.com/contact. The path to JavaScript mastery is exciting and I am here to support you in your learning!