Category Archives: Javascript

Programming: JQuery Questions

Recently been asked few programming questions, and the heck wasnt ready for those. The questions were 1. whats the difference between .parent() and closest() in JQuery, and surprise surprise I wasnt able to give an answer, all I can think about is parent(), is of course getting the parent of the element but wasnt sure whats the closest() function was. A simple search takes me to Traversing and there it is. I just had a look at the description and yep. closest(selector) takes an argument selector to look for the closest element and traverse to the tree all the way up the root html.

2. create a function isPalindrome($x), this one I just didnt know what palindrome means, went to search again and there it was, the term palindrome any text given and if reverse should be the exact same as the original. when I was cooking dinner.. just thought there might be a function the reverses the string and then match it against the original.meek .. too late.

3. (selector, selector, selector).fadeIn() how do you construct a function so they dont fade at the same time? Ugh another challenge when you are at the moment not using JQuery. Since I havent really delve into much in JQuery lately, top of my head just said just separate each one so they fade in order. Later that day I did a quick search “multiple selection”  and there it is the each() function, then I thought there must be a way to delay it for some milliseconds and there I went and look for the function there it was delay(milliseconds) chain them together with passing each(index) and voila .each(function(index) { $(this).delay(500*index).fadeIn(1000) }); would have been the answer again too late! lol

4. The last question I couldnt put together was to construct a regular expression, I can answer it but I just needed more time to pull up all my symbols expression using these: ^ $ * { } [] a-z 1-9 ? ! + ABC.  I know how to use them and what they means. Again out of time and too late.

Anyways Ive learned something new that day, which Im always happy about. Just so excited in the world of programming, I may not get a good result but it was definitely fun!

Putting your NodeJS up for production, user consumption?

Now that I have a better understanding in how WebApps with NodeJS, it seems like a very daunting task having not deal with Apache/PHP technology anymore. As a PHP Developer myself its hard trying to wrap the idea of doing everything in Javascript, from logic to api calls.

It is expected that web technology will go in this direction, making the browser do all the work in the front-end side of things to asynchronously calling apis for data.

When your app is good to go, then what?? Put it up of course! How?? Its not like apache serving all dynamic and static files for you now.

Check this site out for reference as well: http://blog.danyll.com/setting-up-express-with-nginx-and-pm2/

– NginX
– Nodejs
– PM2
– Express
– Any database of your choosing, I found out that relational databases is not a very popular choice for developers in the Node Community, but you can use them and its base wholly on your preference and use cases.

Check the video below for reference.

Javascript Inheritance

How do you do inheritance in Javascript? These 3 lines of code are the key:

Child.prototype = new Parent();

you assign the prototype of child to parent, to inherit parents prototype, methods and data.

Child.prototype.constructor = Child;

Then you assign the name of the child object, to its constructor property to give back its identity.

Parent.call(this)

And inside the Child object constructor, you call the super class constructor, to take the context of “this” of the Child object into the Parent constructor. Here you can initialize any members of the parent object of the child property and control goes back to the child’s constructor and initialize the child property this time. Also known as Constructor Chaining.

Took me  awhile to understand it. I hope anyone reading this would get it the first time otherwise let me know!

My JQUERY reference

var i = {one:1,two:3,three:[{four:8},2,3]} = Array format access by: i.one, i.two, i.three[0].four returns 8, i.three[2] returns 3.

var i = [‘value’,’value2′,’value3′] = Another way to create array
i.one = To access a variable in an array

$.browser = Is an array that will loop through to find the browser you are using.It also contains the version.
$.support = Contains browser capability. To access it you go. $.support.[name], possible values are:
boxModel:if browser supports w3c box model.
cssFloat:if css float i used to acess css float value.
hrefNormalized: doesnt alter the results of getAttribute(‘href’). htmlSerialize: if properly serialize using inneHTML. leadingWhitespace: if browser preserves whitespace with innerHTML.
noCloneEvent: if does not clone handlers when cloned.
objectAll: if getElementByTagName returns all elements. opacity: If browser supports opacity styling.
scriptEval: if appenchild/createTextnode executes.
style: if getAttribute(‘style’) return the correct inline style.
tbody: if browsers allow table without tbody.

JQuery Selectors

$(‘#id’) = Selector of an element
$(‘p’) = Select all P tag in the page
$(‘p.class1’) = Select P with class1 as the class
$(‘div p.class1’) = Select p class1 inside div
$(‘p’).size() = return number of P in the page
$(‘p:first’) = Select the first occurence of P
$(‘p:last’) = Select the last occurence of P
$(‘p’)[0] = Select the first occurence of P but NOT Jquery element just normal DOM.
$(‘p > strong’) =Select <strong> with direct parent <p>
$(‘#div1 p:even’) = Select :even p elements inside #div
$(‘#div1 p:odd’) = Select :odd p elements inside #div
$(‘#div1 p:not(.class1)’) = Select all p but not p with class1
$(‘#div1 p:eq(0)’) = Select p first index
$(‘#div1 p:gt(5)’) = Select all p with index greater than 5
$(‘#div1 p:lt(5)’) = Select all p with index lower than 5
$(‘#div1 p:empty’) = Select all p with no children.
$(‘#div1 p:contains(text)’)= Select all p that contains specified text.
$(‘#div1 p:has(strong)’) = Select all p that has strong tag.
$(‘#div1 p:visible’) = Select all p that are visible.
$(‘#div1 p:hidden’) = Select all p that are hidden.
$(‘#div1 p:[style]’) = Select all p with style property
$(‘#div1 p:[border=1]’) = Select all p with border=1 property
$(‘#div1 p:first-child’) = Select all p that are first child of parent #div1
$(‘#div1 p:last-child’) = Select all p that are last child of parent #div1
$(‘#div1 :input’) = Select all input inside #div1.
$(‘#div1 :text’) = Select all input text inside #div1.
$(‘#div1 :radio’) = Select all input radio inside #div1.
$(‘#div1 :checkbox’) = Select all input checkbox inside #div1.
$(‘#div1 :enabled’) = Select all elements that are enabled inside #div1.
$(‘#div1 :disabled’) = Select all elements that are disabled inside #div1.
$(‘#div1 :checked’) = Select all elements that are checked inside #div1.
$(‘#div1 :selected’) = Select all elements that are selected inside #div1.
$(‘#div1 p:nth-child(3)’) = Select the 3rd p inside #div1.

Continue reading My JQUERY reference

JQuery Plugin Must haves

As I am currently working on a website right now. And Im using JQuery as my javascript library and its the way to the future when it comes to DHTML and this accompanied with plugins that are useful to make developing easy and fun. Here are the plug ins I use for my reference your and yours.

* JQuery Form Submithttp://jquery.malsup.com/form/
This will let you submit forms via AJAX automatically that can save you time doing AJAX. This also lets you upload files via ajax and its pretty daunting doing file upload via ajax.

*JQuery Text Resizer – http://plugins.jquery.com/project/TextAreaResizer
This allows your text area to be resizeable its pretty easy to set up.

I will update this list regulary once I come across other useful plug-ins.