₦airaland Forum

A chat will definitely involve database for data persistence over network. You must do proper research on how to get that done, i dont use .net so i cannot really help you much, i can only give general advices.

That is where javascript/ajax comes in. See, developing a chat system is not beans at all, you must really be an expert before you can create one that works properly. These challenges you are facing are just a tip of the ice berg, there are more difficult challenges ahead of you to create a chat system.

^^^^naija people always want to take the easiest way out.

Are you sure you are ready to create a chat eh?

dhtml: hello seun
that goes into database like this:
to->seun, from->dhtml,message->hello seun,time->now,status->unread

Since seun is obviously online, javascript/ajax checks message thread for unread messages posted to seun
seun now sees:
dhtml:hello seun
and the status is changed to read

and the messages go back and forth?

pjosh1: Companies pay much for basic, fortran and assembly programmers because nobody is willing to learn those language again...

Hehehe, where them companies @?

@ is used to protocol email in php e.g. mufu@nairaland.com, when is the tutorial startin nau?

pjosh1: dhtml answer?

You are correct bro.

tsleazy: I smell ignorance here

Nay, i can program in almost all those languages, but believe me, i shall never add them to my portfolio 'cause it will only do more harm than good.


Those things are only taught in our outdated school curriculum, in the new world programming, you should be speaking python, C#, Java and the other OOP languages.
Programming should start off with new generation languages like java or C (not qbasic, fortran and all those nonsense and concobility).

And yet even newer languages, ever heard of coffeescript, node.js for example? Now, I cannot remember the last time i saw an advert saying: Qbasic programmer wanted, apply within.

Dont get me wrong people, I am not trying to diss anyone really, I am just saying that let us talk of programming languages that can keep a roof over your head.

Hawlahscho: I use android to code c plus plus only

I see, well, try get a pc to do your stuff nao.

Interesting, I however, do not count wakpa as websites. I also dont count qbasic, fortran, pascal, assemble,cobol as programming languages.

luigiajah: Hey there guys.. My name's Michael Ajah.. I'm really enthusiastic about anything ICT.. I Love Being Creative.. I've got 3 websites personally designed.. And my amazing android app Download it from www.skyreloadz.tk/site_201.xhtml

Keep up the good work bro.

Hawlahscho: I think you shud know abt this, pls Tel me, is there any android application that I can use to create android applications. am only good at c++, qbasic and Fortran. I'll be glad if you can suggest me an application for this

Iz it an android app you use to code your c++,qbasic and fortran?

^^^^this remains to be seen, i wish you luck if you succeed with them clones.

[size=18pt]THE BLACK HOLE IS A SHORTEST ROUTE TO HELL FIRE[/size]

Chapter 01 : JavaScript Functions
A function is a block of reusable code. It is useful because you can execute it many times.

Let us create a function called hello which will just display an alert. Please note that in the two examples below, you will not get any result because the functions were not called and so will not be executed.

Example 1: creating the function

var hello = function () {
alert('i am saying hello');
};

Example 2:

function hello () {
alert('i am saying hello');
};

Example 3: executing the functions

var hello = function () {
alert('i am saying hello');
};
hello();

Example 4:

function hello () {
alert('i am saying hello');
};
hello();

The syntax of functions is shown below:

functionName(parameter1, parameter2, parameter3) {
code to be executed
}

A function can have what we call arguments or parameters. Let us create a function that will alert the first and last name of a person.

Example 5:

function myname(first,last) {
alert('Your full name is '+first+' '+last);
}
myname('Tony', 'Olawale');

Example 6: A function can also return a result

function myname(first,last) {
var r='Your full name is '+first+' '+last;
return r;
}
var fullname=myname('Tony', 'Olawale');
alert(fullname);

Hope you people are backing up the thread in case. . . . (no be my mouth talk am o)

I hope you guys are properly backing up these tutorials, just in case them disappear again!

And so, the part 2 of the tutorial is kicking off here, leave this calculator alone if it is bugging you. After the second part of the tutorial, the calculator will make sense and will look much more easier.

https://www.nairaland.com/1810544/javascript-tutorial-scratch-brought-#24648523

The part 2 of the tutorial is kicking off here, leave that calculator alone if it is bugging you now.

https://www.nairaland.com/1810544/javascript-tutorial-scratch-brought-#24648523

In the previous class which took place here - https://www.nairaland.com/1789014/javascript-tutorial-scratch-brought- - we looked at the following topics:

01. Introduction to javaScript
02. Alert Box: Display messages with alert
03. Math Rules: Order of operation math rules
04: Write JavaScript: the Script Element
05. Variables: Store data with variables
06. Prompt Box: Ask questions with prompt
07. Adding Strings: Joining strings and numbers with +
08. If Statements: Check user responses with if statements
09. Boolean values: true & false
10. Confirm Box: The confirm command
11. Null value: The special value null
12. If Conditions: Combining conditions with && and ||
13. While loop: Repeat code with while loops

Now, we shall progress to the new topics:
01. JavaScript Functions
02. JavaScript Events & handlers
03. Working With Arrays
04. Working With Dates
05. String functions in JavaScript
06. Working with DOM
07. Form Validation

The JavaScript calculator created on this thread - https://www.nairaland.com/1809691/creating-simple-calculator-raw-javascript#24648265 - will be better understood after this Part 2 tutorial.

phatjoe50: Chrome, Mozilla and IE.

Maybe you should just leave the keyboard alone and focus on the main calculator itself. It might be due to many reasons, plugins and all sorta things.


We now come to the end of the calculator tutorial, i now present a 'simple' pure javascript calculator attached below.

I am expecting questions most certainly, i know there shall be plenty, and i also know that the next class should answer most of those questions.

And oh, you might test the calculator online here - http://.net/calc/

I just tested the calculator and it works in the following browsers:
1. The evil internet explorer
2. mozilla firefox (latest)
3. Netscape Navigator 9.0 (i still have it),
4. Opera
5. google chrome
6. maxthon
7. crazy browser (and i am not crazy)
8. safari
9. Blackberry native browser (both keypad and touch-screen keyboard worked)
10. Blackberry opera mini
11. Ipad native browser

As for the keyboard.html, i dont know why it fails to work on your browser BTW which browser did you test it on?

I explained in i think my last post that the arithmetic operators are not yet working.

Now that you understand the above, let us now show a calculator that has the following working:
0 - 9, . , C, CE, Backspace, and you can also type numbers with the keyboard. And use Del for C, escape for CE and backspace key for backspace.

To quote myself, I hope you have understood the codes above at least to an extent? The next phase remaining is to now make the mathematical operators work.

^^^I think He is saying that security is the job of the programmer and not exclusively 100% dependent on the language.

**Spreads my mat yakata**

Now that you understand the above, let us now show a calculator that has the following working:
0 - 9, . , C, CE, Backspace, and you can also type numbers with the keyboard. And use Del for C, escape for CE and backspace key for backspace.

Please note that i modified the calc.css (so it is different from the first one), and i did some slight adjustments to the html layout.

calculator.html

<html>
<head>
<title>Javascript Calculator</title>
<link rel="stylesheet" href="calc.css">
<script src="keys.js"></script>
</head>
<body id="calculator">

<table class="calc">
<tr><td colspan="5">
<div id="screen">

<div id="formular">5+7+5</div>
<div id="console">0</div>

</div>
</td></tr>
<tr class="cline2">
<td colspan="5">
<input type="button" onclick = 'keypad_process_key( 8 );' value=" Backspace ">
<input type="button" onclick="keypad_process_key(27)" value="CE">
<input type="button" onclick="keypad_process_key(46)" 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="keypad_process_key(190)" ></td>
<td><input type="button" value="+"></td>
<td><input type="button" value="="></td>
</tr>
</table>

</body>
</html>

calc.css

* {font:14px tahoma;}
.calc {border:1px solid #cccccc;background:#ceceff;}
.calc .cline input{font:12px tahoma;width:50px;height:40px;}
.calc .cline2 input{font:12px tahoma;width:90px;height:40px;}
.calc #screen {width:275px;text-align:right;background:#ffffff;height:47px;background:url('bg.png');}

#formular {height:17px;font-size:11px;line-height:4.5mm;padding-right:3px;}
#console{height:30px;font-size:24px;line-height:8mm;padding-right:3px;}

keys.js

/*
shortcut function for document.getElementById
instead of document.getElementById('calculator') you can now use el('calculator')
*/
function el(objectID) {return document.getElementById(objectID);}

function getScanCode(str) {return str.charCodeAt(0)}

function cdigit(elm) {
key=elm.value;
keyCode=getScanCode(key);
keypad_process_key(keyCode);
}

function keypad(evt) {
if(!evt) {evt=window.event;}
var keyCode=evt.keyCode;

keypad_process_key(keyCode);

//cancel bubble
if (evt.stopPropagation) evt.stopPropagation();
if (evt.cancelBubble!=null) evt.cancelBubble = true;
}

//process the keyboard scan code to affect the calculator display
function keypad_process_key(keyCode) {
var buffer=el('console').innerHTML; //get current console data
if(buffer==='0') {buffer='';} //reset buffer if it is empty (0 as value)

switch(keyCode) {
case 8: //backspace is pressed
if(buffer!='') {
buffer=buffer.substr(0,buffer.length-1); //delete last character in the buffer
}
break;

case 46: //delete is pressed
buffer=''; //we empty the buffer
el('formular').innerHTML='';
break;

case 190: //. is pressed
if(buffer==''||buffer=='0') {buffer='0.';}
else if(buffer.indexOf('.')==-1) {buffer+='.';}
break;

case 27: //escape is pressed
buffer=''; //we empty the buffer
break;

default:
if(keyCode>47 && keyCode <59) {
s=String.fromCharCode(keyCode); //get the correct character from the keycode
buffer+=s;
}

}

if(buffer=='') {buffer=0;}

//update the console
el('console').innerHTML=buffer;
}

window.onload=function() {
el('calculator').onkeyup = keypad;
}

I am expecting a number of questions here which i shall answer, but if you skip all the stuffs above, you will not really understand this aspect. So if there is something you are seeing in this code that you have also seen in the previous codes, it is better you start addressing it from the previous codes above.
Every program is made up of components, the same thing with this, it was done in parts and step-wise. I did not just start typing the codes from the begining to the end.

Nastydroid: This question is somehow silly....can it work on my phone browser or it is only for pc?

It should work on both, i have not tried it though, it has been awhile that i have used these kind of javascript on mobile.

Example:
if you wish to write a code like this:

var a=5;
if(a==4) {alert('4 boys');}
else if(a==5) {alert('5 babes');}
else {alert('All men');}

You can rewrite that like this:

var a=5;
switch(a) {
case 4:
alert('4 boys');
break;
case 5:
alert('5 babes');
break;
default:
alert('All men');
}

You do understand the keyboard scan codes right?

Let us assume that i wish to find out the character on the keyboard that owns the keyboard scan code 56.

var key=String.fromCharCode(57);
alert(key); //the answer is 9

Now let us assume that we wish to find out the keyboard scan code of the number 9

var char='9';
var key=char.charCodeAt(0);
alert(key); //the answer is 57 which is to be expected.

These functions used here are core javascript functions.

Assuming the code above is understood, you can now progress to the next stage, creating the screen of the calculator, and allowing users to be able to type numbers on it from the keyboard. I shall attach it for easy download as well.

screen.html

<html>
<head>
<title>Javascript Calculator Keypad</title>
<script>
function keypad(evt) {
if(!evt) {evt=window.event;}
var key=evt.keyCode;

keypad_process_key(key);

//cancel bubble
if (evt.stopPropagation) evt.stopPropagation();
if (evt.cancelBubble!=null) evt.cancelBubble = true;
}

//process the keyboard scan code to affect the calculator display
function keypad_process_key(key) {
var buffer=document.getElementById('console').innerHTML; //get current console data
if(buffer==0) {buffer='';} //reset buffer if it is empty (0 as value)

document.title='Last Keycode is '+key; //show the current scan code in the titlebar
switch(key) {
case 8: //backspace is pressed
buffer=buffer.substr(0,buffer.length-1); //delete last character in the buffer
break;

case 46: //delete is pressed
buffer=''; //we empty the buffer
break;


default:
if(key>47 && key <59) {
s=String.fromCharCode(key); //get the correct character from the keycode
buffer+=s;
}

}

if(buffer==0) {buffer=0;}

//update the console
document.getElementById('console').innerHTML=buffer;
}

window.onload=function() {
document.getElementById('calculator').onkeyup = keypad;
}
</script>
</head>
<body id='calculator'>

<div id='console'>0</div>

<div style='padding:10px;'>
This is a sample calculator console<br/>
<li>You can press numbers 0 - 9 on your keyboard
<li>You can also press backspace to delete last character
<li>and use delete to clear the screen.
</div>

</body>
</html>

Let us now review that keyboard.html more critically by first adding line numbers:

1. <html>
2. <head>
3. <title>Javascript Keyboard</title>
4. <script>
5. function keypad(evt) {
6. if(!evt) {evt=window.event;}
7. var key=evt.keyCode;
8. s=String.fromCharCode(key);
9. document.getElementById('calculator').innerHTML='Last Keycode is '+key+'<br/>'+'And the character is '+s;
10. }
11. window.onload=function() {
12. document.getElementById('calculator').onkeyup = keypad;
13. }
14. </script>
15. </head>
16. <body id='calculator'>
17. Press any key at all on your keyboard to get started!
18. </body>
19. </html>

document.getElementById
The body is given an id of calculator. To access the body through javascript using this ID,
document.getElementById('calculator').
Every HTML element has an innerHTML property which can be set or retrieved just like any other variable.

Events and Event Handlers
Events are occurences that happen in a programming language and that can be detected by the language such as when you press a key, click the mouse, even close the browser window.

Looking at line 11: document.getElementById('calculator').onkeyup = keypad;
onkeyup is an event (called keyup) which is triggered by pressing any key at all on the keyboard. keypad is the event handler, this means that when a key is pressed on the keyboard, keypad function which is defined on line 5 is called.

keypad function
When an event handler is triggered by normal browsers (excluding internet explorer), the event object is passed to the event handler, in this case evt.
However, internet explorer does not do this, instead internet explore provides the most recent event
as an object under the windows object, that is why line 6 exists.
For internet explorer, evt will be false on line 5, line 6 will detect this and update the value of evt to window.event.

String.fromCharCode
This is a function under the String method that will convert a keyboard scan code into the appropriate character. It was used on line 8 of the code.

You are not meant to memorize the keyboard scan code, and in case i forgot to mention it, the keyboard scan code is used generally in programming, so if you go to c,c++,c#,java,visual basic and others as long as keyboard interaction is used.
Nobody needs to memorize the scan codes, but it is good to have a reference.

An example of how to check the keyboard scan code:

keyboard.html

<html>
<head>
<title>Javascript Keyboard</title>
<script>
function keypad(evt) {
if(!evt) {evt=window.event;}
var key=evt.keyCode;
s=String.fromCharCode(key);
document.getElementById('calculator').innerHTML='Last Keycode is '+key+'<br/>'+'And the character is '+s;
}

window.onload=function() {
document.getElementById('calculator').onkeyup = keypad;
}
</script>
</head>
<body id='calculator'>
Press any key at all on your keyboard to get started!
</body>
</html>

Events (2)
=> load: this event is triggered when an object loads. An example here is when the window loads.
This is equivalent to $(function() {}) or $.ready(function() {}) in jQuery.
=> keyup: this is triggered when a key is pressed on the keyboard. It generates a keyboard scan code.

Functions (2)
=> keypad: this is a custom function that is used to process the keyup event here to capture the event, and detect the key that was pressed.
==> String.fromCharCode: converts keyboard scan code into the appropriate character.

This calculator is a very good introduction to event-driven programming. The first aspect of the calculator we are going to code is the keypad of the calculator.
The keypad may look simple to a beginner, you may think maybe an ordinary html textbox will do it, but that is wrong. We are using a DIV element for good reason too. A DIV element cannot be typed into like a textbox, true. But in event-driven programming, we can capture keys that are pressed on the keyboard and respond to them appropriately, and that is what we are going to do now.

To a programmer, the keyboard scan keys are very important, these are codes that are attached to every key on the keyboard. I shall post a reference here for that.

adewasco2k: and such thread doesnt make FP.
no worries, im learning and following

If it gets to frontpage, a lot of trolls will come in and scatter the thread with nonsense talks.

Thank you all for attending this class, we are now advancing forward. My stock exchange API that is supposed to reach frontpage no hit am, it is the man that pregnant his sister that is hitting frontpage.

We shall soon go into the part 2 of the tutorial, but first, let us visit the workshop of this class and continue from there.
Creating A Simple Calculator With Raw Javascript

We have already completed part 1 of our javascript tutorial here https://www.nairaland.com/1789014/javascript-tutorial-scratch-brought-
We are now going to do a small workshop before proceeding to part 2. The idea of this calculator is to show how javascript is used in real life everyday programming.
This class is going to make use some javascript functionalities that are beyond the scope of the part 1 tutorial, but i shall try to explain as we go. At the end of this, we shall now go into part 2 of the tutorial (which will feature jQuery), and the worshop of that part 2 shall be more applications, and we shall build at least one simple javascript event-driven game maybe tetris or something really simple.

Attached is a screenshot of the calculator, and also attached is the source code used to generate the layout.
Every other thing from here will be javascript. So fasten your seat belt (and if it is the new automatic type that we find in commercial buses now adays, just wear am over your chest) make we carry go.

ibietela2: Seriously?

I also need a way to stop getting banned on nairaland.

Na wetin dey 'tired' (adontire tay tay) me for the guy be that.