Polyfilling The HTML5 Gaps With JavaScript. A little about me.
jQuery Fundamentals. jQuery is built on top of JavaScript, a rich and expressive language in its own right.
This section covers the basic concepts of JavaScript, as well as some frequent pitfalls for people who have not used JavaScript before. While it will be of particular value to people with no programming experience, even people who have used other programming languages may benefit from learning about some of the peculiarities of JavaScript. Here's a simple JavaScript program that adds a message to the page: In the above example, we use a function called log. jQuery Proven Performance Tips And Tricks (Slides)
Thanks to everyone that attended the jQuery London and London Web Standards meetups this month.
As requested, here are the slides from my talks including links to all of the jsPerf tests embedded for each section. Summary. Tools For jQuery Application Architecture (Extended Slides) from #wdx. Hey guys.
I just wrapped up my talk on Tools for jQuery Application Architecture over at Web Directions in London and wanted to make sure anyone interested had access to the slides. This is the extended version, which includes about 15 slides that weren't in the original deck, but may prove useful. Some of the topics I cover include: MVC & MVVM architecture patterns for client-side development JavaScriptMVC, Backbone.js, Spine.js, Sammy.js Design patterns for JavaScript applications Dependency management JavaScript templating Cross-browser persistent storage Feature detection Widgets & Component libraries Unit Testing & testing environments Build Processes, concatenation and minification. Thanks to everyone that showed up at #wdx as well as the crowd that attended a preview of the talk earlier in the month from the London Ajax Group.
Related Links. Polyfilling The HTML5 Gaps With JavaScript. A little about me JavaScript & UI Developer @ AOL jQuery [Bug Triage/Docs/Learning] teams Contribute to open source projects like Modernizr Wrote a few polyfills and shims I ♥ making the web better I occasionally battle the dark side.
Why Do Polyfills Matter? First do it. Large-scale JavaScript Application Architecture. JavaScript Garden. Although JavaScript deals fine with the syntax of two matching curly braces for blocks, it does not support block scope; hence, all that is left in the language is function scope. function test() { // a scope for(var i = 0; i < 10; i++) { // not a scope // count } console.log(i); // 10} There are also no distinct namespaces in JavaScript, which means that everything gets defined in one globally shared namespace.
Each time a variable is referenced, JavaScript will traverse upwards through all the scopes until it finds it. In the case that it reaches the global scope and still has not found the requested name, it will raise a ReferenceError. The Bane of Global Variables // script Afoo = '42'; Do you know about this undocumented Google CDN feature? By now, you probably already know that Google hosts jQuery on its AJAX APIs CDN, free of charge.
As I’ve discussed here in the past, I’m a big fan of using their CDN to achieve decreased latency, increased parallelism, and better caching. If you’ve explored the AJAX APIs documentation a bit, you may know that jQuery UI is also hosted on Google’s CDN. Unfortunately, since jQuery UI plugins depend on a ThemeRoller theme, using a CDN for jQuery UI isn’t as easy as with jQuery itself. Or, is it? My <head> is in the cloud While poking around a couple months ago, I stumbled upon something that I’ve found extremely useful: An entire jQuery UI theme hosted on Google’s CDN! Not only is the theme’s CSS stylesheet there, but all 14 of the theme’s images are hosted in the correct relative location too.
Even better, while JavaScript and CSS includes are unable to take full advantage of the increased parallelism a CDN offers, the theme’s images do. Serve jQuery and jQuery-UI from Google's CDN. JavaScript Objects. jQuery Miscellaneous Methods. jQuery Get Content and Attributes. Getting Started with jQuery. Draggable Demos. Item Blur Effect with CSS3 and jQuery - Today Codrops want to show you how to create a simple blur effect for text-based items.
The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that drwas the attention to the currently hovered item. We’ll be using CSS3 transitions and some jQuery to apply the respective classes. Since CSS3 transitions are not supported in order browsers, the demo should be best viewed in Safari or Chrome (here we got the smoothest transitions). View Demo Source Website & Download Please Log In to bump this post. jQuery: Textbox Validation and the blur() Event. Jquery ajax post. Ajax. Description: Perform an asynchronous HTTP (Ajax) request.
The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available and are easier to use. If less common options are required, though, $.ajax() can be used more flexibly. At its simplest, the $.ajax() function can be called with no arguments: Note: Default settings can be set globally by using the $.ajaxSetup() function.
This example, using no options, loads the contents of the current page, but does nothing with the result.