This is the project page for Introduction to JavaScript project.
In this project, we will code various activities to understand javascript basics. Javascript language reference can be found here
Once you finish each of the activities, you can run projecttracker tool to verify if you’ve completed the activity. You can download the projecttracker tool here(TBD). Overview of how to use the projecttracker tool is here(TBD).
Javascript is an interpreted (ie not compiled) language. It supports weak/dynamic typing. In this section, we will give a quick overview of various constructs in Javascript.
Variables are declared and initialized with the var keyword. The type of the variable is determined implicitly based on the value assigned to that variable.
In the example below, variable i is assigned a string value ("hello") and hence its type is 'string'
|
var str = "hello"; console.log(str); console.log("Type of Variable i is: ", typeof(str)); |
In Javascript, the type associated with a variable can change dynamically. In the example below, var str is assigned a string value at time of declaration.
|
var str = "hello"; console.log("Type of Variable i is: ", typeof(str)); |
In Javascript, you can assign a non-string value (for example: number) as shown below:
|
str = 5; console.log("Type of Variable str is: ", typeof(str)); |
The type of variable str will now be number. This is an example of weak/dynamic typing. Strongly typed langauges such as Java, C# will raise a compilation error for the above statement since i was originally declared to be of type string.
Javascript supports a rich set of data types. The following code snippet shows examples of various data types.
|
var i = 5; //number data type var i = "hello world"; //string data type var i = true; //boolean var i = [1,2,3]; // array data type
|
Javascript arrays can be initialized as follows:
|
var arr = [1,2,3]; var arr = new Array(); arr.push(1); arr.push(2); arr.push(3); |
Javascript arrays support the standard operators on arrays to determine length, get/set values etc.
|
for(var i = 0; i < arr.length; i++){ console.log(arr[i]); } |
Javascript supports objects. You can think of a Javascript object as a container for named values as shown in the example below. As you can see in the code snippet, you can dynamically add properties to an object and set its value.
|
var person = new Object(); person.firstName = "Bill"; person.lastName = "Gates"; |
Another common way of declaring an object is by specifying the property name/value pairs inside a {} section.
| var person = {firstName: "Bill", lastName: "Gates"}; |
In languages such as Java, you can create a class Person and create instances of this class by calling the constructor of class Person. You can do this in JavaScript as follows.
|
function Person(firstName, lastName){ this.firstName = firstName; this.lastName = lastName; } var p = new Person("Bill","Gates");
|
functions in JavaScript are objects as well, so the Person() function defined above acts both as a function as well as an object type. You can now create instances of Person object through a new Person() statement.
The typeof operator will help you determine the type of a variable.
| typeof 37 === 'number'; typeof "hello" === 'string' typeof [1,2,3] === object //note that the type is an Object and not Array typeof new Date() === 'object' //note that the type is an Object and not Date |
As you can see above, for instances of objects (including Arrays), typeof only returns 'object' as the type. You can use instanceof operator to verify if a particular instance is of a specific object type.
|
[1,2,3] instanceof Array; //returns true var i = [1,2,3] i instanceof Array; //returns true var d = new Date(); d instanceof Date; // returns true |
You can use JSON.stringify() to convert a javascript variable to a string. You can use JSON.parse() to parse a string input and create a javascript value from the string.
|
var person = new Object(); person.firstName = "Bill"; person.lastName = "Gates"; console.log(JSON.stringify(person)); //creates a string value var str = '{"firstName":"Bill","lastName":"Gates"}'; var person2 = JSON.parse(str); // parses str and creates an object. console.log(person2.firstName); |
TIP: Ensure you are running node.js installer from an Administrator command prompt.
TIP: Ensure you are running node.js installer from an Administrator command prompt.
From the project src folder, type node start.js.
Node.exe is the executable that runs a node.js application. This is similar to java.exe or python.exe running Java/Python apps respectively.
If you run node.exe without any arguments, it starts a node shell that you can use as an interactive shell as shown below:
All the code snippets used in the Concepts section are available in src\tutorial.js file.
You can run node tutorial.js to run the tutorial examples.
This has the obligatory Hello World activity. You’ve to implement a HelloWorld function in JavaScript that returns the string “HelloWorld”.
Second activity is to implement a JavaScript function that takes 2 numbers as inputs and returns their sum.
In this activity, you will implement a JavaScript function that iterates through all the numbers in an array and returns their sum.
In this activity, you will build on the earlier activity by implementing a JavaScript function that sums only the unique numbers in an array. You will learn how to use a secondary data structure and/or using nested loops to achieve this.
In this activity, you will learn how to implement multi-dimensional arrays. You have to write a JavaScript function that validates whether the input array is a multi-dimensional array of the right type and calculate the sum of its diagonal cells.
This activity will give you an understanding of how dynamic typing works in JavaScript. You will learn how to perform runtime type checks. As a side note, compilers for statically typed languages such as Java will automatically do this for you.
This is a simple activity that introduces you to strings. You will learn how to determine length of a string, access each character of a string.
For this activity, you will write a function that has to parse a list of names and return an array containing only the first names. You will learn how to split strings and how to manipulate array elements.
For this activity, you will write a function that creates a paragraph from an input set of sentences. You will learn how string concatenation works in JavaScript.
In this activity, you will learn how to represent a date in JavaScript. You will also learn how to find out the given day, month, year of a given date.
You will get to the heart of what makes objects special in JavaScript. A JavaScript object is a dynamic collection of properties and methods. You will learn how to type check for an object, iterate over an object’s properties and get property values dynamically.
Serialization is the process of converting the value of an in-memory variable to a text representation. Deserialization is the reverse process of creating an in-memory variable from a text representation.
In the first set of activities, you will learn how to serialize/deserialize variables of primitive data types such as numbers, strings, date.
In the second set of activities, you will learn how to use JSON built-in methods to serialize/deserialize any javascript object and arrays.
Javascript has support for exception handling. You will learn how to catch exceptions raised on bad inputs and handle them gracefully.
If you’ve completed the above activities, you will get a working knowledge of Javascript. You can then proceed to learning how to use Javascript in web UI by taking the AngularJS project, or on app servers by taking the nodeJS project.