Ohidur logoOhidur

JavaScript Essentials: A Beginner's Guide

O

Ohidur Rahman Bappy

MAR 22, 2025

Introduction

JavaScript is a versatile scripting language primarily used for client-side web development. This guide covers fundamental concepts and syntax to kickstart your journey in learning JavaScript.

Embedding JavaScript

To write JavaScript within an HTML page, place the code inside <script> tags:

<script type="text/javascript">
    document.write('Hello World');
</script>

Semicolons

In JavaScript, semicolons at the end of statements are optional:

var num1 = 10
var num2 = 11
var num3 = 9; var num4 = 20;

Case Sensitivity

JavaScript identifiers are case-sensitive:

var Num1 = 10
var NUM2 = 11

Comments

JavaScript supports both single-line and multi-line comments.

Single-line comments

// This is a single line comment

Multiline comments

/* This is a multi-line comment
that spans multiple lines
*/

<noscript> Tag

The <noscript> tag is used to display HTML content when JavaScript is not supported:

<noscript>
    JavaScript is not available
</noscript>

Datatypes

JavaScript includes several primitive data types:

  • Numbers: 123, 232.34, etc.
  • Strings: 'hello world'
  • Boolean: true/false

Other types include:

  • null
  • undefined
  • object

Variables

When naming variables:

  • Do not use reserved keywords
  • Must begin with a letter or an underscore
  • JavaScript is case-sensitive: hello and Hello are different
var name;
var num1;
var num2, num3;
name = "Ohidur";

JavaScript Scope

Here’s an example of global vs. local scope:

<html>
   <body onload="checkscope();">   
      <script type="text/javascript">
         var myVar = "global"; // Global variable
         function checkscope() {
            var myVar = "local"; // Local variable
            document.write(myVar);
         }
      </script>     
   </body>
</html>

Result:

local

Operators

JavaScript includes a variety of operators:

  • Arithmetic Operators: +, -, *, /, %
  • Comparison Operators: ==, <, >, !=, <=, >=
  • Logical Operators: &&, ||, !
  • Assignment Operators: =, +=, -=, *=, /=, %=, etc.

Arithmetic Operators Example

var a = 33;
var b = 10;
var c = "Test";
var linebreak = "<br />";

document.write("a + b = ");
result = a + b;
document.write(result);
document.write(linebreak);
// more operations...

Output:

a + b = 43
a - b = 23
// and so on...

Comparison Operators Example

var a = 10;
var b = 20;
var linebreak = "<br />";

document.write("(a == b) => ");
result = (a == b);
document.write(result);
document.write(linebreak);
// more comparisons...

Result:

(a == b) => false 
(a != b) => true 
// and so on...

Logical Operators Example

var a = true;
var b = false;
var linebreak = "<br />";

document.write("(a && b) => ");
result = (a && b);
document.write(result);
document.write(linebreak);
// more logical operations...

Result:

(a && b) => false 
!(a && b) => true

Bitwise Operators

Explore operations like Bitwise AND, OR, and NOT.

var a = 2; // 10 in binary
var b = 3; // 11 in binary
var linebreak = "<br />";

document.write("(a & b) => ");
result = (a & b);
document.write(result);
document.write(linebreak);
// other bitwise operations...

Output:

(a & b) => 2 
(a | b) => 3

Assignment Operators

var a = 33;
var b = 10;
var linebreak = "<br />";

document.write("Value of a => (a = b) => ");
result = (a = b);
document.write(result);
document.write(linebreak);
// other assignments...

Output:

Value of a => (a = b) => 10

By understanding these basics, you're well on your way to mastering JavaScript!

Tags

developmentbasicsprogrammingjavascript