HTML JAVASCRIPT

Introduction to Scripting in Web Development

A script is a small piece of program that adds interactivity to a website. For example, a script could generate a pop-up alert box message, provide a dropdown menu, validate forms, or create dynamic content on a webpage. The two main scripting languages that have been used in web development are JavaScript and VBScript. However, in modern web development, only JavaScript and its associated frameworks are widely used. VBScript is no longer supported by major browsers, making JavaScript the dominant scripting language.

Scripting languages allow developers to write small functions called event handlers. These functions can be triggered using HTML attributes or by adding event listeners in JavaScript code. JavaScript can either be embedded directly within an HTML document or stored in an external file and included as needed.

Inline JavaScript: Writing JavaScript Inside HTML

One way to write JavaScript is by embedding it directly within an HTML file using the <script> tag. This approach is useful for small scripts or quick functionalities. Below is an example demonstrating inline JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline JavaScript Example</title>
</head>
<body>
    <button onclick="showMessage()">Click Me</button>

    <script>
        function showMessage() {
            alert("Hello! This is an inline JavaScript example.");
        }
    </script>
</body>
</html>

External JavaScript: Using a Separate JS File

For better code organization and maintainability, JavaScript can be written in a separate file and then linked to an HTML document using the <script> tag with the src attribute.

Step 1: Create an External JavaScript File

Create a file named script.js and write the following JavaScript code:

function showMessage() {
    alert("Hello! This is an external JavaScript example.");
}

Step 2: Include the JavaScript File in the HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External JavaScript Example</title>
</head>
<body>
    <button onclick="showMessage()">Click Me</button>

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

Advantages of Using External JavaScript

Code Reusability: The same JavaScript file can be used across multiple pages.
Better Code Organization: Keeps HTML and JavaScript separate for better readability.
Improved Maintainability: Easier to update JavaScript logic without modifying HTML files.
Faster Page Loading: External JavaScript files can be cached by the browser, reducing load time.

JavaScript Event Handling

JavaScript allows interaction with HTML elements through event handling. Events are actions or occurrences detected by JavaScript, such as clicks, keypresses, or form submissions.

Common Events in JavaScript

onclick: Triggered when an element is clicked.
onmouseover: Triggered when the mouse is moved over an element.
onmouseout: Triggered when the mouse moves out of an element.
onchange: Triggered when the value of an input element changes.
onkeyup: Triggered when a key is released on the keyboard.
onkeydown: Triggered when a key is pressed on the keyboard.
onsubmit: Triggered when a form is submitted.

Example: Event Handling in JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Handling Example</title>
</head>
<body>
    <input type="text" id="nameField" placeholder="Type your name">
    <button onclick="greetUser()">Greet</button>

    <script>
        function greetUser() {
            let name = document.getElementById("nameField").value;
            alert("Hello, " + name + "!");
        }
    </script>
</body>
</html>

JavaScript Frameworks and Libraries

Modern web development has evolved with the introduction of JavaScript frameworks and libraries that simplify and enhance development. Some of the most popular JavaScript frameworks and libraries include:

jQuery: A lightweight JavaScript library that simplifies DOM manipulation and AJAX calls.
React.js: A library developed by Facebook for building interactive UI components.
Vue.js: A progressive framework for building user interfaces.
Angular: A full-fledged framework developed by Google for developing web applications.
Node.js: A JavaScript runtime that allows JavaScript to run on the server-side.

Best Practices for Writing JavaScript Code

Use Meaningful Variable Names:
- ✅ Good: let userAge = 25;
- ❌ Bad: let x = 25;
Use const and let Instead of var
- const for constant values, let for variables that change.
Avoid Inline JavaScript:
- Instead of onclick="showMessage()", use document.getElementById("btn").addEventListener("click", showMessage);
Optimize Performance:
- Minimize and compress JavaScript files.
- Load JavaScript asynchronously using async or defer attributes.
Use Comments for Documentation:

// This function calculates the area of a rectangle

External JavaScript ka matlab hai JavaScript code ko ek alag .js file mein likhna aur usko HTML file mein include karna. Yeh approach HTML aur JavaScript ko alag-alag rakhne mein madad karti hai, jo ki maintainability aur readability ke liye accha hota hai.

Example

1. JavaScript file (`script.js`)

function showMessage() {
    alert("Hello! This is an external JavaScript file.");
}

2. HTML file (`index.html`)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External JavaScript Example</title>
</head>
<body>
    <button onclick="showMessage()">Click Me</button>
    <script src="script.js"></script>
</body>
</html>

Advantages of External JavaScript

✅ Code reusability – Ek hi script multiple pages mein use ki ja sakti hai.
✅ Better readability – HTML aur JavaScript alag hone se code clean lagta hai.
✅ Fast loading – Browser script file ko cache kar sakta hai, jo page speed improve karta hai.
✅ Easy maintenance – Changes karna aur debug karna easy hota hai.

Internal JavaScript ka matlab hai ki JavaScript code ko HTML file ke <script> tag ke andar likhna, bina kisi external .js file ke. Yeh approach tab useful hoti hai jab aap chhoti scripts likh rahe ho ya ek hi HTML file ke andar JavaScript rakhna chahte ho.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal JavaScript Example</title>
    <script>
        function showMessage() {
            alert("Hello! This is an internal JavaScript example.");
        }
    </script>
</head>
<body>
    <button onclick="showMessage()">Click Me</button>
</body>
</html>

Advantages of Internal JavaScript

✅ Easy to Implement – Ek hi HTML file mein likh sakte hain, alag file ki zaroorat nahi.
✅ Quick Testing – Chhoti scripts ke liye ideal hai, bina external files manage kare.
✅ Direct Access – Script ko HTML structure ke saath direct access milta hai.

Disadvantages of Internal JavaScript

❌ Not Reusable – Ek hi HTML file mein kaam karega, dusre pages ke liye reuse nahi ho sakta.
❌ Performance Issue – Large scripts hone par HTML loading slow ho sakti hai.
❌ Code Clutter – HTML aur JavaScript mix hone se readability kharab ho sakti hai.

Event Handlers JavaScript mein kisi bhi element par hone wale events (like click, hover, keypress, etc.) ko handle karne ke liye use hote hain. Yeh allow karte hain ki hum user interactions ka response de sakein.

Types of Event Handlers

1. Inline Event Handlers (HTML ke andar)

Is method mein hum directly HTML attribute ke andar JavaScript function likhte hain.

Example:

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

✅ Simple aur fast hai, lekin badhi applications ke liye recommended nahi hai.

2. Internal Event Handlers (JavaScript ke andar)

Is method mein hum onclick jaisa property use karke event handle karte hain.

Example:

<button id="myButton">Click Me</button>

<script>
    document.getElementById("myButton").onclick = function() {
        alert("Button Clicked!");
    };
</script>

✅ HTML aur JavaScript ko alag rakhta hai, jo readability improve karta hai.

3. Event Listeners (Best Practice)

Modern JavaScript mein addEventListener() method use kiya jata hai, jo multiple events handle kar sakta hai.

Example:

<button id="myButton">Click Me</button>

<script>
    document.getElementById("myButton").addEventListener("click", function() {
        alert("Button Clicked!");
    });
</script>

✅ Multiple events ko handle kar sakta hai.
✅ removeEventListener() se event ko hata bhi sakte hain.

Common Events in JavaScript

Event	Description
`click`	Jab user kisi element ko click kare
`mouseover`	Jab user element ke upar cursor le jaye
`mouseout`	Jab cursor element se bahar jaye
`keydown`	Jab koi key press ki jaye
`keyup`	Jab key release ho
`load`	Jab page completely load ho
`submit`	Jab form submit ho

`<noscript>` Element in HTML

<noscript> ek special HTML tag hai jo tab activate hota hai jab JavaScript browser me disabled hota hai ya supported nahi hota. Yeh tag alternative content dikhane ke liye use hota hai jo JavaScript ke bina bhi kaam kare.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>noscript Example</title>
    <script>
        // Example JavaScript
        console.log("JavaScript is enabled!");
    </script>
</head>
<body>
    <h1>Welcome to My Website</h1>

    <noscript>
        <p style="color: red;">JavaScript is disabled in your browser. Please enable it for the best experience.</p>
    </noscript>

    <p>This is some content that appears normally.</p>
</body>
</html>

Where to Use `<noscript>`?

✅ Alternative Content: Agar JavaScript disable hai, toh <noscript> important message ya alternative navigation dikhane ke liye use ho sakta hai.

✅ SEO & Accessibility: Kuch crawlers ya older browsers JavaScript ko support nahi karte, toh <noscript> SEO friendly ho sakta hai.

✅ Form Submissions: Agar form validation JavaScript par depend karta hai, toh <noscript> ek fallback message provide kar sakta hai.

Limitations of `<noscript>`

❌ Sirf JavaScript disabled hone par hi dikhega, warna nahi.
❌ Isme JavaScript code nahi likh sakte, sirf HTML ya CSS likh sakte hain.
❌ Modern browsers me JavaScript default enabled hota hai, toh iska use limited hai.

Default Scripting Language in HTML

1. JavaScript is the Default Scripting Language

HTML ke andar jo bhi <script> tag use hota hai, default scripting language JavaScript hoti hai. Matlab agar aap <script> tag mein language specify nahi bhi karte, toh browser automatically JavaScript assume karega.

Example (Without specifying language)

<!DOCTYPE html>
<html>
<head>
    <title>Default Scripting Language</title>
    <script>
        function showMessage() {
            alert("Hello! JavaScript is the default scripting language.");
        }
    </script>
</head>
<body>
    <button onclick="showMessage()">Click Me</button>
</body>
</html>

➡ Browser automatically JavaScript assume karega.

2. Old Method: Using `language` Attribute (Deprecated)

Pehle <script> tag me language="JavaScript" likhna zaroori hota tha, lekin HTML5 me yeh deprecated ho chuka hai.

<script language="JavaScript">  <!-- Deprecated in HTML5 -->
    alert("This method is outdated!");
</script>

➡ Modern browsers isse ignore karte hain, isliye use na karein.

3. If You Want to Use Another Scripting Language

Agar aap kisi dusri scripting language ka use karna chahein (jaise VBScript, jo ab support nahi hoti), toh type attribute specify karna zaroori hota hai.

<script type="text/vbscript">  <!-- Not Supported in Modern Browsers -->
    MsgBox "This is VBScript!"
</script>

❌ VBScript aur dusri scripting languages ab modern browsers me kaam nahi karti.

Conclusion

✅ JavaScript hi default scripting language hoti hai HTML me.
✅ <script> tag ke andar agar koi type specify na karein, toh browser JavaScript hi assume karega.
✅ language attribute ab obsolete hai, use nahi hota.
✅ Modern browsers sirf JavaScript ko support karte hain, dusri scripting languages ka support hataya ja chuka hai.

JavaScript FAQs

Q 1. External JavaScript kya hota hai?

Answer: External JavaScript ek .js file hoti hai jo HTML se alag hoti hai. Isko <script> tag ke src attribute ka use karke HTML file me include kiya jata hai.

Q 2. External JavaScript ko HTML me kaise include karein?

Answer: Aap external JavaScript file ko <script> tag ka use karke include kar sakte hain. Example:

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

Ye tag <body> ke last me ya <head> me defer attribute ke sath likhna best practice hota hai.

Q 3. External JavaScript aur Inline JavaScript me kya fark hai?

Answer:

Feature	Inline JavaScript	External JavaScript
Code location	HTML me likha jata hai	Alag `.js` file me hota hai
Readability	Kam	Behtar
Reusability	Nahi	Haan
Performance	Thoda slow	Fast kyunki caching hoti hai

Q 4. Kya ek HTML file me multiple external JavaScript files use ki ja sakti hain?

Answer: Haan, aap ek HTML file me multiple external JavaScript files include kar sakte hain:

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

Lekin ensure karein ki unka execution order sahi ho.

Q 5. defer aur async attributes kya hote hain?

Answer:

async: JavaScript file parallel download hoti hai aur turant execute hoti hai.
defer: JavaScript file parallel download hoti hai lekin HTML parse hone ke baad execute hoti hai.
Example:

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

Q6. Kya external JavaScript files kisi bhi folder me rakhi ja sakti hain?

Answer: Haan, lekin aapko uska sahi path dena hoga. Example:

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

Yahan script.js file js/ folder me hai.

Q 7. External JavaScript ka use kyon zaroori hai?

Answer:

Code clean aur organized rehta hai.
Multiple pages me use ho sakta hai.
HTML aur JavaScript separate rakhna ek best practice hai.
Browser caching ke wajah se page fast load hota hai.

Q 8. Kya External JavaScript file me HTML code likh sakte hain?

Answer: Nahi, external JavaScript file (.js) sirf JavaScript code contain karti hai. HTML aur CSS ko separate rakhna best practice hota hai.

Q 9. Kya ek hi external JavaScript file multiple HTML pages me use ho sakti hai?

Answer: Haan, ek external JavaScript file ko multiple HTML pages me include kiya ja sakta hai. Example:

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

Agar aapka script script.js file me hai, toh aap usko jitne pages me chahein, use kar sakte hain.

Q 10. External JavaScript ko head me ya body me include karna best hai?

Answer: Agar aap <head> me JavaScript lagate hain toh defer attribute use karein:

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

Body ke end me lagana best hota hai, taki HTML content pehle load ho jaye.
```
<body>
  <script src="script.js"></script>
</body>
```

Q 11. External JavaScript file ka size kitna hona chahiye?

Answer: Jitna chhota ho sake, utna achha. Minified JavaScript (.min.js) ka use karein taaki file ka size kam ho aur performance fast ho. Example:

Normal JavaScript file: script.js
Minified version: script.min.js

Aap UglifyJS ya Terser jese tools ka use karke minification kar sakte hain.

Q 12. Kya ek hi `<script>` tag me multiple JavaScript files include ki ja sakti hain?

Answer: Nahi, har ek JavaScript file ke liye alag <script> tag lagana padta hai:

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

Q 13. Kya ek JavaScript file ke andar doosri JavaScript file ko import kar sakte hain?

Answer: Haan, import statement ya document.createElement("script") method ka use karke doosri JavaScript file ko load kar sakte hain.

Example (Using import in ES6 Modules):

import { myFunction } from './anotherFile.js';
myFunction();

Lekin, iske liye <script> tag me type="module" dena zaroori hai:

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

Q 14. Kya External JavaScript ko dynamically load kar sakte hain?

Answer: Haan, aap JavaScript se hi ek aur JavaScript file load kar sakte hain:

let script = document.createElement("script");
script.src = "script.js";
document.body.appendChild(script);

Ye approach tab useful hoti hai jab aapko runtime pe JavaScript load karni ho.

Q 15. External JavaScript me variables global hote hain ya local?

Answer: Agar aap var keyword use kar rahe hain, toh variables global ho sakte hain. Example:

var myVar = "Hello"; // Global Variable

Lekin let aur const ka use karein taaki variables block-scope me rahein:

let myVar = "Hello"; // Block-scoped variable

Q 16. Kya External JavaScript ko `async` aur `defer` ke bina bhi use kar sakte hain?

Answer: Haan, lekin agar aap bina async ya defer ke script ko <head> me rakhoge, toh JavaScript execution HTML rendering ko block kar sakta hai.
Isliye best practice hai ki async ya defer ka use karein.

Q 17. Kya External JavaScript file me Comments likh sakte hain?

Answer: Haan, aap single-line (//) aur multi-line (/* ... */) comments likh sakte hain:

// This is a single-line comment
/* This is a 
   multi-line comment */

Q 18. Kya JavaScript external file ko dynamically remove kar sakte hain?

Answer: Haan, aap JavaScript ka use karke kisi bhi external script ko remove kar sakte hain:

let script = document.querySelector("script[src='script.js']");
script.remove(); // Remove the script dynamically

Q 19. External JavaScript file include karne ke baad agar changes karein toh live update kaise ho?

Answer: Agar aap kisi JavaScript file me change karte hain lekin browser latest version load nahi karta, toh cache ko bypass karne ke liye file name ke saath query string add karein:

<script src="script.js?v=2.0"></script>

Isme ?v=2.0 ek cache-busting technique hai jo browser ko force karega ki latest file load kare.

Q 20. External JavaScript ka SEO par kya impact padta hai?

Answer: Agar aap blocking JavaScript likhenge toh page ka rendering slow ho sakta hai, jo SEO ranking pe effect karega.
Best practice:
✔ JavaScript ko defer ke sath load karein
✔ CSS aur HTML ko optimize karein
✔ Lazy loading aur asynchronous execution use karein

25. HTML - JAVASCRIPT TUTORIAL

HTML JAVASCRIPT

Introduction to Scripting in Web Development

Inline JavaScript: Writing JavaScript Inside HTML

External JavaScript: Using a Separate JS File

Step 1: Create an External JavaScript File

Step 2: Include the JavaScript File in the HTML Document

Advantages of Using External JavaScript

JavaScript Event Handling

Common Events in JavaScript

Example: Event Handling in JavaScript

JavaScript Frameworks and Libraries

Best Practices for Writing JavaScript Code

Example

1. JavaScript file (script.js)

2. HTML file (index.html)

Advantages of External JavaScript

Example

Advantages of Internal JavaScript

Disadvantages of Internal JavaScript

Types of Event Handlers

1. Inline Event Handlers (HTML ke andar)

Example:

2. Internal Event Handlers (JavaScript ke andar)

Example:

3. Event Listeners (Best Practice)

Example:

Common Events in JavaScript

<noscript> Element in HTML

Example

Where to Use <noscript>?

Limitations of <noscript>

Default Scripting Language in HTML

1. JavaScript is the Default Scripting Language

Example (Without specifying language)

2. Old Method: Using language Attribute (Deprecated)

3. If You Want to Use Another Scripting Language

Conclusion

JavaScript FAQs

Q 1. External JavaScript kya hota hai?

Q 4. Kya ek HTML file me multiple external JavaScript files use ki ja sakti hain?

Q6. Kya external JavaScript files kisi bhi folder me rakhi ja sakti hain?

Q 7. External JavaScript ka use kyon zaroori hai?

Q 8. Kya External JavaScript file me HTML code likh sakte hain?

Q 9. Kya ek hi external JavaScript file multiple HTML pages me use ho sakti hai?

Q 10. External JavaScript ko head me ya body me include karna best hai?

Q 11. External JavaScript file ka size kitna hona chahiye?

Q 12. Kya ek hi <script> tag me multiple JavaScript files include ki ja sakti hain?

Q 13. Kya ek JavaScript file ke andar doosri JavaScript file ko import kar sakte hain?

Q 14. Kya External JavaScript ko dynamically load kar sakte hain?

Q 15. External JavaScript me variables global hote hain ya local?

Q 16. Kya External JavaScript ko async aur defer ke bina bhi use kar sakte hain?

Q 17. Kya External JavaScript file me Comments likh sakte hain?

Q 18. Kya JavaScript external file ko dynamically remove kar sakte hain?

Q 19. External JavaScript file include karne ke baad agar changes karein toh live update kaise ho?

Q 20. External JavaScript ka SEO par kya impact padta hai?

You may like these posts

Post a Comment

#buttons=(Accept !) #days=(20)

Contact form

1. JavaScript file (`script.js`)

2. HTML file (`index.html`)

`<noscript>` Element in HTML

Where to Use `<noscript>`?

Limitations of `<noscript>`

2. Old Method: Using `language` Attribute (Deprecated)

Q 12. Kya ek hi `<script>` tag me multiple JavaScript files include ki ja sakti hain?

Q 16. Kya External JavaScript ko `async` aur `defer` ke bina bhi use kar sakte hain?