| Java Script coding lessons |
By a.smith
Posted 25 Jun 2012 09:45 Category: Educational |
|
Java Script is a coding language used to make webpages more interactive. For this blog, I am going to show you some very simple Java Script coding.
Just the basics You can run some Java Script functions straight away as the document loads. This means the functions will load with the HTML. e.g. <body> <script type="text/Java Script"> document.write("Hello!"); </script> </body> Obviously this will just show Hello! on the webpage. It's best to do this in the <body> tag so it will appear like plain text on the webpage and not clear everything else on the document. You can also use Java Script alerts like this. Java Script alerts show a popup box with the text you insert. It's best not to get Java Script alerts to run automatically on the webpage since it can be annoying. e.g. <head> <script type="text/Java Script"> alert("hello!"); </script> </head> This code can be placed in the <head> or the <body> tag. Making Java Script functions happen at a special time. Maybe you want a Java Script function to work after the page has loaded or after a button is pressed? This is extremely easy to do and learn! functions can be placed inside an element like this: <element onclick="Java Script-function"> As well as on click, there are many other functions you can do. Here are the few i'm going to look at. onmousedown (simular to onclick. When you click the element this happens) onmouseup (this happens after the element is pressed) onmouseover (this happens when the mouse hovers over the element) onmouseout (this happens when the element stops hovering over the element) To show you this in action I need to show something else first. elements CSS can be changed using Java Script. It is very simple to do and takes little knowledge to do. e.g. <html> <head> <script type="text/Java Script"> function changeColor() { document.getElementById("object").style.background="green"; } </script> </head> <body> <div id="object" onmousedown="changeColor()"></div> </body> </html> This would make the element change color when clicked. Cool eh? the changeColor() function keeps the script from being run until you let it. It can be annoying making a function for EVERY SINGLE element you want to do something with though. There is a way to simplify it. Example: <html> <head> <script type="text/Java Script"> function changeColor(obj) { obj.style.background="green"; } </script> </head> <body> <button onmousedown="changeColor(this)">button one</button><button onmousedown="changeColor(this)">button two</button> </body> </html> This means that both of the elements can be used since they change the element involved with the event. By placing "this" inside the function, the value for "obj" is that element. You can also do this using text for ids. Example: <html> <head> <script type="text/Java Script"> function changeColor(obj) { document.getElementById(obj).style.background="green"; } </script> </head> <body> <button id="firstElement" onmousedown="changeColor('firstElement')">button one</button><button id="secondElement" onmousedown="changeColor('secondElement')">button two</button> </body> </html> This may seem quite confusing but if you think about it, it's a lot easier than it seems. You can also return multiple values to the function. e.g. <html> <head> function changeColor(valueI,valueII) { valueI.style.background=valueII; } </head> <body> <button onmousedown="changeColor(this,'purple')">my button</button> </body> </html> By doing this, you can also control the color you want. Please, if you didn't understand this please say. Its very hard to write it in a way that its very simple to understand. so what can you do with all that? With this, you can make some interactive buttons! Example: <html> <head> <style type="text/css"> button{background:green} </style> <script type="text/Java Script"> function changeColor(element,color) { element.style.background=color; } </script> </head> <body> <button onmousedown="changeColor(this,'red')" onmouseup="changeColor(this,'purple')" onmouseover="changeColor(this,'purple')" onmouseout="changeColor(this,'green')">my button</button> </body> </html> This would make the button change to purple when hovered over, changed to red when the button is clicked, and change back to purple when released. Then if you move your mouse away from it, it will turn back to green. If that didn't make sense, please say :] That's all for now :o cya ;] oh and btw everywhere that it says Java Script, remember that it's one word and has no capitals. The website spits up the word :L |
| Featured: Yes (HullBreach) | |
| Rating +3 | |
