UNIT-5
5.1 Scripting Language Introduction
A scripting language is a type of programming language that automates
processes and controls the behavior of software. Unlike compiled
languages, which need to be compiled into machine code, scripting
languages are interpreted directly at runtime. JavaScript, for
example, is a dynamic, high-level scripting language primarily used in
web development to create interactive web pages. It allows for easy
interaction between users and web pages by manipulating HTML and CSS
on the client-side.
5.1.1 Programming Language Vs Scripting Language
Programming Language: These are full-fledged languages that are
typically compiled to machine code and used to create applications.
Examples include C++, Java, and Swift. They are used to develop
software for a wide range of platforms, from desktop applications
to operating systems.
Scripting Language: A subset of programming languages used to
automate tasks or control other applications. Scripting languages,
such as JavaScript, Python, and Ruby, are often interpreted rather
than compiled, meaning the code is executed line by line, typically
within a browser or server environment.
The key difference lies in the compilation: programming languages
usually require a compilation step to convert source code into
executable machine code, whereas scripting languages are interpreted
directly by the runtime environment.
5.2 Client Side Scripting
Client-side scripting refers to the execution of code in the browser
on the user's device, as opposed to running it on a server. JavaScript
is the most widely used language for client-side scripting. It
enhances the user experience by allowing dynamic content changes,
real-time form validation, interactive animations, and handling
browser events like clicks or mouse movements. Since the code is
executed locally on the client’s device, client-side scripting reduces
the load on the server, making the process faster and more responsive.
5.3 Server-Side Scripting
Server-side scripting refers to the execution of scripts on a web
server, before sending the results to the client. This approach is
used for tasks such as interacting with databases, authenticating
users, and dynamically generating content based on user input. Server-
side scripting languages include PHP, Python, Ruby, and Node.js. These
languages generate the HTML or other content that is then served to
the user. Unlike client-side scripts, server-side scripts are hidden
from the user.🚀 End of Chapter 6 Notes
These sections cover the DOM and how it can be accessed and
manipulated using JavaScript, including style changes for HTML
elements. Let me know if you'd like to expand any part further!
5.4 Difference Between Client-Side Scripting
and Server-Side Scripting
The main difference between client-side and server-side scripting lies
in where the script is executed and the resources it can access:
Client-Side Scripting:
Executed on the client: The browser.
Uses client resources (like CPU, memory).
Faster for tasks like animation and validation.
Can interact with the DOM (Document Object Model).
Can be blocked by browser settings or disabled by users.
Server-Side Scripting:
Executed on the server.
Uses server resources (like CPU, storage).
Can interact with databases, manage sessions, and generate
dynamic content.
Cannot be seen or modified by the user.
Slower due to the need for communication between the client and
the server.
The primary choice between client-side and server-side scripting
depends on the complexity of the task and how much data needs to be
kept private or processed securely.
5.5 JavaScript Language
JavaScript is a versatile scripting language used primarily for
creating interactive web pages. It enables dynamic behavior, such as
the ability to validate forms, manipulate the DOM, create animations,
and interact with external data via APIs. JavaScript is supported by
all modern web browsers and runs in the background, often without user
interaction. Its flexibility and capabilities make it a core
technology of the web, alongside HTML and CSS.
JavaScript's functionality extends beyond web pages and includes
frameworks like Node.js for server-side development and tools for
building mobile apps. It can also be used to build desktop
applications, games, and even IoT (Internet of Things) devices.
5.6 JavaScript Guidelines
When writing JavaScript, adhering to best practices helps maintain
code quality and improves readability. Here are some general
guidelines:
Write clean, readable code: Use consistent indentation, comments,
and meaningful variable names.
Declare variables properly: Use let , const , or var to declare
variables, with const preferred for constants to prevent
reassignment.
Avoid global variables: Minimize the use of global variables to
prevent unexpected side effects.
Use strict mode: Use "use strict"; to enforce stricter parsing and
error handling in JavaScript.
Following these guidelines helps create maintainable and bug-free
code.
5.7 ECMAScript
ECMAScript is the standard on which JavaScript is based. It defines
the core syntax, keywords, and core functionality of JavaScript.
ECMAScript is developed and maintained by ECMA International, and its
specifications are updated periodically. Every version of JavaScript
is essentially an implementation of ECMAScript standards.
5.7.1 Difference Between JavaScript and ECMAScript
JavaScript: A high-level programming language derived from the
ECMAScript specification, used for web development to create
dynamic and interactive content.
ECMAScript: A specification that defines the core features and
syntax for scripting languages, including JavaScript. It provides
guidelines for developing languages but doesn't specify platform-
specific implementations like browser APIs.
JavaScript is an implementation of ECMAScript, and its latest version
is based on the ECMAScript 6 (ES6) or ECMAScript 2015 standard, which
brought major improvements such as classes, modules, arrow functions,
and template literals.
5.8 Data Types and Literals in JavaScript
JavaScript supports both primitive and reference data types:
Primitive types: Immutable types, such as Number , String , Boolean ,
Null , Undefined , Symbol , and BigInt .
Reference types: Mutable types, including Object , Array , Function ,
and more.
JavaScript data types can be divided into two categories:
1. Primitive Types: Store simple data and are immutable.
Number: Represents numeric values, like 42 or 3.14 .
String: Represents sequences of characters, like "hello" or
'world' .
Boolean: Represents true or false values.
Null: Represents an intentional absence of value.
Undefined: Represents an uninitialized variable.
Symbol: Represents a unique and immutable value.
BigInt: Represents large integers.
2. Reference Types: Store references to objects in memory.
Object: A collection of properties (key-value pairs).
Array: An ordered list of values.
Function: A block of code designed to perform a particular task.
5.9 JavaScript Implementation
JavaScript can be implemented in multiple ways:
Inline: Writing JavaScript code within the HTML document, inside
<script> tags.
External: Linking to an external .js file, keeping the HTML
document clean and modular.
<script src="script.js"></script>
External JavaScript is preferred for large projects, as it allows for
reusability across multiple pages.
5.10 External JavaScript
External JavaScript provides better separation of concerns. It allows
developers to organize their JavaScript code in separate files,
improving maintainability. When using external JavaScript files, it's
important to place the <script> tag just before the closing </body>
tag to prevent blocking the page's loading.
5.10.1 Variables
JavaScript variables can be declared using three keywords:
var : The old method of declaring variables; it has function-scoped
behavior.
let : A modern way to declare block-scoped variables, which can be
reassigned.
const : Declares a constant, which cannot be reassigned after
initialization.
5.10.2 Constant
Constants in JavaScript are variables whose values cannot be changed
once defined. Constants are defined using the const keyword. It's
important to use const for values that are meant to stay constant,
such as configuration values or mathematical constants.
const PI = 3.14159;
5.11 Introduction to Function
A function in JavaScript is a reusable block of code designed to
perform a particular task. Functions make code modular, easier to
understand, and promote reusability.
5.12 How to Define a Function?
Functions are defined using the function keyword followed by the
function name, parameters, and the block of code to execute. Functions
can also return values.
function greet(name) {
console.log("Hello, " + name);
}
greet("John");
5.13 Operators
Operators in JavaScript perform operations on variables and values.
These include:
Arithmetic Operators: + , - , * , / , % , ++ , --
Comparison Operators: == , === , != , !== , > , < , >= , <=
Logical Operators: && , || , !
Operators are used to perform calculations, comparisons, and logical
operations.
5.14 Operator Precedence
Operator precedence determines the order in which operators are
evaluated in an expression. For instance, multiplication has a higher
precedence than addition, so 2 + 3 * 4 will be evaluated as 2 + (3 *
4) .
5.15 Looping Statements
Loops allow for repeated execution of a block of code. JavaScript
provides several looping constructs:
For loop: Repeats a block of code a specific number of times.
While loop: Continues execution as long as the condition is true.
Do...while loop: Executes the code at least once, then repeats
while the condition is true.
5.16 Looping Through HTML Headers
JavaScript can loop through HTML elements, such as headers, to
interact with or modify them dynamically. For example, looping through
all <h1> tags and logging their content:
let headers = document.querySelectorAll("h1");
for (let i = 0; i < headers.length; i++) {
console.log(headers[i].innerText);
}
5.17 JavaScript Functions
Functions in JavaScript help break down complex problems into smaller,
manageable tasks. Functions can accept parameters, perform
calculations, and return values. They improve code readability and
reduce redundancy.
5.17.1 Advantage of JavaScript Function
Modularity: Functions encapsulate logic, making code easier to
test, debug, and maintain.
Reusability: Once a function is defined, it can be called multiple
times with different arguments.
Readability: Functions group related code together, making it
easier to understand.
5.18 Adding JavaScript to HTML Pages
JavaScript can be added to HTML in several ways:
1. Inline JavaScript:
<script>
alert("Hello, World!");
/script>
2. External JavaScript:
<script src="script.js"></script>
