Monday, June 17, 2013

My First Javascript

One thing that I have learned while on this quest is that thus far I have been a terrible project planner, likely due to my relative lack of programming experience. I wasted a large portion of the time that I had for the project attempting to find the right tools for the job, and find the right APIs. Then I spent a lot of time reading about what to do and attempting to dive in the deep end of what I finally determined to be the right code. What I have come to realize is that this is really putting the cart before the horse. I was focusing on getting the website up and running in what I, at the time, thought was the most direct method possible. What I lost sight of was that the entire point of the exercise was to improve my skills, and ultimately, learn how to program.
It took me entirely too long to determine which tools to use, that stemmed from my general unfamiliarity with web programming. I did learn how to create web pages in library school; however we were taught the basics and then given a version of Adobe Dreamweaver to learn with. Though I believe I did grasp the basics of HTML and CSS, Dreamweaver is such a powerful tool that it pretty much does all the other web programming for you. Though I used PHP and Javascript through Dreamweaver, I never really learned any of it. Once I realized that most of the API code samples that were given were given in Javascript and attempted to start to learn it I had already wasted too much time.
Then feeling the time crunch, I took the code samples that I was given in the API documentation, and simply took the code lines and started plugging them into Google. The idea was to try to understand what the individual lines meant. However all this really did was reference me back to the API documentation. I didn’t understand the code well enough to know the difference between the defined function, the function arguments, or the variables and parameters that they utilized. It is right around this time that I was brought to the realization that I was not, effectively, learning code – my actual goal from the beginning.
Coding is something that you learn by doing, by learning the most basic of commands and playing with them. Learning what breaks the code and what doesn’t. I also realized that I had a few other skills to brush up on beyond even my goal of learning and implementing a Javascript based federated search engine, if the site was going to be even remotely presentable I would need to learn the new CSS3 formatting in order to make the search and results presentable. Therefore, in order to get back to the purpose – I reprioritized.
I found a very basic, but great, Javascript tutorial that I have started working through. I wrote the following, in attempting to learn some of the basics of Javascript.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Nich's first Javascript Lesson</title>
</head>
<body>
<p onclick="alertbox ()">This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text.</p>
<script>
var x=0
</script>
<script type="text/javascript">
function alertbox ()
{x=x+1
       if (x<5)
       alert ("You clicked the sample text "+x+" time(s)! ("+y+")")}
</script>

</body>
</html>

With this script I learned how to call Javascript functions with HTML, and how to build a basic function that utilizes variables and limitations. You can attach onclick="alertbox ()" to any HTML element. This means that whenever that element is clicked that function will happen. This little bit of script defined a variable:

<script>
var x=0
</script>

I then used that variable in the script alert text: ("You clicked the sample text "+x+" time(s)! ("+y+")") to ensure that x is treated as the variable, and not just another letter in the string you use the + signs and quotations marks to separate out the string and let it know how to include the variable. However to get it to actually display the correct number you need to add x=x+1 at the very beginning of the function. The last thing that I played with today is beginning to use conditional statement. By putting in if (x<5) I made it so that the alert box only pops up the first four times that you click on the text.
       I am going to prep my application materials next. I intend to submit them immediately as is only linking to this blog. This way I will continue to build the website and actually learn the Javascript at a manageable rate. I still intend to build the site, and I still intend to learn Javascript and through that become more familiar with programming itself. However by submitting my materials immediately without the site I will approximately the same chance at getting the jobs and really be able to focus on the entire point of this exercise – self-improvement.

No comments:

Post a Comment