1. NWEN438 Full Stack Development
Dr. Ali Ahmed

2. Course Learning Objectives
Explain the basics of building web applications and the trade-offs involved in choosing appropriate middleware paradigms for their implementation.
Explain the design decisions and trade-offs involved in building large scale distributed web applications.
Explain the need for security including the principles cryptography and authentication and authentication protocols.
Understand the impact of mobility and mobile devices for application development.
Build and evaluate applications for scale and mobility.

3. Course Assessment
Four essays (10%), or (two essays and a presentation)
Two projects (40%),
Exam (50%)

4. (All subject to change !!!)
Course Deliverables
(All subject to change !!!)
Research and compare two web frameworks used in creating web sites and services.
Two labs on TCP using low level sockets in C. An essay describing the findings of these labs and exploring using TCP vs UDP.
P1. Implement a web site with common services (to be discussed), security (to be discussed), a database, active code, in-background page updates, JQuery widgets, etc.
Research and essay on staying current with issues related to mobile development.
Research and essay on the web architecture of three organisations that have overcome large scaling issues.
P2. Implement a mobile app connected to the existing back end and utilizing mobile features such as location, camera services and device portability

5. Class Representative
Any candidates  ?

6. First 2-Weeks Plan HTML, CSS Dynamic Web Pages Javascipt Java Servlets
PHP
Many other options here  …..

7. Presentation
Prepare a PowerPoint presentation to introduce HTML and CSS. This should be 30 minutes presentation allowing 15 minutes for the follow-ups.
Any candidates  ? You can work in a group of a max 2 members.

8. Introduction to JavaScript
Ali Ahmed
Examples are mostly taken from

9. What is JavaScript Dynamic page creation Browser Support
Other Candidates?
Browser Support
All browsers have built in JavaScript module that allows them to run JavaScript Codes

10. History
Do your homework 

11. The JavaScript Console

12. Sandboxing console.log
Developer tools are used to debug your web pages. They are a safe environment that you mess around with your code without any consequences or damages to your machine/web applications etc.
console.log is used to display content to the JavaScript console. Run the following code in the console:
Console.log (“Step 1”);
You performed the log action on the debugging console and logged the string ‘Step 1’ for your debugging purposes.
Courtesy of
console.log

13. Data Types and Variables
Numbers
Strings
Boolean
Escaping characters
Strongly Vs Loosely Typed Languages
var greeting = "Hello";
camelCase
A strongly typed language is a programming language that is more likely to generate errors if data does not closely match an expected type. Because JavaScript is loosely typed, you don’t need to specify data types; however, this can lead to errors that are hard to diagnose due to implicit type coercion.
 camelCase: The first word is lowercase, and all following words are starting with an uppercase letter
var totalAfterTax = 53.03;
var likedIt= true;
Type conversion: var x = “Welcome every” + 1;

14. Questions What is the output for
console.log("Hello + 5*10")?
console.log("Hello” + 5*10);
Is it true or false that “10” == 10 ? True. Why?
Is it true or false that 0 == false ? True.

15. Type Casting/Coercion
"1" == true
Strict Equality
===
!==
4 === 4  true
4 ===“4”  false
When you use the == or != operators, JavaScript first converts each value to the same type (if they’re not already the same type); this is why it's called "type coercion"! This is often not the behavior you want, and it’s actually considered bad practice to use the == and != operators when comparing values for equality.
Instead, in JavaScript it’s better to use strict equality to see if numbers, strings, or booleans, etc. are identical in type and value without doing the type conversion first. To perform a strict comparison, simply add an additional equals sign = to the end of the == and != operators.
"1" === 1

16. Null Vs Undefined Types
Null  value of nothing
Undefined  absence of value
Null is a data type that has no value. So we can say var x = null. x variable has no value. Null by itself is a value indicating totally empty.
Undefined means the variable does not have a value not even nothing. We have such two types to differentiate when you define a variable without setting a value to it (i.e. The case of undefined)  var x; console.log(x);
Null is used when you on purpose assign the variable to null.

17. Conditions
if (/* this expression is true */) { // run this code } else

18. Example
var a = 1; var b = 2; if (a > b) { console.log("a is greater than b"); } else console.log("a is less than or equal to b");

19. Exercise
What is the output of the following code?
var money = ; var price = “100.50”; if (money > price) { console.log("You paid extra, here's your change."); } else if (money === price) { console.log("You paid the exact amount, have a nice day!"); } else { console.log("That's not enough, you still owe me money.");
That's not enough, you still owe me money.
Be careful of the use of “===“ that checks for types first then values 

20. Logical Operators

21. Truthy Vs Falsy Every value has a corresponding Boolean value Example:
””  The empty string evaluates to falsy

22. Falsy Values The Boolean value false The null type The undefined type
the number 0
the empty string ""
the odd value NaN (stands for "not a number”) that is returned when when Math functions fail 

23. Truthy Values Examples: true 42 "pizza" "0" "null" "undefined" {} []
if (1) { console.log("the value is truthy"); } else console.log("the value is falsy");
Examples:
true 42
"pizza"
"0"
"null"
"undefined" {} []

24. Falsy/Truthy in other PLs
In C/C++ ?
In Java?

25. C/C++ ?

26. How about Java? ?

27. Ternary operator
conditional ? (if condition is true) : (if condition is false) var isGoing = true; var color = isGoing ? "green" : "red"; console.log(color);

28. Switch Statement
The break Keyword

29. Iterations / Loops Truthy/Falsy?
Incrementing using the unary operator ‘++’
var x = 10;
var y = x++;
console.log(x);
console.log(y);
Truthy/Falsy?

30. Functions
function fName(numSlices) { // code that figures out reheat settings! //Optional return statement }
Parameters Vs Arguments

31. Scope Global Vs Function Scope Block scope Shadowing
Any function can access variable defined outside it (i.e. global scope)
Variables defined inside a function is visible inside the function including the functions defined inside that function 
Scope overriding or shadowing
Local scope is stronger than global one. So JavaScript tries to find the identifier in the function scope if not found it goes up one level to search for it, then another level up, and so on until the global scope.

32. Hoisting Can we do the following? sayIt(); function sayIt() {
console.log(“Welcome”); }

33. Hoisting How about this? How about this? function sayIt(){
console.log(myVar);
var myVar; }
sayIt();
How about this?
function sayIt() {
console.log(myVar);
var myVar = “Hello”; }
sayIt();
To avoid such weird errors, please define your functions before using it so does for the variables.

34. Function expression What is the value of maxVal?
No function name!
redundant
How to invoke the function? maxVal(1, 5)
What is the value of maxVal? The whole method code 
All function declarations are hoisted and loaded before the script is actually run. Function expressions are not hoisted, since they involve variable assignment, and only variable declarations are hoisted. The function expression will not be loaded until the interpreter reaches it in the script.
What is the value of maxVal?
How to invoke the function?
Hoisting?

35. Callback Functions
Storing a function in a variable allows you to callback that method inside any other methods. Example:

36. Arrays var names = [”Pondy", ”Ali", ”Gail"];
Array values: Javascript Vs C/C++/Java values:
var mixedData = ["abcd", 1, true, undefined, null, "all the things"];
var arraysInArrays = [[1, 2, 3], [4, 5], [6, 7, 8, 9]];
var arraysInArrays = [ [1, 2, 3], ["Julia", "James"], [true, false, true, false] ];
Mixed Values
Array of different size arrays
Arrays values could be heterogeneous (i.e. mixed types)
Array of different types and size arrays

37. Question

38. Array Indexing and properties
0-based indexing
var names = [”Pondy", ”Ali", ”Gail"];
console.log(names [2]);  Gail
console.log(names [10]);  undefined
How about C/C++ and Java in such a situation  ?
Array.length  gets the length of the array (i.e. how many items are there)
console.log(names.length)  3
Push and Pop (Stacks)
Push adds an element to the end of the array and returns the new length
Pop removes and element from the end of the array and returns it
Splice: add and remove elements from anywhere within an array.
names.splice(1, 1, ”Ahmed”, “Catherine”);
Splice
The first argument represents the starting index from where you want to change the array, the second argument represents the numbers of elements you want to remove, and the remaining arguments represent the elements you want to add.

39. Question
var arraysInArrays = [ [1, 2, 3], ["Julia", "James"], [true, false, true, false] ]; console.log(arraysInArrays.length);

40. Question ?

41. Question Check MDN documentation Start:
Index at which to start changing the array (with origin 0). If greater than the length of the array, actual starting index will be set to the length of the array. If negative, will begin that many elements from the end of the array (with origin -1) and will be set to 0 if absolute value is greater than the length of the array.
deleteCount Optional
An integer indicating the number of old array elements to remove. If deleteCount is 0, no elements are removed. In this case, you should specify at least one new element. If deleteCount is greater than the number of elements left in the array starting at start, then all of the elements through the end of the array will be deleted.

42. ForEach Loop
var names = ["Pondy", "Ali", "Gail"]; function printNames(name) { console.log(name); } names.forEach(printNames);
Name  an array value
Function to be called

43. ForEach Loop (Inline function)
var names = ["Pondy", "Ali", "Gail"]; names.forEach(function (name) { console.log(name); });
No Function Name
Since the function is never used again, we can have it an inline one.

44. ForEach Loop (Parameters)

45. Map Loop Modifying the array into a new one  use map
Using forEach() will not be useful if you want to permanently modify the original array. forEach() always returns undefined. However, creating a new array from an existing array is simple with the powerful map() method.

46. Objects var person = {};
To check if a variable is an object: typeof person;  returns “object”
var car = {
color : "blue",
ID : ,
changeColor : function (c)
car.color = c; } };
We created an empty object

47. Object-literal notation
color : "blue”,
Value
Key
How to use a key to return a value?
car.color;
car["color"];
Dot notation
Bracket notation

48. Check this What do you think of this code will print?
car.changeColor("White"); car;
var car2 = car; car2;
car.changeColor(”Red"); car; car2;
Arrays are objects in Javascripts 

49. Be careful
Double
quotes ?
Double
quotes ?