Archive
HTML/CSS tips to reduce use of JavaScript
https://calendar.perfplanet.com/2020/html-and-css-techniques-to-reduce-your-javascript/
Great article with examples of uses of JacaScript and how they can be replaced with HTML or CSS. I had no idea these techniques were available
JS 101 Week 5: Event handling
2011-02-23
Reflection
Why is it better to use either trickling or bubbling of events? Why not just give the event to the node on which it was invoked?
There are two main reasons to use the trickling down or bubbling up of events. The first is performance. If we have 100 different images on a page and we want each one to respond to the hover event, it is very inefficient to create 100 different event listeners and attach them to each element. We can instead create a single hover event listener on the <div> which contains all of these pictures, and from within that event handler, determine which of its enclosed <img> elements was clicked. Additionally, when the event bubbles up the parent chain, the programmer is free to do interesting things like change the style of entire subtrees as a result of an event listener lower down in the hierarchy.
Can you think of one situation where you would want to prevent the browser from submitting a form after a user has clicked on the ‘submit’ button? How would you achieve this?
One example would be if we had some client side validation we wanted to take place before submitting a form to the server. For instance, we might want to validate that all the form fields are filled out, or that the values entered into these fields have a certain format (e.g. mm/dd/yyyy format for dates). When the form submit button is clicked and the validation routine takes place, if there is an error that function can call the preventDefault method on the corresponding event object.
Homework
12.1 of Eloquent Javascript
Write a function asHTML which, when given a DOM node, produces a string representing the HTML text for that node and its children. You may ignore attributes, just show nodes as . The escapeHTML function from chapter 10 is available to properly escape the content of text nodes.
Hint: Recursion!
function isTextNode(node) {
return node.nodeType == 3;
}
function asHTML(node) {
// we’re done recursing
if (node.childNodes.length === 0) {
if (isTextNode(node)) {
return node.nodeValue;
// This is unavailable in the jsFiddle environment
//return escapeHTML(node.nodeValue);
}
else {
return "<" + node.nodeName + ">";
}
}
var returnString = "<" + node.nodeName + ">";
for (var i = 0; i < node.childNodes.length; i++) {
returnString += asHTML(node.childNodes[i]) + "\n";
}
return returnString;
}
alert(asHTML(document.body));
12.2 of Eloquent Javascript
Write the convenient function removeElement which removes the DOM node it is given as an argument from its parent node.
function removeElement(node) {
node.parentNode.removeChild(node);
}
13.1 of Eloquent Javascript
Write a function called registerEventHandler to wrap the incompatibilities of these two models. It takes three arguments: first a DOM node that the handler should be attached to, then the name of the event type, such as “click” or “keypress”, and finally the handler function.
To determine which method should be called, look for the methods themselves ― if the DOM node has a method called attachEvent, you may assume that this is the correct method. Note that this is much preferable to directly checking whether the browser is Internet Explorer. If a new browser arrives which uses Internet Explorer’s model, or Internet Explorer suddenly switches to the standard model, the code will still work. Both are rather unlikely, of course, but doing something in a smart way never hurts.
// eventname is the name of the event without the ‘on’ prefix. e.g.
// to register for a click event, the eventname value should be "click"
function registerEventHandler(node, eventname, handler) {
// node has an attachEvent method; use that. This is how ie works
if (node.attachEvent) {
node.attachEvent("on" + eventname, handler);
}
// Mozilla model
else if (node.addEventListener) {
// false - use bubble up rather than trickle down
node.addEventListener(eventname, handler, false);
}
else {
node["on" + eventname] = handler;
}
}
JSFiddle example – when mouse enters element, it becomes bold. After it leaves, it becomes normal
Create an HTML page and some Javascript to allow a user to add n numbers.
First display a simple form with the question “How many numbers do you want to add (max is 10)”. The user should enter a number between 2 to 10 and click on a button in the form. You have to validate the answer. If the user has entered a correct value (between 2 and 10), then dynamically create a form with n text input fields and an “Add” button. Once the form is displayed the user will enter n numbers in the n input fields and when they click on the “Add” button, dynamically create a span element with the result. You will have to perform validation on the values entered in the input fields to make sure that they are numbers. If they are not numbers, display an alert dialogue with an error message.
JSFiddle solution
/*#p2pu-Jan2011-javascript101*/
JS 101 Week 4 – Intro to the DOM
JS 101 week 4 reflection and homework
Questions for reflection (please reflect on your blog and discuss in comments below):
There were two key innovations to the original (fetch-parse-flow-paint) linear workflow that the Mosaic browser used to render web pages. One allowed for a perception of faster rendering, and the other allowed for us to use AJAX. Explain both?
Early browsers had to wait for all the images on a page to be downloaded before they could complete their flow phase, as they needed to know how big the images were before they could lay out the page. The advance of Mosaic was to insert temporary placeholders for the images, layout the page, and display it to the user as soon as all the text was downloaded. As the images finished downloading asynchronously, the placeholder images were each swapped out, and the layout was recalculated and rerendered. While the overall time to finish completely rendering the page was higher (due to the increased number of flow/paint steps), the usability was much improved because people could begin reading the webpages almost immediately.
The second major change was that events could call scripts which in turn could cause the page to be rerendered (i.e. the flow algorithm would be re-run). This is the basis of dynamic HTML pages as we know them. See Blain Armstrong’s excellent blog post for more details.
What are the roles of ‘name’ and ‘id’ attributes in HTML tags? What is an appropriate use of both?
The video noted that ‘name’ and ‘id’ used to be synonymous, and in fact most of the browser implementations used them interchangeably. This has changed in recent years and now there are reasons to use one over the other.
The ‘id’ field must be the unique identifier for a given element, whereas the ‘name’ field is not necessarily unique. Name should be used to identify values in form data. The name you give a text field, for instance, determines the key=value pairing you’ll receive when the form is posted. For instance, if we have a text field whose name is “firstName”, then when the form is posted, we’ll have firstName=blahblahblah as one of the parameters.
Which pointers does each node in the DOM tree typically have?
Each node has a parent and an array of child nodes. The parent node is accessed via the parentNode property, and the array of children can be accessed by childNodes. Furthermore, there are explicit pointers to the first and last child, accessible via the firstChild and lastChild properties. Nodes also have pointers to their next sibling as well (via nextSibling pointer).
Given a node object from a DOM tree, how do we determine if it is a text node or a regular node?
We can access the nodeName property; if it’s “#text”, it’s a text node, else it’s a regular node. In code:
function isTextNode(node) {
return node.nodeName == "#text";
}
Homework:
Download the source for the web page ‘http://www.useit.com/about/nographics.html’. In the source page itself, write a Javascript function which counts the number of text nodes in the document and shows the count in an alert dialogue. You can choose how you want to trigger the function (through a button click, link click, or any other event).
All of the following answers use the following basic code:
// Performs a depth first tree traversal rooted at the given rootNode. This
// node and all of its child nodes will have visitorFunc called on it.
function dfs(rootNode, visitorFunc) {
var numChildren = rootNode.childNodes.length;
visitorFunc(rootNode);
for (var i = 0; i < numChildren; i++) {
var childNode = rootNode.childNodes[i];
dfs(childNode, visitorFunc);
}
}
var count = 0;
function isTextNode(node) {
return node.nodeName == "#text";
}
function countTextNodes(node) {
if (isTextNode(node)) {
count+= 1;
}
}
// After this call, count is set to the number of text nodes
dfs(document, countTextNodes);
Through onload
With a button launching the count
Change the example above so that instead of displaying the count in an alert dialogue, it is displayed in a span tag in the HTML page itself.
Add a link besides the button, such that when the link is click, it changes the style on the span tag to make it’s contents bold.
/#p2pu-Jan2011-javascript101/
JS 101 – Week 3
In Javascript, functions are first class objects. What does it mean to be a first class object?
A function can be used anywhere an object can be used; in particular, you can pass functions as method arguments. (We did this in last week’s homework by passing the print function into the iterateAndOperate method). This is in contrast to a language like Java where functions are not first class objects, and the programmer must use interfaces and anonymous classes to get around this problem. For instance, in Java, to delay the invocation of a function, you might do the following:
SwingUtilities.invokeLater(new Runnable() {
@Override
public void run() {
System.out.println("I was run!");
}
})
whereas in Javascript, you could do something like
invokeLater(function() { print("I was run") });
assuming there was an invokeLater function.
Functions and variables share the same namespace. What does this mean and what important implication does this have?
This means that you must take care in not defining variables in the global namespace that have the same name as a function. For instance,
// global variable
x = 5;
function x(args) {
alert(args);
}
// The global variable is shadowing the function name;
// the function is not called
x(5);
Douglas Crockford equates Javascript functions with Lambdas, and also mentions that they are a secure construct. Can you do some research and reflect on what he means by ‘secure construct’?
A lambda basically means that you can pass a function as an argument to another function; this is due to the aforementioned first class nature of functions. They are a secure construct because the scope of the functions is such that private variables in function A cannot be accessed by function B when A is passed into B. In other words,
function outer(func) {
// "undefined", since the ‘privateVariable’
// field is scoped only to the inner function.
return func.privateVariable;
}
function inner(a,b,c) {
var privateVariable = 25;
return a + ", " + b + ", " + c;
}
alert(outer(inner("cat","dog","bear")));
f
Can you explain the concept of a closure.
A closure means that an inner function continues to have access to variables defined inside of an outer function, even after the outer function has finished. I wrote an example you can view on jsfiddle.
What is the difference between a function and a method?
A method is a function that is bound to an object, and thus it has an implicit “self” reference.
In Javascript there is no implicit type checking of arguments passed to functions. This could lead to bugs if programmers are not careful about what they pass to functions. If you create a function, how would you protect it from well meaning but careless programmers?
You can do defensive checks within the function. For instance, if a method is supposed to take in a number, you could do the following:
function numericalFunction(x) {
if (typeof(x) != "number") {
throw("Expected numerical value for numericalFunction; got " + x);
}
// Proceed as normal
}
You can also use the arguments implicit variable in the function to check that the number of arguments the user passed in is equal to the number of arguments that the method expects.
Javascript functions have implicit access to something called this. this points to different things depending on how the function was created. Can you explain why we need this, and what it represents in different type of functions.
If a function is created globally, its this pointer will be to the DOMObject. If it’s created and bound to an object, the this pointer points to that object. The following illustrates this:
function f() {
return "f's this: " + this;
}
function nested() {
function inner() {
return "inner's this:" + this;
}
return inner();
}
// o is an object; add a method do it
var o = {};
o.f = f;
o.nested = nested;
o.newFunc = function() { return "newFunc's this: " + this; };
o.nestedFunc = function() {
var inner = function() {
return "nestedFunc's inner this: " + this;
}
return inner();
}
print(f());
print(nested());
print(o.f());
print(o.nested());
print(o.newFunc());
print(o.nestedFunc());
// prints
// f's this: [object DOMWindow]
// inner's this:[object DOMWindow]
// f's this: [object Object]
// inner's this:[object DOMWindow]
// newFunc's this: [object Object]
// nestedFunc's inner this: [object DOMWindow]
//
Note that only the non nested functions that have been bound to object o point to that object as opposed to the DOMWindow.
The reason we want the this pointer is to be able to introspect on the type and contents of the object that is calling the function. For instance, in my last assignment, I used the this variable to produce a nice representation of an object:
nick = {name:"Nick",age:23};
// This function returns a string representation of whatever
// is invoking it
function selfStringRep() {
var str = "";
for (var v in this) {
// This is not an inherited property
if (this.hasOwnProperty(v)) {
str += "’" + v + "’: " + this[v] +"\n";
}
}
return str;
}
Object.prototype.toString = selfStringRep;
print(nick.toString());
// prints
//’name’: Nick
//’age’: 23
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.
var cat_set = {};
// Add a cat
cat_set["Tigger"] = true;
// remove a cat
delete cat_set["Tigger"];
// Check if cat exists
cat_set["Frog"] != undefined
// Wrap it all up nicely: in an object with functions:
var cat_set = {};
cat_set.add_cat = function(cat) {
this[cat] = true;
}
cat_set.remove_cat = function(cat) {
delete this[cat];
}
cat_set.cat_exists = function(cat) {
return this[cat] != undefined;
}
cat_set.add_cat("Frisky");
// prints "true"
show(cat_set.cat_exists("Frisky"))
cat_set.remove_cat("Frisky");
// "false"
show(cat_set.cat_exists("Frisky"))
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.
// Assumes n >= 0
function range(n) {
var array = [];
for (var i = 0; i <= n; i++) {
array[i] = i;
}
return array;
}
4.3
splitandjoinare not precisely each other’s inverse.string.split(x).join(x)always produces the original value, butarray.join(x).split(x)does not. Can you give an example of an array where.join(" ").split(" ")produces a different value?
[" ", " ", " "].join(" ").split(" ");
// equals ["", "", "", "", "", ""]
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.
function startsWith(string, pattern) {
return string.slice(0,pattern.length) === pattern;
}
4.5
Can you write a function
catNamesthat takes a paragraph as an argument and returns an array of names?Strings have an
indexOfmethod that can be used to find the (first) position of a character or sub-string within that string. Also, whensliceis 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.
// The sentence is in the form "Blah blah: cat1, cat2, …, catN."
function catNames(paragraph) {
var colonIndex = paragraph.indexOf(":");
// Skip the colon and the following space
var catListString = paragraph.slice(colonIndex + 2);
return catString.split(", ");
}
/*#p2pu-Jan2011-javascript101*/
Javascript 101 Week 2: Functions, Encapsulation, Augmentation
Here’s the second week of homework/ reflection for the JS 101 course offered through Peer 2 Peer University. You can read my week one homework as well.
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.
Languages provide the switch statement for two main reasons. The first is that they are arguably more readable than multiple if/else if statements. Secondly, in some languages the compiler can optimize switch statements to be more efficient than the equivalent if/else if/else if construct. See the wikipedia article on Switch statements and Branch tables if you’re interested in the details.
Unfortunately, switch statements can be more error prone due to the ability to ‘fall through’ switch statements. Consider the following:
var BOY = 1;
var GIRL = 2;
var sentence = "Congratulations, it's a ";
var gender = GIRL;
switch (gender) {
case BOY:
sentence += "boy!";
// ERROR: no break statement; will fall through to girl case, ending
// with the sentence "Congratulations, it's a boy!girl!" if gender == BOY
case GIRL:
sentence += "girl!";
}
(Note: the above example is somewhat contrived, but forgetting to put a break at the end of a case is a very common error. Please be cognizant of it when using switch.)
Furthermore, programmers frequently forget to provide a default case to handle the case when none of the alternative options match. This frequently happens in Java with enumerations, since the compiler won’t mark this as an error:
enum Foo {
FOO_1,
FOO_2
}
Foo x = …;
switch (x) {
case FOO_1:
…
break;
case FOO_2:
…
break;
}
// Everything is fine. Later, the Foo enum is modified, and a new option is added
enum Foo {
FOO_1,
FOO_2,
FOO_3
}
With the addition of the new enumerated value, we can inadvertently fall through all the options without having executed any code. It is for this reason that I suggest you always provide a default case, even if all it does is throw an exception indicating that this should never happen. Trust me, you’ll find your bugs much earlier/easier this way.
What is encapsulation, and what do functions encapsulate?
Encapsulation is a programming technique to manage complexity and reduce duplication. If I am writing a geometric library I might have code to calculate the area of a circle in a few different places. If this happens once or twice, that might not be the end of the world. The problem is that it becomes very difficult to keep the code in sync in multiple places. A better solution is to break out the logic for calculating the area into a separate function, and then call that function from various places.
This has three main benefits.
- This encapsulation of the logic reduces code duplication. Code duplication is bad, as it means that any time you find a bug or want to change something, you need to remember to change it in multiple places. This is a maintenance headache and is extremely error prone.
- It makes the code easier to read by better expressing the intent of what you are trying to do and by hiding the details. For instance, instead of having a few lines of code to calculate some number, you can move these lines into a small helper function whose name expresses what the calculation does.
- By encapsulating the implementation details within a function, you can change the underlying algorithm without necessitating any client code to change. For instance, you might change a recursive function to an iterative approach for efficiency purposes, but as long as the method name and parameter list stay constant, dependent code is unaffected.
Encapsulation is extremely useful for all the above reasons. It allows the programmer to work at higher levels of abstraction, by hiding implementation details and allowing complex functionality to be built from multiple small, simple function calls.
What is a pure function? Is the function show() provided in Eloquent Javascript a pure function?
A pure function is one without side effects, i.e. a function in the mathematical sense of the word. (It doesn’t make use of variables other than those passed in to the function, so that you are always guaranteed to get the same output for the same input) show is not a pure function, as it has the side effect of writing to the screen.
What do we mean when we say a variable in a function is shadowing a top level variable?
If two variables have the same name, with one being in the global scope and one being in the function scope, the function scoped variable shadows that of the global, top level variable. This means that when we refer to the variable within the function, we access the function scoped variable rather than the top level variable. For instance,
// No var declaration; this is global
name = "Nick";
function greet() {
// This name variable shadows the global name declaration.
var name = "Kitty";
alert("Hi " + name);
}
// Says "Hi Kitty"
greet();
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?
A running computer program has memory space allocated both for a stack and for a heap. The heap consists of global or static variables and those things that must remain throughout the life of the program. The stack is where local variables reside. When we call a function, all of the local variables necessary for that function reside are pushed to the top of the stack. When a function exits, the space on the stack is able to be reclaimed.
When we have unbounded recursion, more and more variables are added to the stack. Since none of the functions are exiting, nothing is freed from the stack, and we soon run out of stack space. See the following screenshot and the accompanying article on Stack vs Heap allocation for more information
By the way, the fact that function calls are added to this stack is the reason that you can always replace a recursive function with an iterative solution using an explicit stack data structure. This is often not worth the added complexity, but it’s something to be aware of. (You can often replace a recursive algorithm with an iterative solution without using a stack, but the code can be much more complicated. Iterative solutions are often more efficient than recursive solutions, so as always it’s a tradeoff. See the recursion article on Wikipedia for more information.)
Reflect about the difference between object inheritance and class inheritance
Class inheritance, in a language like Java, means that an instance of a subclass inherits all of the members and methods of its superclass; in a sense it has its own ‘copies’. In object inheritance, we get the members and methods via a hidden pointer to another object. Thus changes in that linked object implicitly change the values in the other object.
What is object augmentation, and how do we do it?
Object augmentation is the act of adding fields or functions to an existing object. For instance,
var nick = {name:"Nick",age:23};
// Augment the nick object with a new field
nick.profession = "programmer";
// Remove that field
nick.profession = undefined
Why is this useful? Well it’s useful in the case I just presented, since you do not need to know the full set of fields in your object at initialization, but instead can add and remove them after the fact.
It’s a more powerful concept when combined with the idea of object prototypes. Inheritance is achieved in Javascript through a hidden pointer to another object. All objects have their pointer set to the Object.prototype, so we can augment all objects with a new method, simply by augmenting the Object.prototype object:
nick = {name:"Nick",age:23};
// This function returns a string representation of whatever
// is invoking it
function selfStringRep() {
var str = "";
for (var v in this) {
// This is not an inherited property
if (this.hasOwnProperty(v)) {
str += "'" + v + "': " + this[v] +"\n";
}
}
return str;
}
Object.prototype.toString = selfStringRep;
print(nick.toString());
// prints
‘name': Nick
‘age': 23
This is an incredibly powerful feature, and one that I could see being extremely useful.
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?
To augment all strings, we need to augment String.prototype, since all string instances inherit from this object. For instance, let’s add the ability to reverse any string.
function reverseString(str) {
var result = "";
for (var i = str.length - 1; i >= 0; i—) {
result += str.charAt(i);
}
return result;
}
String.prototype.reversed = function() { return reverseString(this); }
print("Nick".reversed());
// prints "kciN"
What is garbage collection?
Garbage collection refers to the fact that objects that go out of scope and no longer are referenced are automatically found and their memory is restored. Garbage collection is a feature that makes programmers’ lives easier, as we do not have to manually keep track of freeing the memory of each and every object as it goes in and out of scope. Languages like C do not have garbage collection, introducing a whole potential of errors for programmers. The most common error is a memory leak which might not immediately crash a program, but leads to an increasing amount of memory usage over time.
What is the difference between an array and an object?
While arrays are very similar to objects, there are at least 3 differences. (See jsfiddle for an illustrative example)
- Literal construction syntax
Arrays are formed by square brackets ([]), whereas general objects are formed with curly braces ({}) - “Secret link”
Arrays are automatically linked with Array.prototype; Objects are automatically linked with Object.prototype. This affects the fields available to an array vs an object; for instance, an array will have a length field that automatically reflects the size of the array, whereas a general object will not. Arrays also have methods defined on them, such as concat(), join(), pop(), etc. (see w3schools for more) - Objects’ entries can be accessed with dot syntax or using the bracket notation (e.g. o.name or o[“name”]); arrays can only be accessed with bracket notation (e.g. array[1])
Homework
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.
function abs(x) {
if (x < 0) {
return -x;
}
else {
return x;
}
}
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.
function greaterThan(x) {
return function(y) {
return y>x;
}
}
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).
var pictureArray = ["++++@++++", "+++@@@+++", "++@@@@@++", "+++@@@+++", "++++@++++"];
iterateAndOperate(pictureArray, print)
++++@++++
+++@@@+++
++@@@@@++
+++@@@+++
++++@++++
var triangleArray = ["*", "***", "*****", "***", "*"];
iterateAndOperate(triangleArray, print);
*
***
*****
***
*
try {
iterateAndOperate();
}
catch (err) {
alert("Error, you must provide an array and function argument to iterateAndOperate");
}
/*#p2pu-Jan2011-javascript101*/
Javascript 101 Week 1 Assignment
As I blogged previously, I am starting to learn Javascript via P2PU.org/Mozilla School of Webcraft. Here are my answers to the first week’s assignment.
Questions
The alliance of Netscape and Sun Microsystems did not use Java in the browser, because it was not suitable for that purpose. Why do you think Java was not suitable to be embedded in a browser?
I don’t think Java is suitable for embedding in a browser for a few reasons. Firstly, while the Just in time compiler does a great job at optimizing code that runs over and over again, there is a big cost to starting up the JVM, as it must load dozens if not hundreds of class files.
Furthermore, developing web applications in Java would be very slow for the developer too, as the code would have to be compiled into bytecodes before it could be run. Webapps written in Java have this problem already; if all the client side scripting were done in Java, this would be unbearable.
Furthermore, Java is not a good scripting language because it is too verbose, and the strict type checking is often overkill for simple scripts.
When parsing a String into a number using the parseInt() method, we are advised to always provide the radix. Why is it so strongly recommended?
We are advised to provide a radix, because Javascript stops parsing at the first nondigit number. If the number starts with 0, this makes Javascript believe the number is octal and that any character other than 0-7 is invalid. Thus parseInt(“09”) == 0.
What is a type, and why do you think types are useful in writing programs?
A type indicates the ‘flavor’ of a variable, i.e. what the ‘tentacle’ grasps (using the terminology of the Eloquent Javascript course. Types are very useful for ensuring that the operations we invoke on variables make sense. For instance, it makes sense to invoke the times binary operand on two numerical values, but it doesn’t make sense to invoke it on two Strings, or a String and a number.
Why do we lose precision when performing operations with decimal numbers in Javascript? Can you think of a few implications of why this would be a problem?
All numbers in Javascript are stored as doubles (64 bit floating point numbers), which have a finite precision. Certain numbers cannot be exactly represented in this format, such as 0.1 (it has a nonterminating binary representation, and thus cannot be exactly represented in a finite number of digits). This means we have to be very careful when working with numbers, because our intuitive sense is wrong.
.1 + .1 + .1 + .1 + .1 + .1 + .1 + .1 + .1 + .1 = 0.9999999999999999
Do you understand why the following operation produces the given result 115 * 4 – 4 + 88 / 2 = 500
Yes – order of operations matters. * and / have higher precedence over +. If you want to change this, use parentheses to explicitly show the order you want.
What does typeof 4.5 do, and why does typeof (typeof 4.5) return “string”
Typeof returns a string representation of the type of the argument. typeof (typeof 4.5) returns string, because typeof returns the string “number”. The piece in parentheses is executed first, with that result becoming the argument to the outer typeof call.
Exercises
2.1
(4 >= 6 || "grass" != "green") && !(12 * 2 == 144 && true) (false || true) && !(24 == 144 && true) (false || true) && !(false && true) (true) && !(false) (true) && (true) true
2.2
function while_exponent(val, exp) {
var product = 1;
var counter = 0;
while (counter < exp) {
prduct *= val;
counter++;
}
return product;
}
2.3
function while_triangle(n_lines) {
var line_counter = 1;
while (line_counter <= n_lines) {
var string = ""
var inner_counter = 0;
while (inner_counter < line_counter) {
string += "#"
inner_counter++;
}
print(string)
line_counter++;
}
}
2.4
function exponent(val, exp) {
product = 1;
for (var i = 0; i < exp; i++) {
product *= val;
}
return product;
}
exponent(2, 10) == 1024
function triangle(lines) {
for (var i = 1; i <= lines; i++) {
var string = ""
for (var j = 0; j < i; j++) {
string += "#"
}
print(string);
}
}
triangle(10);
#
##
###
####
#####
######
#######
########
#########
##########
2.5
var result = Number(prompt("What's the value of 2+2?"));
if (result == 4) {
alert("Excellent");
}
else if (result == 3 || result == 5) {
alert("Almost");
}
else {
alert("Idiot.");
}
2.6
while (true) {
var result = Number(prompt("What's the value of 2+2?"));
if (result == 4) {
alert("Excellent");
break;
}
else if (result == 3 || result == 5) {
alert("Almost");
}
else {
alert("Idiot.");
}
}
2.
var name = prompt("What's your name?") || "Guest";
This is an example of using the OR binary op to return the second operand if the first is a Falsey value (e.g. the empty string). This allows you to provide sensible defaults
We can use the && as a guard against null values. For instance, if we want to invoke a method on an object, but not if it’s null, we could do
var result = X && X.someMethod()
since the && will only evaluate the second operand if the first is not a Falsey value (e.g. null), we are safe from executing undefined methods.
/*#p2pu-Jan2011-javascript101*/
P2PU – World of Webcraft
I signed up for the Javascript 101 course and was asked to watch a 30 minute introductory video, write a short blog post, and then write a simple javascript program that did some addition and displayed the result as an alert in the browser. Pretty simple stuff, but it weeds out those who are not willing to do some work on their own and would just slow down the class.
I also applied for, and was accepted into, the Introduction to Ruby and Rails course. Longtime readers of this blog might remember that I have dabbled in Rails before, and had an initially favorable impression. But like any skill, you must use your knowledge or it quickly fades away. I’m basically back to square one with Ruby/Rails due to not having used it in the past year, so I’m looking forward to the added impetus of a class to get me to learn it.
Given that the vast majority of my programming has been on desktop / mobile client applications, I am excited to learn some web programming languages and techniques. Technology changes quickly, and I can all but guarantee my expertise in Java Swing is not going to count for much in a few years.
I’ll be sure to write about my impressions as I go through the course; in the meantime, I urge you to sign up for these courses before they fill up.
Improve web readability with … Readability
Original article
After a pass through Readability
arc90 has a free service called Readability which is invaluable for reading articles on the web. In a nutshell, it strips out all the extraneous content on a page and presents just the main article text, in a beautifully formatted way. You can configure the way the final page is rendered using the previously linked page, with such options as margin width, text size, the ability to convert hyperlinks to footnotes to avoid distraction, and a few different typographical options. Once you’ve done that, you merely drag button up to your bookmarks as a link; whenever you’re on a page that’s overly busy, you just choose that bookmark and the page instantly converts to a more readable document.
Readability options
The one drawback I’ve found is that nicely formatted code in an original document does not come out that way in the Readability version. Still, if what you’re reading is not full of source code, this site is absolutely vital.
Stack Overflow profile
Developmentality 