Javascript
Revision as of 17:01, 6 September 2024 by Eric Rasmusen (talk | contribs) (→Code which times when user input is received, and uses fade-in of text and has different style colors and fonts for differnet divisions of the webpage)
An Example of a Web Page that asks the user for input and then produces some output, and has different styles for different divisions of the output webpage
<h1>Printing "Happy Birthday, NAME INPUT" 8 Times</h1>
<div id="output"></div> <!-- This is where we will display the output we create below -->
<script> //Javascript has to go in a special script section.
// Prompt the user for his name
let name = prompt("What is your name?") ;
//We will this variable later.
let how_many=8;
function new_line(){
// Select the output div
let outputDiv = document.getElementById('output');
// Print Happy Birthday 8 times
for (let i = 1; i <= how_many; i++) {
outputDiv.innerHTML += "Happy Birthday, "+ name +"!<br>" ;
} //The curly bracket shows this is the end of the loop;
//Add some blank lines
outputDiv.innerHTML += " <br><br><br><br><br>" ;
} //The curcly bracket shows this is teh end of the function.
//Run the function and print happy birthday 8 times.
new_line();
// Prompt the user for a number of additional times to repeat happy birthday." how_many" is already declared, so no "let" is needed or allowed;
how_many = prompt("How many times would you like to see that?") ;
//Run the function again, after a .4 second delay.
let timer = setTimeout(new_line, 400);
</script>
Code which times when user input is received, and uses fade-in of text and has different style colors and fonts for differnet divisions of the webpage
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#first_div {
font-size: 24px;
color: #3498db;
opacity: 0; /* Start hidden */
transition: opacity 2s ease-in; /* Fade-in effect */
}
#second_div {
font-size: 36px;
font-family: "Brush Script MT", Brush Script Std, cursive;
color: red;
opacity: 0; /* Start hidden */
transition: opacity 2s ease-in; /* Fade-in effect */
}
#third_div {
font-size: 18px;
color: green;
opacity: 1; /* Start hidden */
transition: opacity 2s ease-in; /* Fade-in effect */
}
</style>
</head>
<body>
<div id="first_div"> </div>
<div id="second_div"> </div>
<div id="third_div"> </div>
<script>//Javascript has to go in a special script section.
//We will use these variables later.
let how_many=8;
let div1 = 'first_div'
let div2 = "second_div"
let div3 = "third_div"
// Function to make text visible with fade-in effect
function showText(Div_ID) {
const textElement = document.getElementById(Div_ID);
textElement.style.opacity = 1; // Set opacity to 1 to fade in
}
// Set a timeout to call the function after the delay of .1 seconds
setTimeout(function() { showText(div1); }, 100);
// Prompt the user for their name
let name = prompt('Type in your name.') ;
function new_line(Div_ID){
// Select the output div
let outputDiv = document.getElementById(Div_ID);
// Print 8 times
for (let i = 1; i <= how_many; i++) {
outputDiv.innerHTML += "Hello, "+ name +".<br>" ;
} //The curly bracket shows this is the end of the loop;
outputDiv.innerHTML += "<br>Yours truly, <br>                     John <br>" ;
//Add some blank lines
outputDiv.innerHTML += " <br><br>" ;
} //The curly bracket shows this is teh end of the function.
//Run the function above to print several times.
new_line(div1);
// Prompt the user for the number of additional times to repeat.
setTimeout(function(){
how_many= prompt("How about some more? Pick a number" );},
2750);
//Run the function again for div2, after a delay.
setTimeout(function(){
new_line(div2); // Run new_line for the second div
showText(div2); // Fade-in effect for the second div
}, 3200);
function f1(){
let outputDiv = document.getElementById(div3);
outputDiv.innerHTML += "That's all of them. But reload the page in your browser and we can do it again.<br>" ;
}
setTimeout(f1, 6000);
</script>
</body>
</html>
What Javascript can't do
- Javascript can't get rid of the "This page says" heading of windows it opens. This is a security anti-phishing feature, so people will know the question is coming from the Web, not from their apps.
- Javascript can't put italics, boldface, color, etc. into prompt windows.
