aNewDomain.net — In part two of his advanced web design series, our New Delhi-based editor Maninder Singh Kumar tackles what he calls the “meticulous art of coding.” And in-between coffee breaks with the girl next door, he gets serious with Javascript. Code below.
You need focus to code. You need to do it right. Coding is a meticulous art that requires a diligent and methodical mind. One slip and you end up with a 10-step reversal that’ll take 100 hours to fix.
But the coding part of webdesign is the coolest part. You just take a seat and start writing. As for me, I have this project I’m working on that involves building snowflakes onto a web page. It is pure HTML, JAVASCRIPT. There’s a girl hanging around, but I’ll get back to her in a moment.
For now, I start to write and it looks like this …
<script language=”JavaScript1.2″ type=”text/javascript”>
<!—Here we set the JavaScript version! –>
<!– This script is provided free at Lissa Explains it All –>
<!– http://www.lissaexplains.com –>
<!– Begin
var no = 15; // snow number
var speed = 9; // smaller number moves the snow faster
var snowflake = “snow.gif”;
var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
Note the difference in styles. Now for the below code, some coders would write the two brackets “( )” and start filling up the code of the next bracket, “(ns4up) while for others it’s just a matter of writing the opening “(“ bracket, write the code and then close the bracket, “)”. Moving on …
<!—checking for browser version and adjusting automatically –>
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
Now in the same code above, notice how variables are named. Follow the naming conventions for setting this. For example, you could write: doc_width, or doc_Width or Doc_width as the variable name. Be consistent. Moving on …
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
Arrays are just code you use to store numbers — just like mathematical arrays. Below is how you populate arrays by setting a FOR loop by incrementing “i” …
sty = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
Just as I am going to write more, that girl I told you about pops into the office.
“Got time for a cuppa coffee?” she wants to know.
I immediately agree.
But at the vending machine, she complains, “Damned machine always has me stumped. Sometimes the tea gives out coffee and sometimes you choose coffee and get tea. You handle this and I’ll just get us some cookies.”
She walks to the counter. I fiddle with the coffee and tea machine, but in my head I’m still all about that document.write function.
It was DHTML. And the document.write always wrote to the page that was presented to it at the position specified by the code.
The girl returns with the cookies. I manage to make the coffee machine deliver coffee as requested, and then I settle into a rhythm, thinking. Quietly waiting to get back to my machine. It is time to write the layers. Back in the office, here I go …
<!—Writing the Layers — >
document.write(“<layer name=\”dot”+ i +”\” left=\”15\” “);
document.write(“top=\”15\” visibility=\”show\”><img src=\””);
document.write(snowflake + “\” border=\”0\”></layer>”);
} else {
document.write(“<layer name=\”dot”+ i +”\” left=\”15\” “);
document.write(“top=\”15\” visibility=\”show\”><img src=\””);
document.write(snowflake + “\” border=\”0\”></layer>”);
}
} else if (ie4up) {
if (i == 0) {
document.write(“<div id=\”dot”+ i +”\” style=\”POSITION: “);
document.write(“absolute; Z-INDEX: “+ i +”; VISIBILITY: “);
document.write(“visible; TOP: 15px; LEFT: 15px;\”><img src=\””);
document.write(snowflake + “\” border=\”0\”></div>”);
} else {
document.write(“<div id=\”dot”+ i +”\” style=\”POSITION: “);
document.write(“absolute; Z-INDEX: “+ i +”; VISIBILITY: “);
document.write(“visible; TOP: 15px; LEFT: 15px;\”><img src=\””);
document.write(snowflake + “\” border=\”0\”></div>”);
}
} }
At this point, I define the function for Netscape Navigator and Internet Explorer. The words to Freebird go through my head: If I leave/here/tomorrow/would you still remember me …
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers[“dot”+i].top = yp[i];
document.layers[“dot”+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout(“snowNS()”, speed);
}
function snowIE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all[“dot”+i].style.pixelTop = yp[i];
document.all[“dot”+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout(“snowIE()”, speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End –>
</script>
So, yeah. Writing code requires a certain mindset. Some people are born with it. Some have to learn the art of practice and focus. Some of us have to just keep on keeping on …
For aNewDomain.net, I’m Maninder Singh Kumar.
Based in New Delhi, Maninder “Mandy” Singh Kumar joins our team as a senior writer at aNewDomain.net. His day job is in the renewable energy tech, and he’s worked as a consultant in social media, Internet sales, virtual reality learning tech, web development and other fields.Find Mandy via his homepage on Google+ — and at his Facebook page. Email him at Maninder@aNewDomain.net.
This is GREAT!
Good stuff …