DEV Community

Sudhakar V
Sudhakar V

Posted on

JavaScript Journey -1

Here’s a clear and concise definition of JavaScript:


📘 JavaScript

JavaScript is a high-level, interpreted, object-oriented programming language that is primarily used to create interactive and dynamic web pages. It is one of the core technologies of the World Wide Web, alongside HTML and CSS.


🧠 Key Characteristics:

  • Client-side (runs in the browser) and server-side (via Node.js)
  • Dynamically typed (no need to define data types)
  • Event-driven and asynchronous (e.g., with setTimeout, fetch)
  • Prototype-based (supports OOP through prototypes and ES6 classes)
  • Used to control the behavior of web elements like buttons, forms, animations, and real-time updates.

📌 Example:

<button onclick="greet()">Click Me</button>
<script>
  function greet() {
    alert("Hello, Sudhakar!");
  }
</script>
Enter fullscreen mode Exit fullscreen mode

✅ In Short:

JavaScript is the language of the web, enabling developers to make websites dynamic, interactive, and user-friendly.

1. 🧠 Variables

Used to store data.

  • var – old, function-scoped
  • let – block-scoped
  • const – block-scoped, value can't be reassigned
let name = "Sudhakar";
const age = 25;
var isStudent = true;
Enter fullscreen mode Exit fullscreen mode

2. 🔢 Data Types

  • Primitive: Number, String, Boolean, Null, Undefined, Symbol
  • Non-Primitive: Object, Array, Function
let num = 10;            // Number
let str = "Hello";       // String
let isOk = true;         // Boolean
let arr = [1, 2, 3];     // Array
let obj = {name: "SK"};  // Object
Enter fullscreen mode Exit fullscreen mode

3. 🧮 Operators

Used to perform operations on variables and values.

let a = 5, b = 3;
console.log(a + b);  // 8 (Arithmetic)
console.log(a > b);  // true (Comparison)
console.log(a == b); // false
Enter fullscreen mode Exit fullscreen mode

4. 🔁 Control Statements

Control the flow of the program.

let age = 20;
if (age >= 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}

for (let i = 1; i <= 3; i++) {
  console.log(i); // 1, 2, 3
}
Enter fullscreen mode Exit fullscreen mode

5. 🔧 Functions

Reusable blocks of code.

function greet(name) {
  return "Hello " + name;
}
console.log(greet("Sudhakar"));

const add = (x, y) => x + y;
console.log(add(5, 3));  // 8
Enter fullscreen mode Exit fullscreen mode

6. 📦 Arrays and Objects

let colors = ["red", "green"];
console.log(colors[0]);  // red

let person = {
  name: "Sudhakar",
  age: 25
};
console.log(person.name);  // Sudhakar
Enter fullscreen mode Exit fullscreen mode

7. 🎯 Events (in browser)

Used to handle user actions.

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

<script>
  function sayHi() {
    alert("Hello, Sudhakar!");
  }
</script>
Enter fullscreen mode Exit fullscreen mode

8. 🕹️ DOM Manipulation

Used to change HTML/CSS with JavaScript.

<p id="demo">Old text</p>
<button onclick="changeText()">Change</button>

<script>
  function changeText() {
    document.getElementById("demo").innerHTML = "New text!";
  }
</script>
Enter fullscreen mode Exit fullscreen mode

9. 📤 JavaScript in Web Development

  • Runs in the browser
  • Used for form validation, animations, fetching APIs, etc.
fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => console.log(data));
Enter fullscreen mode Exit fullscreen mode

Top comments (0)