Difference between revisions of "Javascript"

From Rasmapedia
Jump to navigation Jump to search
(→‎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)
 
(5 intermediate revisions by the same user not shown)
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 7: Line 7:
  
  
−
//Javascript has to go in a special script section.
+
 
−
    <script>
+
    <script>        //Javascript has to go in a special script section.
−
// Prompt the user for their name
+
// Prompt the user for his name
 
             let name = prompt("What is your name?")  ;
 
             let name = prompt("What is your name?")  ;
  
Line 41: Line 41:
 
     </script>
 
     </script>
 
</pre>
 
</pre>
 +
 +
==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">
 +
<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> &nbsp &nbsp &nbsp &nbsp &nbsp  &nbsp &nbsp &nbsp &nbsp &nbsp      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>
 +
</pre>
 +
 +
==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.

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> &nbsp &nbsp &nbsp &nbsp &nbsp  &nbsp &nbsp &nbsp &nbsp &nbsp      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.
Retrieved from "https://www.rasmusen.org/rasmapedia/index.php?title=Javascript&oldid=7749"