jQuery special events. The jQuery special events API is a fairly flexible system by which you can specify bind and unbind hooks as well as default actions for custom events. In using this API, you can create custom events that do more than just execute bound event handlers when triggered—these “special” events can modify the event object passed to event handlers, trigger other entirely different events, or execute complex setup and teardown code when event handlers are bound to or unbound from elements.
Note that this article uses some advanced jQuery techniques and assumes you understand the concepts of custom events and event delegation using bubbling. Also, because this article is rather long, it has been broken up into sections. I’d recommend reading it in order, one section at a time, because techniques used in subsequent examples often reference those used in previous examples. Also, your brain is going to need a rest here and there, so take it slow. Updates: 1. 2. 01.jQuery.event.special.myevent = { 14. 1. jQuery Boilerplate.
Untitled. Raphaël—JavaScript Library. Features. Standing on the shoulders of Scriptographer and making use of HTML5 standards, Paper.js is a comprehensive open source vector graphics scripting framework. Document Object Model Paper.js provides a Document Object Model (also called a Scene Graph) that is very easy to work with. Create a project and populate it with layers, groups, paths, rasters etc. Groups and layers can contain other items and even other groups. If you've never heard of a Document Object Model before, you can think of it as the layers palette of applications such as Adobe Illustrator & Adobe Photoshop. The image on the left is an illustration of the structure of the project after executing the code below, if you would be looking at it in an application like Adobe Illustrator. There are two layers, the red path was created in the first layer and the green path was created in the second.
Learn more about the Document Object Model in the Document Hierarchy tutorial. Paths & Segments Mouse Interaction Keyboard Interaction. Book of Speed. jQuery Deconstructed. Contents -- Eloquent JavaScript. Sophisticated Sorting in JavaScript » JavaScript & CSS » SitePoint Blogs. JavaScript’s sorting mechanism is a model of simplicity, yet bubbling under the surface is some incredibly flexible and powerful functionality. Using sort it’s possible to organise arrays, not just into alphabetical or numerical order, but into any bespoke arrangement we can express in conditional logic. How the sort function works → If you already know the basics then you might want to skip ahead.
If sort() is called with no argument, then the array is sorted lexicographically — in dictionary order, when each value is treated as a string: var letters = ["R","O","F","L"]; letters.sort(); alert(letters); //produces ["F","L","O","R"] Otherwise the argument to sort is a comparison function, which defines the sort behavior according to how it returns.
If the function returns less than zero, sort a before bif the function returns greater than zero, sort b before aif the function returns zero, leave a and b unchanged with respect to each other The specification defines the rules in a confusing way. Embedded Help System. Scrivere plugin per jQuery. Lunedì 22 novembre 2010 - 11:34 di Gabriele Romanato Una delle caratteristiche più interessanti di jQuery è la sua estensibilità mediante plugin. Gli ideatori di jQuery hanno giustamente pensato che è praticamente impossibile creare una libreria che soddisfi tutte le esigenze degli sviluppatori. Quindi hanno lasciato aperta una porta per estendere le funzionalità di base della libreria.
Questa porta è l’alias fn che non è altro che una scorciatoia per accedere alla proprietà prototype di ciascun oggetto del set di jQuery. In jQuery, tutti i componenti di una catena di selettori (per esempio elementi HTML) sono oggetti. In JavaScript quando si crea un oggetto si crea anche una proprietà prototype che serve sia per aggiungere membri all’oggetto sia per gestirne l’ereditarietà . La sintassi è la seguente: (function($) { $.fn.plugin = function() { // qui il codice del plugin }; })(jQuery); $('#test').plugin(); Il nostro esempio è semplicissimo: una funzione senza argomenti. Advanced Web Applications With Object-Oriented JavaScript. Recently I interviewed a software developer with five years experience in developing Web applications.
She’d been doing JavaScript for four and a half years, she rated her JavaScript skill as very good, and—as I found out soon after—she actually knew very little about JavaScript. I didn’t really blame her for that, though. JavaScript is funny that way. It’s the language a lot of people (including myself, until recently!) Assume they’re good at, just because they know C/C++/C# or they have some prior programming experience. In a way, that assumption is not entirely groundless. Indeed, until recently, I’d always been able to get by with whatever little JavaScript I knew, armed only with the MSDN® DHTML reference and my C++/C# experience.
Object-oriented programming (OOP) is one popular approach that’s used in many JavaScript libraries to make a codebase more manageable and maintainable. JavaScript Objects Are Dictionaries does exactly the same thing as this: OK, so what’s happening here? JavaScript Object-Oriented Programming Part 2. In Part 1 of this series, we covered objects, object methods, and object categories. Now, let’s move on. Arguments In every function, a private variable — argument — is automatically created, holding an array of the arguments passed to the function. For example: function testArg(){ for(i=0;i<arguments.length;i++){ alert("Argument "+i+" is "+arguments[i]); } } As demonstrated in the example above, we can access the set of arguments passed when calling a function with the arguments variable that exists in the function’s scope.
Therefore, we can use: testArg("PageResource","SitePoint","JavaScriptCity", "WebSite Abstraction"); …to get an alert of some of my favorite Web development sites. Complex Example Now that we have a foundation in object-based programming in JavaScript, let’s build an intricate object-based example, a library. Function Person(lastName, firstName){ this.lastName = lastName; this.firstName = firstName; } And now, let’s create some instances of our Person object: JavaScript Object-Oriented Programming Part 1. This article was written in 2001 and still remains one of our most popular posts. If you’re keen to learn more about JavaScript, you may find this recent article on TypeScript of great interest.
It may be shocking news, but JavaScript is a very powerful object-based (or prototype-based, whatever you wish to call it) language. Yes, JavaScript is a powerful language, not just something that’s handy for image rollovers and other corny, flashy effects. However, very few people who have used JavaScript realize its capabilities. If you’re one of these people, this tutorial is aimed at you.
First of all, JavaScript is not a full-blown OOP (Object-Oriented Programming) language, such as Java or PHP, but it is an object-based language. So, why should you use objects? I hope that this article will turn an intermediate JavaScripter who’s itching to learn objects, into an expert, keen on the exciting object-oriented JavaScript world! In this tutorial, you’ll learn: JavaScript’s Primitive Data Types.
Styling Checkboxes and Radio Buttons With CSS and JavaScript. This JavaScript and CSS will allow you to use custom images to style checkboxes, radio buttons and drop down menu select lists. Have you ever wanted to use your own images for checkboxes, radio buttons or select lists? This script will let you do that. Easily. The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements. This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others.
The example This script is stand-alone and does not require jQuery or other library to work. View a more comprehensive example How does it work? In a nutshell, the JavaScript looks for every form element with class="styled" on it; hides the real form element; sticks a span tag with a CSS class on it next to the element; and, finally, mouse events are added to the span that handles the visual stages form inputs go through when they are clicked. Download the full script Download the CSS file The CSS The HTML Checkbox. Andrew Hoyer | Cloth Simulation. A little more detail: What makes this simulation special is the speed at which everything is computed. Javascript (the language this is written in) is not exactly the most efficient language for this type of computation. This being said, much time was spent squeezing out every little detail that slows things down. The most computationally expensive part is trying to satisfy the constraints.
To do this requires the calculation of distance between two points. This is easy to do with a little math, but that often involves an expensive square root. "Boring! " No. Maybe a little more detail: Another pretty neat thing about this simulation is how all the constraints are satisfied. As it turns out there is a really simple solution to this problem. Knowledge is power: If you're interested here are some links: Advanced Character Physics This article (or paper...) is my inspiration for doing this simulation. Learning Advanced JavaScript. JavaScript Kit Advanced JavaScript Tutorials.