Introduction to JavaScript Spring 2011 Class 7

Back to Introduction to JavaScript Spring 2011

Values

Data inside an application or script.

Data Types Javscript has six basic data types for values: Number, String, Boolean, Object, Function, and undefined.

Data Type: Number

The Number data type is for values that can be used in mathematical operations. They can be positive or negative, whole or decimal. Exponential notation can be used for expressing numbers. The largest number javascipt can handle is 1.7976931348623157e+308. 5e-324 is the smallest.

Data Type: String

The String data type is used for representing text. The name string supposedly means a bunch of characters strung together. Strings are written by enclosing their content in quotation marks. Single or double quotes may be used, as long as you close the string with the same type of quote you opened it with.

Data Type: Boolean

The Boolean data type only has two values, true or false.

Data Type: Function

Functions are blocks of code that can easily be reused.

Data Type: Object

Objects are variables that contain multiple values.

Data Type: Undefined

Undefined is actually the absence of a value. It’s possible for functions to return Undefined values, and for variables to store Undefined values.

Variables

Variables are reusable containers for data. When we need to store a value to be used again later, we store it in a variable. If necessary, you can replace the value in a variable at any time. You give variables a name when you create them. Their name can contain uppercase letters and numbers, as well as the dollar sign($) and underscore(_). Variable names can contain numbers, but they cannot start with numbers. Reserved words of the javascript languate cannot be used for variable names.

w3schools: variables

Operators

Operators are key words or symbols in the javascipt language that perform actions on values.

Arithmetic operators can be used on values of the number data type to perform mathematical operations. Addition(+), Multiplication(*), Subtraction(-), Division(/), and Modulo(%) are supported.

The plus sign(+) operator can also be used on strings, to join two strings together. This process is known as concatenation.

Values are assigned (stored in) variables by using the assignment operator (=).

Values can be compared using comparison operators, greater than(>), less than(<), equal to(==), greater than or equal to(>=), less than or equal to(<=). Comparisons return Boolean values, either true or false. The explanation point(!) operator is used to invert the Boolean value returned by a comparison. So the operator for not equal to is (!=).

With the standard equal to operator, values of different data types will return true.

Using the strict equal to operator (===) these comparisons will return false.

w3schools: arithmetic and assignment operators

w3schools: comparison operators

Statements

Any line of code that causes something to change in the application is a statement. Statements should be terminated with semi colons, though javascript will not always throw an error when they aren't.

w3schools: javascript statements

Functions

Functions are blocks of code that can be executed out of sequence by calling the functions name. Functions can accept values when their name is called, these values are referred to as arguments. Functions can return a value. If a function is written to return a value, it will return undefined.

w3schools: functions

Local Variables

When variables are declared with the keyword var, they exist in the block of code they were declared in, and blocks of code nested in the block they were created in. Trying to access the variable outside of the scope it exists in will result in an error.

Objects

Objects are collections of (usually related) variables and functions. Variables that are part of an object are referred to as properties Functions that are part of an object are referred to as methods.

Javscript has a number of built in objects that have methods and properties which can be used to manipulate and create html markup. In advanced applications, it is useful to declare your own objects.

w3schools: how objects work

w3schools: DOM objects

w3schools: DOM element objects, properties and methods

Arrays

Arrays in javascript are just like objects, except the collection of values they contain are named with numbers instead of strings. Arrays are useful when you will need to loop through the contents of an object, and preform actions on each contained value it.

w3schools: arrays

Loops

Loops are used when you need to preform the same action over and over again until a condition changes.

w3schools: while and do while loops w3schools: for loops

Including javascript

javascript is included in (x)html markup using the script tag.

html elements can be given class and/or id attributes to easily select elements to use their DOM properties/methods.

w3schools: including javascript

Midterm Hands On

For the midterm hands on, I will ask you to create html markup from scratch. You will need to:

• create Elements using javsacript
• create text nodes using javascript
• append elements/nodes to elements using javascript
• create and append multiple lines of markup, using a for loop.

Ideally, I'd like to include taking user input, and javascript event listeners in the hands on, but I don't think we've covered them well enough in class, so using them will be extra credit.

sample loop:

 var unorderedList = document.createElement('ul');
 for(i=0; i<5; i++){
 	  var listItem = document.createElement('li');
 	  var tNode = document.createTextNode(i+1);
 	  listItem.appendChild(tNode);
 	  unorderedList.appendChild(listItem);
 }
 document.body.appendChild(unorderedList);