JavaScript and JQuery interactive front-end web development

[Eavis]

Solution to remotely import a csv file and parse the file to get the field name using javascript

 $(document).ready(function() {
          if (window.File && window.FileReader && window.FileList && window.Blob) {
            $('#files').bind('change', handleFileSelect);
          }
        });
        function handleFileSelect(evt) {
          var files = evt.target.files; // FileList object
          var file = files[0];
          var reader = new FileReader();
          reader.readAsText(file);
          reader.onload = function(event) {
              var csv = event.target.result;
              var data = $.csv.toObjects(csv);
              var obj1 = data[0];
              var result = Object.keys(obj1);
              var var_len = result.length;
              console.log(var_len);
              console.log(result);       
          }
}
         

[Eavis]

Solution to add
each line in html use js

for (var i = 0; i < var_len; i++){
$('#var_name').append(var_name[i]).append("
");
}

[Eavis]

Link to introduction on angular js

xufei/blog#14

[Eavis]

Computers create models of the world using data.

The models use objects to represent physical things.
Events can trigger methods, and methods can retrieve or update an object's properties.
Programmers can write code to say "When this event occurs, run that code."
Web Browsers are programs build using objects.
The browser represents each window or tab using a window object.
The current web page loaded into each window is modelled using a document object.
The title property of the document object tells ...
The document object represents an html page.
When the browser creates a model of a web page, it not only creates a document object, but it also creates a new object for each element on the page.
Together these objects are described in the Document Object Model,DOM.
Web browsers use html markup to create a model of the web page. Each element creates its own node which is a kind of object.

[Eavis]

To understand how you can change the content of an HTML page using JS, you need to know how a browser interprets the HTML code and applies styling to it.

1. RECEIVE A PAGE AS HTML CODE

Each page on a website can be seen as a separate document.

2.CREATE A MODEL OF THE PAGE AND STORE IT IN MEMORY.

Beneath the document object each box is called a node. Each of these nodes is another object.

3. USE A RENDERING ENGINE TO SHOW THE PAGE ON SCREEN.

When the browser receives the css rules, the rendering engine processes them and applies each rule to its corresponding elements.
All major browsers use a javascript interpreter to translate instructions in js into instructions that computer can follow.
So JS is an interpreting programming language, each line of code is translated one y one as the script run.

[Eavis]

How HTML,CSS & JAVASCRIPT FIT TOGETHER

HTML -- THE CONTENT LAYER:
The html gives the page structure and adds semantics.
CSS --PRESENTATION LAYER:
It provides rules that how html content is presented.
JS --BEHAVIOR LAYER:
This is where we can change how the page behaves, adding interactivity.
Keep as much of js as possible in separate files to make the page still works if the js cannot be loaded or run.
<script src = ""></script>
The HTML <script> element is used to load the JS file into the page and it has an attribute called src.

The element is used to load a css file. The document object represents the entire page. All web browsers implement this object and you can use it just by adding its name. document.write(""); Object--Member Operator--Method--Parameters The script works with the model of the web page the browser has created, so js will not change the html.

[Eavis]

JS only:
Each individual instruction or step is known as a statement. Statement should end with a semicolon.
"var" is a variable keyword.

Anonymous Function & Function Expressions

If you put a function where the interpreter would expect to see and expression, then it is treated as an expression, and it is known as a function expression.
In function expressions, the name is usually omitted. A function without name is called anonymous function.
Below the function is stored in a variable called area.

var area = function (width, height) {
                  return width * height;
                  };
var size = area(3,4);

IMMEDIATELY INVOKED FUNCTION EXPRESSION iife

These functions are not given a name

var area = (function () {
               var width = 3;
               var height = 2;
               return width * height =;
               }());

The () after } tell the interpreter to call the function immediately;
The grouping parenthesis are to ensure the interpreter treat this as an expression.
When to use anonymous functions and IIFES
They are used for code that only needs to run once within a task.

1. As an argument when a function is called (to calculate a value for that function);
2. To assign the value of a property to an object

3. In event handlers and listeners to perform a task when an event occurs.

IIFEs are commonly used as a wrapper around a set of code. Any variables declared within that anonymous function are effectively protected from variables in other scripts that might have the same name. This is due to a concept called scope, which is a very popular technique with jquery.

[Eavis]

WAYs to Create Objects

Variable Scope

A variable actually references a value that is stored in memory.
local/ function level variable: within a function
global variable : outside the function --Pay attention to name conflict when there are several js files
Global variable are stored in memory for as long as the web page is loaded into the web browser, so it uses more memory. The same value can be used with more than one variable;
var isWall = true;
var canPaint = true;

What is an Object?

In an object, variables become known as properties.
In an object, functions become known as methods.
The object is in curly braces:
In an object, the name is called a key.
The object is the curly braces and their contents. The object is stored in a variable called hotel, so you can refer to it as the hotel object.
Separate each key from its value using a colon.
Separate each property and method using a comma (but not after the last value).

Access an object and its methods and properties.

var name = hotel.name;
var roomsfree = hotel.checkAvailabity();

OR

var name = hotel['name'];
var roomsfree = hotel['checkAvailabity']();

CREATING the OBJECT, then ADD PROPERTIES AND METHODS

1. LITERAL NOTATION

var hotel = {}
hotel.name ='park';
hotel.rooms = 200;
hotel.booked = 120;
hotel.checkAcaddd = function() {
//
};

2 Object Constructor Notation

var hotel = new Object();
hotel.name ='park';
hotel.rooms = 200;
hotel.booked = 120;
hotel.checkAcaddd = function() {
 ///
};

CREATING AN OBJECT WITH PROPERTIES & METHODS

1.Literal Notation

var hotel = {
     name  : 'Cara',
     rooms  : 40,
     booked  : 25,
     gym : true,
     roomTypes : ['twin','double','suite'], //square brackets 
     checkAvailabity : function() {
              return this.rooms - this.booked;
      //this keyword is used to indicate that it is using rooms and booked properties of this object
     }
};

2. Creating many objects : Constructor Notation

template

function Hotel(name,rooms,booked) {
      this.name = name;
      this.rooms = rooms;
      this.booked = booked;
      this.checkAvailabity  = function() {
              return this.rooms - this.booked;
     };
 }

var quayHotel = new Hotel('quey',40,25);
var parkHotel = new Hotel('park',120,77);
var details1 = quayHotel.name + 'rooms: ';
      details1 += quayHotel.checkAvailabity();
var el1 = document.getElementbyId('hotel1');
el1.textContent = details1;

var details2 = parkHotel.name + 'rooms: ';
      details2 += parkHotel.checkAvailabity();
var el2 = document.getElementbyId('hotel2');
el2.textContent = details2;

Add and Delete

After creating the object,

var hotel = {
       name = 'Park',
       rooms = 120,
      booked = 77 };
hotel.gym = true;
hotel.pool = false;
delete hotel.booked;

[Eavis]

THIS

When a function is created at top level of a script, it is in the global scope.
The default object is the window object.
This keyword is a reference to the object that the function is created inside.

function windowSize () {
      var width = this.width;
      var height = this.height;
      return [width, height];
}

All global variables also become properties of the window object, so when a function is in the global context, you can access global variables using the window object.

var width = 600;
var shape = {width: 300};//curly braces are objects 
var showWidth = function () {
        document.write(this.width);
};
showWidth();

var width = 600;
var shape = {width: 300};//curly braces are objects 
var showWidth = function () {
        document.write(this.width);
};
shape.getWidth = showWidth;
shape.getWidth();