Introduction to Client-Side Scripting

📘 Client-Side Scripting – Script Placed Inside Body Section

🔹 3.11 Introduction to Client-Side Scripting

🌐 What is Client-Side Scripting?

  • A client-side script runs on the user's web browser, not on the server.

  • Used to create interactive and dynamic web pages.

  • Examples: JavaScript, VBScript (JavaScript is most common).

🛠️ Why Use Client-Side Scripting?

  • Enhances user experience by making pages responsive and interactive.

  • Can perform tasks like:

    • Validating forms before submission

    • Displaying alert messages

    • Changing web content dynamically

    • Performing calculations without reloading the page

⚙️ JavaScript – The Most Popular Client-Side Language

  • Created to “make webpages alive”.

  • No compilation needed – written directly in HTML files.

  • Supported by all modern browsers (Chrome, Firefox, Edge, etc.).

  • Runs as soon as the page is loaded in the browser.

🧱 Limitations of HTML Alone

HTML is only a markup language, which:

  • Structures content using elements like <p>, <h1>, <img>, etc.

  • Cannot perform logic like:

    • Addition or subtraction

    • Conditional checks (if-else)

    • Loops (for, while)

    • User interactions

✅ Why Embed JavaScript in HTML?

By embedding JavaScript:

  • You can add logic and interaction directly inside the web page.

  • For example:

    <script>
  alert("Welcome to our website!");
</script>

📍Where is JavaScript Placed in HTML?

  • Typically inside the <script> tag.

  • Can be placed:

    • Inside the <head> section

    • Inside the <body> section (often preferred for interaction)

🧾 Example: Script Inside Body

<!DOCTYPE html>
<html>
<head>
  <title>Simple JavaScript</title>
</head>
<body>
  <h1>Welcome</h1>

  <script>
    let x = 10;
    let y = 20;
    let sum = x + y;
    document.write("Sum of x and y is: " + sum);
  </script>

</body>
</html>

💡 Key Benefits for Students

  • Helps understand basic programming logic.

  • Prepares for advanced subjects like Web Development, Computer Applications, or eCommerce systems.

  • JavaScript is beginner-friendly and widely used in jobs.

📌 Summary Points

Feature HTML JavaScript
Language Type Markup Scripting
Use Structure Logic/Interactivity
Executes Static Dynamic
Examples <p>, <h1> if, for, alert()
Browser Execution No Yes

📘 3.12 Scripting Language 

✅ What is a Script?

  • A script is a sequence of commands executed by a scripting engine.

  • Primarily used to make web pages dynamic (i.e., interactive and responsive).

  • Scripts are typically written in plain text and can be edited using a text editor.

🖥️ Scripting Languages in Web Development

  • Used to automate tasks on web pages.

  • Can be client-side (executed in browser) or server-side (executed on server).

⚙️ JavaScript: A Popular Scripting Language

JavaScript is widely used for client-side scripting and is supported by all modern browsers.

🔧 Inserting JavaScript into HTML:

JavaScript code is placed between <script> and </script> tags.

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

🔸 The type="text/javascript" attribute specifies the scripting language (though it's optional in modern HTML5).

🧠 Where to Place JavaScript in HTML?

1. Inside the <body> Section:

<!DOCTYPE html>
<html>
  <head><title>First</title></head>
  <body>
    <script type="text/javascript">
      // JavaScript statements
    </script>
  </body>
</html>

2. Inside the <head> Section:

<!DOCTYPE html>
<html>
  <head>
    <title>Second</title>
    <script type="text/javascript">
      // JavaScript statements
    </script>
  </head>
  <body></body>
</html>

ℹ️ JavaScript can also be placed in both <head> and <body> sections if needed.

📌 Best Practices:

  • ✅ Terminate each JavaScript statement with a semicolon (;) – helps avoid errors, especially in complex scripts.

  • ❗ Semicolon is not strictly required if each statement is on a new line, but it's recommended for clarity and compatibility.

📝 Summary:

Concept Description
Script Series of commands run by a scripting engine
Scripting Language Used for dynamic web content
JavaScript Popular client-side scripting language
<script> tag Used to include JavaScript in HTML
Placement in HTML Inside <head>, <body>, or both
Semicolon (;) Recommended to end JavaScript statements

3.13 Variables in JavaScript

🔹 What is a Variable?

  • A variable is a basic unit of storage used to store data in a JavaScript program.

  • It holds values that can change during the execution of the program.

🔹 Rules for Declaring Variables

A variable name in JavaScript must follow these rules:

  1. ✅ Must begin with a letter (a-z or A-Z), underscore _, or dollar sign $.

  2. ✅ Can include letters, digits (0-9), underscores (_), and dollar signs ($).

  3. ❌ Cannot start with a digit.

  4. ✅ Case-sensitive: sum ≠ SUM.

  5. ❌ Cannot contain spaces or special characters (e.g., @, #, !, &, etc.), except _ and $.

  6. ❌ Cannot use reserved JavaScript keywords like document, while, if, var, etc.

  7. ✅ Maximum length: Up to 255 characters.

🔹 Declaring Variables

Variables are declared using the var keyword (older way, still valid in many cases).

✅ Syntax:

var variablename; // declaration
var a, b, c; // multiple variables
var x = 10, y = 20; // with initialization

✅ Examples:

var a;        // declaring a variable
var x, y, z;  // multiple variable declarations
var p = 5, q = 10;  // declared and initialized

3.14 Data Types in JavaScript (Overview)

JavaScript supports different data types to store different types of values:

Data Type Description Example
Number Numeric values var age = 25;
String Text or characters var name = "John";
Boolean Logical values: true or false var isOpen = true;
Undefined Variable declared but not initialized var x;
Null Intentional absence of any value var z = null;
Object Collection of key-value pairs var person = {name: "Alice", age: 22};
Array Ordered collection of values var nums = [1, 2, 3];

✅ Do It Yourself

🔸 Define five correct variable names:

  1. userName

  2. _score

  3. $amount

  4. totalMarks

  5. age_42

🔸 Define five incorrect variable names:

  1. 123abc ❌ (starts with number)

  2. first name ❌ (contains space)

  3. user-name ❌ (contains hyphen)

  4. @value ❌ (special character not allowed)

  5. while ❌ (JavaScript keyword)

🔸 List Some Scripting Languages:

  • JavaScript

  • Python

  • PHP

  • Ruby

  • Perl

  • VBScript

  • Bash


Comments

Post a Comment

Popular posts from this blog

XII Science Journal XII Commerce Journal Mental Ability Grade 8 Foundation Batch XI Ch 3 Notes Class XII CSS Notes Introduction to Client-Side Scripting XI Internal Assessment 2024-25 Class XI IT Notes HTML MCQ Test Basic Computer MCQ Test Final Commerce SOP Allotment Chapter: E-Commerce and E-Governance MCQ Test XII Science Textbook E-Commerce and E-Governance (Que and Ans) Introduction to SEO (Que and Ans) XII Ch.5 Server-Side Scripting (PHP) Click here for Notes Click here for PHP Programs Chapter 1: Basics of Information Technology (Class XI) Chapter 2: Introduction to DBMS IT DEMO EXAM  Python Libraries
Read more