JavaScript video lectures by Douglas Crockford

April 19, 2009 | Leave a Comment

These lectures are given by Douglas Crockford who is a senior JavaScript Architect at Yahoo!. He is well known for his work in introducing JavaScript Object Notation

First four lectures are on the basics of language:

The next three lectures are on Advanced JavaScript:

Then there are 6 more lectures on JavaScript which should probably be viewed only after you have viewed the ones just mentioned.

The following is a talk based on Douglas’s recent book “JavaScript: The Good Parts“.

It’s 1 hour long and it will definitely make your understanding of JavaScript better:


Direct URL: http://www.youtube.com/watch?v=hQVTIJBZook

Here are some interesting points from the lecture:

[09:57] JavaScript was influenced by Scheme, Java and Perl. From Scheme it borrowed lambda functions and loose typing. From Java it took most of the syntax, and from Perl some of its regular expressions. And finally, it derived the idea of prototypal inheritance and dynamic objects from sellf

[11:38] JavaScript bad parts:

  • Global variables. Global variables make it harder to run independent subprograms in the same program. If the subprograms happen to have global variables that share the same names, then they will interfere with each other and likely fail, usually in difficult to diagnose ways.
  • Newlines get converted into semicolons. JavaScript has a mechanism that tries to correct faulty programs by automatically inserting semicolons. It sometimes inserts semicolons in places where they are not welcome. For example: 
    return
{
    status: true
};

    returns undefined because JavaScript inserts ‘;’ after return.

    Correct way:

    return {
    status: true
};
  • Operator typeof is not very helpful. For example, “typeof null” is “object”, “typeof [1,2,3]” is also “object”.
  • Operator + adds numbers and concatenates. The + operator can add or concatenate. Which one it does depends on the types of the parameters. If either operand is an empty string, it produces the other operand converted to a string. If both operands are numbers, it produces the sum. Otherwise, it converts both operands to strings and concatenates them. This complicated behavior is a common source of bugs. If you intend + to add, make sure that both operands are numbers.
  • Operators == and != do type coercion. Use of the === and !== operators is always preferred.
  • Too many falsy values. 0, Nan, ” (empty string), false, null, undefined are all false.

[17:25] for … in operator mixes inherited functions with the desired data members (it does deep reflection). Use object.hasOwnProperty to filter out names that belong to object itself:

for (name in object) {
    if (object.hasOwnProperty(name)) {
        ...
    }
}

[22:00] Javascript good parts:

  • Lambda. Enough said.
  • Dynamic objects. Just add a property to an object, or remove it, no need for classes and derivation to create a similar object.
  • Loose Typing. No need for type declarations.
  • Object Literals. {} for object literals, [] for array literals and // for regexp literals.

[23:00] Two schools of inheritance - classical and prototypal. Prototypal inheritance means that objects can inherit properties directly from other objects. The language is class-free.

[24:35] Realization of prototypal inheritance in JavaScript:

if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

Now a newObject can be created by inheriting from oldObject:

newObject = Object.create(oldObject);

[26:05] Example of global variables and why they are bad and how to solve the problem by using closures.

var my_thing = function () {
    var names = ["zero", "one", ... ];
    return function(n) {
        return names[n];
    };
}();

[29:00] There are four ways to create a new object in JavaScript:

  • Object literal — var object = { }.
  • New — var object = new Object()
  • Object.create — var object = Object.create(old_object).
  • Call another constructor (use different inheritance model).

[42:42] JSLint. JSLint defines a professional subset of JavaScript. JSLint will hurt your feelings.

[52:00] Q/A: Does strict mode change the behavior or does it take things out? — Can’t have “with” in strict mode, changes the way eval() works, changes error handling.

[53:00] Q/A: What’s going on with DOM? — Ajax libraries fix DOM, these changes should be propagated back into DOM API.

[55:30] Q/A: How do you spell lambda in JavaScript? — function.

[55:54] Q/A: How to solve global variable problem? — Each of compilation unit should be isolated, but there should be a way how they can introduce (link) to each other.

[56:30] Q/A: How do JavaScript objects differ from hash tables, they seem the same to me?

[57:23] Q/A: What’s wrong with HTML 5 and web apps? — They are doing too much and there are way too many of them.

[59:10] Q/A: How come JSON and JavaScript have almost the same syntax? — Doug admits he forgot to include Unicode Line Separator (LS) and Paragraph Separator (PS) control codes as whitespace chars.

[01:00:32] Q/A: Why does JSON require quotes around the property names? — Three reasons: 1. Wanted to align with Python where quotes are required, 2. Wanted to make the grammar of standard simpler, 3. JavaScript has stupid reserved word policy.

[01:02:40] Q/A: Are there any prospects for adding concurrency to the language? — Definitely no threads. Could be some kind of a messaging model.

Posted by | Filed Under Programming, Lectures, JS/AJAX 

Handy Debug Tool for ASP.NET AJAX

August 30, 2007 | Leave a Comment

Web Development Helper utility is an awesome tool. It is an Internet Explorer plugin that provides a set of useful tools to both Ajax/JavaScript developers as well as ASP.NET page and control developers. For client-side script-based development, Web Development Helper provides HTTP tracing capabilities, as well as much improved script diagnostics, and tracing facilities, as well as an immediate window. For ASP.NET developers, when developing against your site on your local development machine, this tool provides the ability to view ViewState, ASP.NET trace messages, contents of your cache etc.

The following is a list of features offered by the tool:

  1. A warning when either debug or trace have been turned on. Ability to hide trace information from the page, and view it in a separate dialog, so it does not get in the way of your page’s layout.
  2. Ability to view the page’s view state (in various forms: raw, parsed, and decoded) to help you optimize your state management logic.
  3. Ability to view items stored in cache, and remove them for testing purposes.
  4. Ability to shutdown the application (unloading the associated appdomain), in order to test starting it from a clean state.
  5. Ability to log all HTTP (and HTTPS) traffic between the browser and your server, and view request and response details, including those performed via XMLHttpRequest.
  6. Ability to view the live HTML DOM using a DOM Inspector that allows viewing all elements, selected elements, or elements matching ID or CSS class. For each element, you can see the markup, attributes, and style attributes.
  7. Ability to view rich error information for script errors (full call stack, script URL and line number), as well as a script immediate window to execute some script against the current document.

Right now I am working on a project that uses Ajax for better user experience, more and more tips will be added. Thanks.

Posted by | Filed Under JS/AJAX 

Time for a cookie hack

August 26, 2007 | Leave a Comment

Cookies are a way that a browser stores important and unimportant data. They store anything from user names and passwords to the last time you were at a site to what pages you visted.

There are many expolits you can do with this if the page is not properly coded. Many forums can be hacked if they have html enabled and a password harvesting script could be easy implemented.

Now how does it work? I thought you could not see other cookies from other domains on your own site. Well that is the truth, but it is easy to get around and I will let you figure that part out, but I will show you the tricks of the trade.

Okay now the address bar is your friend if you want to see what the cookie is holding on any site. You access the cookie through the document object. For all the examples I will be using an alert to show the cookie instead of document.write. This way you do not have to keep reloading the page.

The first step is to see the cookie code stored on your computer. Goto any site that has cookies. (I ran all of my code at hotmail to see what they had going on there. I would post screenshots, but I do not want to give away my hotmail info!)

javascript:alert(document.cookie)

Okay this alerts all of the unformatted code of the cookie. Now we need to make some more sense of this so we will have to unescape the information. (basic idea: Escaping the code replaces special characters with a code so the browser can store it without problems. Unescaping replaces all of the gibberish with the characters you can understand!)

javascript:alert(unescape(document.cookie))

Okay you should be able to read it, but it is still a large jumbled mess so we need to space it out a bit. For this I will use regular expressiosn to replace the semicolons with two carriage returns. (If you are using document.write then you want to use html breaks)

javascript:alert(unescape(document.cookie).replace(/;/gi,"nn"))

Looking at the code I still see that there is escaped information in the strings so I am going to unescape the string again.

javascript:alert(unescape(unescape(document.cookie)).replace(/;/gi,"nn"))

Now what is left is a formatted bunch of strings. Yes the strings are encrypted, but you will find out that not everyone will encrypt the strings in their cookies! And if you look the source code you miight find out how to break encryption if they do not use server side code.

So for the developers how can you protect yourself? Encrypt your code and use a server side language to store your information!

Posted by | Filed Under Hacks, JS/AJAX 

Creating and sending an event

August 23, 2007 | Leave a Comment

<html>
<head>
 <title>Javascript Send Event Tester</title>
</head>
<body>
 <script language=”Javascript”>
 var count = 0;
 var childWindow;
 
 function triggerEvent() {
  var newEvent = document.createEventObject();
  var target = document.getElementById(”targetCell”);
  target.fireEvent(”onclick”, newEvent);
 }
 
 function foo(element) {
  count++;
  element.innerHTML = “My onclick event was invoked ” + count + ” times!”;
 }
 
 </script>

 <table><tr><td id=”targetCell” onclick=”foo(this)”>I’m the Target Cell</td></tr></table>
 <input type=”button” onclick=”triggerEvent()” Value=”test”/>

 <script language=”JavaScript”>
 
 </script>
</body>

Posted by | Filed Under JS/AJAX 

Next Page »