Monday, October 1, 2012

JS Console

JS Console is a tool I enjoy for messing around with JavaScript without having to create a bunch of HTML (although you can work with the DOM in JS Console). This is proving very handy as I go through JavaScript books/tutorials and want to try code out quickly.  JS Console allows you to do remote JavaScript debugging as well.


How do I use JS Console?

Type or paste JavaScript into the text bar at the top.  You can also load JavaScript libraries (like JQuery) or DOM.

JS Console remote debugging

I don't do mobile development, but it looks like there's a neat way to use your computer's browser to debug JavaScript on your phone(!) or on another machine/session.  And there's a native iOS app.  I have not experimented with the remote debugging.


What can I access in JS Console?

DOM

Looks like you can get to everything in your browser.  If you type document in the text field, for example, you'll get the HTMLDocument object represented as a String.  


localStorage and sessionStorage

You can also view and manipulate localStorage and sessionStorage if supported by your browser (when I did this in IE7 I got undefined as these aren't supported until IE8).  

I added items to localStorage and remoteStorage, opened another Chrome window and verified that in Chrome and  Firefox separate tabs represent new sessions.  I also learned that JS Console uses sessionStorage to store your history.  And I saw that localStorage is browser-specific.  All Chrome windows and tabs saw what I'd added to localStorage in Chrome even after closing and reopening browsers.  Same thing with Firefox, but Chrome didn't see Firefox's localStorage and vice versa.

Sunday, September 30, 2012

JavaScript

I've been looking at JavaScript a bit over the past six months.  

Books
The most helpful titles I've read are:
Eloquent JavaScript
Intro to programming using JavaScript as the vehicle.  Covers programming fundamentals quite a bit.

JavaScript: The Good Parts
Less of a beginning programming guide and

Learning JavaScript (currently reading now)
Intro to JavaScript that assumes an understanding of programming fundamentals.

Tools
QUnit is what I've used to unit test my JavaScript (even if I'm not using JQuery's features in my JavaScript).  I find that unit tests are a great tool for helping me figure out how a language/framework works since they let me submit different scenarios easily, as well as helping me persist the questions I've asked and answered about a language/framework.
QUnit gave me some trouble around the setup, but it was worth the effort, especially once I got into writing more complex functions.

JSConsole is a tremendous tool that I just discovered (today!).  Those of you familiar with consoles for Ruby, Groovy, IO, etc. understand how helpful they can be for quickly answering implementation questions. For example, I wanted to know what would happen if I executed slice(-10) on an array with three members.  Instead of having to build the HTML, the JavaScript, connect the two and figure out how to view the results (alert, innerHTML, etc.) I used the console and it took me about a minute to create the array and try a bunch of slice overrides.

W3Schools Tryit Editor for JavaScript is a helpful tool if you want an easy way to experiment with DOM modification in JavaSript.  On the left side you have HTML and embedded JavaScript -- on the right side you have the output.  You can also use this to experiment with embedded CSS.

Browser debuggers/consoles are handy for debugging (using breakpoints) or monitoring DOM manipulation.  F12 on a PC keyboard (Windows or Ubuntu) will toggle the console for Chrome and Firefox (if you have Firebug installed for the latter).