Introduction to JavaScript: The Language of the Web

 

🟨 JavaScript Basics for Freshers

🧠 What is JavaScript?

JavaScript is a scripting language used to create interactive and dynamic content on websites. It runs directly in the web browser and can be used to:

• ✅ Validate user input before sending data to the server
• ✅ Add interactivity like form validation, image sliders, animations, etc.
• ✅ Modify HTML & CSS while the page is running

⚡ JavaScript is client-side scripting, meaning the code runs in the user’s browser, not on the server.

🏢 Origin of JavaScript

• Invented by Brendan Eich in 1995
• Developed at Netscape Communications
• First ran in the Netscape Navigator browser
• Originally named Mocha, then LiveScript, and finally JavaScript

🖥️ What is Client-Side Scripting?

A client-side script runs on the user's device (browser) rather than on the server.

• 🔸 It’s embedded in the HTML file
• 🔸 No need for server-side interaction to execute
• 🔸 Improves speed and responsiveness

💡 Example Tasks: Form validation, animations, dynamic page updates.

🏷️ How to Add JavaScript in HTML

<script type="text/javascript">
  // Your JavaScript code goes here
</script>
  

✅ Note: Modern browsers assume type="text/javascript" by default, so it’s optional.

🖨️ Displaying Output Using document.write()

document.write() is a built-in JavaScript method used to write directly to the web page.

🧪 Example:

<script>
  document.write("Hello, welcome to JavaScript!");
</script>
  

📝 Output:
Hello, welcome to JavaScript!

➕ Concatenation with + Operator

The + operator joins (concatenates) strings or text in JavaScript.

🔤 Example:

<script>
  document.write("Hello " + "World!");
</script>
  

📝 Output:
Hello World!

📌 Summary Table

Concept	Description
JavaScript	Scripting language for web interactivity
Runs On	Browser (Client-side)
Invented By	Brendan Eich at Netscape (1995)
Insert JS in HTML	<script> tag
Output Function	document.write()
String Concatenation	+ operator to join text
Usage	Validation, animations, dynamic content updates

🟩 JavaScript Variables

In programming, a variable is a named container used to store data that can change (or vary) over time. Variables in JavaScript are declared before use and follow specific rules.

📌 Rules for Declaring Variables:

• 1️⃣ Variable must be declared before use using the var keyword.
• 2️⃣ Name can include letters (A-Z, a-z), digits (0-9), underscore (_), and dollar sign ($).
• 3️⃣ Must begin with a letter, underscore, or dollar sign.
• 4️⃣ Spaces are not allowed in variable names.
• 5️⃣ JavaScript variables are case-sensitive. x and X are different.

🧪 Example:

var age = 28;
  

• var – Declares a variable
• age – Name of the variable
• = – Assignment operator
• 28 – Value assigned to variable

📍 After declaration, you can use the variable name throughout your code to reference its value.

---

🔷 Data Types in JavaScript

A data type defines the kind of data a variable can hold. JavaScript is a dynamically typed language, which means you don’t need to declare the data type when creating a variable — JavaScript figures it out automatically.

▶️ To check a variable's data type, use the typeof() function.

📦 Primitive Data Types:

• 1. Number: Integers, floats, hexadecimal, etc.
  let num = 42;
• 2. String: Sequence of characters enclosed in quotes.
  let name = "John";
• 3. Boolean: Logical true or false.
  let isActive = true;
• 4. Undefined: Variable declared but no value assigned.
  let x;
• 5. null: Represents intentional absence of value.
  let value = null;

🧩 Non-Primitive Data Types:

• 1. Object: Collection of key-value pairs.
  let person = { name: "Alice", age: 25 };
• 2. Array: Ordered list of values.
  let colors = ["red", "green", "blue"];

---

🟪 let and const Keywords

Besides var, you can declare variables using let and const.

• let: Declares block-scoped variables. You can reassign values.
  let score = 100;
• const: Declares block-scoped constants. Value cannot be reassigned.
  const pi = 3.14;

➗ JavaScript Operators

Operators are symbols that tell JavaScript to perform specific operations such as addition, comparison, or logic-based decisions. JavaScript supports the following types of operators:

• 1️⃣ Arithmetic Operators
• 2️⃣ Relational (Comparison) Operators
• 3️⃣ Logical Operators
• 4️⃣ Assignment Operators
• 5️⃣ String Operators
• 6️⃣ Bitwise Operators
• 7️⃣ Special Operators

➕ Arithmetic Operators

These perform basic mathematical operations using two operands.

Operator	Description	Example	Result
+	Addition	a = 10, b = 15 c = a + b	25
-	Subtraction	c = b - a	5
*	Multiplication	c = a * b	150
/	Division	c = a / b	0.666...
%	Modulo (Remainder)	c = 14 % 3	2
++	Increment	a++	11
--	Decrement	a--	9

🔁 Relational Operators

Used for comparing two values. Result is either true or false.

Operator	Description	Example	Result
>	Greater than	15 > 10	true
<	Less than	15 < 10	false
==	Equals to	15 == 10	false
>=	Greater than or equal	15 >= 10	true
<=	Less than or equal	15 <= 10	false
!=	Not equal	15 != 10	true

🔀 Logical Operators

Operator	Description	Example	Result
&&	AND	X && Y	true if both are true
||	OR	X || Y	true if one is true
!	NOT	!X	Inverts truth

📝 Assignment Operators

Operator	Description	Example	Equivalent
=	Assign	x = y	x = y
+=	Add & assign	x += y	x = x + y
-=	Subtract & assign	x -= y	x = x - y
*=	Multiply & assign	x *= y	x = x * y
/=	Divide & assign	x /= y	x = x / y
%=	Modulo & assign	x %= y	x = x % y

🔤 String Operators

Operator	Description	Example	Result
+	Concatenation	"Hello" + " World"	"Hello World"
+=	Concatenation assignment	str1 += str2	Join str2 to str1

🧮 Bitwise Operators

Sign	Operator	Description
&	AND	Returns 1 if both bits are 1
|	OR	Returns 1 if either bit is 1
^	XOR	Returns 1 if bits are different
~	NOT	Inverts bits
<<	Left Shift	Multiplies number by 2^shift
>>	Right Shift	Divides number by 2^shift

✨ Special Operators

Operator	Description
typeof	Check the type of a variable
instanceof	Check instance of object type
new	Create an object instance
delete	Delete object property
, (comma)	Separates expressions
?:	Conditional (ternary) operator

🔁 LOOP STATEMENT

Loop is a statement that repeats a block of statement until some condition is true. JavaScript supports the following loops:

• For
• While
• Do..while
• For...in

📌 For Loop

for(initialization; condition; update) {
  // code block
}

📌 While Loop

while(condition) {
  // code block
  update;
}

📌 Do...While Loop

do {
  // code block
} while(condition);

🧮 Function in JavaScript

A function is a reusable block of code defined using the function keyword:

function myFunction(param) {
  // statements
}

📲 HTML Events using JavaScript

HTML events provide dynamic interactions on webpages.

• onclick: When element is clicked
• onchange: When value of input changes
• onmouseover: When mouse hovers over element
• onmouseout: When mouse leaves element
• onkeydown: When a key is pressed
• onkeyup: When a key is released
• onload: When page or element is loaded

🖱️ Onclick Example:

<button onclick="myFunction()">Click Me</button>

📝 Form Events

• onfocus: When element receives focus
• onblur: When element loses focus
• onchange: When input value changes
• onsubmit: When form is submitted

🌐 Open New Page

Use window.open() to open a new tab or window:

window.open("https://example.com", "_blank");

✅ Form Validation

Form validation ensures that users fill all required fields correctly before submitting.

• Required field validation
• Data format validation (e.g., email, number)