Sunday, May 11, 2014

Introduction to JavaScript pt. II

JavaScript is a programming language found all over the Internet; almost all HTML webpages now use this. In the past it was more rare. If you All modern HTML pages are using JavaScript. I compared and contrasted HTML and CSS HERE. Now, I want to talk about the 3rd component of the majority of web pages.

So remember: HTML has most of the content of your page, CSS will make your design/layout, and now JavaScript will script the behavior of parts of the page. Some of what they do overlaps. In the past, a version of Internet Explorer had issues implementing your css to what the browser showed users so it was better to use HTML or Javascript instead. Now the three are pretty essential components!

Essentially, you have your html webpage and it opens itself by saying.. well html. They keep it logical! In the body, you put your script tags to open up your Java .. script. Let's start with an real example! Keep in mind you must put everything in the diamond bracket "< >" tags with the opening and closing slash and the word script. I believe the BEST way to learn is to do. So, let's look at a few examples. Try to understand what is happening. And, at the very end, I will explain it to you! Let's begin:

Button Click example:

Write stuff here.. happy little stuff.. look here when you click the button below..

Okay, another one! The JavaScript starts in the next sentence below! You'll see how it is put together in the code sample afterwards.

A paragraph away from the other ones, like p in HTML.

Text separated like a br in HTML
More of that...
And even more..

Ok more examples..this one is doing some simple math:

We will make x = 2 and show what happens if you add 18. Then you multiply that whole sum by 5.

One last one, this is useful for trying to linearize input from users. Say someone puts in names in capitals and lower case mixed, or all caps, or whatever.. and your program can only read lowercase. You can make their input all into lower case.

SEE all this MEsSy UPPERCASE stuFFs??? ClicK and UPPERcase NO mOar!

Okay, so now I will try and explain what is common about all these examples. You open and close with script. In these examples, you have to call function in order to tell the computer you are about to do something. You name the function something directly after, here it is often "myFunction" so you write: "function myFunction". The elements have ID's which can be any variable. I often choose x, y, z.. or some other name related to what I am trying to do. Anything in quotation marks are variables, names, or things the user will see when they use your little script program. Things like innerHTML and toLowerCase are the functions built into JavaScript that actually do what you want them to! You can look these up online and you will get used to which ones are available (I think of these as my available tools). Most things like arithmetic, date/time, and others are already thought of and done! Of course you can make your own as your progress and do whatever you would like with them to tailor them to your task.