How to learn another Programming Language

Admin — Wed, 21 Jul 2010 22:17:56 +0000

For the past few months, I have been struggling with trying to learn how to program in Javascript, one of the easiest languages one can learn (besides C, I suppose). I know to program in PHP pretty well, I got the whole concept down, and I’ve made plenty of sites to say that I’m experienced. I can work with MySQL, and I can do plenty of other things. However, Javascript has been giving me a headache, that is, until recently.

I tried to work through the language the same way I did with PHP. I watched a few in-depth videos, I tried to do some tutorials on good-tutorials, etc etc. But that did not work. However, I found a great way to get started with the language. I call this the “crash course method”.

Crash Course Method

Here is a summary of my crash-course method:

go on a tutorial site, one that goes from the beginning to the end with Javascript, such as w3schools.
look at the topics and write them down real quick like so ( – statements, – comments, – variables)

for each topic, make a little program to demonstrate the topic, here is an example for a for loop and comments:

Don’t focus on the details of javascript, or the tutorials, each programming language works almost the same way (variables, loops, functions etc) so, simply see how javascript works and relate it to your language. For example, in PHP I used the echo function to print out text, javascript uses document.write() with the text between the parenthesis. In PHP, each variable has a dollar sign in front of it, in javascript, that is not the case. Do print out a variable, simply don’t use quotation marks. Make notes of these details, that’ll come in handy
Have fun! Make little programs, pointless programs that could be made without the use of javascript. Simply, get used to writing the code, don’t find a way around it, tackle the project with javascript

The idea of a crash-course is not to focus on the details, and simply write code as much as possible. That helps the most, I found that out with PHP, and I’m starting to find this out with javascript as well.

Also, note that all programming languages work on a similar concept. Just because it looks unfamiliar, does not mean it does not follow the standard principles you’re used to.

Share and Enjoy:

Just a little stupid Javascript App

Admin — Sun, 21 Mar 2010 18:56:37 +0000

Remember how I promised I would learn Javascript so many times in the past? Well, I finally got around to learning some of the basics. And just like I did with PHP when I was learning it, I decided to create a simple application. I could not come up with a good idea so my friend suggested one and within a couple of hours I finished it.

Here is the demo. I received some positive feedback from a lot of people so I thought I’d show how I, first of all, made it and how it helped me learn Javascript.

The Concept

Okay, the concept was to create a site wherein one would receive advice to a question with a general advice quote or whatever else. Basically, a sentence or two that would guide the user. It works in a similar way as one of my older projects Only A Quote, except this is pure javascript, no databases, and no php at all.

The idea is to set up variables, actually strings, that contain the quotes. One string = one quote. And then access these strings randomly. The access has to be inside the HTML (ie. no refreshing) and I want the text to fade out and fade back in with the advice quote.

Another thing I wanted to do was to have the answer appear in a teacup, etc. I’ll explain some of the basic CSS to do that, and same with how to create the cup in photoshop (I hate doing in-depth photoshop tutorials)

Variables

Believe it or not, I stored all of the quotes in a single variable, a single array actually. Here is how you go about it:

var answer = new Array();

answer[0] = "Never miss an opportunity to make others happy, even if you have to leave them alone in order to do it.";

answer[1] = "You can tell more about a person by what he says about others than you can by what others say about him. ";

answer[2] = "Seek freedom and become captive of your desires.  Seek discipline and find your liberty.";

You can add as many answers as you wish, the only thing you have to do is follow the format: answer[next number] = “Answer text”;

Also, to initialize a variable just add the “var” in front of the variable name, an equal sign and the variable contents. Since this is an array I defined variable as an array by adding “new Array()”.

Text and the Form

The next thing we have to do is create the text field we want to dynamically change and the form to initialize several functions that will change the text, and do the fading.

This is the easiest part:

What's your cup of tea?

The paragraph Id-ed “Ans” is the place where the answer will appear. I created a form with an “onclick” event that points to the “TextStuff()” function. You can use basically anything for the onclick button. A div with an onclick, a textfield, anything at all but a button is rather convenient so I used that. You don’t have to Id anything other than the paragraph.

Functions

Next, let’s create a function that will change the text. I’m going to call it “message()”.

function message() {
var ArrayLength = answer.length;
var r=Math.floor(Math.random()*ArrayLength);
document.getElementById('Ans').innerHTML = answer[r];

}

Let me explain this.First, I created a new variable that will get the number of array elements in my array. You can use the “.length” on any variable. For a string, the return value will be the number of characters. For an array, it will get the number of elements. The next variable “r” creates a random number with “Math.floor(Math.random()*number)”, you can replace “number” with any number that will be the ceiling for the random integer. For example, if you put 5 there, the random number will be between 0 and 5. By using putting “ArrayLength” there, you won’t have to keep changing this value if you add new quotes.

The last part basically means “in this document getElementById called (‘Ans’) and do innerHTML so that answer[r] is the new value for the element with the ‘Ans’ Id”. This will change the text within the paragraph Id-ed Ans.

The Fade Function

The next big thing I tackled was fading the text in and out. The problem here is is that I could not find a regular javascript function that could do this and I’m not skilled enough to figure it out myself. I took a shortcut and used JQuery.

Put that in your header to include the latest JQuery version.
Next, we will use the fadeIn and fadeOut JQuery functions. First, did you notice how the previous function I created is called “message()” while the onclick function is called “TextStuff()”? Well, here is where we create our “TextStuff()” function.

function TextStuff() {
$("p").fadeOut("slow");
var t=setTimeout("message()", 2000);
}

Okay, first of all. JQuery functions do not work the same as regular javascript functions because JQuery is a framework and it has its own rules. Let me explain how this particular instance works. “$(“element“).fadeOut(speed, function to call);” I used the “p” (paragraph) element but you can use any other, even an #id. There are several speed settings such as “slow”, “fast”, or you can just put milliseconds there.

Second, I set the “message()” function to execute 2000 milliseconds (2 seconds) after the text fades out. the setTimeout function does this latent execution. You can replace the 2000 with any number you want.

Next I added a fadeIn function into the message() function.

$("p").fadeIn("slow");

Just put this at beginning of the function before the ArrayLength variable.

Where to put all this stuff

This is the easy part. Put the functions in the header along with the call to the JQuery script. You can put the variable there as well or you can create a .js file with all the answers and call onto that like so:

Don’t use the

Dave PC Guy » Tutorials