jQuery - Countdown Clock, Tough Mudder

Okay, so here goes nothing. This is my first attempt at some jQuery code. I'll update this explanation after I succeed. lol.

Javascript

I know I said my next post would be about Blogger layouts, but..., well..., I lied. I'll do that another time. Right now, I'm going to talk a bit about javascript. I'm beginning a tour of web developer learning experiences. The idea is, I'll be able to come back and reference these posts to help remind myself of the syntax/semantics of a language/methodology. Maybe readers will get something out of them too, who knows?


"JavaScript is THE scripting language of the Web."
-w3schools


As the name implies, Javascript is a SCRIPTING language, meaning it does not go through a process of precompilation before it is executed.

It is client-side executed. The code is interpreted by the browser on the user end, meaning the client's browser must be able to interpret Javascript. Note: some browsers do not support Javascript, and/or have it disabled (this can be useful for bypassing pesky pop-up dialogues, you know the ones... ;D) Learning note: include HTML comments at the beginning and end of JS scripts to prevent the content from printing to the page.

It is weakly typed. For basic scripts, no typing is needed. Most things are interpreted as strings, some as numbers. In fact, you can declare a variable by simply assigning a value to it. (local variables precede the variable name with "var" on declaration, globals require no keywords) Actually as JS is an Object Oriented language, all variables are objects, and have some neat built-in methods you can use! But we'll get into that another time.  JS classes include(but might not be limited to): String, Date, Array, Boolean, Math, and RegExp. You can even make your own classes!

The syntax is almost identical to C/C++. Statements end with semicolons. Conditional structure is the same. One difference is that function declarations require no return types or input types. Again, this is due to JS being weakly typed. It seems like automatic type conversion will happen if something else is passed in. Be careful of that I suppose(updates may come as I learn more on the matter). Function declarations are simple preceded with the keyword "function", and follow exactly as C/C++ after that.

The real power of JS is it's ability to make pages DYNAMIC, i.e. changing the content of a page without reloading it entirely. JS can change HTML elements on the fly, in reaction to all kinds of events, including mouseclicks, mouseovers, page loading, form submissions, etc... Here's a simple example:

Press the button to toggle date display.

Inspect the source(Ctrl + u, chrome) to see the code that makes that button work. It's pretty simplistic, declares a global variable, x, and uses it to keep track of current state. It also illustrates how page events can be reacted to. Simply put a JS function name as the value of the specified event element in the HTML tag.

That's a really simplistic view of Javascript. There are plenty of awesome things you can do with it, especially if you add jQuery and HTML DOM to the mix, topics which I'll hopefully cover in later posts. For now, check out the w3schools page(where I got most of this information) for more specifics and plenty of examples. They even have live TryIt editors so you can play around with JS without having to host a webpage. Until next time!

Purpose

Hello. This blog is intended as a test blog - a virtual sandbox - to play and test my design abilities. My other blog, Words to the Wise, can be found at doctorshane.blogspot.com, and is focused mainly on my writing abilities. Here, however, I'll be posting mainly on web technologies and new discoveries I make within web design and programming. In other words, it should draw a more technical audience.

My first real post will be about blogger layouts. I'll be dissecting the layout html code and hopefully making some useful discoveries about how to edit these layouts to fit one's needs. Until then...