JavaScript
Playing with console
Pavel Smolka
Why do we need JavaScript?
// changing DOM
$("p.alert").css("color", "red");
// inserting new elements to DOM
var $new = $('<div id="object1"/>');
$('body').append($new);
// handling user events
$("#target").click(function() {
alert("Handler for .click() called.");
});
That $ is jQuery, by the way, not plain JavaScript...
Inserting JavaScript into the page
<script>alert("That's all")</script>
According to HTML5 standard, you don't have to
specify type="text/javascript" attribute...
How do you debug JavaScript?
It's pain...
No, seriously, you have a great friend:
console.log("I want to log this");
And where do we get the result?
Let's have a look...
What about timing?
console.time('label');
// anything
console.timeEnd('label');
Logs how long anything takes...
Useful console functions
console.dir()
inspect()
$0
$$()
monitorEvents()
Inspecting inner frames
Select box in Chrome
cd() in Firefox
Useful also at jsfiddle.net. By the way, do you
know jsfiddle?
Stack trace & breakpoints
Add breakpoints (Sources tab)
Step the debugger
Stack trace
Watch expressions
So, what's the message?
JavaScript is full of bugs and WTF moments that need debugging
Don't worry to play around.
Twitter: @pavelsmolka
E-mail: smolka@mail.muni.cz
GitHub: https://github.com/pavelsmolka