Who's Got Simple JavaScript Scripts For Me To Experiment With?

In My Humble Opinion
1

Unlike some of my recent threads, this is a little more personal and serious. I’m teaching myself some HTML/CSS/JS over here.

If you guys and girls have any simple scripts for me to copy and paste into my text editor of choice to mess around with, I’d appreciate you guys posting said script.

I’ve long believed that when it comes to certain things, if you want to learn about it, take it apart and mess around. Want to learn how a radio works? Buy a cheapie and take it apart and put it back together. Want to learn how automobile engines work, pop the hood and at least get familiar with your car’s engine.

So right now I’m just limited to whatever examples w3 Schools has for me, but would like to see what kind of simple scripts The Dopers can either cook up or already have on hand for some reason.

Any and all CSS and <div> elements would be welcome too.

Sure I’ve learned how to code/write some layouts with those, but I’ve not really see what someone is fully capable of doing with them.

Now I prepare for the bombardment of JS scripts and CSS and div layouts that The Dopers will lay upon me!

2

Unfortunately, the JavaScript link serves up a 404.

3

Ok, first question. Did you follow the tutorial? I’m pretty sure it has simple scripts in it, and they may even be connected to the Try It Yourself editor.

Past that point, I suggest you find a web page development tool which will generate scripts, that you can look at and play with. Virtually all of the scripts I have, and see, on-line are generated, and understanding the tool and methodology is more important than proficiency in the underlying language.

4

That’s not the best site from which to learn.

5

TriPolar: I’ve followed the HTML and CSS tutorials and have only touched on the JavaScript section and have gone through the early tutorials for scripted buttons but not much else.

Will do. Thanks for the tip.

ptr2void: Thank you for sharing that link. I had no plans on ordering a certificate (such certificates are admittedly laughable and suspiciously predatory of ignorant people). I’ll poke around the suggested reputable sources.

6

What I’ve done is poke around thrift stores and library book sales, where I can often find used programming books on many topics for $1.00 or $1.50 each. I have quite a thick stack of them, actually!

(I haven’t actually gotten too deep into a lot of those yet, so my own JS examples are just rather trivial programs mostly copied straight from the examples in the book.)

Not clear how beginner’s-simple or sophisticated an example you’re looking for. Here is a very simple beginner’s example, consisting of one HTML page that displays a form, and a JavaScript module that does some computation with the data that the user enters. No <div> or CSS here, though.

(Hope these don’t get mangled in the cut-and-pasting. But if they do, then fixing it is left as an Exercise for the Reader. :smiley: )

future_value.html :



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Future Value Calculator</title>
    <script type="text/javascript" src="future_value.js"></script>
  </head>

  <body>
    <noscript>
      <h2><font color="red">You probably ought to enable JavaScript!</font></h2>
    </noscript>
    <div id="content">
      <h1>Future Value Calculator</h1>
      <p>Enter the values below and click "Calculate".</p>

      <label for="investment">Monthly Investment:</label>
      <input type="text" id="investment" /><br />

      <label for="rate">Annual Interest Rate:</label>
      <input type="text" id="rate" />%<br />

      <label for="years">Number of Years:</label>
      <input type="text" id="years" /><br />

      <label for="futureValue">Future Value:</label>
      <input type="text" id="futureValue" disabled="disabled" /><br />

      <label> </label>
      <input type="button" id="calculate" value="Calculate" /><br />

    </div>
  </body>
</html>

future_value.js :



// future_value.js
// JavaScript for Future Value application
// Harris, Murach's JavaScript and DOM Scripting, Chapter 2.
// May 15, 2011

// $ function -- Standard thingy for most if not all js scripts:

var $ = function (id)  {
    return document.getElementById(id) ;
}
// Define functions here, including event handlers.

// calculate_click() :  "Calculate" button event handler.
// Get the input values, validate, and calculate the result.

var calculate_click = function()  {

    // Get the user entries from the first three text boxes,
    // and pre-init the result textbox to empty string:

    var investment = parseFloat( $("investment").value ) ;
    var annualRate = parseFloat( $("rate").value ) ;
    var years      = parseFloat( $("years").value ) ;
    $("futureValue").value = "" ;
    alert("future_value.js: calculate_click() event" +
          "

Investment = " + investment.toFixed(6) +
          "
Annual Rate = " + annualRate.toFixed(6) +
          "
Years = " + years.toFixed(6) +
          "

======================================") ;

    // Test all three inputs for validity:  All should be numbers,
    // and within reasonable ranges (positive, non-zero, and
    // up to some sensible maximum values):
    // @@@@@ T.B.D. @@@@@

    if ( 1 == 2 )  {
    }

    else  {    //  If all input values are valid, calculate the future value:
      var monthlyRate = annualRate / 12.0 / 100.0 ;
      var months = years * 12 ;
      var futureValue = 0.00 ;

      for ( i = 1 ;  i <= months ;  i++ )  {
          futureValue = ( futureValue + investment ) * ( 1.0 + monthlyRate ) ;
      }

      // Store the result into the fourth text box, rounded to two decimals:
      $("futureValue").value = futureValue.toFixed(2);
    }
}
window.onload = function()  {
//  alert("future_value.js: window.onload() event") ;
    $("calculate").onclick = calculate_click ;
    $("investment").focus() ;
}