So You want to learn Programming
Well the first question is. What do you want the programming to do.
If you can answer this simple question. Then you will know what type of
programming language(s) that you will want to learn.
For example do you want the program to:
- Do web pages for you, ie,HTML
- Do Animated web pages(moving objects on the screen). ie,JAVA
- Do small basic task for your browsers, ie,
Pearl,
C++,
C.
- Do true programming, that You want to create, ie
Pearl,
C++,
C,
assembly,
JAVA, and many more.
Learn a New Language, its free and it can be used with Windows but really a DOS program.
So you want to learn a new programming language. That is free
There is no strings attached
I program with this little language it's great and has much potential, give it a try!!!
Plus the entire language, Compiler, and example source code, fits on one floppy
AND IT IS FREE!!!!!!!!!!!!!!!!!
You will now enter the realm of c--
If you are haveing problems connecting the URL is www.cs.utexas.edu/users/tbone/c--
When programming in HTML
Which is the easiest language to learn.
This language is much like writing a word document.
With bold text, and underlined words, even pictures,and moving objects ( with the help of JAVA ).
However HTML does have its draw backs.
In fact that's all it can basically do.
It will seem very little if you want more than a pretty Web page.
In fact the program was just set up to display text messages World wide via:
The "World Wide Web(www.)"
The Easiest place to find anything on HTML
Is at your local computer store. There are many books on the subject.
However if you are like me, why pay for something!
When you can get it for Free!!!!!
My favorite spot to get Free HTML help and Programs are:
www.softseek.com
www.angelfire.com
Angelfire has alot of help in just more than HTML
PLUS you can get a free web-site
Return to top of document
PEARL
Return to top of document
JAVA
Now some of you are probably like - where are all the javascripts? Well, I figured that since I'm totally changing the way my site works with its content (mostly everything is going to be tutorials from now on) you'll need to stick with me here. First of all, for some of you newbies, let me explain what javascript is (also, let me point out that the correct punctuation is JavaScript and not javascript or Javascript, etc, but either way, it doesn't really matter). Javascript is a scripting language that was first developed by Netscape and Sun. It's related to Java, although it is not true object orientated programming so it is limited in the functions that it does. But you can write basic applications on a web page, but do note that your browser has to be javascript-complient. If you're using a version 3 browser and above, you should be okay, but remember that Microsoft Internet Explorer version 3 doesn't support some of the javascript language because Microsoft had originally written JScript which was meant to rival Netscape's implementation of JavaScript. So if you're still on that browser, upgrade it (in my opinion, MSIE 4 is the best browser out there). But anyways, let's get started with the tutorial. First of all, you should be familiar with HTML before jumping into JavaScript because then you might get lost in this tutorial. I'm not expecting you to know HTML inside and out, but just the basic fundamentals. When writing JavaScript, you can just intertwine it in with the rest of your HTML coding. So type in the scripts as if you were typing in HTML code. Mainly the brain of your javascript goes before the anchoring </head> tag. So that means that some of your javascript's body (mainly the visual part) can go after the <body> tag. I have seen some people just put the whole javascript including the "brain" of it after the <body> tag, but it's up to you. Myself, I have encountered no problems with just putting it all in the body, but I guess we should follow the W3C's standards. W3C? They're the big guys on campus when it comes to the web, to find out who they are, go to the W3C website. Back to javascript, one major rule is to test it out. Testing your work out is very important and I have to stress that.
When you begin your javascript, you'll have to follow some standards. Standards again!?! Yeah. Be sure that you begin it with the following code.
Now wait a minute Jeannie. What is up with all those extra commands? Well, I figured I would throw a couple more in for ya, just to get this tutorial going. The first line I don't think I have to explain. The second line is something new though. Hmmm, what could it mean? Let's see, it looks like a regular HTML Comment. But why are we inserting the javascript inside of it? The reason is because some older browsers don't support javascript. And since there are still people out there too lazy to upgrade <sigh> us innovators have to make sure that all stays compatible in the world (wide web, that is). But of course, this is impossible right now because of computer settings, browser settings, etc, etc, etc. Anyways, geeze, I'm wondering off the topic. Where was I now, oh yeah - that comment thing is read as a beginning comment rather than a whole block comment (old browsers will read everything in that as a comment that should be overlooked). So when your completely up to date browser goes to interpret the code, it will just look at that line as a one line comment rather than a block comment (like old browsers look at it). Get it? If not, that's okay. It doesn't have to contain the text hide this javascript from older browsers, but I added it anyways. Same goes for that stop hiding thing. Hey now though, how comes that stop hiding thing has two slashes in front of the enclosing arrow? Because if we didn't have the slashes, the browser try and exectute that --> like it was a javascript command. It may all seem really confusing right now, but don't worry 'bout it. Before I forget, let me explain that var nrrrrd = 123; statement. First, that var command told the browser that it was going to be dealing with the variable nrrrrd. Then, it said, "Hey, look - I want that variable nrrrrd to equal the number 123." And to top it all off, you will need to add the semi-colon because this way the browser knows to execute that line as a task.
Tips To Naming Variables
|
- Don't begin your variables with numbers!
- Don't even think about putting spaces in variable names, use the underscore_characer
- Don't use a word that JavaScript uses in its functions. Like using the variable else. It will just make things more confusing
- JavaScript is case-sensitive. JS is not the same as js or Js or jS.
- Use words that deal with what the variable is standing for. Like if you have 27 as the variable for the number of kids in a class, use something like class_number or numberofkids. This way if you ever go to revise your creation, you'll know what goes with what.
|
But that above example (var nrrrrd = 123) really didn't do anything. I mean, all it did was define the variable nrrrrd. One quick side note (yes another!) - JavaScript is CaSe-SeNsItIvE!!! But if only that variable nrrrrd could have been used in a task . . .
Now there's a novel idea, we could make it do something. So let's see, there are millions of things we could make it do, but what? Maybe solve a calculation? That's it! But before it can do that, let's define some more variables.
But it still doesn't display anything. That's where the body of the javascript comes in. The above goes before the closing </head> tag. Now the below will go after the <body> tag.
Now that could have easily just typed in rather than taking the time to do the javascript, but what about when you want some better effects? Like a prompt that asks for the user name and then displays it on a page with a message. Now we're talking. But wait a minute, I'm jumping ahead too far, let me explain the above. That is the part that goes in the body. The document.writeIn just says, "Write whatever is inside of these paranthesis into the document." And if it's text inside of quotes inside of paranthesis then just display it, but if it's just text inside of paranthesis without quotes, why it must be a variable! So that document.WriteIn(blah_blah); signalled to the browser that it was going to be a variable.
So now that you have a pretty good grasp of how to define what goes in the head and what goes in the body, let's see if we can't do some more advanced things, whadda ya say?
What the above did is a prompt where a popup prompt came up with a textbox for the user to type in their name. The default was NRRRRD, but they had the operation to delete that and put in their name. So it said that for whatever the variable visitor was, to use their input to equal that variable. It coulda also looked like this:
So then whatever they typed in would have been substituted in those quotes and saved as the variable iteself. And if you would have wanted to print their name or whatever they said, you could have done this in the body:
And that would have written in Hey, welcome to my site with their name after it. Pretty cool, huh? But if you want to change the font color, you'll need to do this:
document.writeln(visitor.fontcolor('blue'));
So that would have made the person's name in blue. Some of you may wonder why I didn't use the hexadecimal code for blue, but the reason is that if the person has a browser that supports javascript then they have a browser that supposts a specifying color name. Get it? Alright then, let's move on.
Like all programming languages, javascript has something called an if statement. Actually, there's more - an "if then" statement. So in other words, if one thing equals something, then do something about it. Here's an example of a if then statement mixed in with a prompt.
So what that said was that if the person typed in yes for the prompt, then show an alert saying that they were cool. Get the idea? Oh, and take notice of the curly brackets. Those are necessary. Why? Because this way the alert prompt or whatever the intitial response is supposed to be will only work if they typed in yes.
So now I think you're ready for image swapping.
move your cursor here
move your cursor here
Where's the language=JavaScript and all that other info?!? Well, mouseovers and onclicks don't require them. The above example dealed with mouseovers. Let's go through this one step at a time.
First, an image was specified - test.gif. Normal HTML so far, but now comes the tricky part. The a href led to the link of #. For those of you die hard HTML users, you may notice that the # usually begins an "in page" link, but there is not a link specification so when the user moves their cursor over the link or clicks on it, it won't go anywhere. Then comes the onMouseOver. That part says that for the document, use the test graphic (and then it goes on to specify the test graphic's location). Notice that it uses a single quote to block off the source of the graphic rather than ". This way it doesn't interfere with the " that went before the document.test. And when the user puts their cursor over the link that says move your cursor here, it will change the image test.gif to image test1.gif. Same part goes for the test2.gif.
But don't go thinking for a second that that's all there is to mouseovers. No way, we haven't ever done the status bar mouseover. Here's how do to that:
So Who Are You . . .
Here's how that would work:
So Who Are You . . .
So when you moved your mouse over the text "So Who Are You . . ." you should have seen in your status bar (that bar on the bottom of your screen) something appear that said, "An overly obsessed computer fanatic." Alright, what's going on? Well, just like the image swaps, we had the target link be # (so the user wouldn't go anywhere when they clicked on the link). Of course if you want a link that won't display the URL in the status bar, rather a description of the link, then go right ahead and change that # into the URL. And now comes the part that controls the function of this javascript - the onMouseOver command. In this case, the control of the OnMouseOver was window.status which just said that in the status bar of the window, display the text An overly obsessed computer fanatic. And then like all links, there came the anchoring </a> command. That's all. But wait, maybe not . . .
I'll have to say though, that after teaching myself C and C++, JavaScript reminds me of those two languages so much at times. And I've realized that I seriously haven't dug into teaching you the JavaScript language from ground zero. I mean I'm talking literals, objects, etc. Now of course you can leave this tutorial now, but if you're really serious about learning the language, I urge you to continue. Some people may be saying, "Why didn't she just start with the tutorial from scratch and work her way up so I'd learn it all?" My reply to that is that this way, those who just want to know "enough to survive from the language" can hurry up and learn some tricks. But those that want to learn everything can be happy too. So here goes.
Alright, looks like you're one of the many who want to learn JavaScript all the way. If you read the beginning of this tutorial, you should already have a good grounding in variables so I'm going to skip that part here. But I won't skip it entirely, I want to use some variable examples and compare them with literal examples. Literal? Yeah, check out the below.
var nrrrrd = 1234 + cool;
Now check out example two.
var cool = 40
var a_number = 1234
var nrrrrd = a_number + cool;
Can you take a guess at which one used literals and which one used variables. Well both used variables, but it was the first example that used a literal. How can you tell? Because notice how it bluntly had 1234 put down? It didn't use a variable to represent that, it just gave the number straight off. And that brings me to a point on why you shouldn't begin your variables with numbers. If you do, then the browser might interpret it as a literal.
But what about values? Values are important with variables. Below I listed the 4 values you will be working with.
String: a set of characters that are usually for example words such as apple. But you can even have hghgj as a string. It really doesn't matter. Now you can have numbers, but the second you make a number a string value, it's stripped of its rights as something mathematically related. But how does the computer distinguish a string from a number? Well you need to put quotes around the string.
var nrrrrd = "Jeannie";
Always include those quotes.
numeric: Numeric as in number. Nuff said. But wait, I guess I should show an example.
var nrrrrd = 39;
Numberic values should not be enclosed in quotes. Otherwise the browser will interpret the number as a string, thus no mathematical function can be applied to it or use it.
null: Null = nothing. I mean absolutely nothing. Nada. But that doesn't mean you should go and assume its value is zero. But Jeannie, you said it means nothing!?! Yes I did, but zero is a numeric value.
var nothing = null;
There will be times in your JavaScript programming experience when you will use null.
Boolean: A condition of being true or false.
var I_Hate_Homework = true;
And that's Boolean value.
More to this tutorial within the week.
Return to top of document