blenderNetworkpatreonblender-logosdheartuserthtimesbookphotopencilmap-markerchevron-rightbancommentcommentstwitterfacebookrsschainnavicongoogle-plusenvelopelinkedinmail-replycalendar-otumblrredditstumbleuponshare-altbloggerflattrflag

Javascript (not jQuery)

Javascript (not jQuery)

Postby djm » May 1st, 2010, 9:02 am

Haha, I was looking for some cool javascripts to use on my webpage (the last homeasignment we have at school) and I found out that Javascript (and java in general) demands a highly developed brain and a brain that is good at maths!

For example;

Here we have some variables (also written var in a javascript/script document)
a b c d e f and 1 2 3 4 5.

Now, if we use them in a javascript code it will look like this:

Code: Select all
abcdef
12345


Nothing happends. BUT, if we add some text, more variables and some counting to it it will turn out to be one of the problems everyone has to solve in our dear mathbooks:

Code: Select all
   var a = 5;
   b = a++;
   (b contains the initial value of a, which is 5.
   a, on the other hand is now equal to 6)

   var a = 5;
   c = ++a;
   (In this case, JavaScript first adds 1 to a, changing
   its value to 6. This value is returned to c.
   Thus, c = 6)


Doesn't it look awesome!? "eeeh.. no".. haha, it's a real pain towrite this down. BUT, it's worth it. Lemme show you why..

The following codes will write down the current time and date for you:
*Note; The codes are devided into two seperate parts for an easier understanding. You can connect/link them together in a .js document is you'd like that instead*

Code: Select all
<script type="text/javascript">
<!--

var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");

var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
document.write(curr_date + "-" + m_names[curr_month]
+ "-" + curr_year);

/* The last two lines above have
to placed on a single line */

//-->
</script>

and

<script type="text/javascript">
<!--

var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12)
   {
   a_p = "AM";
   }
else
   {
   a_p = "PM";
   }
if (curr_hour == 0)
   {
   curr_hour = 12;
   }
if (curr_hour > 12)
   {
   curr_hour = curr_hour - 12;
   }

var curr_min = d.getMinutes();

curr_min = curr_min + "";

if (curr_min.length == 1)
   {
   curr_min = "0" + curr_min;
   }

document.write(curr_hour + " : " + curr_min + " " + a_p);

//-->
</script>


Look, it's not too complicated to understand how it works, although you need to have at least some idea of how maths can work in programming. as some would say it; 'You gotta' Think outside the box!'. Anyway, if you add this to a HTML document, so that it will be displayed in a website is might look something like this:
*Note; Keep an eye on the <script> and </script> tags, because they are mandetory to make this kind of codes work. They are usually placed inside the <head> and </head> tags but that's most commonly seen when the javascript is an action such as "click me" and a box opens.

Code: Select all
<html>
<head>
<title>
hello
</title>
<body>
<h5>
   <center>
Current Time and Date:
<script type="text/javascript">
<!--
var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
document.write(curr_date + "-" + m_names[curr_month]
+ "-" + curr_year);
/* The last two lines above have
to placed on a single line */
//-->
</script>

&nbsp;

<script type="text/javascript">
<!--
var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12)
   {
   a_p = "AM";
   }
else
   {
   a_p = "PM";
   }
if (curr_hour == 0)
   {
   curr_hour = 12;
   }
if (curr_hour > 12)
   {
   curr_hour = curr_hour - 12;
   }
var curr_min = d.getMinutes();
curr_min = curr_min + "";
if (curr_min.length == 1)
   {
   curr_min = "0" + curr_min;
   }
document.write(curr_hour + " : " + curr_min + " " + a_p);
//-->
</script>
</body>
</html>


Copy and paste it and save the document as test.html or something, open it in your browser and look for yourself. It's kind of cool actually. When you get the hang of things even more, you can add getMilliseconds (which is the code-name for milliseconds).

Code: Select all
var curr_msec = d.getMilliseconds();


As you can see, the codes (or Scripts) that uses numbers or single letters; 123 abc, need to have VAR before the actual code. A simple example of variable usage is this date and time code I wrote above. It's complicated to "translate" but it's easy to write and use. Try, make your own time and date stuff and most of all, enjoy! :D


Here's the complete millisecond code for those who wants to have that instead of the minute/hour one (although I think I wrote to codes in GMT.. I'm sorry if that's the case):

Code: Select all
<script type="text/javascript">
<!--

var d = new Date();
var curr_hour = d.getHours();
var curr_min = d.getMinutes();

var curr_sec = d.getSeconds();
var curr_msec = d.getMilliseconds();

document.write(curr_hour + ":" + curr_min + ":"
+ curr_sec + ":" + curr_msec);

//-->
</script>


EDIT: I forgot to mention that the time in these scripts are not self-updated. So you have to reload the page to get the latest time, so to speak. For example; if it says 12:08 PM when u visit the page, it will stay as 12:08 PM until you reload the page or re-visit it again.
Regards, DJM aka Sheldin!

DeviantArt Profile
http://sheldiner.deviantart.com/

Youtube (Tutorials/Gaming)
http://www.youtube.com/SheldinLP
User avatar
djm
Pro
Pro
 
Posts: 478
Joined: December 11th, 2009, 4:04 pm
Location: Sweden

Re: Javascript (not jQuery)

Postby IrascibleOne » May 1st, 2010, 10:47 am

This is a very good read. I had forgotten about the ordering of a++ and ++a.

As for your comment on the GMT time, I believe what happens is that Javascript gets the time from the local machine (ie. the user's computer). I don't think there is any other place it can get the time from as it does not have access to the server time like PHP (or some other server side language) does, which gets the time from the server.
Image
User avatar
IrascibleOne
Site Admin
Site Admin
 
Posts: 1539
Joined: July 31st, 2008, 7:14 pm

Re: Javascript (not jQuery)

Postby djm » May 1st, 2010, 11:17 am

Haha, thank you! I was playing with the scripts so I thought; "Why not make something out of this and show the rest on DS. They might actually learn something!" and I guess I have proven my point with you, as the variable in this case Irascible! haha! :D

Oh, you're right! I had completely forgotten about that. But if you want to make a more advanced and yet easily made website with auto-updating Date and Time I guess PHP is the way to go since Javascript aint auto-updating.. Which is a shame. But Javascript is still fun to play around with, and variables is the way to do it the easy way.

It might look like a pain and it might seem to take forever to learn it by just reading what I wrote, but it doesn't really take too long. It took me about 40 minutes to get the hang of the basics. and now, a day later, I'm "making" my own codes, and by that I mean; I'm writing my very own commands in a text-document, executing them and fixing the bugs, all by myself. Some of my friends uses the easy way; Copy + Paste. But what do you learn in that process?? Nothing.

Even new programmers can learn Javascript very quickly since it's just an expandable to HTML. XHTML is the "main" expandable to HTML but to make the HTML tags seem more filled out and work in a different way we connect them to the <script> tags (which is an HTML-tag) and inside the <script> </script> tags we write the javascript, as I told you earlier. Which means.. Expand your HTML codes by adding Javascript. I hope that explains the expandale part of it, haha! If not, ask!
Regards, DJM aka Sheldin!

DeviantArt Profile
http://sheldiner.deviantart.com/

Youtube (Tutorials/Gaming)
http://www.youtube.com/SheldinLP
User avatar
djm
Pro
Pro
 
Posts: 478
Joined: December 11th, 2009, 4:04 pm
Location: Sweden

Re: Javascript (not jQuery)

Postby IrascibleOne » May 1st, 2010, 12:06 pm

Actually, with PHP it is a one shot deal. It only runs once when the pages loaded, after it is loaded you cannot do any more PHP until you reload the page or go to another that has PHP on it.

Javascript can do auto-updating in a way, but you have to use timing to do it. You could use AJAX too, but that isn't technically auto-updating. Anyways, you can do a clock like your example, with something like this: http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock

The key to that code is using the setTimeout function. The first parameter you through in is the code you want to run after a certain amount of time and the second parameter is how long you want to wait in milliseconds. So, if you want to update the time every second, you would do 1000 milliseconds (or less, since it wouldn't look any different anyways). The code at the URL above uses recursion (calling the function that the call is in) so that it continues indefinitely.
Image
User avatar
IrascibleOne
Site Admin
Site Admin
 
Posts: 1539
Joined: July 31st, 2008, 7:14 pm

Re: Javascript (not jQuery)

Postby djm » May 1st, 2010, 12:33 pm

Oh, yeah! I just found that one. I had no idea you could time the variables that way, really. Well, now I can finally add the time as an auto-updating timer at last!

Since I've been writing a lot of alert boxes, I decided to try some prompt boxes as well! It went well, as always, and I managed to make the answer after the prompt box to be as "human" as possible through javascript. For example; When some asks you so say anything, anything at all, you'd probably say something. And I made the website answer to whatever you write.
Like this: *Write anything here:* - 'Text written; *something*' - 'Answer: *I wrote something!*'. Although this far from good "AI" and very far from being a human answer, but to me it sounds good. I mean, you can write ANYTHING and still get the answer as if the computer/website is telling someone what you wrote.

The codes are quite simple here, and it doesn't contain too many variables either:

Code: Select all
   function disp_prompt()
      {
         var fname=prompt("Please write something here:","Something")
         document.getElementById("msg").innerHTML="I wrote " + fname + "!"
      }


That's the <script> code.
*NOTE: Remember to put what type of script you're using, such as text/javascript (text/javascript is THE command you'll rite, not text OR javascript. and that's because the browser will read this automaticly when you write it with a / between the two command-types).

For the action-script, so to speak, you need to write where and how this will be executed. this is where we'll use the <body> part of our website for this script to work:

Code: Select all
//I Asume you already know where to put the body tags. That's why I skipped right to the body part.
<body>
<font color="orange" face="arial">
//Font explains which font you want to use, and by putting color="orange" behind it you choose what color the answer will have.
//You can use font-options even without scripts connected to it.

<input type="button" onclick="disp_prompt()" value="Talk!" />
//By typing 'input type' we explain to the website that this script will be executed through some kind of button(s).
//onclick="disp_prompt()" means that the button will open a box, in this case a prompt box.
//Value="Talk!" is the text that the button will have. You change "Talk!" to whatever you like; Hello, What, Hey want to talk to me etc.

<br /><br />
//<br /> is the XHTML tag for line-break. <br> is the standard code for the same thing. You can use both of them.

<div id="msg"></div>
//This code here explains to the browser that this will be executed inside a so called Div.
//Div means Division. you use Divs to format one part of the webpages at once. In this case we use the Div to format our javascript.
//The execution will happend inside this little, although invisible, divison.
//"msg" is the name of our javascript's execution command. By typing <div id="msg"> we show the browser that we want that exact javascript //('msg') to be executed in this exact division.
//By typing </div> we close the divison so that we can format other parts of the webpage without hurting the div and so that the div can operate without crashing with the rest of the webpage.

</font>
//Here we close the <font> tag which means that from now on the text won't be the color we picked in the <font> tag. In this case, Orange.

</body>


You use // to write messages that won't be read by the browser. // commands are very usable when you program this kind of things for lets say a company. So that when they check the document they'll see exactly how you did, what you did and how it works.

Anyway, this is the executable of our complete script for this funny prompt-box.

In a single HTML document with only this javascript in it, it would probably look something like this:

Code: Select all
<html>
<head>
<script type="text/javascript">
function disp_prompt()
{
var fname=prompt("Please Write Something:","Something")
document.getElementById("msg").innerHTML="I Wrote " + fname + "!"
}
</script>
</head>
<body>
<center>
<font color="orange">
This is our Talk-button!
<br />


<input type="button" onclick="disp_prompt()" value="Talk!" />
<br /><br />

<div id="msg"></div>


</font>
</center>
</body>
</html>


*NOTE: Everytime you add something to your message, that you want to be written as an "answer", you need to write + and "your message here" or else it won't work. As you can see in the example below, I wrote fname twice, which means that the word I wrote in the box will be shown twice, but on the places where I wrote fname. That's the execution.
Code: Select all
"I Wrote " + fname + "!" + "And it is a word that I Like! + "And that particular word is once again " + fname + "!"
Regards, DJM aka Sheldin!

DeviantArt Profile
http://sheldiner.deviantart.com/

Youtube (Tutorials/Gaming)
http://www.youtube.com/SheldinLP
User avatar
djm
Pro
Pro
 
Posts: 478
Joined: December 11th, 2009, 4:04 pm
Location: Sweden
Return to Programming

Who is online

Users browsing this forum: No registered users and 2 guests

cron