Javascript

1. Find a few tutorials on the web for learning Javascript. You don't have to read them. Just make sure you know where you can go to learn what you need.



2. Play around with this page. It uses Javascript to implement that turtle program that you made in assignment 1. View the source of this page (Ctrl-U in most browsers). Save it to your local machine, along with these images:
       
   Study the code until you feel that you understand it reasonably well. Add comments to the code to help organize your understanding.
   
   Here are a few technical details worth noting:
   
   
   • Javascript is a dynamically typed language. It has no compiler to help you catch bugs. There is, however, a pretty decent debugger built into your browser. You will need to use it.
   
   
   
   • In Javascript, you do not declare members of an object. It just dynamically adds them when you set them to some value. So, each object may have a different number of member variables.
   
   
   
   • In Javascript, functions are first class objects. That means you can refer to a function with a member variable, and you can call it using the variable too.
   
   
   
   • The two lines that are not inside any function are executed immediately as the page is loaded into your browser.
   
   
   
   • The getElementById function returns an object that represents an element in the HTML DOM. This script deliberately comes after the <canvas> tag, so the line document.getElementById("myCanvas"); will succeed at finding it.
   
   
   
   • By convention, classes begin with a capital letter and methods begin with a lowercase letter. In Javascript, there are no classes, but a function whose name begins with a capital letter is intended to be called as a constructor for the Javascript equivalent of a "class".
     
     "prototype" is like a class object. All objects of a particular type refer to the same prototype object. So, when you add a method to the prototype object, it becomes accessible by all objects of that type. Essentially, I use prototype in this code to add methods to classes.
     
     tl;dr:
     
     "function Model() {" pretty much means "class Model {".
     
     "Model.prototype.update = function() {" pretty much means "method update() {".
   
   
   
   • The line, this.turtle.src = "turtle.png"; causes the browser to request the turtle.png image. However, it make take some time before that image actually arrives. Until then, the image will be blank.
   
   
   
   • This code uses "closures" in the calls to addEventListener and setInterval. Essentially, these calls expect simple functions, but I want to call class methods, so I pass a wrapper function that calls my method. These wrapper functions have access to the local variables because they retain a reference to the current stack frame, which keeps it alive even after the outer function returns.
   
   
   



3. Port your implementation of assignment 4 to Javascript.
   You do not need to have an AI. Your game should include Mario, tubes, fireballs, and Goombas.



4. Post it online. Also, please put a page named "index.html" in the same folder as this page, so visitors will be thwarted from obtaining a directory listing. E-mail a hyperlink to the grader.

FAQ:

1. Q: The page mentioned in step 2 doesn't work in my browser. What should I do?
   A: Do you have a really old browser? Try replacing all occurrences of "let" with "var". Does that fix it? If not, please contact me.



2. Q: Would you please post all the information we will need about Javascript here, so we don't have to use a search engine?
   A: No.



3. Q: That game is very simple. Could you post a more sophisticated one that demonstrates more capabilities?
   A: Okay, here's one.



4. Q: How would one determine the class of an object in Javascript?
   A: There are no classes in Javascript. You will have to implement your own way to keep track of class types. (For example, you might add a member variable storing a value that indicates the "type" of an object.)



5. Q: How does one do polymorphism in Javascript?
   A: Polymorphism requires classes. There are no classes in Javascript. You will have to do it without polymorphism.



6. Q: Is there a LinkedList type in Javascript?
   A: No. Use an Array.



7. Q: How would one remove the i^th element from an array in Javascript?
   A: arr.splice(i, 1);



8. Q: How do you detect right-click, since the browser intercepts right-clicks for its own purposes?
   A: See this.

   view.canvas.addEventListener(
   		"contextmenu",
   		function(event) {
   			event.preventDefault();
   			self.onRightClick(event);
   			return false;
   		},
   		false
   	);