Button day

Under my display I have index card with three sentences. One of those is Practice, practice, practice. With this motto I decided to go to basics and as I said yesterday I made hundred buttons.

A lot of them are just variations. But what surprised me was the power of white and black compared to times when I used shades of grey to substitute them. I admit that this day was more about practical color theory than it was about buttons. Nevertheless I was working with buttons. For most of them I made flat and not-flat variations to see how bad recent design trend can be.

When I saw flat buttons as I made them I knew that the situation with flat design is worse than I have anticipated. How can a user know what is label and what is button when button doesn’t appear to be visually clickable? I am also not a fan of skeuomorphism but even old notebook keyboards where keys were not divided by flat space but as divider was used a set of skewed edges and that was considered flat or slim. Everyone understood it. These days I am not sure.

At the end of the day I ended up with three files of sum of hundred buttons:

buttons buttons2 buttons3

Download File 1 File 2 File 3

Learning JavaScript part 4 Objects part 2

Note: By mistake I set publish date to November, silly me =(

Functions

Function is usually a named block of code which performs a task or calculates a value and which is declared by keyword function . Special type of function without return value is called a procedure. Function defined inside an object is usually referred as a method.

Function is declared by keyword function which is followed by

  • function’s name
  • list of arguments in parentheses and separated by ‘,’ (comma)
  • statement(s) in curly brackets

In Example 1 we pass an argument number  and the we use that argument as a return value through keyword return .

Functions, usually procedures, can modify variables inside it’s scope.

At this point I’ll try to explain what is the scope. It is a space in code where certain variable exists. In Example 2 the variable  a  exists globally compared to

locally  and  b  which are defined only inside the function test and can’t be accessed from outside the function.

In Example 2 we can also see usage of a function on line 6. Definition of the function on line 2 does nothing on its own. Probably the best analogy for function from “real” world is a hammer in a drawer. We have it there hidden but until we use it it does nothing.

When we are at it I should mention a term closures which is a powerful feature of JavaScript. It means that you can nest functions and the inner function has access to all variables in the outer function. But it is not vice versa, outer function cannot access inner function’s variables.

In this simple case we called inner function to return variable which is defined in outer function. Closures can be more powerful than as shown in Example 4:

In last two examples I used what is called an anonymous function. This type of function doesn’t have a name and can be accessed only locally.

When we defined local variable with the same name as some global variable then we won’t be able to access the global one and we will only work with the local one. In other languages there is an easy way but in JavaScript there is a major pitfall when it comes to keyword this . Because it doesn’t depend on where it is defined but rather where the function is called. Therefore following Example may or may not always work:

 Argument object

An interesting feature is an array-like object arguments . It can be iterated through in a for cycle but it doesn’t have all array manipulation methods.

 Function object

Function object is a special JavaScript object which specifies a string of code to be compiled as a function.

Predefined function

  • eval
    • evaluates a string of JavaScript code
  • isFinite
    • returns false if an argument is not a number (NaN), positive or negative infinity
  • isNan
    • tests if argument is not a number
  • parseInt, parseFloat
    • parses a number out of string until first non-numerical character except for ‘.’ for float is found
    • if a first character in string is a letter it returns NaN value

Conclusion

Today we’ve looked at functions. We’ve learned about scope and closures. Next time we’ll start finally defining our own objects.

Note

An interesting post about closures.

Learning JavaScript part 1

Motivation

I first met JavaScript more than ten years ago. I didn’t see its purpose except for simple effects, such as hiding elements, showing current time or number of visitors. The best things, from my point of view, were made in Flash. And let’s not forget that then JavaScript was recommended to be blocked. Continue reading “Learning JavaScript part 1”