Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,151,129 members, 7,811,192 topics. Date: Sunday, 28 April 2024 at 05:47 AM

Javascript For Beginners - Learn How To Script Today! - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Javascript For Beginners - Learn How To Script Today! (4797 Views)

Javascript For Native Apps / Welcome To Javascript For The Total Non- Programmer / Download HTML And Javascript For Visual Learners Free Ebook And Design Any Site (2) (3) (4)

(1) (2) (Reply) (Go Down)

Javascript For Beginners - Learn How To Script Today! by Nobody: 5:13am On Jan 05, 2009
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
- https://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!"wink;
</script>
</head>
<body>
Javascript For Mugus
</body>
</html>


You can run this script from here: http://mwebng.net/demos/javascript/demo1.html
Re: Javascript For Beginners - Learn How To Script Today! by Nobody: 5:18am On Jan 05, 2009
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.html

These are preambles - we have not yet started anything.
Re: Javascript For Beginners - Learn How To Script Today! by Nobody: 5:24am On Jan 05, 2009
Pending the time i make my next post, you may consider reading the Javascript Tutorial on http://w3schools.com/js/default.asp
And of course, you can ask questions.
Re: Javascript For Beginners - Learn How To Script Today! by Nobody: 6:42pm On Jan 05, 2009
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!
Re: Javascript For Beginners - Learn How To Script Today! by MT: 11:45pm On Jan 05, 2009
@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
Re: Javascript For Beginners - Learn How To Script Today! by Nobody: 1:57pm On Jan 06, 2009
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.
Re: Javascript For Beginners - Learn How To Script Today! by yawatide(f): 3:52pm On Jan 06, 2009
uhhmm, and what's the difference b/w white students and black students? Aren't we all, at the end of the day, human beings? undecided
Re: Javascript For Beginners - Learn How To Script Today! by Nobody: 8:01pm On Jan 06, 2009
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!
Re: Javascript For Beginners - Learn How To Script Today! by OmniPotens(m): 8:37am On Jan 07, 2009
Re: Javascript For Beginners - Learn How To Script Today! by yawatide(f): 1:17pm On Jan 07, 2009
I am happy you think because you are yet to provide any solid evidence to back up your claims.
Re: Javascript For Beginners - Learn How To Script Today! by OmniPotens(m): 3:37pm On Jan 07, 2009
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.
Re: Javascript For Beginners - Learn How To Script Today! by Nobody: 9:38pm On Jan 07, 2009
*** 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
Re: Javascript For Beginners - Learn How To Script Today! by Nobody: 7:23pm On Jan 09, 2009
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) ?
Re: Javascript For Beginners - Learn How To Script Today! by OmniPotens(m): 5:09am On Jan 11, 2009
dhtml:

I need two votes for this one, anyone interested, and I am not going to count the moderator / yawa(doubtful) ?
shocked grin
Re: Javascript For Beginners - Learn How To Script Today! by Nobody: 6:54am On Jan 11, 2009
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.
Re: Javascript For Beginners - Learn How To Script Today! by Bblak(f): 4:51pm On Jan 22, 2009
@dhtml

I've been following ur thread.please come back to the classroom as soon as possible.we are waiting to learn how to create a calculator with javascripts.

Thanks.
Re: Javascript For Beginners - Learn How To Script Today! by Nobody: 6:49pm On Jan 22, 2009
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!
Re: Javascript For Beginners - Learn How To Script Today! by Nobody: 7:26am On Jan 23, 2009
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"wink {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"wink {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

Re: Javascript For Beginners - Learn How To Script Today! by jacob05(m): 9:38am On Jan 23, 2009
@dhtml
well done o. Waiting for the concluding part.
Re: Javascript For Beginners - Learn How To Script Today! by Nobody: 12:25pm On Jan 23, 2009
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!
Re: Javascript For Beginners - Learn How To Script Today! by Nobody: 4:20pm On Jan 31, 2009
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"wink {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"wink {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>
Re: Javascript For Beginners - Learn How To Script Today! by aje49ja(m): 9:51am On Mar 11, 2009
the write up are not clear to the eyes
Re: Javascript For Beginners - Learn How To Script Today! by Nobody: 6:48pm On Mar 12, 2009
Really. . . maybe you should copy and paste them into microsoft word. . .interesting. . .first time i will hear that
Re: Javascript For Beginners - Learn How To Script Today! by yawatide(f): 7:40pm On Mar 12, 2009
a better way to make code more legible would be to use the "quote", as opposed to the "code" feature wink
Re: Javascript For Beginners - Learn How To Script Today! by Nobody: 7:43pm On Mar 12, 2009
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. . .
Re: Javascript For Beginners - Learn How To Script Today! by dawoyo(m): 11:29am On Sep 15, 2009
*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!

@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.
Re: Javascript For Beginners - Learn How To Script Today! by fatholysis: 4:28pm On Sep 15, 2009
Yeah am getting it. Thank you very much teacher keep teaching we are enjoying your teaching
Re: Javascript For Beginners - Learn How To Script Today! by Nobody: 9:58pm On Sep 15, 2009
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
Re: Javascript For Beginners - Learn How To Script Today! by fatholysis: 6:20pm On Sep 17, 2009
Wahoo i can't wait to see that please am very hungry for it. grin sad
Re: Javascript For Beginners - Learn How To Script Today! by fatholysis: 10:25am On Sep 23, 2009
Hello Teacher students are still waiting to hear more from you
Re: Javascript For Beginners - Learn How To Script Today! by lordjacky(f): 4:02am On Oct 09, 2010
Need a Website?Need it fast,Professional And most important Cheap?Contact us now On www.simplexlinx.com Or call us on 08034616855. cheesy
Re: Javascript For Beginners - Learn How To Script Today! by akay48(m): 12:39pm On Jan 20, 2011
what has happened to this 1daful thread?

(1) (2) (Reply)

Why Ordering For Large Webhosting Space When You Only Need A Few Megabyte Space / 9 Killers Way To Make Your Blog Popular / Pls What Is The Best Alternative To Adsense

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 83
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.