|
*dhtml
|
I am assuming you do not know anything about javascript - that you are a complete mumu/mugu when it comes to javascript. Well, here is the deal - we are going to do a javascript workshop here where you can actually learn how to create javscript at least to a basic level. I am already assuming that you know to at least write HTML codes - if you do not - please visit this other thread i created - http://www.nairaland.com/nigeria/topic-213936.0.html - so now i can continue. So about javacript - this is also known as client sided scripting, it is the basic scripting language understood by browsers. Its functions are numerous - and it is the key component to dynamic website design - you need to know some javascript before you even start talking of ajax, and in fact before you can even call yourself @DHTML sef! A basic web page running javascript will be: demo1.html <html> <head> <title>Javascript Demo</title> <script> alert("DHTML Welcomes you to Javascript!"); </script> </head> <body> Javascript For Mugus </body> </html>
You can run this script from here: http://mwebng.net/demos/javascript/demo1.html
|
|
|
|
|
|
*dhtml
|
The Next Example: How to change the colour of a web page using javascript. demo2.html <html> <head> <title>Javascript Demo 2</title> </head> <body>
Type any color here: <input type="text" value="blue" onkeyup="try {document.body.style.backgroundColor=this.value;} catch(err) {void(0);}">
</body> </html>
Location: http://mwebng.net/demos/javascript/demo2.htmlThese are preambles - we have not yet started anything.
|
|
|
|
|
|
|
|
*dhtml
|
Looks like i am not getting any encouragement for this thread - maybe i should still wait a little bit more. **** DHTML - stamps his foot, throws down the chalk and duster, and stalks out of the classroom speaking angrily to the student and regretting coming to the classroom today when students are on strike!
|
|
|
|
|
|
MT
|
@DHTML,
Pls come back to the classroom. I have been following all your threads on nairaland. I warm up to u affectionately. I added you to my yahoo messenger but I have not heard a wrod from you. I guess we need to either chat or talk.
Fire on , I beg
|
|
|
|
|
|
*dhtml
|
K guys, i will be back shortly to continue, but i want to know your questions - i dont know the level of my students? I am more used to white students - this is my first experience in a forum of ppl like me - so i want to know if i am moving too fast or too slow.
|
|
|
|
|
|
|
|
*dhtml
|
I think they spend more time on the computers than average blacks who are on the streets looking for money. There environment are more condusive for learning - they have more money to waste buying useless materials online, but we are more used to hardship and have the tendency to learn and become better than them given half of the chance they get - I for instance had never had an opportunity to go to a computer school - i had to struggle hard to learn everything I know today - I know that many ppl think I am a computer major student, i dont even have any diploma in computing - and I know many other programmers like that here too - it is the black gene in us to make us tic!
|
|
|
|
|
|
|
|
yawa-ti-de (f)
|
I am happy you think because you are yet to provide any solid evidence to back up your claims.
|
|
|
|
|
|
OmniPotens (m)
|
Please get back to the main topic here. It is "Javascript For Beginners - Learn How To Script Today!" in case you've already forgotten. All other irrelevances to this thread is no longer allowed. Let's keep it clean as it is for beginners who are learning.
Thanks for your cooperation in advance.
|
|
|
|
|
|
*dhtml
|
*** choses to ignore her and faces the students ***** Yo students - i am gathering the stuffs - i am compiling the materials for creating fb apps - almost done - i will be back here shortly - in case i can't make it back on time - i want yo guys to make sure you read the javascript tutorial on w3schools.com - if u are able to master all that - u will be the one teaching me javascript for instance you will tell me that if (frame1.location.href==" www.yahoo.com") {var site="Yahoo";} else {var site="Not yahoo";} should be better written as var site = frame1.location.href == " www.yahoo.com" ? "Yahoo" : "Not yahoo"; I will be back surely
|
|
|
|
|
|
*dhtml
|
I am wondering if i should teach yo guys how to create a calculator with javascript. This will help you to learn alot of technique in javascript: like how to do calculations, track events like click, check if something entered on the keyboard is a number, how to programmatically change the content of a text box,
I need two votes for this one, anyone interested, and I am not going to count the moderator / yawa(doubtful) ?
|
|
|
|
|
|
OmniPotens (m)
|
I need two votes for this one, anyone interested, and I am not going to count the moderator / yawa(doubtful) ?

|
|
|
|
|
|
*dhtml
|
Disqualified, i will do the calc later when i get back from leave. I have already written it out on my pc, just to post it s all dat is left.
|
|
|
|
|
|
Bblak (f)
|
@dhtml
I've been following your thread.please come back to the classroom as soon as possible.we are waiting to learn how to create a calculator with javascripts.
Thanks.
|
|
|
|
|
|
*dhtml
|
Yes - our calculator - can u blv that i hav forgotten about this thread! No probs - i will post it soon enough - i was begining to think dat my threads were boring, so i just dey sit-down-look!
|
|
|
|
|
|
*dhtml
|
So i hav broken it down into some steps. Step 1 - the basic html/css layout <html> <head> <title>Step 1</title> <style> .calc {border:1px dotted #cccccc;background:#ceceff;} .calc .cline input{font:12px tahoma;width:50px;height:40px;} .calc .cline2 input{font:12px tahoma;width:90px;height:40px;} .calc .console {width:275px;text-align:right;padding-right:5px;font:14px tahoma;} </style> </head> <body> <table class="calc"> <tr><td colspan="5"><input type="text" class="console" value="0."></td></tr> <tr class="cline2"> <td colspan="5"> <input type="button" value=" Backspace "> <input type="button" value=" CE "> <input type="button" value=" C "> </td></tr> <tr class="cline"> <td><input type="button" value="7"></td> <td><input type="button" value="8"></td> <td><input type="button" value="9"></td> <td><input type="button" value="/"></td> <td><input type="button" value="sqrt"></td> </tr> <tr class="cline"> <td><input type="button" value="4"></td> <td><input type="button" value="5"></td> <td><input type="button" value="6"></td> <td><input type="button" value="*"></td> <td><input type="button" value="%"></td> </tr> <tr class="cline"> <td><input type="button" value="1"></td> <td><input type="button" value="2"></td> <td><input type="button" value="3"></td> <td><input type="button" value="-"></td> <td><input type="button" value="1/X"></td> </tr> <tr class="cline"> <td><input type="button" value="0"></td> <td><input type="button" value="+/-"></td> <td><input type="button" value="."></td> <td><input type="button" value="+"></td> <td><input type="button" value="="></td> </tr> </table> </body> </html>
step2.html <html> <head> <title>Step 2</title> <link rel="stylesheet" href="calc.css"/> </head> <body> <table class="calc"> <tr><td colspan="5"><input type="text" class="console" value="0."></td></tr> <tr class="cline2"> <td colspan="5"> <input type="button" value=" Backspace "> <input type="button" value=" CE "> <input type="button" value=" C "> </td></tr> <tr class="cline"> <td><input type="button" value="7"></td> <td><input type="button" value="8"></td> <td><input type="button" value="9"></td> <td><input type="button" value="/"></td> <td><input type="button" value="sqrt"></td> </tr> <tr class="cline"> <td><input type="button" value="4"></td> <td><input type="button" value="5"></td> <td><input type="button" value="6"></td> <td><input type="button" value="*"></td> <td><input type="button" value="%"></td> </tr> <tr class="cline"> <td><input type="button" value="1"></td> <td><input type="button" value="2"></td> <td><input type="button" value="3"></td> <td><input type="button" value="-"></td> <td><input type="button" value="1/X"></td> </tr> <tr class="cline"> <td><input type="button" value="0"></td> <td><input type="button" value="+/-"></td> <td><input type="button" value="."></td> <td><input type="button" value="+"></td> <td><input type="button" value="="></td> </tr> </table> </body> </html>
calc.css .calc {border:1px dotted #cccccc;background:#ceceff;} .calc .cline input{font:12px tahoma;width:50px;height:40px;} .calc .cline2 input{font:12px tahoma;width:90px;height:40px;} .calc .console {width:275px;text-align:right;padding-right:5px;font:14px tahoma;background:#ffffff;}
step 3 <html> <head> <title>Step 3</title> <link rel="stylesheet" href="calc.css"> <script language="javascript"> var cstat=0; function cdot() { if(console.value.indexOf('.')!=-1) {return;} console.value+="."; }
function dosign() { if(console.value=="0") {return;} if(console.value.indexOf('-')==-1) {console.value='-'+console.value;return;} console.value=console.value.substring(1,console.value.length); }
function cdigit(element) { if(console.value=="0") {console.value="";} console.value+=element.value; }
function bkspc() { if(console.value.length<2) {console.value="0"; return;} console.value=console.value.substring(0,console.value.length-1); }
function cls() { console.value="0"; cstat=0; } </script> </head> <body> <table class="calc"> <tr><td colspan="5"><input type="text" readonly="true" id="console" class="console" value="0"></td></tr> <tr class="cline2"> <td colspan="5"> <input type="button" onclick="bkspc();" value=" Backspace "> <input type="button" onclick="cls();" value=" CE "> <input type="button" onclick="cls();" value=" C "> </td></tr> <tr class="cline"> <td><input type="button" value="7" onclick="cdigit(this);"></td> <td><input type="button" value="8" onclick="cdigit(this);"></td> <td><input type="button" value="9" onclick="cdigit(this);"></td> <td><input type="button" value="/"></td> <td><input type="button" value="sqrt"></td> </tr> <tr class="cline"> <td><input type="button" value="4" onclick="cdigit(this);"></td> <td><input type="button" value="5" onclick="cdigit(this);"></td> <td><input type="button" value="6" onclick="cdigit(this);"></td> <td><input type="button" value="*"></td> <td><input type="button" value="%"></td> </tr> <tr class="cline"> <td><input type="button" value="1" onclick="cdigit(this);"></td> <td><input type="button" value="2" onclick="cdigit(this);"></td> <td><input type="button" value="3" onclick="cdigit(this);"></td> <td><input type="button" value="-"></td> <td><input type="button" value="1/X"></td> </tr> <tr class="cline"> <td><input type="button" value="0" onclick="cdigit(this);" ></td> <td><input type="button" value="+/-" onclick="dosign();" ></td> <td><input type="button" value="." onclick="cdot();" ></td> <td><input type="button" value="+"></td> <td><input type="button" value="="></td> </tr> </table> </body> </html>
By step 3 - all the digits are working as well as the dot button. Backspace, C and CE are workin as well. I am only doing this for copy-pasters if any around here - i will expect students to ask questions - that should differentiate who is who
|
|
|
|
|
|
jacob05 (m)
|
@dhtml well done o. Waiting for the concluding part.
|
|
|
|
|
|
*dhtml
|
I will continue later in the night - when i am through with the day's activities. No questions yet? Then i guess u guys understand it all then!
|
|
|
|
|
|
*dhtml
|
step 4.html - the concluding part Sorry for the delay - it is now completed. <html> <head> <title>Step 3</title> <link rel="stylesheet" href="calc.css"> <script language="javascript"> var stat=-1; //no calculation pending var result=0; //no result yet function dosign() { cleanup(); //checks for pending calculation if(console.value=="0") {return;} if(console.value.indexOf('-')==-1) {console.value='-'+console.value;return;} console.value=console.value.substring(1,console.value.length); }
function cdot() { cleanup(true); //checks for pending calculation if(console.value.indexOf('.')!=-1) {return;} console.value+="."; }
function cdigit(element) { cleanup(true); //checks for pending calculation if(console.value=="0") {console.value="";} console.value+=element.value; }
function bkspc() { if(console.value.length<2) {console.value="0"; return;} console.value=console.value.substring(0,console.value.length-1); }
function cls() { console.value="0"; }
function clearScreen() { cls(); result=0; stat=-1; }
function cleanup(clear) { var con=parseInt(console.value);
if(stat==1) {stat=2} else if(stat==2) { //evaluation is done when status is 2 switch(lsign) { case "+": result+=con; break; case "-": result-=con; break; case "*": result*=con; break; case "/": result/=con; break; default: alert(lsign); break; } stat=0; //reset }
//conditionally clean screen if(clear) cls(); return; }
var lsign=""; //stores the last sign pressed
function esign(txt) { //operators that warrant immediate calculation var con=parseInt(console.value); switch(txt.value) { case "sqrt": console.value=Math.sqrt(con); break; case "1/X": var res=(1/con).toString(); if(res.length>20) {res=res.substring(0,19)} console.value=res; break; } //Note that no actual evaluation is done here var con=parseInt(console.value); if(stat==-1) {result=con;} //saves current screen buffer as result
stat=1; //a sign has been pressed, waiting for user to enter digits lsign=txt.value; //this stores the current sign pressed
result=con; }
function calc() { cleanup();
console.value=result; } </script> </head> <body> <table class="calc"> <tr><td colspan="5"><input type="text" readonly="true" id="console" class="console" value="0"></td></tr> <tr class="cline2"> <td colspan="5"> <input type="button" onclick="bkspc();" value=" Backspace "> <input type="button" onclick="clearScreen();" value=" CE "> <input type="button" onclick="clearScreen();" value=" C "> </td></tr> <tr class="cline"> <td><input type="button" value="7" onclick="cdigit(this);"></td> <td><input type="button" value="8" onclick="cdigit(this);"></td> <td><input type="button" value="9" onclick="cdigit(this);"></td> <td><input type="button" value="/" onclick="esign(this)"></td> <td><input type="button" value="sqrt" onclick="esign(this)"></td> </tr> <tr class="cline"> <td><input type="button" value="4" onclick="cdigit(this);"></td> <td><input type="button" value="5" onclick="cdigit(this);"></td> <td><input type="button" value="6" onclick="cdigit(this);"></td> <td><input type="button" value="*" onclick="esign(this)"></td> <td><input type="button" value="%" onclick="esign(this)"></td> </tr> <tr class="cline"> <td><input type="button" value="1" onclick="cdigit(this);"></td> <td><input type="button" value="2" onclick="cdigit(this);"></td> <td><input type="button" value="3" onclick="cdigit(this);"></td> <td><input type="button" value="-" onclick="esign(this)"></td> <td><input type="button" value="1/X" onclick="esign(this)"></td> </tr> <tr class="cline"> <td><input type="button" value="0" onclick="cdigit(this);" ></td> <td><input type="button" value="+/-" onclick="dosign();" ></td> <td><input type="button" value="." onclick="cdot();" ></td> <td><input type="button" value="+" onclick="esign(this)"></td> <td><input type="button" value="=" onclick="calc()"></td> </tr> </table> </body> </html>
|
|
|
|
|
|
aje49ja (m)
|
the write up are not clear to the eyes
|
|
|
|
|
|
*dhtml
|
Really. . . maybe you should copy and paste them into microsoft word. . .interesting. . .first time i will hear that
|
|
|
|
|
|
yawa-ti-de (f)
|
a better way to make code more legible would be to use the "quote", as opposed to the "code" feature 
|
|
|
|
|
|
*dhtml
|
Point noted. And i made sure the codes are available for download too. . .so just download it and study it. . . By habit, i usually make downloadables and also online sample of tutorials. . . .these posts here are for discussion really. . .
|
|
|
|
|
|
dawoyo (m)
|
Looks like i am not getting any encouragement for this thread - maybe i should still wait a little bit more. **** DHTML - stamps his foot, throws down the chalk and duster, and stalks out of the classroom speaking angrily to the student and regretting coming to the classroom today when students are on strike!
@DHTML, You are a God sent cause i've been looking for a tutor on javascript. Can i have your email address so i can mail you, mine's dawoyo@yahoo.com. Keep up the good work. Hope to hear from u soonest.
|
|
|
|
|
|
fatholysis
|
Yeah am getting it. Thank you very much teacher keep teaching we are enjoying your teaching
|
|
|
|
|
|
*dhtml
|
well, i thought the class was getting boring, so i quit. Meanwhile i was writing a teach-yourself-javascript-in-24-hours book which features on creating simple scripts and also how to download and integrate scripts found elsewhere such as dynamic drive, and how to integrate the popular jquery library into your work. . .i suspended it for awhile now, maybe i should continue
|
|
|
|
|
|
fatholysis
|
Wahoo i can't wait to see that please am very hungry for it. 
|
|
|
|
|
|
fatholysis
|
Hello Teacher students are still waiting to hear more from you
|
|
|
|
|
|