JavaScript

Popup Window onClick:

<!DOCTYPE html>
<title>My Example</title>

 <input id="go" type="button" value="Open new window" onclick="window.open('http://noterring.blogspot.com/p/javascript.html','popUpWindow','height=500, width=400, left=100, top=100, resizable=yes, scrollbars=yes, toolbar=yes, menubar=no, location=no, directories=no, status=yes');">

  To See Output Copy The Whole Code And Past HERE



Popup Window Unobtrusive:

<!DOCTYPE html>
<title>My Example</title>

<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {

  // Put the button into a variable
  var e = document.getElementById("go");
  
  // Wait for user to click the button
  e.addEventListener("click", function() {
    
    // Get the URL from the user input
    var url = document.getElementById("url").value;
    
    // Do the popup window
    window.open(url,"popUpWindow","height=500, width=400, left=100, top=100, resizable=yes, scrollbars=yes, toolbar=yes, menubar=no, location=no, directories=no, status=yes");
    
  }, false);
  
});
</script>

<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<form name="popupForm" action="{action page}">
  <input name="url"  id="url" value="http://noterring.blogspot.com/p/javascript.html">
  <input name="go" id="go" type="button" value="Go">
</form>

 To See Output Copy The Whole Code And Past HERE


Timed Redirect onClick:

<!DOCTYPE html>
<title>My Example</title>

<input type="button" value="Go" onclick="window.setTimeout(function(){location.href = 'http://noterring.blogspot.com/p/javascript.html';}, 1500);">

 To See Output Copy The Whole Code And Past HERE




Timed Redirect Unobtrusive:

<!DOCTYPE html>
<title>My Example</title>

<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {

  // Put the button into a variable
  var e = document.getElementById("go");
  
  // Wait for user to click the button
  e.addEventListener("click", function() {
    
    var redirectURL = document.getElementById("url").value;
    var redirectDelay = document.getElementById("delay").value;
    
    // Do the timed redirect
    window.setTimeout(function(){
        location.href = redirectURL;
    }, redirectDelay);    
    
  }, false);
  
});
</script>

<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<form name="myForm" action="{action page}">
  <input name="url" id="url" value="http://noterring.blogspot.com/p/javascript.html">
  <input name="delay" id="delay" type="number" value="1500">
  <input name="go" id="go" type="button" value="Go">
</form>

 To See Output Copy The Whole Code And Past HERE




Refresh Page onClick:

<!DOCTYPE html>
<title>My Example</title>
<input type="button" value="Refresh Page" onclick="document.location.reload(true);">

 <!-- Test the refresh by outputting the time in milliseconds -->
<script>
  document.write(new Date().getTime()); 
</script>

  To See Output Copy The Whole Code And Past HERE




Refresh Page Unobtrusive:

<!DOCTYPE html>
<title>My Example</title>

<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {

  // Put the button into a variable
  var e = document.getElementById("go");
  
  // Wait for user to click the button
  e.addEventListener("click", function() {
        
        // Refresh current page
        document.location.reload(true); 
    
  }, false);

  // Test the refresh by outputting the time in milliseconds
  document.getElementById("timestamp").innerText = new Date().getTime();  
  
});
</script>

<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<form name="myForm" action="{action page}">
  <input name="go" id="go" type="button" value="Refresh">
</form>
<p><span id="timestamp"></span> milliseconds since midnight, January 1, 1970.</p>

 To See Output Copy The Whole Code And Past HERE


Refresh Page Automatically:

<!DOCTYPE html>
<title>My Example</title>

<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {

    // Do the automatic refresh
    window.setTimeout(function(){
        document.location.reload(true);
    }, 3500);    

  // Test the refresh by outputting the time in milliseconds
  document.getElementById("timestamp").innerText = new Date().getTime();  
  
});
</script>

<p><span id="timestamp"></span> milliseconds since midnight, January 1, 1970.</p>

 To See Output Copy The Whole Code And Past HERE



Alert Box onClick:

<!DOCTYPE html>
<title>My Example</title>

<input type="button" value="Click me" onclick="alert('Thanks... I feel much better now!');">

 To See Output Copy The Whole Code And Past HERE


Alert Box Unobtrusive:

<!DOCTYPE html>
<title>My Example</title>

<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {

  // Put the button into a variable
  var e = document.getElementById("go");
  
  // Wait for user to click the button  
  e.addEventListener("click", function() {
  
      // Do the alert box
      alert("Thanks... I feel much better now!");
      
  }, false);
  
});
</script>

<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<form name="myForm" action="{action page}">
  <input id="go" type="button" value="Click me">
</form>

 To See Output Copy The Whole Code And Past HERE




Confirmation Box onClick:

<!DOCTYPE html>
<title>My Example</title>

<input id="go" type="button" value="Click me" onclick="confirm('Are you sure?');">

 To See Output Copy The Whole Code And Past HERE



Confirmation Box Unobtrusive:

<!DOCTYPE html>
<title>My Example</title>

<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {

  // Put the button into a variable
  var e = document.getElementById("go");
  
  // Wait for user to click the button  
  e.addEventListener("click", function() {
      confirm("Are you sure?");
  }, false);
  
});
</script>

<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<form name="myForm" action="{action page}">
  <input id="go" type="button" value="Click me">
</form>

 To See Output Copy The Whole Code And Past HERE


Jump Menu with Conditional Confirmation Box Unobtrusive:

<!DOCTYPE html>
<title>My Example</title>

<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {

  // Put the drop down into a variable
  var e = document.getElementById("jumpmenu");
  
  // Wait for user to select an option
  e.addEventListener("change", function() {
  
      // Put the selected value into a variable
      selectedURL = this.options[this.options.selectedIndex].value;
      
      // Check that the value is not null
      if (this.value != "null") {
      
        // Display the confirm box and put the response into a variable
        var confirmLeave = confirm("Are you sure?");
        
        // If user clicked "OK"
        if (confirmLeave==true) { 
        
          // Load the selected URL
          document.location.href = selectedURL; 
        }
        // If user clicked "Cancel"
        else { 
          return false;
        }
      }     
      
  });
  
});
</script>

<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<form name="navForm" action="{action page}">
  <select name="jumpmenu" id="jumpmenu">
    <option>Jump to...</option>
    <option value="http://noterring.blogspot.com/p/html.html">HTML</option>
    <option value="http://noterring.blogspot.com/p/css.html">CSS</option>
    <option value="http://noterring.blogspot.com/p/javascript.html">JAVASCRIPT</option>
  </select>
</form>

 To See Output Copy The Whole Code And Past HERE


Basic Prompt - onClick:

<!DOCTYPE html>
<title>My Example</title>

<input id="go" type="button" value="Click me" onclick="prompt('What is your name?', 'Homer');">

 To See Output Copy The Whole Code And Past HERE


Basic Prompt Unobtrusive:

<!DOCTYPE html>
<title>My Example</title>

<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {

  // Put the button into a variable
  var e = document.getElementById("go");
  
  // Wait for user to click the button
  e.addEventListener( "click", function() {

    // Do the prompt and save user input to a variable
    var name = prompt("What is your name?","Homer");
    
    // Write out the user's input
    document.getElementById( "msg" ).innerText = name;

  }, false);
  
});
</script>

<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<input id="go" type="button" value="Click me">
<p id="msg"></p>

 To See Output Copy The Whole Code And Past HERE


Conditional Prompt Unobtrusive:

<!DOCTYPE html>
<title>My Example</title>

<script>
document.addEventListener("DOMContentLoaded", function(event) {

  var e = document.getElementById("go");
  
  e.addEventListener( "click", function() {

    var name=prompt("What is your name?","Homer");
    if ( name!=null && name!="" ) {
      output = "Well " + name + ". You seem very daring!";
      }
    else {
      output = "Hey, I asked you your name!";
      }
    
    document.getElementById( "msg" ).innerText = output;

  }, false);
  
});
</script>

<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<form name="myForm" action="{action page}">
  <input id="go" type="button" value="I dare you to click me!">
</form>
<p id="msg"></p>

 To See Output Copy The Whole Code And Past HERE



"Print this Page" onClick:

<!DOCTYPE html>
<title>My Example</title>

<input id="go" type="button" value="Print this Page" onclick="window.print();">

 To See Output Copy The Whole Code And Past HERE


"Print this Page" Unobtrusive:

<!DOCTYPE html>
<title>My Example</title>

<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {

  // Put the button into a variable
  var e = document.getElementById("print");
  
  // Wait for user to click the button
  e.addEventListener("click", function() {
      window.print();
  }, false);
  
});
</script>

<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<form name="myForm" action="{action page}">
  <input id="print" type="button" value="Print this Page">
</form>

 To See Output Copy The Whole Code And Past HERE


Current Date/Time:

<!DOCTYPE html>
<title>My Example</title>


<time id="msg"></time>

<script>
  document.getElementById("msg").innerHTML = Date();
</script>

 To See Output Copy The Whole Code And Past HERE


Current Date/Time Locale String:

<!DOCTYPE html>
<title>My Example</title>


<time id="msg"></time>

<script>
  document.getElementById("msg").innerHTML = new Date().toLocaleString();
</script>

 To See Output Copy The Whole Code And Past HERE


Current Date/Time - Locale String with Locale :

<!DOCTYPE html>
<title>My Example</title>

<script>
  // Put current date into a variable 
  var date = new Date();
  
  // Some locale examples
  document.open();
  document.write(
    "<p>" + date.toLocaleString('en-US')
    + "<p>" + date.toLocaleString('en-GB')
    + "<p>" + date.toLocaleString('en-AU')
    + "<p>" + date.toLocaleString('en-NZ')
    + "<p>" + date.toLocaleString('th')
    + "<p>" + date.toLocaleString('cs')
    + "<p>" + date.toLocaleString('de')
    + "<p>" + date.toLocaleString('af')
    + "<p>" + date.toLocaleString('el')
    + "<p>" + date.toLocaleString('da')
    + "<p>" + date.toLocaleString('ko')
    + "<p>" + date.toLocaleString('ar')
    + "<p>" + date.toLocaleString('es')
    + "<p>" + date.toLocaleString('fr')
    + "<p>" + date.toLocaleString('vi')
    + "<p>" + date.toLocaleString('zh')
    + "<p>" + date.toLocaleString('ja')
    );
  document.close();
</script>

 To See Output Copy The Whole Code And Past HERE


Current Date MM/DD/YYYY:

<!DOCTYPE html>
<title>My Example</title>


<time id="date"></time>

<script>
  /* 
  Create a JavaScript Date object for the current date and time,
  then extract the desired parts, then join them again in the desired format.
  */
  var currentDate = new Date(),
      day = currentDate.getDate(),
      month = currentDate.getMonth() + 1,
      year = currentDate.getFullYear(),
      date = day + "/" + month + "/" + year;
      
  // Output the date to the above HTML element
  document.getElementById("date").innerHTML = date;
</script>

 To See Output Copy The Whole Code And Past HERE


Current Date DD/MM/YYYY:

<!DOCTYPE html>
<title>My Example</title>


<time id="date"></time>

<script>
  /* 
  Create a JavaScript Date object for the current date and time,
  then extract the desired parts, then join them again in the desired format.
  */
  var currentDate = new Date(),
      day = currentDate.getDate(),
      month = currentDate.getMonth() + 1,
      year = currentDate.getFullYear(),
      date = day + "/" + month + "/" + year;
      
  // Output the date to the above HTML element
  document.getElementById("date").innerHTML = date;
</script>

 To See Output Copy The Whole Code And Past HERE


Current Time 24hr:

<!DOCTYPE html>
<title>My Example</title>


<time id="time"></time>

<script>
  /* 
  Create a JavaScript Date object for the current date and time,
  then extract the desired parts, then join them again in the desired format.
  */
  var currentTime = new Date(),
      hours = currentTime.getHours(),
      minutes = currentTime.getMinutes();
  
  // Add a leading zero if needed
  if (minutes < 10) {
    minutes  = "0" + minutes; 
  }
  
  // Join the parts
  time = hours + ":" + minutes;
      
  // Output the result to the above HTML element
  document.getElementById("time").innerHTML = time;
</script>

 To See Output Copy The Whole Code And Past HERE


Current Time 12hr:

<!DOCTYPE html>
<title>My Example</title>


<time id="time"></time>

<script>
  /* 
  Create a JavaScript Date object for the current date and time,
  then extract the desired parts, then join them again in the desired format.
  */
  var currentTime = new Date(),
      hours = currentTime.getHours(),
      minutes = currentTime.getMinutes();
  
  // Add a leading zero if needed
  if (minutes < 10) {
    minutes  = "0" + minutes; 
  }

  // Add suffix and adjust hours for 12hr time if required
var suffix = "AM";
if (hours >= 12) {
    suffix = "PM";
    hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}

  // Join the parts
  time = hours + ":" + minutes + " " + suffix;
      
  // Output the result to the above HTML element
  document.getElementById("time").innerHTML = time;
</script>

 To See Output Copy The Whole Code And Past HERE


Current Date Long Format(e.g. Saturday, November 26, 2016):

<!DOCTYPE html>
<title>My Example</title>


<time id="msg"></time>

<script>
  // Create a JavaScript Date object for the current date and time, and set the desired options.
  var date = new Date(),
      options = { weekday: "long", month: "long", day: "numeric", year: "numeric" };
  // Convert to locale string and add a locale and the options
  date = date.toLocaleString( "en-US", options );
  // Output the date to the above HTML element
  document.getElementById("msg").innerHTML = date;
</script>

 To See Output Copy The Whole Code And Past HERE


Current Date Short Format(e.g. Sat, Nov 26, 16):

<!DOCTYPE html>
<title>My Example</title>


<time id="msg"></time>

<script>
  // Create a JavaScript Date object for the current date and time, and set the desired options.
  var date = new Date(),
      options = { weekday: "short", month: "short", day: "numeric", year: "2-digit" };
  // Convert to locale string and add a locale and the options
  date = date.toLocaleString( "en-US", options );
  // Output the date to the above HTML element
  document.getElementById("msg").innerHTML = date;
</script>

 To See Output Copy The Whole Code And Past HERE


Nested "For" Loop:

<!DOCTYPE html>
<title>My Example</title>


<p id="msg"></p>

<script>
  // Set variables
  var output = "";

  // Outer loop
  for (i = 1; i <= 10; i++) {

      output += "<h1>" + i + " times table</h1>";
      output += "<ul>";

        // Inner loop
        for (j = 1; j <= 10; j++) {
          output += "<li>" + j + " x " + i + " = " + j * i;
      }

      output += "</ul>";

  }

  // Output results to the above HTML element
  document.getElementById("msg").innerHTML = output;
</script>

 To See Output Copy The Whole Code And Past HERE


Nested "While" Loop:

<!DOCTYPE html>
<title>My Example</title>


<p id="msg"></p>

<script>
  // Set variables
  var i = 1;
  var output = "";

  // Outer loop
  while (i <= 10) {

      output += "<h1>" + i + " times table</h1>";
      output += "<ul>";

        // Inner loop
        var j = 1;
        while (j <= 10) {
          output += "<li>" + j + " x " + i + " = " + j * i;
          j++;
      }
          i++;

      output += "</ul>";

  }

  // Output results to the above HTML element
  document.getElementById("msg").innerHTML = output;
</script>

 To See Output Copy The Whole Code And Past HERE


No comments:

Post a Comment

Hey, It's Been Grabbed

Subscribe to: Posts (Atom)