Implement program flow
Collections and arrays
With javascript we can interate with arrays and collections, for example we can have a dropdown list with some elements like this:
and we can interact with this elements with getting the id and assign to a variable, and the we can use a loop to read the data, like this:
Now let’s see another example using the forEach method to enumerate collection members of this object
Switch statements
Has another common language of third generation we have switch statements that we can use for different conditions, the w3schools give us a great example
Raise and handle an event
HTML DOM events allow Javascript to register different event handlers on elements in an HTML document. Events normally works with functions, so if the function not be executed the event too.
Javascript provides a list of events that we can use in different scenarios since Mouse, Keyboard, Focus, Text, Transition, etc.. here is the complete list of events that we can use:
let’s see the common used events:
Onmouseover: The event occurs when the user moves the mouse pointer into the object, and it does not repeat unless the user moves the mouse pointer out of the object and then back into it.
Onmouseout When the user moves the mouse over an object, one onmouseover event occurs, followed by one or more onmousemove events as the user moves the mouse pointer within the object. One onmouseout event occurs when the user moves the mouse pointer out of the object.
Onblur The onblur event fires on the original object before the onfocus or onclick event fires on the object that is receiving focus. Where applicable, the onblur event fires after the onchange event.
Event Bubbling
Event bubbling is used from situations where a single event, such as a mouse click, may be handled by two or more event handlers defined at different levels of the DOM hierarchy.
In bubbling the event is first captured and handled by the inner most element and then propagated to outer elements. In capturing the event is first captured by the outer most element and propagated to the inner most element.
The Anonymous functions can be used to create temporary/private scope and it often makes sense to use anonymous functions calls in callbacks and event handlers.
Implement exception handling
JavaScript has two basic levels of error handling: syntax errors and runtime errors. Syntax errors occur before the JavaScript code even runs, basically meaning that the code can’t compile.
Here is a excellent reference about exception, errors, etc..
This is a typically example that w3schools give us
if we can run this, the error must be said, adddlert is not define because “addlert” it doesn’t mean anything, i mean the compiler maybe said “WTF is that” lol.
Also we can marks a block of statements to try, and specifies a response, should an exception be throw. For example:
Also we can use Unconditional catch, for example when a single, unconditional catch is used, the catch block is entered when any exception is throw. For example:
In some cases, we can expecting in some function a variable to come with a undefined, so we can check with a condition if the variable return undefined
In my opinion this is something that never should happen, because if this happens, maybe some of my code has not been tested well, or even worse, not tested anything.
try statements can also be followed by a finally keyword, which means ‘no matter what happens, run this code after trying to run the code in the try block’. If a function has to clean something up, the cleanup code should usually be put into a finally block:
Another sample with the three blocks
References:
- http://msdn.microsoft.com/es-es/library/4yahc5d8(v=vs.94).aspx
- http://www.javascriptkit.com/javatutors/trycatch.shtml
- http://eloquentjavascript.net/chapter5.html
- http://www.htmlgoodies.com/primers/jsp/article.php/3610081/Javascript-Basics-Part-11.htm
Implement a callback
HTML5 WebSocket API
To enable Web applications to maintain bidirectional communications with server-side processes, this specification introduces the WebSocket interface.
A WebSocket is a standard bidirectional TCP socket between the client and the server. The socket starts out as a HTTP connection and then “Upgrades” to a TCP socket after a HTTP handshake. After the handshake, either side can send data. Example:
References:
- http://www.tutorialspoint.com/html5/html5_websocket.htm
- http://www.w3.org/TR/2011/WD-websockets-20110419/
Now, what is a Callback? callback is a function derived from a programming paradigm called functional programming. The functional programming is the use of function as arguments. So callback function is a function that is passed to another function as a parameter, and the callback function, and the callback functions called(executed) inside otherFunction. For example:
Now, How Callback functions Work? functions are first-class objects, we can treat functions like objects, so we can pass functions like variables and return them in functions and use then in another functions.
- http://cwbuecheler.com/web/tutorials/2013/javascript-callbacks/
- http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/
Create a web worker process
One of the unfortunate things that javascript suffers, is that all its execution process remains inside a unique thread, so HTML5 introduces the new feature called Web Workers process, that help us to execute process independently of other scripts without affecting the performance of the page or while other events still running, that’s great because with this we can avoid that creepy window that said “A script on this page may be busy…” for some huge process that never end and the browser be freezing.
As Web Workers will be executed on separated threads, you need to host their code into separated files from the main page.
So first we need to create new object Worker in your main page:
If the file exists, the browser generate a new sub-process of worker that download in asynchronous way. Now we can sets up a listener to handle message events from the worker, This event handler will be called when the worker calls its own Worker.postMessage() function
and in the task.js
Workers can use timeouts and intervals just like the main thread can. This can be useful, for example, if you want to have your worker thread run code periodically instead of nonstop. For example we can use setTimeout(), clearTimeout(), setInterval() and clearInterval().
we can add an event listener to receive some message form the web worker
But there are some limitations with the Web Workers, because the Web Workers operate independently of the main browser UI thread, so they are not able to access many of it’s objects. Also we can’t access the DOM, so they can’t modify the HTML document. Some Objects, including the window, document, and parent is restricted.
References:
- http://www.html5rocks.com/es/tutorials/workers/basics/#disqus_thread
- https://developer.mozilla.org/es/docs/Web/Guide/Performance/Usando_web_workers
- http://blogs.msdn.com/b/davrous/archive/2011/07/15/introduction-to-the-html5-web-workers-the-javascript-multithreading-approach.aspx
- http://www.w3schools.com/html/html5_webworkers.asp