WebFund 2015W Lecture 15: Difference between revisions

From Soma-notes
Created page with "==Video== The video from the lecture given on March 4, 2015 [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w-lec15-04Mar2015.mp4 is now availab..."
 
Line 5: Line 5:
==Code==
==Code==


===persistent-notes/public/javascripts/notes.js===
Files from [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/code/persistent-notes.zip persistent-notes] that were changed/added:
 
===public/javascripts/notes.js===
<source lang="javascript">
<source lang="javascript">
$(function() {
$(function() {
Line 14: Line 16:
</source>
</source>


===views/layout.jade===


<source lang="html5">
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src="//code.jquery.com/jquery-1.11.2.min.js")
    script(src="//code.jquery.com/jquery-migrate-1.2.1.min.js")
    block header
  body
    block content
</source>
===views/notes.jade===
<source lang="html5">
extends layout
block header
  script(src="/javascripts/notes.js")
block content
  h1 #{username} Account
  p Welcome #{username}
  p#otheruser
  - if(error)
    div.error #{error}
  form(action="/logout", method="post")
        button(type="submit") Logout
 
  h2 Notes
  ul
    - for (i=0; i < userNotes.length; i++)
      li
        div
          b= userNotes[i].title + ": "
          -var note_url = "/edit/" + userNotes[i]._id
          a(href=note_url) [edit]
          p!= userNotes[i].content
  form(action="/new", method="post")
        button(type="submit") New Note
</source>
===routes/index.js===
<source lang="javascript">
// add before modules.exports line at the end
router.get("/testdata", function(req, res) {
    res.send({"username": "Bob"});
});
</source>


==Notes==
==Notes==

Revision as of 18:44, 4 March 2015

Video

The video from the lecture given on March 4, 2015 is now available.

Code

Files from persistent-notes that were changed/added:

public/javascripts/notes.js

$(function() {
    $.getJSON("/testdata", function(data) {
        $("#otheruser").text("Or is it " + data.username + "?");
    });
});

views/layout.jade

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src="//code.jquery.com/jquery-1.11.2.min.js")
    script(src="//code.jquery.com/jquery-migrate-1.2.1.min.js")
    block header
  body
    block content

views/notes.jade

extends layout

block header
  script(src="/javascripts/notes.js")

block content
  h1 #{username} Account
  p Welcome #{username}

  p#otheruser

  - if(error)
    div.error #{error}

  form(action="/logout", method="post")
        button(type="submit") Logout
  
  h2 Notes
  ul
    - for (i=0; i < userNotes.length; i++)
      li
        div
          b= userNotes[i].title + ": "
          -var note_url = "/edit/" + userNotes[i]._id
          a(href=note_url) [edit]
          p!= userNotes[i].content
  form(action="/new", method="post")
        button(type="submit") New Note

routes/index.js

// add before modules.exports line at the end

router.get("/testdata", function(req, res) {
    res.send({"username": "Bob"});
});

Notes

From Lecture:

AJAX
----

Asynchronous JavaScript And XML

more AJAJ (XML => JSON)

Old JavaScript just ran in response to local events
 - timer
 - mouse, keyboard
 - on page load

AJAX allows background processing, particularly of network communication
 - do GETs and POSTs in the background

Allows for "single page" web apps

XMLHttpRequest - originally an ActiveX object
 - now native
 - written by Microsoft for Outlook Web Access

jQuery provides nicer interfaces to XMLHttpRequest
* $.getJSON()
* $.post()

Arguments:
 - URL (path on the server)
 - callback