Javascript

Concepts
Contd…
TUTORIAL 5
Arrays

An array is a compound data type that stores

numbered pieces of data

Each numbered datum is called an element of
the array and the number assigned to it is called
an index.

The elements of an array may be of any type. A
single array can even store elements of different
type.
Creating an Array

There are several different ways to create an

array in JavaScript

Using the Array() constructor:

- var a = new Array(1, 2, 3, 4,

5);
- var b = new Array(10);

Using array literals:
- var c = [1, 2, 3, 4, 5];
Accessing Array Elements

Array elements are accessed using the [ ]

operator

Example:

var colors = [“red”, “green”, “blue”];

colors[0] => red

colors[1] => green
Adding Elements

To add a new element to an array, simply assign a

value to it

Example:
var a = new Array(10);
a[50] = 17;
Array Length

All arrays created in JavaScript have a special

length property that specifies how many elements
the array contains

Example:

var colors = [“red”, “green”, “blue”];

colors.length => 3
Primitive Data Types versus
Composite Data Types

Variables for primitive data types hold the actual
value of the data

Variables for composite types hold only
references to the values of the composite type
Variable Names

JavaScript is case sensitive

Variable names cannot contain spaces,
punctuation, or start with a digit

Variable names cannot be reserved words
Statements

A statement is a section Examples:

of JavaScript that can
Last_name = “Dunn”;
be evaluated by a Web
browser x = 10 ;

A script is simply a y = x*x ;
collection of statements
Programming Tips

It is a good idea to end
Recommended:

each program
statement with a semi- a = 3;
colon; Although this is
b = 4;
not necessary, it will
prevent coding errors
Acceptable:
a = 3; b = 4;

Wrong:
a =
3;
Aggregate Assignments

Aggregate assignments provide a shortcut by

combining the assignment operator with some
other operation

The += operator performs addition and
assignment

The expression x = x + 7 is equivalent to the
expression x += 7
Increment and
Decrement

Both the x = 10; x = 10;
increment (++) y = ++ x; z = x
and decrement ++;
(- -) operator
come in two
forms: prefix ⇒ y = 11
and postfix ⇒ z = 10

These two forms ⇒ x = 11 in both
yield different cases
results
Control Structures

There are three basic types of control structures in

JavaScript: the if statement, the while loop, and
the for loop

Each control structure manipulates a block of
JavaScript expressions beginning with { and
ending with }
The If Statement

The if statement If ( x = = 10)

allows JavaScript { y = x*x;
programmers to
a make decision }

Use an if else
statement { x = 0;
whenever you }
come to a “fork”
in the program
Repeat Loops

A repeat loop is a group of statements that is

repeated until a specified condition is met

Repeat loops are very powerful programming
tools; They allow for more efficient program
design and are ideally suited for working with
arrays
The While Loop

The while loop count = 0;

is used to while (count <= 10) {
execute a document.write(count
block of code );
while a certain
condition is true count++;
}
The For Loop

The for loop is used when there is a need to have

a counter of some kind

The counter is initialized before the loop starts,
tested after each iteration to see if it is below a
target value, and finally updated at the end of
the loop
Example: For Loop

// Print the i=1 initializes the

numbers 1 counter
through 10
i<=10 is the target
for (i=1; i<= 10; i++) value
document.write(i
);
i++ updates the
counter at
the end
of the loop
Example: For Loop

<SCRIPT <SCRIPT
LANGUAGE= LANGUAGE=
"JavaScript"> "JavaScript">
document.write("1");
document.write("2");
for (i=1; i<=5; i++)
document.write("3");
document.write(i);
document.write("4");
document.write("5");
</SCRIPT>
Functions

Functions are a collection of JavaScript statement

that performs a specified task

Functions are used whenever it is necessary to
repeat an operation
Functions

Functions have inputs and outputs

The inputs are passed into the function and are
known as arguments or parameters

Think of a function as a “black box” which
performs an operation
Defining Functions

The most common way to define a function is

with the function statement.

The function statement consists of the function
keyword followed by the name of the function, a
comma-separated list of parameter names in
parentheses, and the statements which contain
the body of the function enclosed in curly braces
Example: Function

function Name of Function:

square(x) square
{return x*x;}
Input/Argument: x
z = 3;
sqr_z = square(z); Output: x*x
Example: Function

function sum_of_squares(num1,num2)
{return (num1*num1) + (num2*num2);}

function sum_of_squares(num1,num2)
{return (square(num1) + square(num2));}
Why AngularJS

MVC Javascript Framework by Google for Rich Web Application

Development

“Other frameworks deal with HTML’s shortcomings by either abstracting

away HTML, CSS, and/or JavaScript or by providing an imperative way for
manipulating the DOM. Neither of these address the root problem that HTML
was not designed for dynamic views”.

Structure, Quality and Organization

Lightweight ( < 36KB compressed and minified)

Free

Separation of concern

Modularity

Extensibility & Maintainability

Reusable Components
jQuery

Allows for DOM Manipulation

Does not provide structure to your code

Does not allow for two way binding
Other Javascript MV*
Frameworks

BackboneJS

EmberJS
Features of AngularJS

Two-way Data Binding – Model as single source of

truth

Directives – Extend HTML

MVC

Dependency Injection

Testing

Deep Linking (Map URL to route Definition)

Server-Side Communication
Data Binding

<html ng-app>
<head>
<script src='angular.js'></script>
</head>
<body>
<input ng-model='user.name'>
<div ng-show='user.name'>Hi {{user.name}}</div>
</body>
</html>
MVC

Model View Controller.

Model
(Data) View (UI)
Notifies

Notifies
Changes
Controller
(Logic)
MVC

Model JS Objects

View DOM

Controller JS Classes
MVC

<html ng-app>
<head>
<script src='angular.js'></script>
<script src='controllers.js'></script>
</head>
<body ng-controller='UserController'>
<div>Hi {{user.name}}</div>
</body>
</html>

function XXXX($scope) {
$scope.user = { name:'Larry' };
}
Expressions

Expressions allow you to execute some

computation in order to return a desired value.

{{ 1 + 1 }}

{{ 946757880 | date }}

{{ user.name }}

you shouldn’t use expressions to implement any

higher-level logic.
Directives

Directives are markers (such as attributes, tags, and

class names) that tell AngularJS to attach a given
behaviour to a DOM element (or transform it,
replace it, etc.)

Some angular directives

The ng-app - Bootstrapping your app and defining
its scope.

The ng-controller - defines which controller will be in
charge of your view.

The ng-repeat - Allows for looping through
collections
Directives as Components

<rating max='5' model='stars.average'>

<tabs>
<tab title='Active tab' view='...'>
<tab title='Inactive tab' view='...'>
</tabs>

<tooltip content='messages.tip1'>
Adding Controllers

angular.module('F1FeederApp.controllers', []).

The $scope variable –
controller('driversController', function($scope) {
Link your controllers and
$scope.driversList = [ view
{

Driver: {

givenName: 'Sebastian',

familyName: 'Vettel'

},

points: 322,

nationality: "German",

Constructors: [

{name: "Red Bull"}

},

Driver: {

givenName: 'Fernando',
App.js

angular.module('F1FeederApp', [
'F1FeederApp.controllers'
]);

Initializes our app and register the modules on

which it depends
Index.html

<body ng-app="F1FeederApp" ng-controller="driversController">

<table>

<thead>

<tr><th colspan="4">Drivers Championship Standings</th></tr>

</thead>

<tbody>

<tr ng-repeat="driver in driversList">

<td>{{$index + 1}}</td>

<td>

<img src="img/flags/{{driver.Driver.nationality}}.png" />

{{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}

</td>

<td>{{driver.Constructors[0].name}}</td>

<td>{{driver.points}}</td>

</tr>

</tbody>
Loading data from the
server(services.js)
angular.module('F1FeederApp.services', []).
$http - a layer on top
of XMLHttpRequest or JSONP
factory('ergastAPIservice', function($http) {

$resource - provides a higher level of

var ergastAPI = {}; abstraction

ergastAPI.getDrivers = function() {
Dependency Injection

return $http({
method: 'JSONP',
url:
'http://ergast.com/api/f1/2013/driverStandin
gs.json?callback=JSON_CALLBACK'
});
}

return ergastAPI;
}); we create a new module
(F1FeederApp.services) and register a
service within that module
(ergastAPIservice).
Modified controller.js

angular.module('F1FeederApp.controllers', []).
controller('driversController', function($scope,
ergastAPIservice) {
$scope.nameFilter = null;
$scope.driversList = [];

ergastAPIservice.getDrivers().success(function (response) {
//Dig into the responde to get the relevant data
$scope.driversList =
response.MRData.StandingsTable.StandingsLists[0].DriverSt
andings;
});
});
Routes

$routeProvider – used for dealing with routes

Modified app.js

angular.module('F1FeederApp', [
'F1FeederApp.services',
'F1FeederApp.controllers',
'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when("/drivers", {templateUrl: "partials/drivers.html", controller: "driversController"}).
when("/drivers/:id", {templateUrl: "partials/driver.html", controller: "driverController"}).
otherwise({redirectTo: '/drivers'});
}]);
Partial views

<!DOCTYPE html>
<html>
<head>
<title>F-1 Feeder</title>
</head>

<body ng-app="F1FeederApp">
<ng-view></ng-view>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
Advanced AngularJS
Concept

Dependency Injection

Modularity

Digesting

Scope

Handling SEO

End to End Testing

Promises

Localization

Filters