Rock Javascript #1

[runthis]

It may be that most people don't know the possibilities of javascript or do not even really know where to begin.

So i thought i would start off with very very basic javascript whilst providing some common or not so common ideas.

For my first script to present to you guys is a very simple one that always comes in handy in a dynamic project.

This allows you to hide an element if shown and to show if hidden (nice!)

a brief explanation: this script simply checks to see if the element is not shown - if(a.style.display == 'none')

if it is not shown it shows it - document.getElementById(''+id+'').style.display='inline';

If it is already shown it hides it - document.getElementById(''+id+'').style.display='none';

The reason we use display='inline' is so that javascript does not create a new line with inline but with display='block' on an element already hidden on page load, it will make a new line, if this is your desired action than change inline to block

 

function flip(id){
 var a=document.getElementById(''+id+'');
   if(a.style.display == 'none'){
     document.getElementById(''+id+'').style.display='inline';
   }else{
     document.getElementById(''+id+'').style.display='none';
   }
}

Works on one element at a time

To use this script just add it anywhere in your script (most people say add things after the body tag, and you might do that) and call it like this

 

<a onClick="flip('myelement');">Show the div</a> <br>
<div id="myelement" style="display:none;">I am hidden</div>

 

This could be of practical use in your games by hiding parts of your GUI unless a user selects "Show Stats" or something.

Ok, next post we will make the above script work for multiple elements at the same time and tie in the above script to fade in and fade out for nice effect. Also we will make our fade in and fade out script utilizing native javascript features. Until next time, happy coding :)

Edit: make sure you notice that makewebgames forum breaks up some of the code with spaces or tabs that will break your script

The reason for this is because most forums and chats have to use certain programming features to break a word up after its too long without a space because some people like to mess up other people forums/chats by posting words like "mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm" that can break the style on a page

as you can see, 50 characters in, it puts a space before the last "m"

Edited July 29, 2011 by runthis

[Dave]

If you wanted to make your site feel a bit more web 2.0 with some simple transitions. (Such as fading and sliding) you should really looking into the jQuery library. It allows the user of loads of simple yet beautiful effects and the syntax for it is pretty simple and easy to get used to.

There are also other javascript libraries that can offer other advantages but I personally prefer jQuery for my applications.

[runthis]

I really hope to not turn this into a framework thread as this is not to teach people frameworks that they might only use for one function. Its to teach people basic javascript concepts and ideas so people who might not know where to begin with javascript can now run with an idea and still keep a hand-coded project.

If you choose to use a framework than i advise making your website as dynamic as possible, using it for a simple 8 lines of ajax or 8 lines for a fade is not necessary at all.

Also i totally understand the "don't recreate the wheel" but with simple functions running a max of 10 lines, this isn't as recreating the wheel as it is more like learning a new skill.

[Dave]

I really hope to not turn this into a framework thread as this is not to teach people frameworks that they might only use for one function. Its to teach people basic javascript concepts and ideas so people who might not know where to begin with javascript can now run with an idea and still keep a hand-coded project.

If you choose to use a framework than i advise making your website as dynamic as possible, using it for a simple 8 lines of ajax or 8 lines for a fade is not necessary at all.

Also i totally understand the "don't recreate the wheel" but with simple functions running a max of 10 lines, this isn't as recreating the wheel as it is more like learning a new skill.

I completely understand, just the option to then implement a library after you have learned the basics is always a plus. If you are wanting effects then I was suggesting to use some form of library, but you'd need to learn the basics of javascript before you start to look into any form of library.

[runthis]

Yes, absolutely, i plan to make like ten of these threads, maybe on the last one i will include my own personal references to great frameworks.