JavaScript javascript-notes

Published on September 5th, 2013 | by Mark Ammay

0

JavaScript Notes

Here’s some of my JavaScript notes I took while reading up on object-oriented JavaScript, so I could remember them. It’s not all my notes, just a select few that I wanted to make sure was recorded online.

This is in no specific order, or importance; mainly random notes.


Anonymous Function / Self-Executing Function

To avoid global variables, encapsulate your code in an anonymous function. This is also called a self-executing function.

TIP: Try to minimize global variables to prevent from colliding with other code. Imagine two different pieces of javaScript code that both accidentally use the same global variable. This would create headaches and you may need to debug the code to figure out why things aren’t the way they should be.


Switch Statements

Use a Switch statement if you find yourself writing multiple IF and ELSE statements.


jQuery EACH and FOR loop

Here’s a simple JSON Object and a FOR LOOP that spits out the first names.

In addition, here’s the jQuery equivalent (the EACH function) of a FOR LOOP.


Encode/Decode URIs

Quick examples of encoding / decoding URLs using the encodeURI(),  encodeURIComponent(), decodeURI() and decodeURIComponent().


Function Literal Notation

Creating a normal function is easy, but another way is using something called Function literal notation.

In EXAMPLE #1 we have 2 functions, but they’re just out there in the open space. If someone created a different function but had the same function name of foo or bar, then things could get messy. To avoid this type of thing, you could define a function like…

EXAMPLE #2 ( Function literal notation), and to call those functions you would use fooUtil.foo() or fooUtil.bar(). If there’s another piece of code somewhere that calls the foo() or bar() functions, it wouldn’t interfere with these because it’s within a different variable that holds those functions (called var fooUtil).


Self-Executing Function & Closure, with an Object Literal

Example #3 (Function literal notation with a self-executing function), is my choice because it also gives you the option to add private variables inside.


Methods within Objects

Just a quick note, you can have methods within objects (a property of an object can have a function).

To call a method within an object, you can use dot notation and call the function.


Methods for String Objects (some of them)


Error Objects

Here’s how to try to run a function and if it doesn’t exist it will catch it, and do whatever you want (like display an error message).
finally just let’s you add something afterwards no matter what happens (this is optional).


window.setTimeout and window.setInterval


Stop Propagation

Sometimes you’ll want to stop an event from bubbling up. In this example, we have multiple event listeners that trigger when you click on the paragraph with a class of  ‘parag’ (because when you click on the paragraph you’re also clicking the document and window.


Prevent Default Behavior

In some instances, you’ll want to do a certain behavior or action instead of the normal action.
In this example let’s say you wanted the user to experience something else rather then go to URL when a link is clicked.


Add Event Listener

Simple, add event listener in javaScript.


Go back a page – History

Easy, just like clicking the back button


.replace, remove characters in a string

You can use this to remove all non-numeric characters in a string, or except a specific character.


insert characters in x spot

Here’s a piece of code that will let you add a character in a string by specifying the spot.


Get the URL of the page that linked to this page

This value will be empty if the user came to this page directly. If you came from another page, this will give you that URL


See if string ends with a character

Here you can check if a string ends with a specific character or string. This is different than just simply seeing if the string contains something.


window.history.pushState – adding a param to URL

If you need to add  a new param to the URL (for some reason), you can do this. But for a detailed explanation of the pushState method and manipulating the browser history, go here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history


Exit Message when trying to leave page

If you want to show an exit message if someone tries to leave your page. By the way, I have a jQuery version that will show you how to have your own custom lightbox popup instead of the default browser. However, you have to create your own lightbox (my example just shows you an alert where you would actually activate your lightbox popup). Also, you cannot completely ignore or bypass the default browser exit message.

http://www.webcodecentral.com/jquery-snippets/#exitMessage


sss

Tags: , , , , , , , , , , , , , , , , , , , , , , , ,


About the Author

Hey it's Mark Ammay. I'm a Web Developer with over 5 years of professional experience in the industry. I help individuals start their own website from scratch, as well as through WordPress. I'm also an Online Entrepreneur who blogs at www.MarkAmmay.com



0 comments
Back to Top ↑