In part of being a web designer or front end developer you will commonly run into JavaScript, often referred to as JS, and jQuery. Within the top 10,000 websites JavaScript is used within over 92% of them, and jQuery is used within in over 63% of them. Needless to say, they are fairly popular. You may even aspire to write JavaScript or jQuery to build your own behaviors at one point or another.

JavaScript Intro

JavaScript provides the ability to add interactivity to a website, and help enrich the user experience. HTML provides a page with structure and CSS provides a page with appearance, JavaScript provide a page with behavior.

Like CSS, JavaScript should be saved in an external file with the .js file extension, and then referenced within an HTML document using the script element. Where the JavaScript reference is placed with HTML depends on when it should be executed. Generally speaking, the best to place the reference JavaScript files is right before the closing </body> tag so that the JavaScript file is loaded after all of the HTML has been parsed. However, at times, JavaScript is needed help render HTML and determine it’s behavior.

<script src="script.js"></script>

Values & Variables

Within the fundamentals of JavaScript lie values and variables. Values, in general, are the different types of values that JavaScript will recognize, while variables are used to store and share these values.

Values may include strings of text, true or false Booleans, numbers, undefined, null, or other values such as functions or objects.

var theStarterLeague = 125;
var food_truck = 'Coffee';
var mixtape01 = true;
var vinyl = ['Miles Davis', 'Frank Sinatra', 'Ray Charles'];


As a whole, JavaScript is a set of statements, of which are executed by the browser in the sequence they are written. These statements provide commands which determine the different behaviors to be taken. Statements come in all different shapes and sizes, with multiple statements separated with semicolons, ;. New statements should begin on a new line, and indentation should be used when nesting statements for better legibility, but is not required.

return('bicycle lane');
alert('Congratulations, you ' + outcome);


Adding to the fundamentals of JavaScript, it is important to take a look at functions. Functions provide a way to perform a set of scripted behaviors now, or save them for later, and depending on the function they may even accept different arguments.

A function is defined by using the function keyword followed by the function name, a list of commas separated arguments wrapped in parentheses, if necessary, and then the JavaScript statement, or statements, that defines the function enclosed in curly braces, {}.

function sayHello(name) {
  return('Hello ' + name);

comments powered by Disqus