Ivan Teoh

For track 2 on week 2, I basically need to read chapter 4 and 5 on Eloquent JavaScript.

Reflection

• It is tough to explain Objects and Arrays to my grandmother.
• If I would pick either bad code or a naughty browser for my best practice for errors, I would be bad code.

Homework

• Ex. 4.1: The solution for the cat problem talks about a ‘set’ of names. A set is a collection of values in which no value may occur more than once. If names are strings, can you think of a way to use an object to represent a set of names? Show how a name can be added to this set, how one can be removed, and how you can check whether a name occurs in it.
• Ex. 4.2: Write a function range that takes one argument, a positive number, and returns an array containing all numbers from 0 up to and including the given number. An empty array can be created by simply typing []. Also remember that adding properties to an object, and thus also to an array, can be done by assigning them a value with the = operator. The length property is automatically updated when elements are added.
• Ex. 4.3: split and join are not precisely each other’s inverse. string.split(x).join(x) always produces the original value, but array.join(x).split(x) does not. Can you give an example of an array where .join(" ").split(" ") produces a different value?
• Ex. 4.4: Write a function called startsWith that takes two arguments, both strings. It returns true when the first argument starts with the characters in the second argument, and false otherwise.
• Ex. 4.5: Can you write a function catNames that takes a paragraph as an argument and returns an array of names? Strings have an indexOf method that can be used to find the (first) position of a character or sub-string within that string. Also, when slice is given only one argument, it will return the part of the string from the given position all the way to the end. It can be helpful to use the console to ‘explore’ functions. For example, type "foo: bar".indexOf(":") and see what you get.
• Ex. 4.6: The date part, "died 27/04/2006: Black Leclère", is always in the exact same place of a paragraph. How convenient. Write a function extractDate that takes such a paragraph as its argument, extracts the date, and returns it as a date object.
• Ex. 4.7: The thing that extractMother does can be expressed in a more general way. Write a function between that takes three arguments, all of which are strings. It will return the part of the first argument that occurs between the patterns given by the second and the third arguments. So between("born 15/11/2003 (mother Spot): White Fang", "(mother ", ")") gives "Spot". between("bu ] boo [ bah ] gzz", "[ ", " ]") returns "bah". To make that second test work, it can be useful to know that indexOf can be given a second, optional parameter that specifies at which point it should start searching.
• Ex. 4.8: The formatDate function used by catInfo does not add a zero before the month and the day part when these are only one digit long. Write a new version that does this.
• Ex. 4.9: Write a function oldestCat which, given an object containing cats as its argument, returns the name of the oldest living cat.
• Ex. 4.10: Extend the range function from exercise 4.2 to take a second, optional argument. If only one argument is given, it behaves as earlier and produces a range from 0 to the given number. If two arguments are given, the first indicates the start of the range, the second the end.
• Ex. 4.11: You may remember this line of code from the introduction: print(sum(range(1, 10))); We have range now. All we need to make this line work is a sum function. This function takes an array of numbers, and returns their sum. Write it, it should be easy.

References

• /*#p2pu-Jan2011-javascript101*/
• JAVASCRIPT 101 – P2PU Week 2
• Planet Javascript101
• Douglas Crockford
• Eloquent Javascript

On track 1 week 2, we are continuing understanding JavaScript through Douglas Crockford’ video as below and chapter 3 on functions, from Eloquent Javascript.

Douglas Crockford: “The JavaScript Programming Language”/2 of 4 @ Yahoo! Video

Reflection

1. Why do languages provide the switch statement, when we can achieve the same thing with multiple if… elseif statements? Show one example of how you might use the switch statement.
   According to the presentation, switch statement have it’s own advantages. The switch value does not need to be a number. It can be a string. The case values can be expressions too.
2. What is encapsulation, and what do functions encapsulate? In simple words, encapsulation means information hiding. The functions encapsulate local variables and functions that are created in side the functions.
3. What is a pure function? Is the function show() provided in Eloquent Javascript a pure function? According to the book, the defining properties of pure functions are that they always return the same value when given the same arguments, and never have side effects. They take some arguments, return a value based on these arguments, and do not monkey around with anything else. The function show() is not a pure function as it is not self-sufficient.
4. What do we mean when we say a variable in a function is shadowing a top level variable? It means the local function variable have a same name with a top level variable. When looking up a variable inside a function, the local environment is checked first, and only if the variable does not exist there is it looked up in the top-level environment. This makes it possible for variables inside a function to ‘shadow’ top-level variables that have the same name.
5. A recursive function, must have some sort of an end condition. Why would we get a “out of stack space” error message if a recursive function does not have an end condition? According to the book, when a recursive function is called, control is given to the body of that function. When that body returns, the code that called the function is resumed. While the body is running, the computer must remember the context from which the function was called, so that it knows where to continue afterwards. The place where this context is stored is called the stack. This stack requires space in the computer’s memory to be stored. When the stack grows too big, the computer will give up with a message like “out of stack space” or “too much recursion”.
6. Reflect about the difference between object inheritance and class inheritance According to the presentation, some languages have classes, methods, constructors, and modules. JavaScript’s functions do the works of all of those. Instead of class inheritance, JavaScript has object inheritance. In other words for object inheritance is prototype inheritance. It accomplishes the same things, but differently. It offers greater expressive power. Instead of organizing objects into rigid classes, new objects can be made that are similar to existing objects, and then customized. Object customization is a lot less work than making a class, and less overhead, too. One of the keys is the object(o) function. The other key is function. The object(o) function makes a new empty object with a link to object to. Refer to the Douglas Crockford for more classical inheritance in JavaScript.
7. What is object augmentation, and how do we do it? According to the Douglas Crockford, in the static object-oriented languages, if you want an object which is slightly different than another object, you need to define a new class. In JavaScript, you can add methods to individual objects without the need for additional classes. This has enormous power because you can write far fewer classes and the classes you do write can be much simpler. New members can be added to any object by simple assignment, for example, myobject[name] = value;
8. There is a way to add a method to String, such as any new String we create will have that augmented method (this is a bit different from object augmentation). How would you do this? Using linkage.
9. What is garbage collection? According to JavaScript: The Definitive Guide, 4th Edition, JavaScript uses garbage collection to reclaim the memory occupied by strings, objects, arrays, and functions that are no longer in use. This frees you, the programmer, from having to explicitly deallocate memory yourself and is an important part of what makes JavaScript programming easier than, say, C programming. A key feature of garbage collection is that the garbage collector must be able to determine when it is safe to reclaim memory. Obviously, it must never reclaim values that are still in use and should collect only values that are no longer reachable; that is, values that cannot be referred to through any of the variables, object properties, or array elements in the program.
10. What is the difference between an array and an object? According to the presentation, array inherits from object. The indexes are converted to strings and used as names for retrieving values. Arrays, unlike objects, have a special length member. Arrays allows use of the traditional for statement. Only use for..in for objects and not arrays. The dot notation also should only use for objects and not arrays. Use objects when the names are arbitrary strings. On the other hands, use arrays when the names are sequential integers. We can’t use arrays as prototypes as the objects produced this way does not have array nature. It will inherit the array’s values and methods, but not its length. We can augment an individual array by assigning a method to it. This works as arrays are objects. We also can augment all arrays by assigning the methods to Array.prototype.

Homework

1. Exercises 3.1 from chapter 3 of Eloquent Javascript: Write a function called absolute, which returns the absolute value of the number it is given as its argument. The absolute value of a negative number is the positive version of that same number, and the absolute value of a positive number (or zero) is that number itself.
2. Exercises 3.2 from chapter 3 of Eloquent Javascript: Write a function greaterThan, which takes one argument, a number, and returns a function that represents a test. When this returned function is called with a single number as argument, it returns a boolean: true if the given number is greater than the number that was used to create the test function, and false otherwise.
   
3. Shown below is some code which does something useful. The function ‘iterateAndOperate’ is the one which accomplishes something useful. The remaining code helps this function. Try to understand what the function accomplishes and solve the problems in part a, b, and c. The code can be done inside the console in Javascript, or in the web browser. Please see this comment, for hints on how you may do it inside a web page(remember, HTML has special codes for spaces and newlines).
   • Use the function iterateAndOperate to draw an image which looks like this
     ++++@++++
     +++@@@+++
     ++@@@@@++
     +++@@@+++
     ++++@++++
   • Use the function iterateAndOperate to draw a triangle which looks like this
     *
     ***
     *****
     ***
     *
   • In your code which invokes iterateAndOperate() without any parameters, as shown. An Exception will be thrown. Catch the Exception show an Alert to the user with a user friendly error message.

References

• /*#p2pu-Jan2011-javascript101*/
• JAVASCRIPT 101 – P2PU Week 2
• Planet Javascript101
• Douglas Crockford
• Eloquent Javascript

This post is a reply for the Javascript: 101 Week 1 Track 1. Mainly answering questions for reflection and homework.

Reflection

• Java was not suitable to be embedded in a browser because it need to be typically compiled and run on Java Virtual Machine (JVM). On the other hand, JavaScript typically relies on a run-time environment.
• When using the parseInt() method, it is recommended to provide the radix as it stops at the first non-digit character and if the first digit is zero, it is allowed to interpret as octal constant, for example, parseInt("08") == 0.
• Type is a way to represent the data in computer memory. It is useful in writing programs as it can be keep in the way as we want efficiently.
• We lose precision when performing operations with decimal numbers in JavaScript because of the limitation of number representation in computer memory. It can be a problem when we are dealing money by dividing with odd number, such as 3.
• The following operation produces the given result 115 * 4 - 4 + 88 / 2 = 500 as multiplication and division are calculating first before addition and subtraction. After multiplication and division, the equation will be 460 - 4 + 44.
• The purpose of typeof 4.5 is to returning the type of 4.5 in string format, which is number in this case. On the other hand, typeof (typeof 4.5) will return string because typeof function is returning string type. There is not special type of data type in JavaScript.

Homework

Answer for exercises 2.1 – 2.6 from chapter 2 of Eloquent Javascript, please refer to Javascript: 101 Week 1 Track 2.

Example that shows a valid use of the ‘guard’ and ‘default’ operators in JavaScript.

References

• /*#p2pu-Jan2011-javascript101*/
• JAVASCRIPT 101 – P2PU Week 1
• Planet Javascript101

This post is a reply for the Javascript: 101 Week 1 Track 2. Mainly answering questions for reflection and homework.

Reflection

• Type is a way to represent the data in computer memory. It is useful in writing programs as it can be keep in the way as we want efficiently.
• We lose precision when performing operations with decimal numbers in JavaScript because of the limitation of number representation in computer memory. It can be a problem when we are dealing money by dividing with odd number, such as 3.
• The following operation produces the given result 115 * 4 - 4 + 88 / 2 = 500 as multiplication and division are calculating first before addition and subtraction. After multiplication and division, the equation will be 460 - 4 + 44.
• A backslash character in a String is to indicate the next character is special, escape character.
• The purpose of typeof 4.5 is to returning the type of 4.5 in string format, which is number in this case. On the other hand, typeof (typeof 4.5) will return string because typeof function is returning string type. There is not special type of data type in JavaScript.
• The variables that might be created in the browsers environment when it loads a page with JavaScript in it are document and window.
• Dear grandma, values are people, variables are house, and control flow is road that moving people from one house to another house.
• Functions are groups of code that can be used whenever we want. We need them whenever we want to use it in many places. It is to reduce man made mistake and our life easy.

Homework

Exercises 2.1

It is true. As (false || true) && !(false && true).

Exercises 2.2

Write a program that calculates and shows the value of 2¹⁰ (2 to the 10th power).

Exercises 2.3

With some slight modifications, the solution to the previous exercise can be made to draw a triangle.

Exercises 2.4

Rewrite the solutions of the previous two exercises to use for instead of while.

Exercises 2.5

Write a program to ask yourself, using prompt, what the value of 2 + 2 is. If the answer is “4″, use alert to say something praising. If it is “3″ or “5″, say “Almost!”. In other cases, say something mean.

Exercises 2.6

Add a while and optionally a break to your solution for the previous exercise, so that it keeps repeating the question until a correct answer is given.

Exercises 3.1

Write a function called absolute, which returns the absolute value of the number it is given as its argument. The absolute value of a negative number is the positive version of that same number, and the absolute value of a positive number (or zero) is that number itself.

Exercises 3.2

Write a function greaterThan, which takes one argument, a number, and returns a function that represents a test. When this returned function is called with a single number as argument, it returns a boolean: true if the given number is greater than the number that was used to create the test function, and false otherwise.

References

• /*#p2pu-Jan2011-javascript101*/
• JAVASCRIPT 101 – P2PU Week 1
• JavaScript 101 lite Week 1
• Planet Javascript101

Writing this post after watching the video below is the first task of signing up JavaScript 101. I knew about this video long time ago. Only today, I really pay 100% attention on what Yahoo! JavaScript Architect Douglas Crockford say in this video.

This post is mainly about what I learned from this video. Here there are in point form:

• Most of the JavaScript books are bad reference. He only recommended JavaScript: The Definitive Guide, Fifth Edition by David Flanagan, which is better reference.
• Key ideas: load and go delivery, loose typing, objects as general containers, prototype inheritance, lambda, and linkage through global variable.
• Value: numbers, strings, booleans, objects, null and undefined.
• numbers: only one number type, which means there is no integer type and no floating point type.
• NaN: it is a number. Remember that it does not equal to NaN.
• null: it isn’t anything.
• undefined: default value for variable, parameters
• Falsey value: false, null, undefined, “” (empty string), 0, NaN
• Truthy value: “0″, “false”, object
• All keywords are generally lower case.
• == and != can do type coercion, so better use === and !== which do not do type coercion
• Logical && is a guard operator. If first operand is truthy, then result is second operand, else result is first operand. For example, return a && a.member;
• Logical || is a default operator. If first operand is truthy, then result is first operand, else result is second operand. For example, var last = input || nr_items;
• Logical !! produces booleans value of truthy or falsey value. For example, !!”0″ is true
• Bitwise operators convert the operand to a 32-bit signed integer, and turn the result back into 64-bit floating point.

The second task is writing a simple JavaScript program which will print the sum of 2+2 and display the result in an alert window in the browser. I have to create an HTML page and put the JavaScript code within that page, so it executes when the page loads.

Reference

• JavaScript: 101
• JavaScript Basic 1
• Slides of this video available at http://yuiblog.com/assets/crockford/javascript.zip