We will continue working on the Brain Age exercise on Wednesday and the code will be due on Monday, March2 @9am. Note that you do not need to draw the lines between the boxes. You only need to keep track of the last box the user clicked on, and keep the timer going.
Our next lectures finish talking about JavaScript in the browser and also cover the jQuery library. This is a JavaScript library which includes many utility functions that make it much easier to develop web applications. The videos you must watch by Monday, 2 March @9am are shown below (remember to click on the "view fullscreen" icon to get all the bits). You will also need to read over the documentation and tutorials on the jQuery website. Also, here are the lecture slides.
We now start to mix our JavaScript with DOM manipulation. For this exercise you will implement a version of one of the games from the Brain Age game (no I don't get a kickback if you buy one). Our version will be slightly different from the one shows in the screenshot; instead of drawing a ling from circle to circle, the user will click on every box in turn. The game follows these steps:
One thing you will need to use is the onclick attribute, which we have not discussed yet. Just note that you can add this attribute to an a as follows:
<a href="..." onclick="javascriptFunction()">.
For your next JavaScript you will finish the closures exercise and turn it in by Monday, 23 February @9am.
We will continue with the JavaScript exercise on Wednesday. Also, Pat has just informed me that there were problems with the server so people could not have logged in, as we saw. These problems have now been fixed and you should be able to log in.
The next weeks we will continue to practice JavaScript. It is important that you do all the homeworks, in order. I won't be taking points off for homeworks that are a few days late. I would much rather you take the time to learn the basics of JavaScript than try to move on to even more complicated topics. Note that the rest of this class is about JavaScript (mostly), and everything builds upon the basics we are learning now. Now, go have some fun with JavaScript!
The next lecture starts our coverage of JavaScript and DOM integration. You will learn most of the important function calls that you can make from JavaScript in order to modify the HTML document that is being display, or modify the browser window, or get information about the browser the user is using.
You must watch the lecture below by Monday, February 23. I also recommend you read about the Document Object Model and this DHTML tutorial. DHTML stands for Dynamic HTML and simply means JavaScript + HTML + CSS, or, using JavaScript to dynamically change your HTML and CSS.
Card(suit, number) constructor with data members suit and number. Make it so that it is impossible to change the suit and number of a card (yes, you will need to use closures). Create the following functions for this prototype:
toString(): returns a string representation of the card, for example: AD, 4C, 2D.equal(otherCard): returns true if this card equals otherCard.cmp(otherCard): returns -1 if the number of this card is less than otherCard, 1 if it is greater, and 0 if they are the same.Deck constructor with data members cards which is initially an empty array. It should also have the following member functions:
shuffle: shuffles the cards. Extra credit: what is the minimum number of swaps required to ensure that a deck is shuffled?addCards(x): takes as input x which can either be an array of Cards, or a Deck, or just a Card, and adds it to the deck.deal(): returns a card from the top of the deck and removes it from the deck.
Right now everyone uses standard applications such as eclipse, netbeans, aptana, bluefish, emacs, etc. to do their development. We call them IDEs for integrated development environments. However, this will likely change in the future. Bespin is an IDE that runs in the browser. Yes, completely in your browser, storing your files in the cloud. Bespin is written in 100% JavaScript and uses canvas, which we will be learning about later in class, for drawing graphics. The current version is still an alpha release but it is already amazing.
So, go sign up and play with it! In case you are still unsure about what I mean by web applications: Bespin is a web application. This class is about learning to write software such as Bespin.
Check out the Countdown to the Unix epoch clock. Unix time started at Jan 1, 1970 and the tomorrow at 6:31:30pm it will have been 1234567890 seconds since Jan 1, 1970. More importantly, fire up your firebug at take a look at how they did this with just a few simple lines of JavaScript code (notice that the code also lets one tweet about the time).
For our first JavaScript homework you will need to finish the four JavaScript exercise questions. This homework is due by Monday, 16 Feb, at 9am. During class on Monday we will start doing more complex JavaScript exercises.
Oh, and, one tip: I find it useful to have a printed JavaScript quick reference card so I can quickly look up the various functions that the language provides.
In this lecture we delve into the more advanced topics of arrays, objects, inheritance, and closures. These are advanced programming topics which, nonetheless, are central to the development of web applications. That is, you will need to understand these ideas if you are to become a good web apps developer. I also note that Java, C++, and C# do not have closures or implement prototype inheritance like JavaScript. Thus, these topics are probably new to you.
This week's lecture is broken up the two videos below, which you must watch by Monday, Feb. 16
We start with a few basic exercises to get you comfortable with writing, and debugging, short JavaScript programs.
isPalindrome(x) which returns true if and only if x is a string that is a palindrome, that is, it reads the same forward an backwards: A man, a plan, a canal, Panama!
Implement a function called chechISBN(id) which takes as input a string (id) and returns true if and only if the id is a valid ISBN number. Please read wikipedia section which gives you the equation for verifying the check digit in an ISBN number.
isNPI(x) which takes as input a 10-digit number x and returns true if that number is an NPI number. There procedure for checking if a number is an NPI number is described here, see the "Example of Check Digit Calculation" section. Note that the check bit is the last (10th) digit in the number.
createDeck which returns a JSON object that represents all the cards in a deck of cards. The object return should be an array with 52 object, each one of which should have a suit and a value property. The suits are: hearts, diamonds, clubs, spades. The values are, Ace, 2, 43, 4, 5, 6, 7, 8, 9, 10, Jack, Queen, King.
Posts
All Comments
