User blog:Paperluigi ttyd/Intro to JavaScript

It's been a long time since I made one of these blogs but I am finally back after spending some time learning about another very helpful programming language here on Wikia, that language being JavaScript. Again, you may have heard of this before, but do you know how to code it?

What You Will Need

 * Knowledge of HTML and CSS. Visit my old blogs to learn more about these two languages.
 * A wiki that you own, meaning that you are either the founder or one of the main admins.
 * (optional) Notepad++, free download from http://notepad-plus-plus.org/

Introduction
First things first, JavaScript is different from Java. They are two completely different languages. A chunk of code with JavaScript (as well as HTML and CSS) may look something like this:

This text would produce a paragraph and a button that when clicked changes the text of the paragraph and the text color of the paragraph.

 NOTE:  JavaScript is not recognized by Wikia. In order for it to work in a page, you must place " " in a wiki-wide JS console and then place " " in another MediaWiki page. To make this appear on a page, you would need the following code:

At this time, I don't have rights to edit the MediaWiki interface, so I can't put it here. I'm going to try and find a way so that the JavaScript can be added directly to a wiki page similar to  and   in HTML that allows CSS to be added to a wiki page.

But for now, let's talk about what this code means.

Basic JavaScript
JavaScript can get very complicated like CSS, but it is easy to learn if you go slowly. If you have read my other blogs, you may have already noticed one similarity between CSS and JS, and that is the use of flags in the HTML. IDs in JavaScript (or classes in CSS) tell the HTML to look for a definition of that id or class written in another language. This is not exactly how it works, but this is a basic understanding of what happens. Just as a class in CSS needs to be defined, so does an id in JS. In the example above, "document.getElementByID" takes anything in the "demo" id and changes the color of its text to red and the text to "A new paragraph" as part of the function "exampleA". The line before this: function exampleA first tells that a function is going to be performed and then gives the name of the function, which can then be called out later on in "onclick=exampleA".

If you read that quickly, it may be a little confusing, so let's take it step-by-step.

Let's say you want to make a button to change the text color to blue and the text to "A third paragraph!" You could make another function like this:

This makes it so any element placed into the id "demo2" will have its color changed to blue and it's text changed to "A third paragraph!" when the function "exampleB" is executed. This function would be executed like this:

Unlike CSS classes, JS ids are not specific to one element.

OK, that seems like a good start. I'll make a follow up blog this weekend maybe :D

--Paper Out