Dan Shappir: Things You Can Do In ES6 That Can't Be Done In ES5

• Map (implementing a dictionary - Map can be emulated in ES5 but with worse performance)
• WeakMap / WeakSet
• Proxy ('operator overloading')
• Symbol.toPrimitive
• Tail Call Optimization / Tail Recursion

Object.keys()

The Object.keys() method returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
src

And this is how you iterate the keys of an array:

Object.keys(myArray).forEach(function (key) {
   // do something with obj[key]
});

src

jQuery Tools Scrollable

Itt van.

Douglas Crockford: Durable Objects

Fortunately, JavaScript provides the means to construct durable objects that can perfectly guard their state by using a variation of the Module Pattern.
...
By adding one simple rule, we can easily generate secure objects:
A durable object contains no visible data members, and its methods use neither this nor that.

This is a template for a durable constructor:

function durable(parameters) {
var that = {} or the product of another durable constructor;

var private variables;

function method() {
…
}

that.method = method;
return that;
}

Define all of your methods as private methods. The methods you choose to expose to the public get copied into that. None of the functions defined or inherited make use of that or this.
...
Durable objects allow code from multiple (possibly untrusted) parties to
cooperate. Durable objects can be expressed in a safe subset of JavaScript,
such as ADsafe or Cajita.

2 cikk a javascript closures-rol

Jonathand Dodds: Javascript Closures

Eric Lippert: What are closures?

arguments array a javascript fv-ekben

Ahogy Michael Kuehl irja:

The arguments array is a special array that gets set when you enter a function call in javascript. The only thing special about it, though, is that it holds all the arguments that the function was called with - other than that it acts like a normal array.

…

Also, the arguments array is not read only. This means that you can alter its contents, or even clear the array itself.

…

And if you modify the arguments array itself (i.e, in this case set it to null), you loose the ability to access the arguments through the arguments array, but it doesn’t affect any of the actual variables.

ADsafe

ADsafe defines a subset of JavaScript that is powerful enough to allow an ad to perform valuable interactions, while at the same time preventing malicious or accidental damage or intrusion by the ad.

7-es elotti IE-nel problemat okozhat a HEAD-hez uj elem hozzaadasa, ha van mar beolvasott BASE tag

A korabban itt es itt emlegetett dinamikus javascript betoltessel kapcsolatban Shaun Inman belefuott egy problemaba IE-nel (7-esnel regebbi):

Ran into a JavaScript problem with everybody’s favorite browser recently. Manipulating the head element from within (say by adding additional script or link elements before the page loads) was resulting in an enormously helpful “Operation Aborted” error message in versions of Internet Explorer prior to 7. Of course, like all things IE, this error’s appearance was inconsistent.

I was eventually able to track the problem down to the presence of a base tag. It didn’t matter if it was an open <base> or a self-closing <base />, if it came before the <script> that was manipulating the head, then IE stopped everything and issued the error. (At this point in script execution document.getElementsByTagName('head')[0] is a valid HTML element so testing for its availability before attempting to appendChild() doesn’t avoid the error. try/catch() is also of no assistance.)…

K. Scott Allen: What ASP.NET Developers Should Know About JavaScript

Itt van az egesz.

Az erdekesebb pontok a vegefele vannak:

• Object Prototypes
• how to add private members to a JavaScript object
• we can “simulate” namespace using objects

Fritz Onion: Beware trailing comma in JavaScript prototypes

Itt van, de rovid ugyhogy be is masolom:

When defining a number of functions in a prototype in JavaScript, do not include a trailing comma after the last

MyType.prototype = {
foo : function() {
// ...
},

bar : function() {
//...
}, //<- fails in IE!
}

function:What was especially tricky about tracking this problem down was that FireFox works with or without the trailing comma, so it only fails in IE!

Peter-Paul Koch: The this keyword (in javascript)

Itt van az egesz, de a lenyeg:

What does this refer to in the function doSomething()?

function doSomething() {
this.style.color = '#cc0000';
}


If you want to use this for accessing the HTML element that is handling the event, you must make sure that the this keyword is actually written into the onclick property. Only in that case does it refer to the HTML element the event handler is registered to. So if you do

element.onclick = doSomething;
alert(element.onclick)


you get

function doSomething()
{
this.style.color = '#cc0000';
}


As you can see, the this keyword is present in the onclick method. Therefore it refers to the HTML element.

But if you do

alert(element.onclick)
you get

function onclick()
{
doSomething()
}


Examples - copying

this is written into the onclick method in the following cases:
element.onclick = doSomething
element.addEventListener('click',doSomething,false)
element.onclick = function () {this.style.color = '#cc0000';}


Examples - referring

In the following cases this refers to the window:

element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)

Miert ne hasznaljunk with-et javascriptben

Crockford nem ajanlja, mert peldaul a


with (o) {
foo = null;
}


jelentheti azt is, hogy az o.foo lesz null meg azt is, hogy a globalis foo valtozo lesz null vagy akar mindketto.

throw a javascriptben

A sima throw new Error(reason); mellett lehet object literalt is hasznalni.

Pelda a Crockford videobol:


throw {
name: exceptionName,
message: reason
}


for..in buktato javascriptben

Vegig lehet menni egy object minden member-en igy:


for (var name in object) {...}


de ilyenkor vegigmegyunk azoknak az object-eknek is minden elemen amibol a mi objectunk szarmaztatva volt. Ezert Crocford szerint jobb igy megszokni meg ha csunya is:


for (var name in object) {
if (object.hasOwnProeprty(name)) {..}
}

laballed break a javascriptben

Crockford video (00:23) slide 40

• Statements can have labels.

• Break statements can refer to those labels.


loop: for (;;) {
...
if (...) {
break loop;
}
...
}

Egymasba agyazott ciklusoknal is mukodik.

Honnan tudjuk, hogy az utolag include-olt javascript mar betoltodott. [2]

Az elozo problemara a codingforums.com-on callback-es megoldast javasolnak a firefoxban az element.addEventListener, IE-ben pedig a onreadystatechange event segitsegevel:


function loadScript(src, callback) {
var node = document.createElement("script");
if (node.addEventListener)
node.addEventListener("load", callback, false);
else
node.onreadystatechange = function() {
if (this.readyState == "complete") callback.call(this);
}
node.src = src;
document.getElementsByTagName("head").item(0).appendChild(node);
node = null;
}


// load 30k script.
// Listener.cleanUp is defined at the bottom of drag.js
callback = function() {
var self = this;
alert("Loaded: " + this.src + "\nListener.cleanUp (nested):" + Listener.cleanUp);
};
loadScript("http://dhtmlkitchen.com/editor/js/drag.js", callback);


[Update]
Ahogy Jan Volter is emliti jobb vigyazni ezzel a readyState propertyvel es onreadystatechange eventtel, mert:
The “this.readyState == ‘complete’” test doesn’t actually entirely work. The readyState theoretically goes through a series of states:

0	uninitialized
1	loading
2	loaded
3	interactive
4	complete

But in fact, states may be skipped. In my experience with IE 7, you get either a loaded event or a completed event, but not both. It may have something to do with whether you are loading from cache or not but there seem to be other factors that influence which events you get. Sometimes I get loading or interactive events too, and sometimes I don’t. It’s possible the test should be “this.readyState == ‘loaded’ || this.readyState == ‘complete’“, but that risks triggering twice.

Honnan tudjuk, hogy az utolag include-olt javascript mar betoltodott.

Viszonylag egyszeru utolag hozzaadni egy js filet az oldalunkhoz (1, 2), de ha rogton ezutan valamit hasznalni szeretnenk belole akkor az nem biztos, hogy menni fog, mert lehet, hogy meg nem toltodott be teljesen.

Stoyan (mar torolt) irasa szerint egy 1998-as MSDN cikkben talalkozott a readyState property-vel es azt hasznalva ez a kodreszlet IE-ben (csak ott!!) mukodik:

The idea is that after a new DOM element (a script tag) is created, you can have access to the readyState property of the element. If it says “complete”, then the new script is included and it’s OK to call functions from it. If you want to “listen” when the script download will be completed, you can attach an listener to the onreadystatechange event, just like with XMLHttpRequests.

Here’s an example:


var js;
function include_js(file) {
var html_doc = document.getElementsByTagName('head').item(0);
js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', file);
html_doc.appendChild(js);

// alert state change
js.onreadystatechange = function () {
alert(js.readyState);


if (js.readyState == 'complete') {
// safe to call a function
// found in the new script
imready();
}
}
return false;
}


A commentek kozott Aaron Bassett egy masik megoldast javasolt, amihez modositani kell egy kicsit a betoltendo scripten (mar ha ez lehetseges), de szerinte minden browserben mukodik (bar nem probalta):

This untested but I dont see any reason why it wouldnt work, and should work across all browsers.

Right at the end of the external js file set a variable like:

var externalScriptLoaded = true;

Then in your main code you could use:


function checkScriptLoaded() {
if(!externalScriptLoaded) {
setTimout("checkScriptLoaded", 500);
} else {
// script loaded and ready to use
}
}

If you have multiple external files you want to check just make sure each has a unique variable name being set and check them accordingly.

This polling every half-second isnt perfect but it will work.

Your other option would be to create a function/method in your main script which inits the actions to perform when the external script is loaded.
Then as the very last thing in your external script you could just call that function/method

externalScripts.myScriptLoaded();

As this call would be at the end of your file it wont be run until the rest of the file ahead of it has been downloaded.

Once again this method is untested but am 99% sure will work and will be cross browser.

Nicholas C. Zakas: dynamically inserting CSS into your page

Itt van az egesz, de a lenyeg:

Safari requires dynamically created <style/> elements to be inserted into the for the rules to be applied

…

When IE encounters style.appendChild() it throws the rather obtuse and not-very-helpful error message, “unexpected call to method or property access”. Try replacing that with a call to set innerHTML, and you’ll get an equally useless error message of “unknown runtime error”. What’s going on here? It turns out that IE won’t let you manipulate <style/> elements in this way. There is, however, a different way to do the same thing. IE supports a styleSheet property on each style element that allows for the manipulation of the style sheet and the rules contained within. The styleSheet property has a property called cssText, which can be used to set and retrieve the CSS text for the style sheet.

…

This code now works in all A-grade browsers:

function addCss(cssCode) {
var styleElement = document.createElement(”style”);
styleElement.type = “text/css”;
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode));
}
document.getElementsByTagName(”head”)[0].appendChild(styleElement);
}

A warning: IE only allows writing to styleSheet.cssText one time per <style> element. If you try to do it more than one time, it can crash the browser. For this reason, it’s best not to reuse <style> elements on your page. Instead, remove them or just add new ones.

…

A commentek kozul:

According to the HTML 4.01 spec section 14.2.3, style tags must be contained in the head element: “HTML permits any number of STYLE elements in the HEAD section of a document.”

Link to the spec:
http://www.w3.org/TR/html401/present/styles.html#edef-STYLE

javascriptben lassuak a bitwise operatorok

Crockford video (30:10)

Mert eloszor atkonvertaljak a 64 bites floating point-ban tarolt szamot 32 bites signed integerre, aztan shiftelik es utana visszakonvertaljak az eredmenyt 64 bites floating point-ba.

Tehat a shiftelgetes itt lassabb lesz mintha siman megszoroznank mondjuk kettovel az erteket.

&& es || operatorok javascriptben

Crockford video (28:20)

&& operator

• The guard operator, aka logical and

• If first operand is truthy
  then result is second operand
  else result is first operand

• It can be used to avoid null references
  if (a) {
return a.member;
} else {
return a;
}

• can be written as
  return a && a.member;

|| operator

• The default operator, aka logical or

• If first operand is truthy
  then result is first operand
  else result is second operand

• It can be used to fill in default values.
  var last = input || nr_items;

• (If input is truthy, then last is input, otherwise set last to nr_items.)