?
Solved

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

Posted on 2014-09-25
9
Medium Priority
?
214 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
9 Comments
 
LVL 30

Assisted Solution

by:Alexandre Simões
Alexandre Simões earned 1000 total points
ID: 40344008
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
ID: 40344036
oh, oops, thanks ! gotta love HTML, mentors at the ready :-)
0
 
LVL 20

Assisted Solution

by:Daniel Van Der Werken
Daniel Van Der Werken earned 1000 total points
ID: 40344048
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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 

Author Comment

by:Gadsden Consulting
ID: 40344072
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
 

Author Comment

by:Gadsden Consulting
ID: 40344085
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 1000 total points
ID: 40344165
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 1000 total points
ID: 40344169
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
ID: 40344273
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
ID: 40344277
great ! thank you both.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

771 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