PCET-NMVPM’s
Nutan College of Engineering and Research, Talegaon, Pune
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
Experiment No 5
Aim: Develop and demonstrate a HTML file that includes JavaScript script that uses functions for the
following problems:
a. Parameter: A string
Output: Length of the String
b. Parameter: A number
Output: The number with its digits in the reverse order
Theory:
Introduction:
In web development, HTML provides the structure of a webpage, while JavaScript adds interactive
behavior to it. A common learning exercise for beginners is to combine both technologies to perform
simple operations like computing the length of a string and reversing the digits of a number using
functions in JavaScript. These tasks help beginners understand how to handle user input, use JavaScript
functions, perform string and number manipulations, and respond with output on a web page or in alerts.
This exercise not only strengthens the understanding of JavaScript syntax and HTML form controls but
also lays a strong foundation for more advanced programming concepts.
Importance of JavaScript Functions in Web Pages
JavaScript functions are blocks of code designed to perform particular tasks and can be executed when
invoked. They allow code reusability, modularity, and cleaner syntax. In client-side web development,
functions are commonly used to respond to user inputs such as clicks, form submissions, or typed data.
JavaScript functions make websites dynamic and interactive, enabling them to respond to real-time events
without requiring a page reload.
Functions are particularly useful when building educational or utility-based web applications where
simple computations or data transformations are performed based on user inputs. For this reason, creating
a basic HTML file that includes JavaScript functions for processing a string and a number is a great
starting point.
Problem A –
String Parameter: Output the Length of the String
The first problem is to create a JavaScript function that accepts a string parameter and outputs the
length of that string.
In JavaScript, strings are sequences of characters enclosed within quotes, and the .length property is used
to count the number of characters in a string. This includes letters, numbers, whitespace, and symbols.
Steps Involved:
Create an HTML form or input field to allow the user to enter a string.
Write a JavaScript function that reads the string from the input field using
[Link]("id").value.
PCET-NMVPM’s
Nutan College of Engineering and Research, Talegaon, Pune
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
Use the .length property of the string to determine the number of characters.
Display the result using an alert() box or by updating a specific part of the web page using
innerHTML.
This simple function introduces learners to string manipulation and DOM (Document Object Model)
access in JavaScript.
Example:
javascript
CopyEdit
function getStringLength() {
var str = [Link]("inputString").value;
var length = [Link];
alert("Length of the string is: " + length);
}
This function reads the input value, calculates the length using length, and shows the result via an alert.
Problem B –
Number Parameter: Output Digits in Reverse Order
The second problem requires writing a JavaScript function that takes a number as input and returns the
number with its digits reversed.
In JavaScript, manipulating numbers can often be done by converting them into strings. Once a number is
treated as a string, it can be broken into characters using .split(), reversed using .reverse(), and joined
back using .join(). This process is efficient and demonstrates how string manipulation techniques can be
applied to numeric data.
Steps Involved:
Accept user input through an input field, which is captured as a string.
Convert the input string into an array using split("").
Reverse the array using reverse().
Join the reversed array back into a string using join("").
Display the reversed number using an alert or on the web page.
Important Consideration: While the input may be numeric, it's important to treat it as a string during
reversal to avoid mathematical operations or type coercion issues.
Example:
javascript
CopyEdit
function reverseNumber() {
var num = [Link]("inputNumber").value;
var reversed = [Link]("").reverse().join("");
alert("Reversed number is: " + reversed);
}
PCET-NMVPM’s
Nutan College of Engineering and Research, Talegaon, Pune
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
This function works correctly for both positive and negative integers, and it is a great exercise in type
conversion and string manipulation.
HTML Structure and Integration
To make these JavaScript functions usable, they must be embedded in an HTML file. HTML provides the
input fields where users can enter the string and number, and buttons that, when clicked, call the
appropriate JavaScript functions.
The HTML uses elements such as:
<input type="text"> to take user input.
<button onclick="functionName()"> to trigger the JavaScript function.
<script> tags to contain or link JavaScript code.
Each input field is assigned an id which is referenced in JavaScript to fetch the input data.
Basic HTML Integration:
html
CopyEdit
<input type="text" id="inputString">
<button onclick="getStringLength()">Get Length</button>
This example shows a simple text field and button that work with the getStringLength() function.
Similarly, the number field and reverse button can be constructed the same way.
Benefits of Using JavaScript for These Tasks
There are several advantages to solving such problems using JavaScript:
Interactivity: Users can receive instant feedback after submitting inputs.
Learning Tool: Great for beginners to understand core concepts such as DOM manipulation,
string methods, and event handling.
No Need for Page Reload: JavaScript works in the browser without needing server requests,
making it fast and user-friendly.
Basic Type Handling: Helps in understanding how JavaScript treats numbers and strings,
especially when converting between types.
Debugging Practice: Simple tasks help learners practice using browser developer tools to debug
and test JavaScript code.
Key Concepts Demonstrated
These tasks demonstrate a few foundational JavaScript concepts:
Functions: Reusable blocks of code executed on events.
DOM Access: Using [Link]() to read user inputs.
String Manipulation: Using length, split(), reverse(), and join().
Event Handling: Using onclick to call JavaScript functions in response to user actions.
Data Conversion: Treating numbers as strings for the purpose of reversing digits.
PCET-NMVPM’s
Nutan College of Engineering and Research, Talegaon, Pune
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
Practice Questions
1. What is a function in JavaScript?
2. How can JavaScript be used to interact with HTML input fields?
3. What is the use of the .length property in JavaScript?
4. Explain how you would reverse a number using JavaScript.
5. Why do we convert numbers to strings before reversing the digits?
6. What HTML element is used to take user input for a string?
7. How does [Link]() function in JavaScript?
8. What happens if the input field is empty when the function is called?
9. Which string methods are commonly used to reverse a number in JavaScript?
10. Mention two advantages of using JavaScript functions with HTML forms.
Conclusion
In conclusion, developing a simple HTML page that includes JavaScript functions for string length
calculation and digit reversal is a practical way to learn and apply basic web programming concepts. It
reinforces the understanding of functions, string operations, DOM interaction, and user input handling.
These are essential skills for any budding web developer. By working through such problems, students
become more comfortable with JavaScript syntax, logical thinking, and the fundamental building blocks
of interactive web applications. Moreover, this hands-on approach forms a bridge between theory and
practice, paving the way for more complex projects in the future.