0

So I am trying to follow this book called "Head First: HTML5 Programming" and that means I am trying to learn JavaScript.

I am very used to OOP languages like Java and C# and JS is very new to me because of the whole prototyping aspect. The code below got two functions, that used to work when they were global. After I moved them into my object creation code however, it stopped working altogether.

It's probably a syntax error or perhaps logic error. But I can't seem to point it out myself any where as debugging is not something I've done in JavaScript yet.

Help would be greatly appreciated!

function makeMovie(title, genre, rating, showtimes) {
    var movie = {
        this.title: title,
        this.genre: genre,
        this.rating: rating,
        this.showtimes: showtimes

        getNextShowing: function() {
            var now = new Date().getTime();

            for (var i = 0; i < this.showtimes.length; i++) {
                var showtime = this.getTimeFromString(this.showtimes[i]);
                if ((showtime - now) > 0) {
                    return "Next showing of " + this.title + " is " + this.showtimes[i];
                }
            }
            return null;
        }

        getTimeFromString: function(timeString) {
            var theTime = new Date();
            var time = timeString.match(/(\d+)(?::(\d\d))?\s*(p?)/);
            theTime.setHours( parseInt(time[1]) + (time[3] ? 12 : 0) );
            theTime.setMinutes( parseInt(time[2]) || 0 );
            return theTime.getTime();
        }
    }
    return movie;
}

var movie1array = ["3:00pm", "7:00pm", "11:00pm"];
var movie2array = ["5:00pm", "9:00pm"];

var movie1 = makeMovie("Plan 9 from Outer Space", "cult classic", 2, movie1array);
var movie2 = makeMovie("Forbidden Planet", "classic sci-fi", 5, movie2array);

and here is the HTML page where I try to call the JavaScript:

<!doctype html>
<html>
    <head>
        <title>The Webville Theater</title>
        <script src="Movie.js"></script>
        <meta charset="utf-8">
    </head>
    <body>
        <script>
            var nextShowing = movie1.getNextShowing();
            document.innerHTML = nextShowing;
            nextShowing = movie2.getNextShowing();
            document.body.innerHTML = nextShowing;
        </script>
    </body>
</html>
OmniOwl
  • 5,477
  • 17
  • 67
  • 116
  • You need to create a new instance of the object; you forgot the 'new' keyword. Also, assuming movie is an object.. you forgot a couple of commas as well. – Daedalus Sep 08 '14 at 09:34
  • I read on w3c that using "new" is considered bad. – OmniOwl Sep 08 '14 at 09:38
  • With manually created objects, or with pre-defined objects? – Daedalus Sep 08 '14 at 09:41
  • Seems to be with pre-defined. – OmniOwl Sep 08 '14 at 09:41
  • 1
    Where on w3c did you read using new was bad? The only one I know who keeps claiming this is Douglass Crockford and he backs it up with faulty code but then goes on blaming JavaScript instead of the faulty code. Constructor functions, prototype and their use is explained here: http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 – HMR Sep 08 '14 at 13:25

1 Answers1

2

In an object, properties should not be preceded by 'this'. 'this' is used in function declaration. Each property / value pair is separated by a comma.

Simple exemple :

var myObj = {
    foo: 'bar',
    test: 'foobar',
    logFoo: function(){
        console.log( this.foo)
    }
}

myObj.logFoo(); // log : 'bar'

Your code :

function makeMovie(title, genre, rating, showtimes) {
    var movie = {
        title: title,
        genre: genre,
        rating: rating,
        showtimes: showtimes,

        getNextShowing: function() {
            var now = new Date().getTime();

            for (var i = 0; i < this.showtimes.length; i++) {
                var showtime = this.getTimeFromString(this.showtimes[i]);
                if ((showtime - now) > 0) {
                    return "Next showing of " + this.title + " is " + this.showtimes[i];
                }
            }
            return null;
        },

        getTimeFromString: function(timeString) {
            var theTime = new Date();
            var time = timeString.match(/(\d+)(?::(\d\d))?\s*(p?)/);
            theTime.setHours( parseInt(time[1]) + (time[3] ? 12 : 0) );
            theTime.setMinutes( parseInt(time[2]) || 0 );
            return theTime.getTime();
        }
    }
    return movie;
}

var movie1array = ["3:00pm", "7:00pm", "11:00pm"];
var movie2array = ["5:00pm", "9:00pm"];

var movie1 = makeMovie("Plan 9 from Outer Space", "cult classic", 2, movie1array);
var movie2 = makeMovie("Forbidden Planet", "classic sci-fi", 5, movie2array);
Damien
  • 3,915
  • 1
  • 17
  • 18
  • It helps a new user to explain an answer; just dumping code isn't always enough. On top of that, your edit makes this answer have incorrect syntax. – Daedalus Sep 08 '14 at 09:36
  • Could you please explain what you did? :) – OmniOwl Sep 08 '14 at 09:38
  • All in good time @Daedalus. Vipar in an object, properties should not be preceded by 'this'. 'this' is used in function declaration. Each couples' property / value is separated by a comma. – Damien Sep 08 '14 at 09:41
  • If and when you add those details... to the answer, not hidden in a comment, I'll change my vote. – Daedalus Sep 08 '14 at 09:46