Java Script coding lessons By a.smith

By a.smith
POSTED: 25 Jun 2012 09:45
CATEGORY: Educational
FEATURED: Yes (HullBreach)
(Go to comments)

JavaScript is a coding language used to make webpages more interactive. For this blog, I am going to show you some very simple JavaScript coding.

Just the basics
You can run some JavaScript functions straight away as the document loads. This means the functions will load with the HTML. e.g.

<body>
<script type="text/javascript">
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 javascript alerts like this. JavaScript alerts show a popup box with the text you insert. It's best not to get JavaScript alerts to run automatically on the webpage since it can be annoying. e.g.
<head>
<script type="text/JavaScript">
alert("hello!");
</script>
</head>

This code can be placed in the <head> or the <body> tag.

Making JavaScript functions happen at a special time.
Maybe you want a JavaScript 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="JavaScript-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 JavaScript. It is very simple to do and takes little knowledge to do. e.g.
<html>
<head>
<script type="text/JavaScript">
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/JavaScript">
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/JavaScript">
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/javascript">
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

+8 -1

a.smith
04 Jul 2012 16:33

Quoth rlad116:

thers some easier ways for profile back ground and stuff

This isn't for profiles. its for websites.

Rlad116
04 Jul 2012 15:05

thers some easier ways for profile back ground and stuff

a.smith
28 Jun 2012 11:05

Quoth Rob-de-prop:

I think the best way to learn Java Script is to experimenta lot with it (In combination with tutorials)

Thats ecactly how i learned if you look at my tumblr.

Rob-de-prop
28 Jun 2012 08:58

I think the best way to learn javascript is to experimenta lot with it (In combination with tutorials)

a.smith
27 Jun 2012 10:40

Quoth lilwayne1556:

Quoth a.smithquote]Quoth Link of Hyrule:

Its a programming language never learned it but heard of it

whats it for?

lilwayne1556
27 Jun 2012 08:58

Quoth a.smith:

Quoth Link of Hyrulequote]Python seems so much easier.

what the hells that? [/quote]

Its a programming language never learned it but heard of it

a.smith
27 Jun 2012 06:46

Quoth Link of Hyrule:

Python seems so much easier.

what the hells that?

Link of Hyrule
26 Jun 2012 14:51

Python seems so much easier.

a.smith
26 Jun 2012 07:25

Thats true since i am dyslexic xD

lilwayne1556
26 Jun 2012 07:20

Quoth a.smith:

Quoth lilwayne1556quote]Quoth a.smith:

Lol not much of a tutorial lol. But it is hard to really teach anything to anyone because they think differently then you do

a.smith
26 Jun 2012 07:15

Quoth lilwayne1556:

Quoth a.smithquote]Quoth lilwayne1556:

Well it isn't but it is kind of the same but you should tell them about varibles and if else statements first before you get into dom stuff because they dont know any Java Script so you got to start basic but not too basic

Thats the thing... i always forget that its different xD its kinda impossible to teach javascript unless you show each bit seperately xD uhh just go to w3schools xDD

lilwayne1556
26 Jun 2012 04:52

Quoth Dedode3:

I wish that DSiPaint have all the html codes,like <marquee> and stuff.

It had html and javascript about 2 years ago but he took it away which i can see why after making my site.

Dedode
26 Jun 2012 04:04

I wish that DSiPaint have all the html codes,like <marquee> and stuff.

lilwayne1556
25 Jun 2012 18:27

Quoth a.smith:

Quoth lilwayne1556quote]isnt this more so of html dom and Java Script together... but this is good for new coders i already knew all of this

To me, html dom and Java Script are the same xDDDDD[/quote]

Well it isn't but it is kind of the same but you should tell them about varibles and if else statements first before you get into dom stuff because they dont know any javascript so you got to start basic but not too basic

a.smith
25 Jun 2012 18:13

Quoth lilwayne1556:

isnt this more so of html dom and Java Script together... but this is good for new coders i already knew all of this

To me, html dom and javascript are the same xDDDDD

lilwayne1556
25 Jun 2012 17:02

isnt this more so of html dom and javascript together... but this is good for new coders i already knew all of this

Almost
25 Jun 2012 13:24

Information Overload xD

Java Script coding lessons

Comments