JavaScript

<slidy theme="aa" />

Scripting language built into (modern) web browsers.

Originally designed for the Netscape browser, the name "JavaScript" was chosen to associate with the "Java" programming language developed by Sun which, in 1995, was the first real option for making "live" code run over the web. Other than the name, there is no relation between JavaScript and Java. The formal name for JavaScript now is ECMAScript, but as this sounds more like a skin condition than a programming language, the name JavaScript has persisted.

The popularity of "live" web apps based on JavaScript like Google Maps has helped to reduce some of the differences between browsers in their implementation of JavaScript (which made early JavaScript development quite a nightmare). Also, JavaScript frameworks such as ["Prototype"] help to smooth over the remaining differences and other difficulties (such as EventHandling).

From Python

Curly braces ({}) instead of colons and indentation (:)
Indentation: still important for readability!
Semi-colons at ends of lines (though optional, good to get into the practice of using)
"var" to announce a variable (again, optional but good to always use to be explicit about scope)
"function" to define a function
Implicit type conversion ("hello" + 7 = "hello7")

Functions

def hello (x):
    print "Hello", x

hello("Bob")

function hello (x) {
    console.log("Hello", x);
}

hello("Bob");

Loops

words = "Once upon a time, in a galaxy far far away".split()

for w in words:
    print w

var words = "Once upon a time, in a galaxy far far away".split(" ")

for (var i=0; i<words.length; i++) {
    console.log(words[i]);
}

Debugging

Joe Hewitt's Firebug was the breakthrough Firefox addon that provided a "commandline" for Javascript (F12). Still very much in active development (thanks in part to some development resources from IBM). Recently, Firefox and Chrome have caught up with their built-in web consoles (Firefox: Web Console (Shift-Ctrl-K)).

JQuery

http://jquery.org

Smooths over browser differences (Event-handling, AJAX)
Incredibly elegant: CSS selectors to "query" the page & manipulate specific content with code
Pre-fab widgets & behaviors (Draggable, Resizable, Droppable)

JQuery: Hello world

<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
    console.log("Hello world");
});
</head>
<body>
</body>
</html>

JQuery: Styles Plus

<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
    $("p.foo").css({'background': 'pink'});
});
</head>
<body>
<p class="foo">Hello</p>
<p>World</p>
</body>
</html>

Extreme Functions

Javascript functions can be defined "in-place" and be "anonymous".

Traditional for loop:

var words = "Once upon a time, in a galaxy far far away".split(" ")

for (var i=0; i<words.length; i++) {
    console.log(words[i]);
}

Using jQuery's each:

var words = "Once upon a time, in a galaxy far far away".split(" ")
$(words).each(function (i, w) {
    console.log(w);
});

There are situations where using each is important! (For making proper closures)

JQuery: Events

<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {

    $("p").click(function () {
        $(this).css({background: "aqua"});
    });

});
</head>

<body>
    <p class="foo">Hello</p>
    <p>World</p>
</body>

</html>

Resources

"Core" Documentation from mozilla.org

Online Tutorials

Javascript from Python

python-spidermonkey... javscript meets python