JavaScript, an interpreted language

JavaScript is an interpreted language rather than a compiled language. What is meant by the terms interpreted and compiled?

Well, to let you in on a secret, your computer doesn’t really understand JavaScript at all. It needs some- thing to interpret the JavaScript code and convert it into something that it understands; hence it is an interpreted language. Computers understand only machine code, which is essentially a string of binary numbers (that is, a string of zeros and ones). As the browser goes through the JavaScript, it passes it to a special program called an interpreter, which converts the JavaScript to the machine code your computer understands. It’s a bit like having a translator translate English to Spanish, for example. The impor-

tant point to note is that the conversion of the JavaScript happens at the time the code is run; it has to be repeated every time this happens. JavaScript is not the only interpreted language; there are others, including VBScript.

The alternative compiled language is one in which the program code is converted to machine code before it’s actually run, and this conversion has to be done only once. The programmer uses a compiler to convert the code that he wrote to machine code, and this machine code is run by the program’s user. Compiled languages include Visual Basic and C++. Using a real-world analogy, it’s a bit like having a Spanish translator verbally tell you in English what a Spanish document says. Unless you change the document, you can use it without retranslation as much as you like.

Perhaps this is a good point to dispel a widespread myth: JavaScript is not the script version of the Java language. In fact, although they share the same name, that’s virtually all they do share. Particularly good news is that JavaScript is much, much easier to learn and use than Java. In fact, languages like JavaScript are the easiest of all languages to learn, but they are still surprisingly powerful.

Courtesy : Beginning JavaScript, Wilton & McPeak

Advertisements

Client-Side JavaScript Timeline

Given below is the JavaScript timeline when a webpage is loaded in a browser :-

    1. The web browser creates a Document object and begins parsing the web page, adding Element objects and Text nodes to the document as it parses HTML elements and their textual content. The document.readyState property has the value “loading” at this stage.
    2. When the HTML parser encounters <script> elements that have neither the async nor defer attributes, it adds those elements to the document and then exe- cutes the inline or external script. These scripts are executed synchronously, and the parser pauses while the script downloads (if necessary) and runs. Scripts like these can use document.write() to insert text into the input stream. That text will become part of the document when the parser resumes. Synchronous scripts often simply define functions and register event handlers for later use, but they can traverse and manipulate the document tree as it exists when they run. That is, synchronous scripts can see their own <script> element and document content that comes before it.
    3. When the parser encounters a <script> element that has the async attribute set, it begins downloading the script text and continues parsing the document. The script will be executed as soon as possible after it has downloaded, but the parser does not stop and wait for it to download. Asynchronous scripts must not use the document.write() method. They can see their own <script> element and all document elements that come before it, and may or may not have access to additional document content.
    1. When the document is completely parsed, the document.readyState property changes to “interactive”.
    2. Any scripts that had the defer attribute set are executed, in the order in which they appeared in the document. Async scripts may also be executed at this time. Deferred scripts have access to the complete document tree and must not use the document.write() method.
    3. The browser fires a DOMContentLoaded event on the Document object. This marks the transition from synchronous script execution phase to the asynchronous event-driven phase of program execution. Note, however, that there may still be async scripts that have not yet executed at this point.
    4. The document is completely parsed at this point, but the browser may still be waiting for additional content, such as images, to load. When all such content finishes loading, and when all async scripts have loaded and executed, the document.readyState property changes to “complete” and the web browser fires a load event on the Window object.
    5. From this point on, event handlers are invoked asynchronously in response to user input events, network events, timer expirations, and so on.

    Courtesy: JavaScript The Definitive Guide, By David Flanagan

JQuery After() And InsertAfter() Example

For example,

<div class="someRandomClass">Yo Yo!</div>
<div class="someRandomClass">Yo Sup!</div>

1. $(‘selector’).after(‘new content’);

$('.someRandomClass')
.after("<div class='someOtherRandomClass'>Fight Club!</div>");

2. $(‘new content’).insertAfter(‘selector’);

$("<div class='someOtherRandomClass'>Fight Club!</div>")
.insertAfter('.someRandomClass');

Result

Both methods above are doing the same task, but with different syntax, the new contents after after() or insertAfter() will become

<div class="someRandomClass">
   Yo Yo!
</div>
<div class='someOtherRandomClass'>Fight Club!</div>
 
<div class="someRandomClass">
   Yo Sup!
</div>
<div class='someOtherRandomClass'>Fight Club!</div>

Migration from Selenium RC to Webdriver – Executing Javascript APIs

Executing Javascript Doesn’t Return Anything

WebDriver’s JavascriptExecutor will wrap all JS and evaluate it as an anonymous expression. This means that you need to use the “return” keyword:

String title = selenium.getEval("browserbot.getCurrentWindow().document.title");

becomes:

((JavascriptExecutor) driver).executeScript("return document.title;");