JavaScript: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
Line 7: Line 7:
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]]).
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]]).


=== Resources ===
Compared to 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 ==
 
<source lang="python">
def hello (x):
    print "Hello", x
 
hello("Bob")
</source>
 
<source lang="javascript">
function hello (x) {
    console.log("Hello", x);
}
 
hello("Bob");
</source>
 
== Loops ==
 
<source lang="python">
words = "Once upon a time, in a galaxy far far away".split()
 
for w in words:
    print w
</source>
 
<source lang="javascript">
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]);
}
</source>
 
== 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 ==
 
<source lang="html4strict">
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
    console.log("Hello world");
});
</head>
<body>
</body>
</html>
</source>
 
== JQuery: Styles Plus ==
 
<source lang="html4strict">
<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>
</source>
 
== Extreme Functions ==
 
Javascript functions can be defined "in-place" and be "anonymous".
 
Traditional for loop:
<source lang="javascript">
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]);
}
</source>
 
Using jQuery's each:
<source lang="javascript">
var words = "Once upon a time, in a galaxy far far away".split(" ")
$(words).each(function (i, w) {
    console.log(w);
});
</source>
 
There are situations where using each is important! (For making proper closures)
 
== JQuery: Events ==
 
<source lang="html4strict">
<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>
</source>
 
== Resources ==


"Core" Documentation from mozilla.org
"Core" Documentation from mozilla.org
Line 20: Line 155:
* http://www.cs.brown.edu/courses/bridge/1998/res/javascript/javascript-tutorial.html
* http://www.cs.brown.edu/courses/bridge/1998/res/javascript/javascript-tutorial.html


== in Python ==
== Javascript from Python ==


* [http://code.google.com/p/python-spidermonkey/ python-spidermonkey]... javscript meets python
* [http://code.google.com/p/python-spidermonkey/ python-spidermonkey]... javscript meets python

Revision as of 11:07, 1 December 2011

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).

Compared to 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

Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=JavaScript&oldid=20815"