Interested in a challenge?

[LeeU]

As I update the Web pages over at JavaScript Source, I am also trying to update some of the scripts. I know that some of the scripters here like a challenge so, being that I myself am still learning, here is what I am proposing:

Using this thread, I would post a script from JSS that seems like it could be written more efficiency. Then one (or more) of the forum members could suggest a more efficient, workable way to write it and submit it here. I would add your name to the credits with a link to your Web site. I'm not talking about real complicated ones.

By doing this, it helps to raise the quality of the scripts and gives you credit and a link in return. In addition. it also would help other forum members to learn different ways of coding.

Do I have any takers? Suggestions, ideas, and comment are welcome.

[TheBearMay]

Sounds like fun to me. If I have time I'll probably bite on a few tidbits...

[LeeU]

Great! I'll wait for some others to reply before I start.

[gil davis]

I wouldn't mind looking at a few and helping out.

[Watts]

One of them is mine, and you're more than welcome to "update" it. It's a modified script of Ronnie's and since it's now 6+ years old it could prolly do with some revision.

[konithomimo]

I will give it a go while online . . . although that isnt much these days.

[Sheldon]

Yep Good idea!

[LeeU]

Great! It looks like this could be fruitful. I appreciate the input.

For starters, I have a pretty simple one (at least I think it's simple). This pulldown menu will automatically adjust the range of months so that the current month is at the top. The remaining months are placed in order after the current month. It seems like the script could be written better than using document.writeln. Maybe placing it in a DIV, perhaps. Well, anyway, have a go. Remember, just be sure to give me the name and link you want credit listed for (I'll try to keep track so you won't have to do it in the future). Also, feel free to add/change certain portions of these scripts. If they become completely different, I'll just post them as new instead of updated.

Here is the script:

function autoMonth() {
  var time = new Date();
  var month = time.getMonth();
  var date = month - 12;
  var realJavaScriptMonth = month;
  var future = month + 0;

  month = month + 1; /* Compensate for "January" being "0" */

  document.writeln ("<form><select><option value=\"\">Select Month");
  do {
      month = date;
      if (month >= 12) {
      month = month - 12;
    }
      if (month < 0) {
      month = month + 12;
    }
    date++;
    var dateName ="";

    switch (month) {
      case 0:
        dateName = "January";
        break;
      case 1:
        dateName = "February";
        break;
      case 2:
        dateName = "March";
        break;
      case 3:
        dateName = "April";
        break;
      case 4:
        dateName = "May";
        break;
      case 5:
        dateName = "June";
        break;
      case 6:
        dateName = "July";
        break;
      case 7:
        dateName = "August";
        break;
      case 8:
        dateName = "September";
        break;
      case 9:
        dateName = "October";
        break;
      case 10:
        dateName = "November";
        break;
      case 11:
        dateName = "December";
        break
    }

    month++;
    realJavaScriptMonth++;
    document.write ("<option value=\"" + realJavaScriptMonth + "\">" + dateName + "");
    realJavaScriptMonth++;
    }

  while (date < future)
  document.write ("</select></form>");
}

And it's called by this (obviously):

autoMonth();

[TheBearMay]

Well just converting it to use DOM:

function autoMonth() {
  var time = new Date();
  var month = time.getMonth();
  var date = month - 12;
  var realJavaScriptMonth = month;
  var future = month + 0;

  month = month + 1; /* Compensate for "January" being "0" */

  var newForm = document.createElement("form");
  var newSelect = document.createElement("select");
  var newOpt = document.createElement("option");
  var newTxt = document.createTextNode("Select Month");
  newOpt.appendChild(newTxt);
  newSelect.appendChild(newOpt);
  do {
      month = date;
      if (month >= 12) {
      	month = month - 12;
	   }
      if (month < 0) {      
      	month = month + 12;
    	}
      date++;
    	var dateName ="";

    switch (month) {
      case 0:
        dateName = "January";
        break;
      case 1:
        dateName = "February";
        break;
      case 2:
        dateName = "March";
        break;
      case 3:
        dateName = "April";
        break;
      case 4:
        dateName = "May";
        break;
      case 5:
        dateName = "June";
        break;
      case 6:
        dateName = "July";
        break;
      case 7:
        dateName = "August";
        break;
      case 8:
        dateName = "September";
        break;
      case 9:
        dateName = "October";
        break;
      case 10:
        dateName = "November";
        break;
      case 11:
        dateName = "December";
        break
    }

    month++;
    realJavaScriptMonth++;
	 newOpt = document.createElement("option");
	 newOpt.value=realJavaScriptMonth;
  	 var newTxt = document.createTextNode(dateName);
  	 newOpt.appendChild(newTxt);
	 newSelect.appendChild(newOpt);
    realJavaScriptMonth++;
    }
  while (date < future)
	newForm.appendChild(newSelect);
	document.getElementsByTagName("body")[0].appendChild(newForm);
}
window.onload = autoMonth;

[TheBearMay]

and then if we substitute an array for the switch..case:

function autoMonth() {
  var time = new Date();
  var month = time.getMonth();
  var date = month - 12;
  var realJavaScriptMonth = month;
  var future = month + 0;

  month = month + 1; /* Compensate for "January" being "0" */
  var dateName ="";
  var newForm = document.createElement("form");
  var newSelect = document.createElement("select");
  var newOpt = document.createElement("option");
  var newTxt = document.createTextNode("Select Month");
  newOpt.appendChild(newTxt);
  newSelect.appendChild(newOpt);
  var monthArray = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  do {
  	 month = date;
      if (month >= 12) {
      	month = month - 12;
	   }
      if (month < 0) {      
      	month = month + 12;
    	}
  	 date++;
    realJavaScriptMonth++;
	 newOpt = document.createElement("option");
	 newOpt.value=realJavaScriptMonth;
  	 var newTxt = document.createTextNode(monthArray[month]);
  	 newOpt.appendChild(newTxt);
	 newSelect.appendChild(newOpt);
    month++;    
    realJavaScriptMonth++;
    }
  while (date < future)
	newForm.appendChild(newSelect);
	document.getElementsByTagName("body")[0].appendChild(newForm);
}
window.onload = autoMonth;

[chug187]

Here's an implementation using the JavaScript DOM:

function autoMonth() {
	var months = new Array("January", "February", "March", "April", "May", "June", "July",
		"August", "September", "October", "November", "December");
	var curMonth = (new Date()).getMonth();

	// Create the form element.
	var form = document.createElement("form");
	document.body.appendChild(form);

	// Create the dropdown.
	var select = document.createElement("select");
	form.appendChild(select);

	// Add the "Select Month" default value.
	select.options[0] = new Option("Select Month", "");

	// Using j as an index to the select.options length,
	// add months, starting with the current month.
	var j = 1;
	for (var i=curMonth; i<12; i++) {
		select.options[j] = new Option(months[i], i);
		j++;
	}

	// Add the remaining months, starting with January.
	for (var i=0; i<curMonth; i++) {
		select.options[j] = new Option(months[i], i);
		j++;
	}
}

You're right - you generally shouldn't use document.write (or document.writeln) - since you're just writing out raw HTML. The preferred method is to use the DOM, using createElement() calls as per above.

Note also that you can just use a months names array, and access it via the index.

[gil davis]

I didn't understand how it would be used, so I went in a different direction altogether.

<form name="f1">
 <select name="s1">
  <option value="">Select Month
  <option value="0">January
  <option value="1">February
  <option value="2">March
  <option value="3">April
  <option value="4">May
  <option value="5">June
  <option value="6">July
  <option value="7">August
  <option value="8">September
  <option value="9">October
  <option value="10">November
  <option value="11">December
 </select>
</form>
<script type="text/javascript">
var dt = new Date();
var mo = dt.getMonth();
var ary = new Array();
for (i=1; i<=12; i++)
  {ary[i-1] = document.f1.s1.options[i];}
document.f1.s1.length = 1;
j = mo;
for (i=1; i<=12; i++)
  {document.f1.s1.options[i] = ary[j];
   j = (mo + i) % 12;}
</script>

Name: Gil Davis
Link: http://gil.davis.home.att.net

[LeeU]

Thanks guys, nice work. Just a few questions/observations:

@Bear: How would you implement it on the page? What you have locates it at the bottom. How could it be implemented within a form?

@Chugster: This looks great. Nice and compact. Let me ask you also, how would you implement it on the page, without using the script tag to call the function? How could it be implemented within a form?

@Gil: I'm not really sure what that one does.

[TheBearMay]

Easiest way is to give the form an ID and use that instead of creating the form.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function autoMonth() {
  var time = new Date();
  var month = time.getMonth();
  var date = month - 12;
  var realJavaScriptMonth = month;
  var future = month + 0;

  month = month + 1; /* Compensate for "January" being "0" */
  var dateName ="";
  var newSelect = document.createElement("select");
  var newOpt = document.createElement("option");
  var newTxt = document.createTextNode("Select Month");
  newOpt.appendChild(newTxt);
  newSelect.appendChild(newOpt);
  var monthArray = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  do {
  	 month = date;
      if (month >= 12) {
      	month = month - 12;
	   }
      if (month < 0) {      
      	month = month + 12;
    	}
  	 date++;
    realJavaScriptMonth++;
	 newOpt = document.createElement("option");
	 newOpt.value=realJavaScriptMonth;
  	 var newTxt = document.createTextNode(monthArray[month]);
  	 newOpt.appendChild(newTxt);
	 newSelect.appendChild(newOpt);
    month++;    
    realJavaScriptMonth++;
    }
  while (date < future)
  document.getElementById("myForm").appendChild(newSelect);
}
window.onload = autoMonth;
</script>
</head>

<body>
<form id="myForm">
</form>
</body>
</html>

[gil davis]

@Gil: I'm not really sure what that one does.

It just takes what is there in the HTML and rearranges it so that the current month is first followed by the rest.

The other codes are good examples of js creating html. Mine is an example of rearranging existing HTML. So if you already had the HTML code, you could just add the script (after the form tag, or in an onload handler) to reorder the months.