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.
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.
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.
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.
Recently one solution I have chosen for a few problems has been 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.
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.
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. Before we get started, I am just going to note that we are going to be starting with the code we created in part 1. If you have not read it, you should, because you may get a little bit lost otherwise. Here is a quick example of our new and improved popup: jQuery Snippit - .each() We love us some jQuery, it makes the life of a web developer so much easier.
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. jQuery Snippet - Interesting Selectors. As usual, we are diving into jQuery once again.
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. 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.
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.
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. 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. 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. Making Sass talk to JavaScript with JSON. JavaScript. Real World JavaScript Part 4. Real World JavaScript Part 3. 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. But using it directly is susceptible to accidental overwriting of that method. o.hasOwnProperty("toString"); // outputs falseo.hasOwnProperty = 42; // Overwrites the hasOwnPropertyo.hasOwnProperty("toString") // Error!
In order to avoid the overwriting problem, UnderscoreJS resorts to depending the hasOwnProperty method on the protototype of object as in the following code. 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.