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) |
(→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) |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 42: | Line 42: | ||
</pre> | </pre> | ||
| − | ==Code which times when user input is received, and uses fade-in of text== | + | ==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== |
| − | < | + | <pre> |
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
| Line 118: | Line 118: | ||
} //The curly bracket shows this is the end of the loop; | } //The curly bracket shows this is the end of the loop; | ||
| − | outputDiv.innerHTML += "<br> | + | outputDiv.innerHTML += "<br>Yours truly, <br>                     John <br>" ; |
//Add some blank lines | //Add some blank lines | ||
| Line 126: | Line 126: | ||
//Run the function above to print several times. | //Run the function above to print several times. | ||
new_line(div1); | new_line(div1); | ||
| − | |||
| − | |||
| Line 141: | Line 139: | ||
showText(div2); // Fade-in effect for the second div | showText(div2); // Fade-in effect for the second div | ||
}, 3200); | }, 3200); | ||
| − | |||
| Line 152: | Line 149: | ||
</script> | </script> | ||
| − | |||
</body> | </body> | ||
</html> | </html> | ||
| + | </pre> | ||
==What Javascript can't do== | ==What Javascript can't do== | ||
Latest revision as of 16:01, 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 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.
