Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2019
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    New to javaScript and I am struggling help with array object

    I know I am new be gentle.

    I need to create another array abject to display the week days. I found this example bellow but I need it Today is Friday, the 27th day of June in the year 2019. instead of Today is the 27th day of June in the year 2019.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Lab 7-7</title>
    
    <script type="text/javascript">
    <!--
    
    // Create Date object
    var myDateObject = new Date();
    var myDay = myDateObject.getDate();
    
    
    var monthName = new Array();
    monthName[0] = "January";
    monthName[1] = "February";
    monthName[2] = "March";
    monthName[3] = "April";
    monthName[4] = "May";
    monthName[5] = "June";
    monthName[6] = "July";
    monthName[7] = "August";
    monthName[8] = "September";
    monthName[9] = "October";
    monthName[10] = "November";
    monthName[11] = "December";
    
    
    
    var today = new Date();
    var myYear = today.getFullYear();
    var myDate = today.getDate();
    
    var dayExt = "th";
    
    if ((myDate == 1) || (myDate == 21) || (myDate == 31)) dayExt= "st";
    if ((myDate == 2) || (myDate == 22)) dayExt = "nd";
    if ((myDate == 3) || (myDate == 23)) dayExt = "rd";
    
    var extDate = myDate + dayExt;
    
    // -->
    </script>
    </head>
    <body>
    <h4>Today is the
    <script type="text/javascript">
    <!--
    document.write(extDate + " day of ");
    document.write(monthName[today.getMonth()] + " in the year ");
    document.write(myYear + ".");
    
    // -->
    </script>
    </h4>
    </head>
    </body>
    </html>
    Last edited by vinyl-junkie; Jun 28th, 2019 at 04:30 AM. Reason: added code tags

  2. #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,968
    Thanks
    58
    Thanked 709 Times in 704 Posts
    That is some very old-fashioned JavaScript you are writing there. If you are studying a course and they are teaching you i that style I would recommend looking around for something a bit more modern.

    You should have a look at the MDN docs which are generally very thorough: https://developer.mozilla.org/en-US/...l_Objects/Date

    Basically, you set up an array of day names and access the index via .getDay()

    I made a couple of changes to your code to modernise it a little. Please be aware that document.write is frowned upon and not really used in production code except for highly specialised cases (of which this is not one).

    Also note that this can be more or less attained by the one-liner new Date().toDateString()

    It's pretty straightforward but feel free to ask questions

    Code:
    <body>
    <h4>Today is 
    <script>
    var monthName = ["January","February","March","April","May","June","July","August","September","October","November","December"];
    var dayName = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Saturday"];
    
    
    var today = new Date();
    var myYear = today.getFullYear();
    var myDate = today.getDate();
    var myDay = today.getDay();
    
    var dayExt = "th";
    
    if ((myDate == 1) || (myDate == 21) || (myDate == 31)) dayExt= "st";
    if ((myDate == 2) || (myDate == 22)) dayExt = "nd";
    if ((myDate == 3) || (myDate == 23)) dayExt = "rd";
    
    var extDate = myDate + dayExt;
    document.write(dayName[myDay] + ", the ");
    document.write(extDate + " day of ");
    document.write(monthName[today.getMonth()] + " in the year ");
    document.write(myYear + ".</h4>");
    document.write(new Date().toDateString());
    
    </script>
    </body>

  3. #3
    New to the CF scene
    Join Date
    Jun 2019
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thank you!

    Thank you so much for taking the time to help me! Yes, I am struggling through an online JavaScript class.

  4. #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,968
    Thanks
    58
    Thanked 709 Times in 704 Posts
    Well like I say, if that is the kind of code that your course is teaching you I would look around for another course. Any of these three things:
    Code:
    <script type="text/javascript">
    new Array();
    document.write()
    would warn a prospective employer that you either learnt JS a long time ago and never kept up with industry developments or that you learnt recently from a very outdated source.

    All three of them in the same script would be a very big red flag.

    MDN offers a comprehensive guide to learning JavaScript: https://developer.mozilla.org/en-US/...arn/JavaScript

    If you are looking for a more course-like format, I like the edx platform and note that the W3 consortium offers an intro to JavaScript course for free (or $99 with certification): https://www.edx.org/course/javascript-introduction-2

  5. #5
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,576
    Thanks
    5
    Thanked 517 Times in 504 Posts
    To be frank:

    Quote Originally Posted by xelawho View Post
    Well like I say, if that is the kind of code that your course is teaching you I would look around for another course.
    Is being VERY polite. Whatever "class" you're taking needs to be taken 'round back o' the woodshed and put down like Old Yeller.

    1) IF this is only run at pageload (which document.write is for) this isn't even client-side JavaScript's JOB. This should be done server-side.

    2) As mentioned, document.write is more 1999 than 2019

    3) Modulo could REALLY simplify your routine. The remainder of a divide by 10 would give you that final digit without extra dicking around for each and every one.

    Code:
    var dayExt;
    switch (myDate % 10) {
    	case 1: dayExt = 'st'; break;
    	case 2: dayExt = 'nd'; break;
    	case 3: dayExt = 'rd'; break;
    	default : dayExt = 'th'; break;
    }
    If I were to do this client side (again, I wouldn't!) just as a learning exercise, it would likely go more like this:

    The HTML:
    Code:
    <noscript>
    	<p class="warning">
    		This page requires JavaScript to display full date and time information.
    	</p>
    </noscript>
    <p id="jsDate"></p>
    You include a noscript to explain what/why there's a blank spot when scripting is off / disabled / blocked / otherwise told to bugger off. (Which IS a legitimate concern no matter how many JavaScript junkies scream otherwise). All that goes into the markup is the target element. I chose a P since you're outputting a natural language sentence. I'd have to see the rest of your page, but it seems unlikely that this text is the start of a subsection of the subsection started by the H3 preceding it; the MEANING of a H4. Lemme guess, chose the H4 for font-size and weight? Yeah, that's not how you do it or what HTML is for!

    For the script, I put it all into a SIF / IIFE (Self Instancing Function, more commonly these days known as Immediately Invoked Function Expression,,, which is really the same BS from a naming standpoint as Carlin's "Shell Shock" vs. "Post Traumatic Stress Disorder") This isolates the scope so any variables we use are invisible from and cannot be screwed with by other scripts on the page, and can be used to pass 'document' to itself so we can type a bit less. It also seems that passing document actually makes it faster the more code you have, since it's moved to the top of the variable lookup table -- NOT a concern here, but nice to have.

    I use createTextNode and appendChild to create the text directly on the DOM so that the script can be run right before </body> getting it out of the middle of the markup, and making it possible to place it into an external file where it belongs. (Static scripting in the markup should be avoided!)

    Hence:

    Code:
    (function(d) {
    
    	function formatDay(dayOfWeek) {
    		switch (dayOfWeek % 10) {
    			case 1: return dayOfWeek + 'st';
    			case 2: return dayOfWeek + 'nd';
    			case 3: return dayOfWeek + 'rd';
    		}
    		return dayOfWeek + 'th';
    	}
    
    	var
    		monthName = [
    			'January', 'February', 'March', 'April',
    			'May', 'June', 'July', 'August',
    			'September', 'October', 'November', 'December'
    		],
    		dayName = [
    			'Sunday', 'Monday', 'Tuesday', 'Wednesday',
    			'Thursday', 'Friday', 'Saturday'
    		],
    		today = new Date();
    		
    	d.getElementById('jsDate').appendChild(d.createTextNode(
    		'Today is ' + dayName[today.getDay()]  +
    		' the ' + formatDay(today.getDay()) +
    		' day of ' + monthName[today.getMonth()] +
    		' in the year of ' + today.getFullYear()
    	));
    	
    })(document);
    Untested, I may have a typo or two... but as you can see it eliminates a slew of the "variables for NOTHING", and with a little formatting and understanding of JavaScript we have a much cleaner syntax overall.

    Whatever that "class" is teaching you, FORGET IT!
    Last edited by deathshadow; Jun 29th, 2019 at 09:25 AM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  6. #6
    New to the CF scene
    Join Date
    Jun 2019
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the info, it is a 8 week course introducing JS. At this point I am just trying to get through even if the course is using "old methods"


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •