$('ul').find('a').andSelf().css('border', '1px solid blue');
I select all the ULs in my document, than I find all the included A elements, and I join the two sets by calling andSelf(). Finally I call css() specifying that I want to put a thin blue line border around them.
var $li = $("li"); // 1
var $liK = $li.filter('.k'); // 2
console.log($liK, $liK.length);
var $a = $('a'); // 3
var $liA = $li.find('a'); // 4
var $LiA2 = $('a', $('li')); // 5
var $LiA3 = $('li a'); // 6
console.log($a, $a.length, " -", $liA, $liA.length, " -", $liA2, $liA2.length, " -", $liA3, $liA3.length);
1. Selecting all the LI elements in the current document.var li = document.getElementsByTagName("li"); // 1
var $li = $("li"); // 2
console.log("li: ", li, li.length);
console.log("$li: ", $li, $li.length);
1. The getElementsByTagName() method returns a NodeList, a structure that is array-ish but does not derive from Array. It sports a property, length, that contains the number of element contained, and lets the user access each of them through the [] operator. An out of bound request is resolved to null.var elaborate = (function(x) { // 1
var cache = 0;
return function(x) {
cache += x;
return cache;
}
}());
var calculator = {
status: 0,
opA: function(x) { // 2
this.status += x;
},
opB: function() { // 3
var that = this; // 4
var somethingComplicated = function() {
// this.status += elaborate(this.status); // 5
that.status += elaborate(that.status); // 6
};
somethingComplicated(); // 7
}
calculator.opA(3);
calculator.opA(4);
calculator.opB();
console.log(calculator.status);
};
1. I defined elaborate() as a closure, so that it could keep its own status. See details in a previous post, static variable by closure.var myUndef, // undefined
myNull = null,
myFalse = false,
myEmpty = '', // empty string
myZero = 0, // numeric zero
myNan = parseInt('not a number'); // parsing a non numeric string returns NaN
if(myUndef || myNull || myFalse || myEmpty || myZero || myNan) // 1
console.log('Unexpected');
try {
if(myNotExisting) // 2
console.log('Unexpected');
}
catch(e) {
console.log(e);
}
if('false') { // 3
console.log('Misleading');
}
1. All these values (undefined, false, empty string, zero, NaN) are loosely equals to the boolean false value, so the next line is not executed.<html>
<head>
<meta charset="UTF-8">
<title>Hello jQuery</title>
<script src="jquery-1.8.0.js"></script> <!-- 1 -->
<script>
$(function(){ // 2
alert("Hello from jQuery");
});
</script>
</head>
<body>
<h1>A JavaScript/jQuery powered page</h1>
</body>
</html>
1. I ask to the browser to go and load the jQuery library. I have put it in the current folder, so I specify just its name. In production code, it would almost certainly be somewhere else.jQuery(document).ready(function() {
alert("Hello from jQuery");
});
The dollar sign is a mere synonym for the jQuery() function. And, if you dig in the jquery.js code, you'll find out that passing a function to jQuery is a shortcut for calling the document ready event handler."1, 2, 3".split(", "); // 1
"1 , 2 ,3".split(/\s*,\s*/); // 2
1. This is how is commonly called split(). If we are sure on how the separator is, it works fine, and returns an array of three elements containg just the numbers. But what if we have no control on the blanks? And we could have no blanks, or many of them, around a comma? You usually won't be happy with the result."JavaScript".search(/script/); // 1 "JavaScript".search(/Script/); // 2 "JavaScript".search(/script/i); // 3 "Here is 1 for you, 3 for me, 42 for the others.".search(/\d+/g); // 41. The search is by default case sensitive, so the pattern here is not found, and the function call returns -1.
var s = "Here is 1 for you, 3 for me, 42 for the others."; s.match(/\d+/); // 1 s.match(/\d+/g); // 2 "My email address is someone@not.existing.zzz".match(/(\S*)@(\S*)/);1. We ask to match() to return just the first subsequence matching the specified pattern, in this case a string of one or more digits. It returns a vector containing one element, "1".
"... javaScript ... javascript ... Javascript ...".replace(/javascript/gi, "JavaScript"); // 1 "I want to have 'doublequotes' in this string!".replace(/'([^']*)'/g, '"$1"'); // 21. Notice the two flags associated to the RegExp, specifying that we are preforming a global and case insensitive search. All the three JavaScript variation in the string are found and replaced by the string passed as second argument to the function.
function Rectangle(a, b) {
this.a = a;
this.b = b;
}
// ...
var rx = Rectangle(6, 7); // !! bad mistake !!
So, I forgot to use "new", and Rectangle is treated by JavaScript as a normal function call. What happens is barely that, in the global scope, two properties named a and b are created (if not already there) and set to 6 and 7. Then "undefined" is returned and assigned to the variable rx.function Rectangle(a, b) {
if(!(this instanceof Rectangle))
throw 'Remember to use "new" to call a constructor!';
this.a = a;
this.b = b;
}
// ...
try {
var rx = Rectangle(3, 4);
}
catch(e) {
console.log(e);
}
As I said, this is clean code, and if you have a background in languages supporting static type, you should appreciate the predictability of what it is going on here. The caller does something wrong, he gets a rigorous "no, no" back.function Rectangle(a, b) {
if(!(this instanceof Rectangle))
return new Rectangle();
this.a = a;
this.b = b;
}
// ...
var rf = Rectangle(12, 2);
// ...
Your choicefunction Rectangle(a, b) {
this.a = a;
this.b = b;
}
Rectangle.prototype = {
constructor: Rectangle, // 1
toString: function() { return "a = " + this.a + ", b = " + this.b; }, // 2
area: function() { return this.a * this.b; },
perimeter: function() { return 2 * (this.a + this.b); }
}
var r = new Rectangle(4, 10); // 3
console.log("rectangle: ", r.toString()); // 4
console.log("area: ", r.area());
console.log("perimeter: ", r.perimeter());
console.log("Is r a rectangle? ", r instanceof Rectangle); // 5
console.log("Rectangle constructor: ", Rectangle.prototype.constructor); // 6
1. Backlink from the Rectangle prototype and its constructor.Rectangle.prototype.area = function() { return this.a * this.b; };
Rectangle.prototype.perimeter = function() { return 2 * (this.a + this.b); };
Rectangle.prototype.toString = function() { return "a = " + this.a + ", b = " + this.b; };
Choose whichever approach you think is more suitable to you.function sum(x, y) {
return x + y;
}
Then you find out that your cool function is often used passing always only a "real" parameter, being the other just a constant. In my example, the story would be that I wrote a sum() function, but I find out that the users often need just an increase(). Duplicating the code looks a poor solution, it would be better to create an adapter that provides just a more natural interface to the user, but keep almost all the coding effort in the original function.var next = sum.bind(null, 1);
console.log("original interface", sum(42, 1));
console.log("more natural solution", next(42));
Good. But what is the null I passed to bind() as first parameter?var calculator = {
step: 1,
increase: function(x) {
return this.step + x;
}
};
console.log(calculator.increase(42));
calculator.step = 2; // 1
console.log("Double step: ", calculator.increase(42));
As we see in (1) it is pretty simple to change the increasing step in my calculator, but the user it is not completely happy with this solution. He didn't care of such a flexible solution, what he needs is just a function that returns its passed parameter increased by 2.var step2 = calculator.increase.bind({step: 2});
console.log(step2(42));
We call bind() on the calculator.increase() method, and we pass to it as first (and only) parameter its new "this". In this case we don't want the step to be modifiable by the user, so we pass the object anonymously, making its reference lost to the outside world.var sequence = (function() {
var current = 0;
return { // 1
get: function() { // 2
return current++;
},
skip: function(delta) { // 3
if(delta > 0) // 4
current += delta;
}
}
}());
1. The external anonymous function does not return anymore a single function, but an object containing a couple of properties, that happens to be functions.for(var i = 0; i < 3; ++i)
console.log(sequence.get()); // 1
sequence.skip(3); // 2
for(var i = 0; i < 3; ++i)
console.log(sequence.get());
1. Get each time a new sequence number, starting from zero.var sequence = (function() { // 1
var current = 0; // 2
return function() { // 3
return current++;
}
}()); // 4
for(var i = 0; i < 3; ++i)
console.log(sequence());
1. We define as a variable as ... what? There's an anonymous function definition starting here, and if we jump to (4) we see that the function is invoked just after being defined.sequence.value = 0; // 1
function sequence() {
return sequence.value++; // 2
}
for(var i = 0; i < 3; ++i)
console.log(sequence()); // 3
1. Define a property named value in the sequence function, initialized to zero. In this way we don't pollute the namespace in which the function is defined with a name that is used just by the function.var radius = 1;
var circ = 2 * Math.PI * radius;
console.log("Circumference is ", circ);
The resulting value should be something around 6.283185307179586.var value = Math.LN10;
console.log(Math.floor(value), " <= ", value, " <= ", Math.ceil(value));
console.log("Rounding", value, " -> ", Math.round(value));
The max() and min() functions accept in input any (reasonable) number of parameters, and its returned value is the bigger or smaller one in the lot.var values = [ -42, 5, Math.E ]; console.log(Math.max(values[0], values[1], values[2])); console.log(Math.min(values[0], values[1], values[2]));Min is -42, max is 5.
console.log("Divide by zero:", 3 / 0); // Infinity
console.log("Divide by zero:", -3 / 0); // -Infinity
console.log("Not a number:", 0 / 0);
console.log("Not a number:", Math.sqrt(-2)); // Nan
var rawStr = "test"; // 1
var objStr = new String("test"); // 2
1. A primitive string is defined.if(rawStr == objStr) // 1
console.log("rawStr is a " + typeof(rawStr) + ", objStr is a " + typeof(objStr));
if(rawStr !== objStr) // 2
console.log("strictly speaking, a string is not equal to an object String");
1. A raw string and a wrapper String containing the same sequence of characters are loosely seen as equal, but the typeof() operator shows that they actually have a different type (string and object).var rawNum = 42;
var objNum = new Number(42);
if(rawNum == objNum)
console.log("rawNum is a " + typeof(rawNum) + ", objNum is a " + typeof(objNum));
if(rawNum !== objNum)
console.log("strictly speaking, a number is not equal to an object Number");
<html>
<head>
<title>Hello JavaScript</title>
<script type="text/javascript"></script> <!-- script language specification -->
</head>
<body>
<script>
var a; // 1
var b = null; // 2
if(a == b) // 3
console.log("undefined is loosely equal to null");
if(a === b) // 4
;
else
console.log("undefined is strictly not equal to null");
document.write("Hello World!"); // 5
</script>
</body>
</html>
If you are new to JavaScript there are a few interesting things to notice.