Solved

JavaScript, formatting 3-char month, and basic HTML coding

Posted on 2014-09-25
9
192 Views
Last Modified: 2014-09-25
I'm trying to pull out a 3 month date value in JavaScript.

From this link (Apr 29, 8:20, third answer), I tried the basics but it's not working. So I need help with the HTML setup as well as verifying the actual date logic I'm using.

<HTML>
<HEAD>
<TITLE>My Test : </TITLE>
Date.prototype.monthNames = [
    "January", "February", "March",
    "April", "May", "June",
    "July", "August", "September",
    "October", "November", "December"
];

Date.prototype.getMonthName = function() {
    return this.monthNames[this.getMonth()];
};
Date.prototype.getShortMonthName = function () {
    return this.getMonthName().substr(0, 3);
};
</HEAD>
<BODY BGCOLOR="FFFFFF" LINK="000080" VLINK="000080"onLoad="return PRMI_OnLoad()">


// usage:
var d = new Date();
alert(d.getMonthName());      // "October"
alert(d.getShortMonthName()); // "Oct"

<P>Body of page</P>
</BODY>
</HTML>

Open in new window

0
Comment
Question by:Gadsden Consulting
  • 5
  • 3
9 Comments
 
LVL 30

Assisted Solution

by:Alexandre Simões
Alexandre Simões earned 250 total points
Comment Utility
You're missing the script tags around your code:
<HTML>
    
    <HEAD>
        <TITLE>My Test :</TITLE>
        <script>
            Date.prototype.monthNames = [
                "January", "February", "March",
                "April", "May", "June",
                "July", "August", "September",
                "October", "November", "December"];

            Date.prototype.getMonthName = function() {
                return this.monthNames[this.getMonth()];
            };
            Date.prototype.getShortMonthName = function() {
                return this.getMonthName().substr(0, 3);
            };
        </script>
    </HEAD>
    
    <BODY BGCOLOR="FFFFFF" LINK="000080" VLINK="000080" onLoad="return PRMI_OnLoad()">
        <P>Body of page</P>
        <div id="txtDate"></div>
        
        <script>
            var d = new Date(); 
            alert(d.getMonthName());
            
            alert(d.getShortMonthName());
        </script>
        
    </BODY>

</HTML>

Open in new window

0
 

Author Comment

by:Gadsden Consulting
Comment Utility
oh, oops, thanks ! gotta love HTML, mentors at the ready :-)
0
 
LVL 19

Assisted Solution

by:Daniel Van Der Werken
Daniel Van Der Werken earned 250 total points
Comment Utility
My version in case it helps you any, but Alexandre has the idea.

<HTML>
<HEAD>
<TITLE>My Test : </TITLE>
<script type="text/JavaScript">
Date.prototype.monthNames = [
    "January", "February", "March",
    "April", "May", "June",
    "July", "August", "September",
    "October", "November", "December"
];

Date.prototype.getMonthName = function() {
    return this.monthNames[this.getMonth()];
};
Date.prototype.getShortMonthName = function () {
    return this.getMonthName().substr(0, 3);
};
</script>
</HEAD>
<BODY BGCOLOR="FFFFFF" LINK="000080" VLINK="000080"onLoad="return PRMI_OnLoad()">

<script type="text/JavaScript">
// usage:
var PRMI_OnLoad = new function(){
var d = new Date();
alert(d.getMonthName());      // "October"
alert(d.getShortMonthName()); // "Oct"
}
</script>
<P>Body of page</P>
</BODY>
</HTML>

Open in new window

0
 

Author Comment

by:Gadsden Consulting
Comment Utility
ok, that worked, but a couple of questions . . .

- why is the script in the body below the para ?

- I'd like to say <P>Body of page, and this month is d.getShortMonthName</P>

- I know the very basics of <div>, but is it doing anything on my page ?
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:Gadsden Consulting
Comment Utility
Dan7el, thank you too !

also, you have the script in HEAD above the para, in contrast to Alexandre. What are the considerations here ?

Plus, as I said above, I would like to display on the screen:

"Body of page: and this month is September, abbreviation = SEP"
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 250 total points
Comment Utility
Well, putting the script at the end of the body allows you to safely interact with the HTML.
If from the script you need to interact with the HTML (like my next example) you have to be sure the HTML is already parsed.
<HTML>
    
    <HEAD>
        <TITLE>My Test :</TITLE>
        <script>
            Date.prototype.monthNames = [
                "January", "February", "March",
                "April", "May", "June",
                "July", "August", "September",
                "October", "November", "December"];

            Date.prototype.getMonthName = function() {
                return this.monthNames[this.getMonth()];
            };
            Date.prototype.getShortMonthName = function() {
                return this.getMonthName().substr(0, 3);
            };
        </script>
    </HEAD>
    
    <BODY BGCOLOR="FFFFFF" LINK="000080" VLINK="000080" onLoad="return PRMI_OnLoad()">
        <P>Body of page</P>
        <div id="txtDate">
            Body of page, and this month is <span id="mydate"></span>
        </div>
        
        <script>
            var d = new Date(); 
            document.getElementById('mydate').innerHTML = d.getMonthName();
        </script>
        
    </BODY>

</HTML>

Open in new window

As you can see there I'm manipulating the HTML, setting the content of the placeholder span with the month.
If you move this script block to the header or to the beginning of the body it will fail to find the mydate span.
0
 
LVL 30

Assisted Solution

by:Alexandre Simões
Alexandre Simões earned 250 total points
Comment Utility
Ah... and javascript cannot be "inlined"...
So things like <P>Body of page, and this month is d.getShortMonthName</P> are not possible.
0
 

Author Comment

by:Gadsden Consulting
Comment Utility
Alexandre,

ok, makes sense, thanks ! I became a newbie JS / HTML person about 6 years ago for a  short period, so I'm dusting off some cobwebs to reveal a newbie's knowledge . . .
0
 

Author Closing Comment

by:Gadsden Consulting
Comment Utility
great ! thank you both.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now