Introduction to Javascript

JavaScript is the most widely used scripting language in web development, allowing you to create interactive and dynamic web pages. While HTML structures the content of a page and CSS styles it JavaScript brings the page to life. Whether it’s responding to user events like clicking a button, validating forms, animating elements, or fetching data from a server, JavaScript is the tool that makes the web dynamic.

Initially created to run within web browsers, JavaScript has since grown beyond the browser with environments like Node.js, allowing developers to build backend applications, work with databases, and even create entire software ecosystems using JavaScript.

JavaScript is supported by all modern browsers and is considered one of the most essential skills for any web developer. So, let’s dive into the core of JavaScript, starting with how it interacts with the web page.

JavaScript Output

When working with JavaScript, you’ll often need to output data or information in different ways. Here are the main methods of writing JavaScript output:

1. Writing into an HTML element, using innerHTML: The most common way to display dynamic content on a web page is by using the innerHTML property to change the content of an HTML element.

document.getElementById(“demo”).innerHTML = “Hello JavaScript!”;

2. Writing into the HTML output using document.write(): document.write() is useful for testing purposes, but it’s typically avoided for dynamic websites because it overwrites the whole document.

document.write(“This is written using document.write()”);

3. Writing into an alert box, using window.alert(): You can display data to the user using alert boxes. This is a great way to grab the user’s attention with important messages.

window.alert(“This is an alert box!”);

4. Writing into the browser console, using console.log(): Developers use console.log() to write output to the browser’s console, which is great for debugging and development.

console.log(“This is written to the console.”);

JavaScript Syntax

The syntax of JavaScript is the set of rules that define how the language should be written and understood by the browser. Understanding syntax is the foundation of coding in JavaScript.

JavaScript Values

JavaScript values can be classified into two types:

1. Fixed Values (Literals): Fixed values, also called literals, are values that don’t change, such as numbers or strings.

100 // Number literal

“Hello” // String literal

2. Variable Values: These are values stored in variables that can change during the execution of the program.

let x = 10; // Variable value

JavaScript Literals

JavaScript literals represent fixed values in code. The two common types of literals are:

1. String literals: Text wrapped inside double or single quotes.

let message = “Hello, World!”;

2. Number literals: Numeric values without quotes.

let number = 42;

JavaScript Operators

Operators in JavaScript perform operations on variables and values. Here are some commonly used operators:

1. Assignment Operator (=): Assigns a value to a variable.

let a = 10;

2. Arithmetic Operators (+, -, , /): Perform mathematical calculations.

let sum = 10 + 5; // Result is 15

JavaScript Expressions

Expressions are combinations of values, variables, and operators that result in a value.

Example of a simple expression:

let x = 5 + 2; // 7

JavaScript Keywords

JavaScript has reserved keywords used to define actions in the language. Some of the most common ones include:

let – Declares a variable
const – Declares a constant
function – Declares a function
return – Returns a value from a function

JavaScript Comments

Comments are lines of code that are ignored by the browser. You can use them to explain code or disable parts of the code for testing.

1. Single-line comment:

// This is a comment

2. Multi-line comment:

/* This is a multi-line comment */

JavaScript Identifiers / Names

Identifiers are names given to variables, functions, or objects in JavaScript. They must begin with a letter, an underscore (_), or a dollar sign ($).

Example:

let myVariable = 10;

JavaScript is Case Sensitive

JavaScript is case-sensitive, which means that myVariable and myvariable are treated as two different variables.

let myVariable = 10;

let myvariable = 20; // Different variable

JavaScript and Camel Case

By convention, JavaScript developers use camelCase when naming variables and functions. In camelCase, the first word is lowercase, and subsequent words are capitalized.

let myVariableName = “This is camel case”;

JavaScript Character Set

JavaScript uses the Unicode character set, which includes letters, digits, punctuation, and special symbols from different languages.

JavaScript Variables

In JavaScript, variables are containers that store data values. Variables allow you to save information (like numbers, text, etc.) and refer to it throughout your program. There are three ways to declare variables in JavaScript:

var (old way)
let (modern, block-scoped)
const (for constants that do not change)

Let’s break them down:

1. var – The Original Way

The var keyword was traditionally used to declare variables in JavaScript. Variables declared with var have function scope or global scope but not block scope (within curly brackets like if, for, or while).

var name = “John”;

var age = 25;

When to use var: It’s an older way to declare variables and is not commonly used in modern JavaScript. If you’re working with older JavaScript code or need to support very old browsers, you might still use var.

2. let – The Modern Way

let was introduced in ES6 (2015) and is preferred for most modern JavaScript. It has block scope, which means it only exists inside the block where it’s declared (within {}). Unlike var, let variables cannot be redeclared but can be updated.

let score = 100;

score = 120; // You can update ‘let’ variables.

When to use let: Use let when you know the value of the variable might change later. It provides better control over the scope of the variable, reducing potential bugs.

3. const – For Constants

const is also a modern way of declaring variables. Variables declared with const cannot be reassigned after their initial value is set. Like let, const has block scope, but it’s primarily used for values that should remain constant throughout the program.

const pi = 3.14159;

When to use const: Use const when you have a value that should not change (e.g., configuration settings, mathematical constants, etc.).

Differences Between var, let, and const:

Feature	var	let	const
Scope	Function/Global	Block	Block
Redeclaration	Allowed	Not Allowed	Not Allowed
Reassignment	Allowed	Allowed	Not Allowed
Hoisting	Yes (with undefined)	No (not initialized)	No (not initialized)

When to Use Each:

var: Use it sparingly for older JavaScript projects or when the variable needs to be available across large scopes, but it’s less recommended in modern development.
let: Use it when you need a variable that will change value over time (e.g., in loops, conditionals).
const: Use it for values that should remain constant throughout your code (e.g., fixed values like pi, app configurations).

By understanding how to use each type of variable, you can write cleaner and more maintainable code!

Conclusion

In this first part of the JavaScript tutorial series, we’ve covered the basics such as output methods, syntax, variables, literals, and operators. These are fundamental building blocks that you’ll need to master before diving into more advanced concepts like functions, loops, and objects.

JavaScript is a powerful language that forms the backbone of modern web development, and mastering it opens the door to building dynamic and interactive web pages. Keep practicing, and remember, the more you code, the better you’ll get!

Request more information

Introduction to Javascript