//define globals first.
var myGlobal1 = document.getElementById('myGlobal1');
//the main(); function
function main() {
//normally more would be put here, but with this being an example, im purposely making
//it much less efficient, for learning sake.
exampleFunc();
alert("application has terminated.");
}
//exampleFunc()
function exampleFunc() {
alert(myGlobal1.value);
}
this is called aspect-oriented javascript programming (AOP), and had i heard of it earlier, the name of this article would have been changed to match it such. I post this here as a means of driving it further into web developement. Many programmers have been using this technique in javascript for years, however, in every example of a program I see, it is not used.
AOP was first developed by a group from Xerox PARC lead by Gregor Kiczales. This lead to the developement of AspectJ, an extension to java. This is why i write this, programs that dont traditionally use this, such as the loosely written javascript, can use AOP to organize projects, and have extensive web applications. Without it, it may remain misunderstood as a "web toy" or a means to only change CSS around for visuals.
Think of it this way, HTML/CSS is the GUI interface frontend for javascript. Javascript can even interact with those elements to add a bit more to it. This is what most people seeing javascript doing.
Of course, with this article i havent written any rough drafts or anything I simply threw it down.. if its not up to par with anything just let me know.. send me some links, and i will most likely update it.
I hate to say it, but this idea is hardly new and revolutionary. JavaScript developers do this kind of stuff every day. We even have code that wraps original functions so that other functions can run before or after a target function. This is a concept known as aspect-oriented programming, and JS has supported it from the very beginning.
__________________
"The first step to confirming there is a bug in someone else's work is confirming there are no bugs in your own."
June 30, 2001
author, Verbosio prototype XML Editor
author, JavaScript Developer's Dictionary https://alexvincent.us/blog
Users who have thanked Alex Vincent for this post:
well its meant to be invoked by either <body onload="main()"> or if one really wishes, onclicks...
but i hardly doubted that anyone HASNT used it before... especially programmers coming from c++, but i just thought id make it a thing... a technique rather than something that just naturally happens..
as for aspect-oriented programming, i should brush up on my history a bit! ive been programming for a long time but never decided to look for any REAL history in it.. so this idea of aspect-oriented javascript programming DOES nullify this article. i will modify it to work correctly with the implimentation!
well its meant to be invoked by either <body onload="main()"> or if one really wishes, onclicks...
Jumbling the JavaScript with the HTML like that is a really bad idea - it used to be the only way to write JavaScript back when Netscape was the only browser that supported it but since IE5 there has been no reason whatever to jumble the JavaScript in with the HTML. Since IE5 all JavaScript should go in a separate file.
onload is also unnecessary except if your script needs to confirm if all the images have loaded. For simple interactions with the page simply attaching the script at the bottom of the page results in a lot less code and the script running a lot sooner.
In addition, global variables are almost completely unnecessary in JavaScript - the only time they are needed is to provide a way to reference a library that is in a separate file. For stand alone scripts that are not dependent on a library the only use that global variables have is to possibly clash with other scripts to break the functioning of the page.
Also alert() is for debugging purposes only and should never be used in a published script.
Defining names functions rather than simply assigning anonymous functions to variables also limits your ability to use functions as flexibly as JavaScript allows but with the types of scripts that JavaScript beginners produce this doesn't really matter.
Effectively there is nothing whatsoever in your code that should be used in writing JavaScript for modern browsers - except for beginners using that less flexible way of defining their functions.
Jumbling the JavaScript with the HTML like that is a really bad idea - it used to be the only way to write JavaScript back when Netscape was the only browser that supported it but since IE5 there has been no reason whatever to jumble the JavaScript in with the HTML. Since IE5 all JavaScript should go in a separate file.
onload is also unnecessary except if your script needs to confirm if all the images have loaded. For simple interactions with the page simply attaching the script at the bottom of the page results in a lot less code and the script running a lot sooner.
In addition, global variables are almost completely unnecessary in JavaScript - the only time they are needed is to provide a way to reference a library that is in a separate file. For stand alone scripts that are not dependent on a library the only use that global variables have is to possibly clash with other scripts to break the functioning of the page.
Also alert() is for debugging purposes only and should never be used in a published script.
Defining names functions rather than simply assigning anonymous functions to variables also limits your ability to use functions as flexibly as JavaScript allows but with the types of scripts that JavaScript beginners produce this doesn't really matter.
Effectively there is nothing whatsoever in your code that should be used in writing JavaScript for modern browsers - except for beginners using that less flexible way of defining their functions.
well i was not to say that it was the only way... it could be simply done at the bottom of the script as:
main();
and your done..
as for the global variables, i understand, but they still do exist.. so i added them into the example.. and for an alert(), i understand this as well, but this example is not based on what the program does, its about a technique for writing it. so maybe this were for debugging purposes? its just to show whats supposed to go through the app.
A better way to do this would be to use modern JavaScript instead of that antiquated 20th Century version that's been obsolete for about a decade now.
Here's what the OPs code would look like of coded in the right order - as the OP included statements to show the order they go in I have included the same statements but put them in the correct order. What the statements actually do and what real code replaces the alerts would be irrelevant to the order of the statements.
Code:
//don't define globals at all
// wrap your entire script inside a function so that nothing is global
(function() {
// use the latest JavaScript version
"use strict";
// define all your local variables
var myGlobal1, exampleFunc, main;
//exampleFunc()
exampleFunc = function() {
alert(myGlobal1.value);
}
//the main(); function
main = function() {
//normally more would be put here, but with this being an example, im purposely making
//it much less efficient, for learning sake.
exampleFunc();
alert("application has terminated.");
}
// get the script to actually do something
myGlobal1 = document.getElementById('myGlobal1');
main();
// end of anonymous function wrapper
})();
As you can see, even with such a short example there is almost nothing from the OPs example that was in the right place.
A better way to do this would be to use modern JavaScript instead of that antiquated 20th Century version that's been obsolete for about a decade now.
Here's what the OPs code would look like of coded in the right order - as the OP included statements to show the order they go in I have included the same statements but put them in the correct order. What the statements actually do and what real code replaces the alerts would be irrelevant to the order of the statements.
Code:
//don't define globals at all
// wrap your entire script inside a function so that nothing is global
(function() {
// use the latest JavaScript version
"use strict";
// define all your local variables
var myGlobal1, exampleFunc, main;
//exampleFunc()
exampleFunc = function() {
alert(myGlobal1.value);
}
//the main(); function
main = function() {
//normally more would be put here, but with this being an example, im purposely making
//it much less efficient, for learning sake.
exampleFunc();
alert("application has terminated.");
}
// get the script to actually do something
myGlobal1 = document.getElementById('myGlobal1');
main();
// end of anonymous function wrapper
})();
As you can see, even with such a short example there is almost nothing from the OPs example that was in the right place.
this is interesting, I quite like it, however, i dont like how functions are declared, nor do i like how variables are declared in your example, of course thats nothing you had to do with.. its damn ECMA! :P either way, i like this thought.. as for javascript in its own. very informative, basic stuff but a good refresher.
however this is a different technique entirely.. this is with AOP, and its a little different in total. Im sure my writing will be obsolete (already is, but just as an example) in a few years when they say that you must declare the function before anything.
the thought that my globals are being garbage collected help a lot, i now understand why some of my programs are simply not working. i will not be declaring global variables again anytime soon! lol
There are some places in JavaScript where you have to define the functions the way I did. For example if you want to define the function two different ways using an if statement to select which of the two definitions to use or if you nest definitions of the same function inside one another.
For example of you are going to define an addEvent function that uses an eventListener for JavaScript and attachEvent for JScript then you have to define the two functions the way I did because the way you defined the functions is not allowed inside of if/else. See http://javascriptexample.net/events01.php for an example of this.
If you define named functions then those functions are automatically hoist to the top of the code and multiple definitions of the same function will overwrite one another leaving the last version of the function as the one that always gets called. Since they are hoist to the top it would be less confusing if you actually defined them at the top.
Quote:
Originally Posted by boyo1991
nor do i like how variables are declared in your example
JavaScript automatically hoists all variable declarations to the top of the script so the code is easier to follow if you actually declare them all at the spot where JavaScript will declare them. That way someone familiar with other languages that don't hoist declarations will not be confused.
JavaScript declares all the variables in one go so it makes the most sense to use a single statement to declare them.
When you work with lots of different programming languages it is easier to work with them all if you base your coding styles on how they actually work - that way they work the way your code reads in each case.
however.. like i said before, this is just an idea, and a different way of looking at it.. its not by any means the only way and/or the way that needs to be done.. technically this is the way it SHOULDNT be done.. but im just saying it still works..
So if you don't like JavaScript then what programming languages do you like? What language do you think should be made available as an alternative language to use in the browser instead of JavaScript?
So if you don't like JavaScript then what programming languages do you like? What language do you think should be made available as an alternative language to use in the browser instead of JavaScript?
i actually love javascript... maybe not so much its syntax, but its capabilities, and strengths are fantastic. id love to see a better language come along though! ill be entirely honest i dont necessarily make programming languages, so this is just a thought, nothing more..
There are some places in JavaScript where you have to define the functions the way I did. For example if you want to define the function two different ways using an if statement to select which of the two definitions to use or if you nest definitions of the same function inside one another.
For example of you are going to define an addEvent function that uses an eventListener for JavaScript and attachEvent for JScript then you have to define the two functions the way I did because the way you defined the functions is not allowed inside of if/else. See http://javascriptexample.net/events01.php for an example of this.
if your claim is true, why does this seem to work?
Code:
function test(x,y){
function sum(a,b){return a+b;}
if( 1>0 ){function sum(a,b){return a*b;}}
return sum(x,y);
}
test(5,10); // == 50
as compared to :
Code:
function test(x,y){
function sum(a,b){return a*b;}
if( 1>0 ){ function sum(a,b){return a+b;} }
return sum(x,y);
}
test(5,10); // == 15
seems like the function statement inside the if work just fine to me, unless you know something i don't...
i can see how with function hoisting and all one might think it wouldn't work, but it's neat how it works as expected, huh?
I for one, strongly recommend using function statements instead of function expressions, it's one less name to type, and gives all functions an internal name. This is important since arguments.callee is likely going away soon. When you pre-declare the var, and then later assign the function without an internal name, recursion is slower and more dangerous, and you have more boilerplate between the function opener and the core logic. That's harder to skim, even if it is more detailed information.
if i were to code the OP's syntax, i would DRY all vars and assumed globals, publish the workhorse for later re-use, make it async and dependency self-aware, self-waiting for all depends, and use better function declaration to reduce clutter, allow recursion, and facilitate debugging:
PHP Code:
// wrap your entire script inside a function so that nothing is global
(function wrapper() {
// define local variables
var myGlobal1=myGlobal1;
// init code:
function main() {
// normally more would be put here, but this is an example
// for learning sake.
exampleFunc();
alert("application has terminated.");
}
// support code:
function exampleFunc() {
alert(myGlobal1.value);
}
// invoke init and execution if ready:
if(myGlobal1){
main();
} else {
return setTimeout(wrapper);
}
//optional, publish main() for partial page refreshes to re-init this app:
self.main = main;
}()); // end wrapper()
to me, that code is much less terse, more stable, and has a good self-narrative instead of a formal introduction.
__________________ my site (updated 5/13) STATS (2013/5) HTML5:90.2% MOB:14% IE7:0.5% IE8:8.6% IE9:9.8% IE10:10%
Before you post, read our: 
JS++ cool idea and technique!
i dont necessarily make programming languages, so this is just a thought, nothing more..
