Eavis / web_app

0 stars 0 forks source link

JavaScript and JQuery interactive front-end web development #28

Open Eavis opened 7 years ago

Eavis commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

Link to introduction on angular js

https://github.com/xufei/blog/issues/14

Eavis commented 7 years ago

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 commented 7 years ago

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.

image 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 commented 7 years ago

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 Githubissues.

  • Githubissues is a development platform for aggregating issues.