Interactive Design

JavaScript 101

What the heck is JavaScript?!
JavaScript is the programming language that adds interactivity and custom effects/behaviors to websites. It is a client-side scripting language, (it runs on the user’s machine and not on the server). Also, it may not even be available at all, either because the user has chosen to turn it off or because the device doesn’t support it, which good developers keep in mind and plan for.

Advantages of JavaScript

  • Speed. JavaScript is very fast because any code functions can be run immediately.
  • Ease. JavaScript is relatively simple to learn and implement.
  • Versatility. JavaScript plays nicely with other languages and can be used in a huge variety of applications. Unlike PHP or SSI scripts, JavaScript can be inserted into any web page regardless of the file extension.
  • Server Load. Being client-side reduces the demand on the website server.

When to Use JavaScript?

  • Sign-Up Form (can check if username is available)
  • Search Box (suggested results)
  • Animate elements on a page
  • JS can fix layout issues
  • Information that changes constantly can be loaded periodically without the need for user interaction.

Examples of JavaScript

8j9FXG8vHt4mAyZ7ozgkCc-650-80.jpg

  1. Filippo Bello: This online portfolio showcases the talent of Italian 3D artist Filippo Bello. The play with depth throughout the website is very effective – the images move slowly towards the viewer, creating the impression of diving into each project. According to the Creative Blog, This is achieved using what is called a segment effect: the background image is replicated in different boxes that move towards the viewer.

    c34effa8aa767f8537770648fa93dec1-650-80.jpg

  2. The St. Louis Browns: According to the Creative Blog, “For this website about the history of the St. Louis Browns baseball team, digital agency HLK has crafted a very beautiful experience. The site reads like a well-crafted vintage book, complete with chapters and textured typography. Users can scroll through each chapter for a time-based, story-like experience.”

 

 

How to Add the Script to your HTML document?

In HTML, JavaScript code must be inserted between and tags.

Here is an example from W3 Schools:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript in Body</h1>
<p id=”demo”></p>

document.getElementById(“demo”).innerHTML = “My First JavaScript”;

</body>
</html>

JavaScript Plugins

There are tons and tons of different functions & API’s for JavaScript on the internet. I found an article on Computer Science Zone that lists the most useful API’s. Application program interface (API) is a set of routines, protocols, and tools for building software applications.

Google has a number of different API’s but the one I find the most useful is Google Maps. The JavaScript functions help you to completely customize a Google Map.

How to use the Google Maps API

  1. Go to: https://developers.google.com/maps/  and select Web.
  2. Click on Google Maps JavaScript API
  3. Click on the button in the right-hand corner, Get a Key
  4. Make a script.js file in Brackets or any coding program.
    1. Type: var gMapAPIKey = ‘insert your API key here’;
  5. Go to the Guides section on the Google Maps API.
    1. Under the Hello World section, copy the script info to paste into your js file.
    2. var map;
            function initMap() {
              map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
              });
            }

       

    3. Copy this info and paste into your HTML file. Do not forget to link your js file into your HTML page! Insert your API code where it says to do so.
      </script>
           src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
          async defer>
  6. Edit the Size of your map.
    <style>
          #map {
            width: 100%;
            height: 500px;
          }
        </style>
  7. Go to http://www.gpsvisualizer.com/ to center your map. Enter in an address and it will you give you the latitude and longitude. Once you find this information, insert it in the .js file where it says lat and lng. 
  8. You can also edit the Zoom of the map.
    1. Just inspect the map at certain points to see the number of the zoom. Once you know the zoom number you would like, enter the number into your .js file.
  9. There are lots of other things you can do with the google maps API. I just covered the bare basics.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s