background preloader

Javascript Tuts

Facebook Twitter

21 JavaScript Tips & Tricks for JavaScript Developers. If you are doing lot of JavaScript programming, you might find below list of code snippets very useful.

21 JavaScript Tips & Tricks for JavaScript Developers

Keep it handy (bookmark it) and save it for future reference. Memory by Gonzalo Ruiz de Villa. Links for Advanced JavaScript Reading. Due to the lower traffic holiday week, and the fact that I’m busy with other stuff, this week’s posts will consist of reading lists and roundups.

Links for Advanced JavaScript Reading

Today the focus is on some heavier JavaScript stuff. Feel free to add any others in the comments. Enjoy. Object-orientation and inheritance in JavaScript: a comprehensive explanation (Manuel Kiessling) “The good news is that [Object-orientation and inheritance in JavaScript is] actually quite simple, but the bad news is that it works completely different than object-orientation in languages like C++, Java, Ruby, Python or PHP, making it not-quite-so simple to understand.” jQuery Deconstructed (Adventures in Keyframes and Code) “The Deconstructed series is designed to visually and interactively deconstruct the internal code of JavaScript libraries, including jQuery, Prototype and MooTools.

Important Considerations When Building Single Page Web Apps. Single page web applications - or SPAs, as they are commonly referred to - are quickly becoming the de facto standard for web app development.

Important Considerations When Building Single Page Web Apps

The fact that a major part of the app runs inside a single web page makes it very interesting and appealing, and the accelerated growth of browser capabilities pushes us closer to the day, when all apps run entirely in the browser. Technically, most web pages already are SPAs; it's the complexity of a page that differentiates a web page from a web app. In my opinion, a page becomes an app when you incorporate workflows, CRUD operations, and state management around certain tasks. You're working with a SPA when each of these tasks take place on the same page (using AJAX for client/server communication, of course). Let's start with this common understanding, and dive into some of the more important things that should be considered when building SPAs. Creating a Javascript Bookmarklet.

For nearly all problems there are probably a hundred different solutions.

Creating a Javascript Bookmarklet

Building jQuery Popups without jQuery UI - Part 1. While the jQuery UI library is quite powerful, and mighty impressive, its footprint is sometimes a bit too much for the project at hand.

Building jQuery Popups without jQuery UI - Part 1

The UI library also tends to "take over" your HTML, moving it, adding classes, and sometimes even changing attributes around. jQuery Popups without jQuery UI - Part 2. In part 1, we went over the creation of a basic jQuery popup plugin.

jQuery Popups without jQuery UI - Part 2

While this is very useful in itself, it is not that flexible yet. This time around we are going to add a few new features that will make our popup plugin way more flexible and useful. So come on and find out what cool things we will make our popup do. jQuery Snippit - .each() We love us some jQuery, it makes the life of a web developer so much easier.

jQuery Snippit - .each()

Sometimes, however, there just isn't a magical jQuery function that does what you need. On occasion you need to select a bunch of stuff and do some custom logic on each element. You don't necessarily need to move all the objects or change some css, sometimes you just need to do something more your own style. This is where the each() function comes in. The each() works just like it sounds. jQuery Snippet - Interesting Selectors. As usual, we are diving into jQuery once again.

jQuery Snippet - Interesting Selectors

However, unlike a typical foray in the Javascript world, we are going to look at some simple jQuery selectors. Not just any selectors though. Today I have some interesting selectors that you may not know about, but can be extremely useful. So let's get started. :even and :odd. Javascript - Highlighting Selected Text. I am sure we all have been at a point when we need to highlight something, and most note taking or sharing software allows you to pick and color and go selection crazy.

Javascript - Highlighting Selected Text

Luckily, however, it is actually surprisingly easy to get a selection and highlight it with Javascript. To start, why not take a second and just selected some text this tutorial. You should have just highlighted some text green, as I have included the necessarily Javascript to allow highlighting in any paragraph in the content section of the tutorial. That's right, you can highlight any text you want in the confines of the tutorial. Javascript Tutorial - Namespaces. Namespaces can be a powerful tool for code organization and conflict avoidance.

Javascript Tutorial - Namespaces

Unfortunately, Javascript does not have native support for this extremely useful construct. That being said, the language's flexibility allows us to create a facsimile that works quite well. Namespace Declaration We're going to use objects to simulate namespaces. At the top of each file where you want to include and use a namespace, add the following line. var myNamespace = myNamespace || {}; Javascript Snippet Tutorial - Dynamically Modifying Tables. Whereas we've used Javascript to dynamically modify table contents in a previous tutorial, we've never written a tutorial specifically explaining how it's done.

That's where this tutorial comes in. I'm going to demonstrate, through some simple examples, how to dynamically add and remove table rows and cells using Javascript. If you're wondering why someone would want to do this, the answer is simple: AJAX. If you make a request to the server for some tabular data, you're going to need some way of putting it on the screen. Fortunately, the creators of Javascript made the process straight forward and pretty intuitive. Javascript Snippet - Tables and innerHTML. In a previous tutorial we showed you how to dynamically add and remove rows from a table. This is a very useful technique, but sometimes you might need to add entire bits of HTML into a table as just a string. In this situation, things can get a little tricky. Let's say you have a table, and you need to insert HTML into it.

Either you have a AJAX call that returns a string of HTML, or you just like slapping HTML into a table. Avoiding the "this" problem in JavaScript. In classical OO languages like C# and Java, this is a useful keyword for referring to the current instance of something. class Stormtrooper{ public string Number; public bool WeakMinded; public Stormtrooper(string number, bool weakMinded) { this.Number = number; this.WeakMinded = weakMinded; } public bool CheckForDroids() { return this.WeakMinded; }} Above, the Stormtrooper class would be instantiated and this would refer to the instance created.

Introduction to Closure Tools. Writing Javascript is not trivial. With all the dynamicity it brings, function level scoping, lack of class syntax and all makes it really hard to tackle. Well, no longer... I wasn't a javascript developer until 3-4 months ago, and all the things i mentioned above beat me on an occasion. Then I met Closure Tools at work. Web Worker Patterns. JavaScript is executed in a single thread. If you're not familiar with threads, what this means is that JavaScript can only execute one block of code at a time. If code is already executing, any interaction by the user will instantiate an asynchronous event that is queued up for later execution.

Other events like those from XMLHttpRequests and timers, are also added to the queue. So, as you might expect, a single-threaded architecture can be problematic to the user experience if a particular script takes a long time to complete. If a developer is not aware of the nuances of programming in a single threaded event loop and asynchronous programming techniques, a poor implementation can lead to your app performing poorly or even becoming completely unresponsive. HTML/JavaScript Tutorials Forum. Superhero.js. Csswizardry/CSS-Guidelines.

Getting Started with RequireJS Library. One of the most commonly used JavaScript libraries today is RequireJS. Making Sass talk to JavaScript with JSON. JavaScript. Real World JavaScript Part 4. Real World JavaScript Part 3. Array Direct Assignment. Real world JavaScript - Part 2. UnderscoreJS has got _.has utility to check whether an object (given as first argument) has the specified property (or key given as second argument to _.has) directly on itself. Javascript has in syntax that checks inclusion of property in an object but it takes in to account the inheritance chain, so even a plain literal object is polluted with properties from object prototype. var o = {};"toString" in o; // Outputs true in console.

Luckily, object prototype has another method called hasOwnProperty that verifies whether the property is defined directly on the object pr not. Real World JavaScript. Minimal JavaScript tutorial for non programmers « Helium Scraper's Blog. Learning Advanced JavaScript. Eloquent JavaScript. Object-oriented Programming. ¶ In the early nineties, a thing called object-oriented programming stirred up the software industry.

Most of the ideas behind it were not really new at the time, but they had finally gained enough momentum to start rolling, to become fashionable. Books were being written, courses given, programming languages developed. All of a sudden, everybody was extolling the virtues of object-orientation, enthusiastically applying it to every problem, convincing themselves they had finally found the right way to write programs.

Functional Programming. ¶ As programs get bigger, they also become more complex and harder to understand. Eloquent JavaScript. ¶ This chapter deals with the process of organising programs. InnerHTML. Ever wonder how you could change the contents of an HTML element? Introduction. It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). JavaScript Void(0) JavaScript Tutorial. JavaScript HTML DOM Elements. JavaScript Tutorial - An Intro for Non-Programmers.

HTML Demo pages: Javascript. Javascript Tutorial. Javascript Tutorial for beginners.