---

🌐 Introduction to JavaScript: JavaScript in Web Pages

JavaScript is a high-level, interpreted scripting language used to create dynamic and interactive web pages. It works alongside HTML (structure) and CSS (presentation) to build modern web applications.

JavaScript is mainly executed in the web browser (client-side) but can also run on the server using platforms like Node.js.

---

🧠 1. Netscape and JavaScript (History & Evolution)

• JavaScript was developed in 1995 by Brendan Eich at Netscape Communications.
• Initially named Mocha, later LiveScript, and finally JavaScript.
• Introduced in the Netscape Navigator browser.

Key Developments:

• Designed to make web pages interactive.
• Standardized as ECMAScript by ECMA International.
• Now supported by all modern browsers (Chrome, Edge, Firefox, Safari).

Exam Point:

👉 JavaScript was created for client-side scripting to enhance user interaction in web pages.

---

💻 2. JavaScript in Web Pages

JavaScript can be embedded into web pages in three ways:

(a) Inline JavaScript

Used directly inside HTML elements.

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

(b) Internal JavaScript

Written inside <script> tags in an HTML file.

<script>
  console.log("Hello World");
</script>

(c) External JavaScript

Stored in a separate .js file and linked to HTML.

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

Advantages:

• Improves interactivity
• Reusable code (external JS)
• Cleaner HTML structure
• Faster user response

---

🖥️ 3. Client-Side JavaScript

Client-side JavaScript executes inside the user’s browser without needing server interaction.

Features:

• Manipulates HTML using DOM (Document Object Model)
• Validates user input before sending to server
• Handles events like clicks, typing, and mouse actions

Example: Form Validation

<input type="text" id="name">
<button onclick="validate()">Submit</button>

<script>
function validate() {
  let name = document.getElementById("name").value;
  if (name === "") {
    alert("Name cannot be empty");
  }
}
</script>

Benefits:

• Faster execution
• Reduces server load
• Provides instant feedback to users

---

🗄️ 4. Database Connectivity in JavaScript

JavaScript in the browser cannot directly connect to databases due to security reasons.

Working Process:

1. User interacts with web page
2. JavaScript sends request to server (via API)
3. Server processes request and connects to database
4. Server sends response back to browser

Technologies Used:

• AJAX (Asynchronous JavaScript and XML)
• Fetch API
• REST APIs

Example Using Fetch API:

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

Important Note:

👉 Database interaction always happens through a server-side language (Node.js, PHP, Java, etc.)

---

⌨️ 5. Capturing User Input in JavaScript

JavaScript captures user input using forms, DOM methods, and events.

(a) Using Input Fields

<input type="text" id="username">
<button onclick="getValue()">Submit</button>

<script>
function getValue() {
  let val = document.getElementById("username").value;
  alert(val);
}
</script>

(b) Using Events

Common events:

• onclick
• onchange
• onsubmit

(c) Using Event Listeners

document.getElementById("username").addEventListener("input", function() {
  console.log(this.value);
});

Applications:

• Form validation
• Dynamic content updates
• Interactive UI design

---

🔄 Summary (Exam-Oriented Table)

Topic	Description
Netscape & JS	Developed in 1995 by Brendan Eich
JS in Web Pages	Inline, Internal, External methods
Client-side JS	Runs in browser, handles UI & validation
Database Connectivity	Indirect via server APIs
Capturing Input	Using forms, DOM, and events

---

🎯 Conclusion

JavaScript is a core technology of web development that:

• Enhances user interaction
• Enables real-time processing
• Connects frontend with backend systems

It is essential for building modern, responsive, and dynamic web applications.

---