JavaScript: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
'''<slidy />''' | '''<slidy theme="w3c" />''' | ||
Scripting language built into (modern) web browsers. | Scripting language built into (modern) web browsers. | ||
Revision as of 10:32, 1 December 2011
<slidy theme="w3c" />
Scripting language built into (modern) web browsers.
Intro
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
- 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
- http://www.w3schools.com/js/default.asp
- http://www.webteacher.com/javascript/
- http://www.cs.brown.edu/courses/bridge/1998/res/javascript/javascript-tutorial.html
Javascript from Python
- python-spidermonkey... javscript meets python