JavaScript javascript-interactivity-part3

Published on May 22nd, 2013 | by Mark Ammay

0

JavaScript Interactivity-Part 3

Today, let’s talk about adding JavaScript interactivity to your website to further enhance it. In addition to HTML and CSS, adding JavaScript interactivity can greatly impact your website in a positive way. So what is JavaScript then?

If you haven’t done the second part of this Introduction Course to building a website, you can go there by clicking here: Applying CSS – Part 2.

Avoid Confusion: JavaScript is not the same as Java. The two programming languages are unrelated, and do different things!

What You’ll Need:

What You’ll Learn / Get:

  • JavaScript fundamentals
  • How to integrate JS with HTML
  • How to write your first function

JavaScript (JS) is an object-oriented programming language and used widely on websites and other applications to add high levels of interactivity. If you look back at how HTML serves as the foundation of your website (the wooden frame of your house), and CSS acting as the interior and exterior decorator (look and feel of your website), JavaScript can be the ‘electricity’ of your website, bringing everything to life.

With JavaScript you can do a variety of things, but not limited to:

  • Changing  the content of your website
  • Change the page without refreshing the page
  • Adding / modifying the HTML, and CSS of elements
  • Validating web forms
  • Create events that trigger when the user does something
  • Create events based on a timer, or other call-to-action
  • Create conditions for events to happen
  • Find what browser the user is using
  • Find the current date and time
  • Parse data and present it in a user-friendly way
  • And create interactive games… that’s a whole new tutorial

Below, let’s take a look at a basic JavaScript function, and what it does:

Do you know what this basic JavaScript function will alert?

Syntax Basics and Operators

Let’s take a look at some basic operators and other syntax fundamentals of JavaScript:

Variables:

Here’s a JavaScript variable declaration. It is stating that the variable me is actually an “s“. You can make the variable anything you want, and it will = “s“:

Concatenation with Strings:

You can even concatenate two variables that are strings like so, and it will put the two variables together:

Math with Numbers:

Also, you can also add variables that are numbers, and do other equations like so:

Comparison Operators:
Test if a variable’s value is equal to another. 

Now let’s look at conditional statements or arguments:

Conditional Code

This conditional if and else if statement is comparing the car to the truck. If the car is more then the truck, alert something. But if the car is less then the truck, alert something else.

To play around with this JavaScript code, click here:
http://jsfiddle.net/markammay/astYd/

Using JS for Functionality

There’s many other aspects of JavaScript that we could go through, but now let’s discuss how we can apply JavaScript to our website for functionality. Since this is an introduction course, let’s just focus on a few more things we can do with JS:

  • JavaScript Events:
    We will use JS to create certain events to trigger when something happens.
  • JavaScript Functions:
    We will use functions to execute code to do something, possibly more then once.
  • Changing the Style:
    We will be using JS to change the style and manipulate of our site’s HTML elements.

JavaScript Events

Click Event

For your website, let’s create an onClick event that will trigger only when something is clicked. In this example, let’s create a pop-up alert whenever you click on a <div> tag with a specific ID:

Here you just created an HTML <div> tag with the words “Click Me” in it, and also gave it an ID of “mydiv”. We gave this an ID, so that we can properly target this with JavaScript to create an event.

In the JavaScript, we created an onClick event that triggers when the “ElementID” of “mydiv” was clicked. Then we created an alert box using the alert() function.

Try it Yourself! http://jsfiddle.net/markammay/eqM9b/ Use this Fiddle to mess around with the code. Try changing the ID of the <div> tag, and changing the alert().

Mouse Over, Mouse Out

Now let’s create a mouse over and mouse out event for the same <div> tag, but for now let’s change the HTML to say “Roll Over Me”:

In the JavaScript, we created an “onmouseover” and “onmouseout” event that triggers when you roll over the <div> tag with your mouse.

Essentially, we made the HTML text change by updating the “innerHTML” of the “Element ID” of “mydiv”.

Try it Yourself! http://jsfiddle.net/markammay/xx8un/ Use this Fiddle to change the innerHTML when you roll over and roll out of the <div> tag.


JavaScript Functions

JavaScript functions are wonderful, because we can create one function that does something, and execute it multiple times in multiple events. Basically, instead of writing the same code over and over again, we would create one function and just call that whenever we need to:

To create a function, you must declare it like this:

Now you can see that there’s an “onclick” event we attached to the <div> tag “mydiv”. When clicked, it will activate both functions “changeColor” and “changeText”:

Since we made these functions, we can call them in other locations, for example by clicking another <div> tag.

Try it Yourself! http://jsfiddle.net/markammay/fFESX/1/ Use this Fiddle to check out the code and play around.

Changing the Style with JS

JavaScript can also manipulate and change the style of your HTML elements, on the fly (just like the previous code example where you changed the color of the text).

Here’s a few examples on how you can change the style using JavaScript:

Text Color Toggle Code:

Hide / Show Toggle Code:

Change Font Size:


Up Next: Building a Full Website, Part 4

Are you ready to put HTML / CSS / JavaScript all together?


Introduction Course Outline:

Part 6: How To Upload Using FTP (coming soon)

Tags: , ,


About the Author

Hey it's Mark Ammay. I'm a Web Developer with over 5 years of professional experience in the industry. I help individuals start their own website from scratch, as well as through WordPress. I'm also an Online Entrepreneur who blogs at www.MarkAmmay.com



0 comments
Back to Top ↑