Thursday, November 19, 2015

3 Forms That Validate Input

Javascript is key to user interaction on webpages, and forms are perhaps the most ubiquitous way that users interact informationally with a webpage. However, the key to successful form implementation is to ensure that the proper information is submitted. This is called Form Validation. Below you will see 3 different examples of Form Validation throughout the web.

Craiglist

When posting on craigslist there are certain types of information required. As you can see below, when that information is not submitted, craigslist offers some very literal feedback to the user when the input is incorrect or incomplete. It seems this type of feedback could be achieved by using CSS to change the color, BOLDness, and border of a given object to emphasize its attention

http://bend.craigslist.org/(click the "post to classified" button)


Amazon
When joining Amazon you need to provide a minimum of information. However, as you can see below, while Chuck Norris can enter most of his information correctly, when he tries to enter his favorite password "RHK"(round house kick), Amazon rejects it because it is too short. Unlike the first example, Amazon's page only makes a dialog box appear stating that the information is incorrect instead of highlighting the fields.





Boston Globe
The Boston Globe's web developers are not very motivated. When you incorrectly fill in the below form on their website, the is barely any feedback. Instead of the two conspicuous examples we saw above, this form only appears a small, barely notable line of text that say that all the fields are necessary. This was likely done with a simple <span> and simple javascript. Shame on you lazy web developers!





  

Friday, November 13, 2015

A Quick Tutorial on Variables in Javascript.

No matter what your intent or purpose with Javascript, you will have to store, interpret, and manipulate data. JS makes this easy with various different types of ways to store your data. These types are Numbers, Strings, Booleans, Arrays, and Objects. Furthermore, these types are all encompassed under "Variables". Likewise, before initializing any of these data, the user will type "var" to classify it as a variable. Below I will briefly go over each data type to give you basic understanding of their structure and use.

Numbers
Numbers, as the name suggests, are, well....numbers. These can be used to store large numbers and small numbers, numbers with decimals, and even numbers in scientific notation. Please view below to see how these can be initialized and used. (Please note, the variable names do not need to describe the actual size or type of the variable, I just did this for ease of understanding.)

//A bunch of different number types!
var smallNumber  = 4;
var largeNumber  = 675894;
var decimalNumber = 3.14159
var scientificNotation = 546e5 // = 54,600,000

//Once you have initialized your variables, you can use them in math operations!

var newNumber = smallNumber + largeNumber; // = 675898

Strings
While numbers are used to store numeric data, Strings are used to store text data. Furthermore you can concatenate, AKA combine, strings with other strings and other data types to make larger strings. With strings it is critical that you use quotes around the text you want in the string, otherwise your code will do funky things or just not work at all


//Initialize your strings

var firstName = "Oliver";
var lastName = "Rew";
var status = "is awesome!";

//Concatenate your strings
var fundamentalTruth = firstName + " " + lastName + " " + status; //
//concatenates to: fundamentalTruth = "Oliver Rew is awesome!"
//Note the spaces within the quotes!

Arrays
So far, all the variables we have covered have been use to hold one value. However, as you code becomes more complex, you will want a more efficient and practical way to store many variables. For this we use arrays. Arrays are simply multiple variables within a variable, that can be access via their index. Arrays can store numbers, strings, and even other arrays within a single array. Furthermore, each item in an array has an index that corresponds to the variables consecutive order within the array.


/*You can either initialize an array with initial variables or you can initialize it empty and add the variables later. Please see both methods below*/

var oliversHobbies = ["Snowboarding", "Arduino", "Hiking"]

//or do the exact same thing

var oliversHobbies = [] //empty array
oliversHobbies[0] = "Snowboarding";
oliversHobbies[1] = "Arduino";
oliversHobbies[2] = "Hiking";

/*Please note in this last example that the first item in an array it index 0, the second is index 1, and so on.*/ 

Objects
Objects are very similar to arrays except for one fundamental difference; instead of using numbers to index the variables within an object, objects are indexed with properties.


//Please note that objects use curly braces{} instead of brackets[] like arrays
var oliversSuperlatives = {favoriteFood:"Burritos", favoriteSport:"Soccer", favoriteColor:"Green", numberOfFavorites:3};
//Use it!
dinnerTonight = oliversSuperlatives.favoriteFood //dinnerTonight would now equal "Burritos"


Booleans
Booleans are perhaps the simplest variable out there, they can only hold one of two values; True or False.

//Use booleans for variables that can be true or false
//Note, you do not need the quotes"" like strings
var oliverIsTerrific = true;
var oliverIsAlien = false;