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
Also as before, I also recommend you listen to Douglas Crockford himself. He is especially good in these Advanced JavaScript lectures. They are a good supplement to my lectures, especially if you want to really understand how the JavaScript interpreter works.
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.We will now learn to program in JavaScript. We will first learn all about the JavaScript programming language, in the next few lectures. Later on we will see how JavaScript can be used to manipulate XHTML documents (the DOM).
Most people "learn" JavaScript when they want to do some small animation in their website; they google for some JavaScript code and cut-and-paste something that they torture into fitting their needs. This works, it fixes your immediate problem, but it does not teach you JavaScript. The process eventually leads to a Frankenstein website with cobbled together pieces that is impossible to maintain. Of course, by then the original author has moved on to a higher-paying job elsewhere.
I do not want you to learn JavaScript this way. I think it is important to understand that JavaScript is a full-fledged complex object-oriented programming language. You should learn to use JavaScript wisely. JavaScript is poised to become the next major programming language: most new applications will be implemented in JavaScript. The language is no longer just for making simple animations, it is fast becoming and application development language (for example, see google docs).
The lectures you must watch by February 11 are below. The first one goes over the basic primitives of JavaScript. It is good for people who have very little or no programming experience. Also note that this video in in HD with a resolution of 1280x720. If you watch it embedded in the box below you are only getting a resolution of 640x360. To watch these lectures in their full resolution you must click on the "view in full screen mode" icon on the bottom right of the video.
There is also a version formatted for the iphone.
In the second lecture I just write a couple of short programs in JavaScript. It is an example of how to use your editor and firebug to write, test, and debug JavaScript programs.
You also need to go over this JavaScript tutorial or, even better, buy and read JavaScript: The Good Parts, by Douglas Crockford. That book is the best guide I have found to the JavaScript language, even if I don't see the value added by parsing diagrams he often adds. It does cover all the "good parts" of JavaScript and tells you which features of the language are best avoided. Unfortunatly, that book does not say anything about the DOM so it is not enough. You will also need a good reference book like JavaScript: The Definitive Guide. My lectures are based on both of these books.
Finally, if you are tired of listening to me, and I don't blame you, may I recommend you instead listen to Crockford himself. Douglas Crockford is a JavaScript Architect (that is his official title) at Yahoo!. He is the Yoda of JavaScript, teaching all the young JavaScript jedi the true ways of prototype programming. He has a series of lectures were he introduces JavaScript and later explains some of the most advanced ideas, like closures and prototype inheritance. I really enjoyed watching these. However, these lectures are targeted to an audience of experienced software developers, so he does not go into a lot of details. Still, they are worth watching just for the gossip bits he throws in. His introduction to JavaScript lecture is divided into four parts:
The required lecture for this week is Wednesday's guest lecture by Jason Beaird. However, I also found the video below which is a presentation by Steve Krug author of the excellent Don't Make Me Think.
The video emphasizes how you should always do user testing. This applies equally to web design and to web application development. You can either convince yourself that you know how your users will use your website (you are deluding yourself), or you can bring a few of your friends over and watch them as use your website/application. Your friends will always do some things that you did not expect. Always test!
In this exercise we will explore the power of CSS by changing the look of a plain XHTML without modifying any of its XHTML, only by using a style sheet. The exercise is inspired by css zen garden, but we will keep it simpler and build it step by step.
You will need to download css-exercise.html to your public_html. Open that file in your editor and you will see that it uses a style sheet file called mystyle.css. You will write that file. You cannot modify css-exercise.html, only add information to your mystyle.css in order to achieve the following effects:
quickSummary a separate box on the left such that all the rest of the text flows around it.quickSummary should stand out from the rest of the text. Change the text in there to italics and use a different font. Also, change the color to a really dark color and the text color to a light color (so we can read it!).preamble, supportingText, and participation are still boring. Change their titles to a sans-serif font. Change the background of the titles to a different color so the titles stand out. Spread out the letters in the titles. footer should not draw attention to itself. Make the text small, and make it flush with the right margin. Also, draw a horizontal line before the text. linklist is really a menu that should appear at the top-left of the page, move it there. Change its style so it is clearly recognized as a menu and the hyperlinks look like buttons that change color when the user hovers over them. 
Posts
All Comments
