Web development
HTML file that uses JavaScript to calculate the factorial of a number entered by the user:
<!DOCTYPE html>
<html>
<head>
<title>Factorial Calculator</title>
</head>
<body>
<h1>Factorial Calculator</h1>
<label>Enter a number:</label>
<input type="number" id="numInput">
<button onclick="calculate()">Calculate</button>
<p id="result"></p>
<script>
function factorial(num) {
if (num < 0) {
return -1;
}
else if (num == 0) {
return 1;
}
else {
return (num * factorial(num - 1));
}
}
function calculate() {
const num = parseInt(document.getElementById("numInput").value);
const result = document.getElementById("result");
if (isNaN(num)) {
result.innerHTML = "Please enter a valid number.";
} else {
result.innerHTML = `The factorial of ${num} is ${factorial(num)}.`;
}
}
</script>
</body>
</html>
In this HTML file, we define a form that asks the user to enter a number and a button that will call a JavaScript function to calculate the factorial of the entered number. We then define two JavaScript functions, factorial and calculate.
The factorial function is the same as in the previous example, and calculates the factorial of a given number using a recursive approach.
The calculate function gets the input value entered by the user using document.getElementById("numInput").value, and then checks if the input is a valid number using
'isNaN(num). If the input is not a valid number, it displays an error message to the user. If the input is valid, it calls the factorial function with the entered number and displays the result to the user using document.getElementById("result").innerHTML.
You can save this code as an HTML file and open it in your web browser to see the factorial calculator in action.
Here are examples of each type of CSS with accompanying HTML code:
Inline CSS Example:
Inline CSS styles are added directly to an HTML element using the style attribute.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: red;">This is a heading</h1>
<p style="color: blue;">This is a paragraph</p>
<div style="background-color: yellow;">This is a div</div>
</body>
</html>
In this example, the style attribute is used to add styles to the h1, p, and div elements.
Internal CSS Example:
Internal CSS styles are added to the head section of an HTML document using the <style> tag.
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
h1 {
color: red;
}
p {
color: blue;
}
div {
background-color: yellow;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<div>This is a div</div>
</body>
</html>
In this example, the <style> tag is used to add styles to the h1, p, and div elements.
External CSS Example:
External CSS styles are stored in a separate CSS file and linked to an HTML document using the <link> tag.
index.html:
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<div>This is a div</div>
</body>
</html>
styles.css
h1 {
color: red;
}
p {
color: blue;
}
div {
background-color: yellow;
}
In this example, the link tag is used to link to the styles.css file, which contains the styles for the h1, p, and div elements.
JavaScript Functions: Checking Whether a Number is Divisible by 3
<!DOCTYPE html>
<html>
<head>
<title>Divisible by 3</title>
<script>
function isDivisibleBy3(number) {
if (number % 3 === 0) {
return true;
} else {
return false;
}
}
function checkDivisibility() {
var number = document.getElementById("number").value;
if (isDivisibleBy3(number)) {
alert(number + " is divisible by 3.");
} else {
alert(number + " is not divisible by 3.");
}
}
</script>
</head>
<body>
<label for="number">Enter a number:</label>
<input type="number" id="number">
<button onclick="checkDivisibility()">Check Divisibility</button>
</body>
</html>
In this video, we will learn how to write a JavaScript program that checks whether a given number is divisible by 3 using functions. We will start by defining a function called isDivisibleBy3() that takes a number as input and returns true if the number is divisible by 3, or false otherwise.
We will then create another function called checkDivisibility() that retrieves the user input from a text box, calls the isDivisibleBy3() function to check whether the number is divisible by 3 or not, and displays a message to the user using an alert box.
Throughout the video, we will explain the logic behind the program and provide step-by-step instructions on how to write and test the code. We will also highlight the advantages of using functions in JavaScript, such as encapsulating logic, making it more modular and reusable, and improving the overall readability of the code.
By the end of the video, you will have a clear understanding of how to use JavaScript functions to check whether a given number is divisible by 3 or not. This will help you improve your JavaScript skills and make your code more efficient and maintainable.
Comments
Post a Comment