Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
JavaScript In a "Gist" | Client-side web development

#JavaScript In a "Gist"


Fredrick Galoso - November 9, 2011


This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

##Learning to programing with JavaScript

Web browsers are everywhere. Because of this, JavaScript is the choice for client-side web development and making to static HTML documents dynamic. "JavaScript In a 'Gist'" is an attempt to teach the basics of programming with an eye towards creating practical, usable, browser applications. It is designed as a gentle introduction to first time programmers or to the experienced developer, a resource for those looking to quickly add another language to their repertoire.

#First Steps

##Development environment JavaScript is most commonly added to HTML documents as either an embedded or external script.

<!DOCTYPE html>
    <meta charset="utf-8" />
    <script type="text/javascript">
        // Embedded JavaScript goes here
    <!--External JavaScript file, located in the same folder as this HTML document-->
    <script src="main.js" type="text/javascript"></script>

However, for many of the examples covered in this book, JavaScript console will be the easiest way to follow along.


Programming often involves keeping track of and modifying data. Variables make it easy to store data and operate on at a later time. In addition, data in JavaScript consists of different, dynamic types depending on the purpose.

  /* I am a block comment 
   * with multiple lines.
  var name = 'Johnny Appleseed'; // This is an inline comment

This is a basic variable declaration. var indicates variable assignment, name is the variable name, and it is equal to the String value "Johnny Appleseed". All statements in JavaScript end with a ;. Comments // (inline) or /**/ (block) are useful documenting our code.

What other types of data can we declare as variables? Quite a few:

  var number = 1; // Number
  var precise = 1.2; // More precise Number
  var collection = []; // An empty Array
  var person = {}; // An empty Object
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment