Introduction to JavaScript

What is JavaScript?

JavaScript is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB, and Adobe Acrobat.

JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.

Why Learn JavaScript?

• Universal Adoption: JavaScript is supported by all modern web browsers.
• Versatility: It can be used for front-end and back-end development.
• Rich Ecosystem: Vast libraries and frameworks like React, Angular, and Vue.js.
• Community Support: Large community and extensive documentation.
• Career Opportunities: High demand for JavaScript developers.

Your First JavaScript Program

Let's start with the classic "Hello, World!" example:

// This is a comment
console.log("Hello, World!");

You can run this code in your browser's console or in a Node.js environment. The output will be:

Hello, World!

Adding JavaScript to HTML

There are three main ways to include JavaScript in your HTML documents:

1. Inline JavaScript

<button onclick="alert('Hello, World!')">Click Me</button>

2. Internal JavaScript

<script>
  document.addEventListener('DOMContentLoaded', function() {
    console.log('The document is ready!');
  });
</script>

3. External JavaScript

<script src="script.js"></script>

JavaScript Syntax Basics

Variables

// Modern variable declarations
let name = "John";  // Block-scoped variable
const age = 30;     // Block-scoped constant
var job = "Developer";  // Function-scoped variable (older style)

Data Types

// Primitive types
let string = "Hello";
let number = 42;
let boolean = true;
let nullValue = null;
let undefinedValue;
let symbol = Symbol("unique");
let bigInt = 9007199254740991n;

// Object type
let object = { name: "John", age: 30 };

Functions

// Function declaration
function greet(name) {
  return `Hello, ${name}!`;
}

// Function expression
const sayHello = function(name) {
  return `Hello, ${name}!`;
};

// Arrow function (ES6+)
const welcome = (name) => `Welcome, ${name}!`;

Interactive Example

Try out this interactive example to see JavaScript in action:

Next Steps

Now that you have a basic understanding of JavaScript, you can explore more advanced topics:

• Variables and Data Types
• Control Flow (if statements, loops)
• Functions and Scope
• Objects and Arrays
• DOM Manipulation
• Event Handling
• Asynchronous JavaScript