Develop Reference

Javascript can't pass parameters between functions

I have a page where users can choose to book a ticket for a concert. First, they click on a artist which launches them into the booking process (and passes "artist" to the starting function).
The program then loads the venues for the artists. When the user changes the venue (and the value isn't blank) it tried to load the dates available in another select drop down menu by calling another function.
The original code was like:
<select onchange="loadDates(artist)">...</select>
However for some reason this wasn't passing the parameter from the starting function to the next function.
So I changed it too:
<select onchange="loadDates.call(this, artist)">..</select>
However the next function still gives me the error "artist is not defined" when I try to run it. Can anyone see what I'm doing wrong here as I read online that this works perfectly. I can give more information if need be. Thanks

Code in onXyz attributes is run at global scope, so both of your examples require that there be a global variable called artist. If there isn't one, then you'll get a ReferenceError because you're trying to take the value of a symbol that isn't defined.
If you meant to pass a string, put quotes around it. If you meant to pass something else, you'll need to say what that was. But the fundamental issue is that artist is not a defined symbol at global scope, which is where you're trying to use it.
If you have artist defined in some non-global location (good! globals are a bad thing), then you'll want to hook up your event handler via modern techniques rather than using the onXyz attributes.
The simplest way if you're not using a DOM library (like jQuery or similar) is to assign to the onXyz property of the select box element:
(function() { // Something to keep the stuff inside from being globals
var artist = "Joe Cocker";
var selectBox = document.querySelector("selector for the select box");
selectBox.onchange = function() {
loadDates(artist); // `artist` is in scope now
};
})();
In general, though, I avoid the onXyz properties because they only allow a single handler per event per element, preferring the DOM method addEventListener (and its Microsoft-specific predecessor, attachEvent). I didn't use them above for simplicity. If you don't use a DOM library, you might want this hookEvent function given in another answer which uses addEventListener if it's there, or attachEvent if it isn't, and supplies some missing bits for the attachEvent browsers.

Observe a variable value, when it chaged take some actions

I was trying to determine the best way to observe a variable's value and track its changes, for example 'language' or 'time-zone', then when it will be changed take some actions depending on the new value.
I thought of using setInterval, but I have many 'interval's in my website, so I don't want to overuse it, I'm worried that it may affect the user experience. Instead I found my self compelled to trigger the actions which I want to be done after the value changes in each method may change the variable's value, this is simple but makes my code a bit tightly coupled.
what do you suggest for that.

It seems like Object.observe would be pretty much exactly what you need; unfortunately it is currently proposed as a "post ECMAScript 6" spec, so it will be a while until it is widely available in browsers. There are shim implementations though (e.g. here or here), which could give you the same functionality in current browsers.
An alternative approach would be wrapping the object in question in a direct proxy, but those are part of ES6, and also not widely adopted by browsers yet.

In languages like C++, you'd do this with accessor methods.
For example, instead of accessing a property of a class with something like foo.bar, you'd say foo.getBar().
getBar() would look something like this:
this.getBar = function(){
console.log("bar was accessed");
return bar;
}
You should also have a method to set the value of bar, i.e.
this.setBar = function(newBar){
console.log("Setting the value of bar");
bar = newBar;
}
These methods will give you more control of your variables, too. For example, if someone tries to assign a string to something that should be an integer, you could throw an error. Or if you have a variable called "length", you could throw an error if someone tries to make it less than zero.

You should use Object.prototype.watch() to track variable's change
The watch() method watches for a property to be assigned a value and
runs a function when that occurs.
Watches for assignment to a property named prop in this object,
calling handler(prop, oldval, newval) whenever prop is set and storing
the return value in that property. A watchpoint can filter (or
nullify) the value assignment, by returning a modified newval (or by
returning oldval).
If you delete a property for which a watchpoint has been set, that
watchpoint does not disappear. If you later recreate the property, the
watchpoint is still in effect.
To remove a watchpoint, use the unwatch() method. By default, the
watch method is inherited by every object descended from Object.
there is not standard, but you can use the gist polifill created by eli-grey
Anyway this is a duplicate of Listening for variable changes in JavaScript or jQuery

Monitor primitive String declaration

Is there ANY way of monitoring primitive String declaration in NodeJS?
For example, when I do "test"; is there any way of triggering a special event with "test" as a parameter?

I am not sure what you mean by do "test;"; but if you want to trigger an event whenever a variable is assigned a new value, no, there is no way to trigger an event for variable changes.
If you want to watch a variable, it is better to re-design your system to make a call instead of assigning a variable. Instead of doing:
running_mode = "test";
require
switch_mode("test");
and call whatever event handlers you want to trigger on this update.
If you really want to watch the value of a global variable, you can do it by checking the value once in every turn of the main loop:
function is_mode_changed() {
if (running_mode=="test") event_handler();
process.nextTick(is_mode_changed);
}
Once you call this function, it will continue running once each turn of the main loop. If it what you want to do is something like following a variable to do some specific tasks time to time, like following a global counter and doing some cleanup tasks everytime counter reaches 1000, this is a good way to do. If what you want to do something immediately after a variable is changed, it is not possible.
I hope I could understand your question correctly.
UPDATE
[I am adding this in regards to the comment below which rendered everything above unrelated to question because I had misunderstood it.]
As you mentioned yourself, a string literal like "test" is a primitive value which is not an object. So, it is handled by the interpreter in a way we cannot alter.
From Ecma-262:
4.3.2 primitive value
member of one of the types Undefined, Null, Boolean, Number, or String as defined in Clause 8
NOTE: A primitive value is a datum that is represented directly at the lowest level of the language implementation.
To prevent confusion, Clause 8 is the section of standard on Types as listed above.

Since you specified V8, and not per-spec-ECMAScript, you have more concrete options at your disposal. In the V8 API there is classes/templates or primitives that are separate from those of object wrappers for primitives. In order to be able to hook in a way to know when this actually happens would likely require modifying v8 in a custom manner, but it is doable.
http://code.google.com/p/v8/source/browse/branches/bleeding_edge/include/v8.h#1017
Also much of the action takes place in js itself. Perhaps not the very constructor itself, but everything that happens thereafter. String.prototype.toString/valueOf.
http://code.google.com/p/v8/source/browse/branches/bleeding_edge/src/string.js

Converting a native browser event object to a jQuery event object

I am assigning an event handler function to an element through the native browser onclick property:
document.getElementById('elmtid').onclick = function(event) { anotherFunction(event) };
When I'm in anotherFunction(event), I want to be able to use the event object like I would with the event object you get in jQuery through the .on() method. I want to do this because the jQuery event object has properties and methods such as .pageX, .pageY and .stopPropagation() that work across all browsers.
So my question is, after I've passed in the native browser event object into anotherFunction(), how can I turn it into a jQuery event? I tried $(event), but it didn't work.
The obvious question here is: why don't you just use jQuery .on, .bind, .click etc to assign your event handling functions? The answer: I'm building a page that has a huge table with lots of clickable things on it. Unfortunately this project requires that the page MUST render quickly in IE6 and IE7. Using .on et al in IE6 and IE7 creates DOM leaks and eats up memory very quickly (test for yourself with Drip: http://outofhanwell.com/ieleak/index.php?title=Main_Page). Setting onclick behavior via .onclick is the only option I have to render quickly in IE6 and IE7.

Too long for a comment... Because the documentation is a bit vague on this... (I'm looking at 1.7.1 in the following)
jQuery.Event(event, props):
creates a new object
sets its type property to the event's type property.
sets isDefaultPrevented by normalized calls to all the ways to check if default is prevented.
sets originalEvent to reference the event you passed in.
adds an arbitrary set of properties provided by the props object argument.
sets a timestamp.
marks object "fixed".
What you get is basically a new object with a few additional properties and a reference to the original event - no normalization other than isDefaultPrevented.
jQuery.event.fix(event):
ignores objects that have already been marked "fixed".
makes a writable copy (by way of jQuery.Event()) and normalizes the properties mentioned here.
ETA:
Actually, looking closer at the code, jQuery.event.fix() should work - in the way described by #Beetroot-Beetroot. It's all that jQuery does to create the jQuery event object in an event dispatch.

You want jQuery.event.fix.
new jQuery.Event(nativeEvent)
Stores nativeEvent as the originalEvent property.
Handles some bubbling logic.
Timestamps the event
Marks the event as "jQuery's got this"
Gives it all the bubbling/default-preventing functions.
Note at this point the event doesn't have any "eventy" properties, just originalEvent, timeStamp, and the bubbling/default-preventing functions.
jQuery.event.fix(nativeEvent)
Does all the above
Figures out specific fixes ("fix hook") it will need to apply depending on the event type
Copies over a default set of properties from nativeEvent, plus specific ones from the fix hook
Fixes cross-browser issues with the target and metaKey properties
Applies specific cross-browser fixes and normalizations for the fix hook.

Try this:
document.getElementById('elmtid').onclick = anotherFunction;
with:
function anotherFunction(evt){
evt = $.event.fix(evt || window.event);//Note need for cross-browser reference to the native event
...
}
http://jsfiddle.net/Wrzpb/

Javascript Array .length property/method of JavascriptEngine

I'm just curious how this is done directly by browsers. I heard that .length property of Array in Javascript Engines in fact uses invisible setters and getters to achieve functionality of ECMA-s standard that says: "whenever the length property is changed, every property whose name is an array index whose value is not smaller than the new length is automatically deleted"). I understand that setter is needed in this case, but what with getter? Do we really need to call native getter to get this value? Or this is only a some mistake with understanding Javascript Engine somewhere?

A property is either implemented as a field or as setter/getter methods.
If it's a field then it's just a value, when setting the value nothing more happens than that the value changes.
If you have a setter method in order to perform something more whenever the value is set, you also have a getter method to match, even if the getter method doesn't do anything more than just return the value. You don't want to mix the two ways of implementing a property, it's just a lot simpler to go all the way in either direction.

Have a look at defineGetter and defineSetter. This might be how Firefox does it, but I'm not sure about the other browsers.
Does it really matter? .length could be implemented in c++ for all I know. It could be a builtin part of the javascript engine, and not really implementable in javascript in anyway. All that you, the user, needs to know is that the length holds the length of the array, and if you change it the length of the array changes.

For starters, the JavaScript Array object has a function property .length() which will return the current length of the array instance. Getters and setters can be defined in as of JavaScript 1.6 (I think) but it's not widely adopted and I haven't seen much use of it. The only difference between a getter and a function that returns a value is the syntax. Getters and setters can are called by the engine depending on direction of assignment.
var obj = {myProp:0}.myProp; // getting
obj.myProp = 1; // setting
The above example is a bit funky, but I think you get the idea...