background preloader

Javascript

Facebook Twitter

JavaScript Garden. Although JavaScript deals fine with the syntax of two matching curly braces for blocks, it does not support block scope; hence, all that is left in the language is function scope. function test() { // a scope for(var i = 0; i < 10; i++) { // not a scope // count } console.log(i); // 10} There are also no distinct namespaces in JavaScript, which means that everything gets defined in one globally shared namespace.

JavaScript Garden

Each time a variable is referenced, JavaScript will traverse upwards through all the scopes until it finds it. In the case that it reaches the global scope and still has not found the requested name, it will raise a ReferenceError. The Bane of Global Variables // script Afoo = '42'; // script Bvar foo = '42' The above two scripts do not have the same effect. Again, that is not at all the same effect: not using var can have major implications. // global scopevar foo = 42;function test() { // local scope foo = 21;}test();foo; // 21 Local Variables var foo = 3; bar = 4;}test(10); Hoisting.

JavaScript DHTML Menu. Cross Browser Drop Down Fly Out Menus. Javascript form validation - doing it right. Web Matters When using Javascript for form validation, there is a right way, a wrong way, a very wrong way, and a suicidally wrong way!

Javascript form validation - doing it right

Unfortunately many sites use one of the wrong ways, including even some which claim to be form-validation tutorials. This page tries to help people in the right direction. The suicidally wrong way is to have the validation in Javascript only, and not on the server. A malicious user can easily bypass it and – depending on what you are doing – may wreak havoc with your database. The essence is thus that Javascript validation is always optional. Having said that, there are actually two right ways, of which the better one is hardly ever used! Acceptable: validate the entered data when the submit button is pressed. Example Here is an example of how Javascript validation should work.

It doesn't actually have any server script, so anything you type will be discarded on submission. <P> Javascript is not currently enabled on your browser. How it works Conclusion. Get Styles. Page last changed today See section 9H of the book for offsetWidth and friends; section 9A for getting styles.

Get Styles

The example script doesn't work in Safari Sometimes you'll want to see what styles the default document view has. For instance, you gave a paragraph an width of 50%, but how do you see how many pixels that is in your users' browser? In addition, sometimes you want to read out the styles applied to an element by embedded or linked style sheets. This is our test paragraph with id="test", on which we're going to try our scripts. This is the style sheet of the test paragraph: Before going to the tricky bits, first a nice shortcut that has been inserted into both Mozilla and Explorer: offsetSomething. The script is quite simple: function getOff() { x = document.getElementById('test'); return x.offsetWidth; }

Read Parameters Passed Via Query Strings. The only other thing that we need to do is to initialize entries in the array for the fields that we want the page to process and to actually call the azbove function to retrieve the values.

Read Parameters Passed Via Query Strings

If we are adding the code to the top of the purchases page then we are expecting code and desc fields to be passed from the previous page. Of course the purchases page may be reached without values for these fields being selected so we need to assign default values to the fields before we call the function to load them with the passed values. Here is the code that does this for us. This code also goes into the head section of our page. qsParm['code'] = null; qsParm['desc'] = null; qs(); The values passed from the previous page are now accessible to any Javascript code in the current page by referencing the appropriate qsParm array entries. If (qsParm['code'] && qsParm['desc']) document.write('You selected' + qsParm['code'] + ' : ' + qsParm['desc']);