Difference between revisions of "Javascript"
Jump to navigation
Jump to search
(→An Example of a Web Page that asks the user for input and then produces some output) |
|||
| Line 1: | Line 1: | ||
| − | ==An Example of a Web Page that asks the user for input and then produces some output== | + | ==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== |
<pre> | <pre> | ||
| Line 41: | Line 41: | ||
</script> | </script> | ||
</pre> | </pre> | ||
| + | |||
| + | ==Code which times when user input is received, and uses fade-in of text== | ||
| + | <!DOCTYPE html> | ||
| + | <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>With love, <br>                     Eric <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== | ==What Javascript can't do== | ||
Revision as of 16:58, 6 September 2024
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
<!DOCTYPE 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.
