Javascript, JQuery and Ajax

1. ajax

• update part of the web page without loading the whole page
• can use jquery or (xmlhttp + javascript) to implement, jquery is simpler

2. dom

• document object model, the object model of html document
• root is 'document' object, i.e. $ document

3. jquery

• a javascript library
• can host it locally or include it from a cdn
• in the format of $(selector).action() or $(selector).event(handler())

      $("p").hide();
      
      $(document).ready(function(){               
          $("button").click(function(){
              $("p").hide();
          });
      });


4. javascript
      <script src="myScript.js"></script>

      //this is a comment
      function myFunction(p1, p2) {
          return p1 * p2;
      } 


5. angularjs

• mvc pattern (ng-model, view, ng-controller)
• model = data, view = view, controller = control interaction between model and view
• $scope: application context

6. debug javascript (f12 open developer tool)

• inspect -> elements -> event listeners -> click -> button -> handler -> right click 'show function definition'
• or console -> type 'window' -> select the function listed by name -> show function definition
• or source -> event listener breakpoints -> mouse -> click
• or source -> find .js -> set breakpoint -> reload page (f5) or re-trigger .js from ui
• or ctrl + shift + f, in search tab, select regular expression option, then search function name
• f8 (continue), f10(step), f11(step into), shift+f11(step out), right click(continue to here)
• source->call stack->restart frame when stopped at a breakpoint
• press esc in another tab open the 'console' at the bottom
• ctrl+shift+f to search all source code
• use 'window.location.reload()' to clean up console variables

7. edit and debug javascript

• add a break-point at an earlier point in the script
• reload page
• edit your changes into the code
• ctrl + s (save changes)
• right click, continue to here

8. inspect cookie and internal storage

• inspect->application

reference
1. debug in chrome
2. inspect and debug javascript
3. restart frame
4. find javascript function definition in chrome 
5. how does the “this” keyword work?