Skip to main content

Home/ javascript/ Group items tagged style

Rss Feed Group items tagged

Javier Neira

Perfection kills » Understanding delete - 3 views

  • All because it’s not possible to delete variables in Javascript. At least not when declared in such way.
  • It’s almost as if Firebug follows some other rules of deletion. It is Firebug that has led Stoyan astray! So what is really going on here?
  • we need to understand how delete operator works in Javascript: what exactly can and cannot be deleted and why.
  • ...35 more annotations...
  • var o = { x: 1 }; delete o.x; // true o.x; // undefined
  • var x = 1; delete x; // false x; // 1
  • function x(){} delete x; // false typeof x; // "function"
  • Note that delete only returns false when a property can not be deleted.
  • variable instantiation and property attributes
  • Global code, Function code and Eval code.
  • When a source text is treated as a Program, it is executed in a global scope, and is considered a Global code.
  • Anything that’s executed directly within a function is, quite obviously, considered a Function code. In browsers, content of event attributes (e.g. <p onclick="...">) is usually parsed and treated as a Function code.
  • text that’s supplied to a built-in eval function is parsed as Eval code. We will soon see why this type is special.
  • And now that we know the difference between property assignment and variable declaration — latter one sets DontDelete, whereas former one doesn’t — it should be clear why undeclared assignment creates a deletable property:
  • As you can see, execution contexts can logically form a stack. First there might be Global code with its own execution context; that code might call a function, with its own execution context; that function could call another function, and so on and so forth. Even if function is calling itself recursively, a new execition context is being entered with every invocation.
  • Every execution context has a so-called Variable Object associated with it. Similarly to execution context, Variable object is an abstract entity, a mechanism to describe variable instantiation. Now, the interesing part is that variables and functions declared in a source text are actually added as properties of this Variable object.
  • When control enters execution context for Global code, a Global object is used as a Variable object. This is precisely why variables or functions declared globally become properties of a Global object:
  • The behavior is actually very similar: they become properties of Variable object. The only difference is that when in Function code, a Variable object is not a Global object, but a so-called Activation object. Activation object is created every time execution context for Function code is entered.
  • and a special Arguments object (under arguments name). Note that Activation object is an internal mechanism and is never really accessible by program code.
  • within Eval code are created as properties of calling context’s Variable object. Eval code simply uses Variable object of the execution context that it’s being called within:
  • Execution context When ECMAScript code executes, it always happens within certain execution context.
  • When declared variables and functions become properties of a Variable object — either Activation object (for Function code), or Global object (for Global code), these properties are created with DontDelete attribute. However, any explicit (or implicit) property assignment creates property without DontDelete attribute. And this is essentialy why we can delete some properties, but not others:
  • Special arguments variable (or, as we know now, a property of Activation object) has DontDelete. length property of any function instance has DontDelete as well:
  • As you might remember, undeclared assignment creates a property on a global object.
  • Now that it’s clear what happens with variables (they become properties), the only remaining concept to understand is property attributes. Every property can have zero or more attributes from the following set — ReadOnly, DontEnum, DontDelete and Internal. These attributes serve as sort of flags — an attribute can either exist on a property or not. For the purposes of today’s discussion, we are only interested in DontDelete.
  • Variables declared within Eval code are actually created as properties without DontDelete:
  • This interesting eval behavior, coupled with another aspect of ECMAScript can technically allow us to delete non-deletable properties. The thing about function declarations is that they can overwrite same-named variables in the same execution context:
  • Note how function declaration takes precedence and overwrites same-named variable (or, in other words, same property of Variable object). This is because function declarations are instantiated after variable declarations, and are allowed to overwrite them
  • If we declare function via eval, that function should also replace that property’s attributes with its own. And since variables declared from within eval create properties without DontDelete, instantiating this new function should essentially remove existing DontDelete attribute from the property in question, making that property deletable (and of course changing its value to reference newly created function).
  • Unfortunately, this kind of spoofing doesn’t work in any implementation I tried. I might be missing something here, or this behavior might simply be too obscure for implementors to pay attention to
  • this.x = 1; delete x; // TypeError: Object doesn't support this action
  • var x = 1; delete this.x; // TypeError: Cannot delete 'this.x'
  • It’s as if variable declarations in Global code do not create properties on Global object in IE.
  • Not only is there an error, but created property appears to have DontDelete set on it, which of course it shouldn’t have:
  • “The global variable object is implemented as a JScript object, and the global object is implemented by the host.
  • Note how this and window seem to reference same object (if we can believe === operator), but Variable object (the one on which function is declared) is different from whatever this references.
  • delete doesn’t differentiate between variables and properties (in fact, for delete, those are all References) and really only cares about DontDelete attribute (and property existence).
  • The moral of the story is to never trust host objects.
  • Few restrictions are being introduced. SyntaxError is now thrown when expression in delete operator is a direct reference to a variable, function argument or function identifier. In addition, if property has internal [[Configurable]] == false, a TypeError is thrown:
Ivan Pavlov

John Resig - DOM DocumentFragments - 0 views

  • var div = document.getElementsByTagName("div"); var fragment = document.createDocumentFragment(); for ( var e = 0; e < elems.length; e++ ) {         fragment.appendChild( elems[e] ); } for ( var i = 0; i < div.length; i++ ) {         div[i].appendChild( fragment.cloneNode(true) ); }
  • Setting some time stamps we can see our results pay off in spades: Browser Normal (ms) Fragment (ms) Firefox 3.0.1 90 47 Safari 3.1.2 156 44 Opera 9.51 208 95 IE 6 401 140 IE 7 230 61 IE 8b1 120 40
Javier Neira

All about types in Javascript - The basics | united-coders.com - 0 views

  • This may lead to interesting results. When dealing with arrays, an array is converted to a string by converting the elements to string, seperating each element by a comma. [].toString();      // "" [2].toString();     // "2" [1,2,3].toString(); // "1,2,3"
Javier Neira

Caffeinated Simpleton » Blog Archive » An Introduction to JavaScript's "this" - 2 views

  • That’s what this is expected to be, anyway. It’s expected to be a reference to the current instance of whatever object it’s defined within.
  • It’ll give an error saying that this doesn’t have a member called condiments, even though it clearly does. What happened?!
  • This is because there is no binding of functions to instances in JavaScript.
  • ...3 more annotations...
  • The setTimeout function, however, just has a reference to that function. When it calls it, it’s not aware of myHotDog, so JavaScript sets this to window
  • function HotDog() { var my = this; // my references the current this, which is correct. my.condiments = "mustard, ketchup"; my.getCondiments = function() { return my.condiments; //my is guaranteed to be a reference to the original "this" } }
  • In constructors, this is always your instance. So we created a new variable, my, that references the HotDog instance. This allows you to always refer to the HotDog instance, no matter how the getCondiments function is called.
Javier Neira

Playing with JQuery Validation Library, Part 2 | Elegant Code - 2 views

  • The new part is the remote in the script.   You give it the name/location of your web service to call to validate the field, and the field name/value are passed in. 
  • 1: $('#UserNameForm').validate({ 2: rules: { 3: userNameEdit: { required: true, remote: "<%=Url.Action("VerifyUserName", "Account") %>" } 4: } 5: });
Mike Chelen

Data scraping with YQL and jQuery | kelvinluck.com - 0 views

  • need a list of all the US National Parks in XML format
  • grab the data from this list on Wikipedia
  • navigating a HTML DOM
  • ...9 more annotations...
  • jQuery to parse the data
  • XPath to your YQL
  • relevant table from the Wikipedia document
  • SELECT * FROM html WHERE url="http://en.wikipedia.org/wiki/List_of_United_States_National_Parks_by_state" AND xpath="//table[@class='wikitable sortable']"
  • XML or JSON
  • creating an XML document
  • AJAX call from jQuery and then loop over the JSON
  • documentation could maybe be clearer
  • CSS style selection engine as well as the XPath one
yc c

Color Picker - Raphaël - 0 views

shared by yc c on 04 Mar 10 - Cached
  •  
    No images. No libraries*. Works even in IE6. // Color Picker by Raphaël - raphaeljs.com var icon = Raphael("picker", 23, 23).colorPickerIcon(11, 11, 10); icon.attr({cursor: "pointer"}).node.onclick = function () {    document.getElementById("benefits").style.visibility = "visible";    var out = document.getElementById("output");    out.style.visibility = "visible";                   // this is where colorpicker created    var cp = Raphael.colorpicker(document.body.offsetWidth / 2 - 150, 250, 300, "#eee", document.getElementById("picker2"));                   out.onkeyup = function () {        cp.color(this.value);    };    // assigning onchange event handler    cp.onchange = function (clr) {        out.value = clr;        document.body.style.background = clr;        document.body.style.color = Raphael.rgb2hsb(clr).b s it. Too easy                    icon.node.onclick = null;}; 
Javier Neira

The Dark side of JavaScript - Part 1 @ Milkshake Systems - 3 views

  • var foo = "foo"; // same as window.foo function doSomething() { bar = "bar"; // same as window.bar }
Mohammed GHERAÏSSA

Raphaël: a JavaScript API for SVG - Opera Developer Community - 0 views

  •  
    Opera Developer Community article: Raphaël: a JavaScript API for SVG" />Raphaël: a JavaScript API for SVG - Opera Developer Communitytext/css
Ivan Pavlov

Meteora Javascript Widgets - 0 views

  • Demo SWF

    Meteora Description

    Meteora is set of cross-browser Widgets and Controls that allows you to quickly write rich and customizable web applications without having to waste time reading full pages of documentation or programming excessive javascript that is painful to debug in every browser.

Hussain M Elius

How to hide, show, or toggle your div - 0 views

  •  
    Are you trying to find a way to hide and show your content? The demo below shows a simple way of toggling your content via Javascript and styling.
yc c

JSLint, The JavaScript Code Quality Tool - 1 views

  •  
    JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.
Javier Neira

Debugging Tools for Windows - Overview - 0 views

  •  
    Provides links and information about tools, downloads, and recommended techniques for debugging drivers for Windows operating systems.">http://www.microsoft.com/MSCOM/MNP2/Schemas
yc c

The WebKit Open Source Project - WebKit Coding Style Guidelines - 1 views

  •  
    .
yc c

gotAPI.com - Documentation search engine - 2 views

  •  
    gotAPI helps you find functions, classes, methods, properties, styles, tags, constants and more \n Search In\nActionScript 2.0, ActionScript 3.0, Adobe Flex 2, Adobe Flex 3.3, Apache Ant, Apache Commons, Apache RegExp, Apache Struts 1.1, Berkley DB XML, Bluetooth and OBEX, C++, CakePHP 1.2, Castor, CDC, CLDC, ColdFusion MX-7, ColdFusion MX-8, CSS, CSS, DbUnit 2.4.5, Dinkumware C/C++, DITA 1.1, DocBook, Dojo Toolkit 1.3, Drupal, Eclipse Platform 2.1, Erlang, Flickr API, FP, Google GWT, Google GWT+Gears, Groovy, Haskell, Hibernate, HTML, HTML, HttpUnit, J2EE 5.0, Java 1.5, Java 1.6, JavaScript, JavaScript, jQuery, JSON LIB, JSTL, JUnit, Log4J, MIDP, Mobile Media, MochiKit, MooTools, MySQL 4.1, OpenGL 2.1, Oracle 10g, Oracle 9i, Orb API 2.0, OSGi Platform 4.1, PBP, Perl 5.10, PHP, PostgreSQL 8.3, Prototype.js, Python 2.6.1, RMagick 1.15, RogueWave, Ruby Std Libraries, Ruby/Rails, Scala 2.7.3, Schema (XSD), Script.aculo.us 1.8, Selenium 0.8.2, Sicstus Prolog, Simple DirectMedia Layer, Spring Framework 2.0, Symphony 1.2, Twitter API, Web Services, XML DOM, XPath 2.0, XSL 2.0, Yahoo! UI\n
anonymous

nodeschool.io - 4 views

  •  
    Learn Node.JS with interactive lessons Install these choose-your-own-adventure style lessons and learn how to use node.js, npm and other related tools by writing code to solve realistic problems. The lessons run in your terminal and work on Windows, Mac and Linux. Select a lesson below to get started!
Ivan Pavlov

joose-js - Google Code - 0 views

  • Joose is a self-hosting meta object system for JavaScript with support for classes, inheritance, mixins, traits, method modifiers and more. Joose makes object-oriented programming with JavaScript easy, declarative and very productive. The Joose meta-object system is multi-paradigm. It supports class-based and prototype-based programming styles as well as class-based inheritance and role-based extention. The Joose framework has been successfully used in multiple production systems for twelve months now and has been proven to be very stable. Joose is being tested using an automated unit-test suite that is being run in all major browsers (Firefox, IE, Safari, Opera and Chrome).
Hussain M Elius

Javascript Growler (PrototypeJS) - 0 views

  • Growler is a PrototypeJS based class that displays unobtrusive notices on a page. It works like the OS X Growl. It supports themes by using CSS styling. Also options can be passed to modify how long the notice is displayed or whether it remains displayed until the user closes it.
1 - 20 of 20
Showing 20 items per page