Client Side Processing

Introduction to client side processing with JavaScript

Transcript

1. About  Follow-­‐Along  Classes…   •  Follow  along  classes  are  an  opportunity  to   explore  topic  areas  hands-­‐on  with  the  instructor   without  grade  pressure  :me  constraints   –  Please  try  to  duplicate  what  the  instructor  is  doing  at   the  same  :me  it  is  being  presented   •  Stop  the  instructor  if  you  have  problems.  Don’t  be   concerned  about  “holding  up  the  class”   •  Feel  free  to  explore  on  your  own  aEer  you  are  successful   following  the  instructor   •  Please  ask  ques:ons,  make  comments,  or  point  out  errors   •  Save  your  work!  You  may  want  to  refer  to  it  later.     •  Ask  for  addi:onal  examples  or  areas  you  are  interested  in   whenever.  
2. ITM352   JavaScript  and  Dynamic  Web  Pages:   Client  Side  Processing  
3. Client  Side  Web  Page  Processing   •  Browser  is  the  “client”  that  requests   via  hUp  a  file  from  the  server   –  This  is  called  a  “pull”  or  “get”   request   –  There  is  also  “push”  but  this  is  more   complicated   •  Let’s  see  this  “raw”  without  a   browser   telnet itm-vm.shidler.hawaii.edu 80 GET /itm352student/text.html HTTP/1.1 HOST: itm-vm.shidler.hawaii.edu •  Browser  receives  file  and  processes   it  as  it  has  been  configured     –  E.g.  HTML  text  is  “drawn”     –  Different  browsers  may  process  the  file   differently!   •  E.g.  look  of  buUons,  text  boxes  etc.  
4. Dynamic  Web  Pages   •  Basic  web  pages  are  “sta:c”   –  They  are  set  in  advance,  not  created  or  modified  at  request  :me   •  Dynamic  web  pages  are  processed  (at  least  par:ally)  at  request  :me  by   scrip:ng  code  to  create  the  output   –  Allows  changes  at  request  :me     –  There  are  two  opportuni:es  for  this     •  (1)  on  the  server  aEer  request     –  Though  a  “gateway”  (CGI)  or  server  module   –  Scripts  are  processed  on  the  server   •  (2)  on  the  client  aEer  the  file  received   –  Internal  to  Browser    (API,  plugin,  etc.)     –  Scripts  are  passed  from  the  server,  processed   on  the  client       –  There  are  many  scrip:ng  languages   •  PHP  is  most  popular  for  sever   •  JavaScript  most  popular  for  client   (2)   (2)  
5. DOM   •  The  Document  Object  Model  (DOM)  is  the  way   things  in  markup  (HTML,  XML,  etc.)  documents   are  represented  within  a  (standards  compliant)   browser   –  Objects  are  organized  in  a  tree   •  Logically  and  for  a  page   •  Lets  use  Chrome  tools  to  look   –  Internal  scrip:ng  languages  such  as  JavaScript  can   access  and  manipulate  the  DOM    
6. DHTML   •  Dynamic  HTML  (DHTML)  is:   Markup  Language  (HTML5)     +     Presenta5on  Defini5on  Language  (CSS)     +     DOM     +    Client-­‐side  Scrip5ng  Language  (JavaScript)     •  It’s  absolutely  incredible  what  you  can  do  with  the  above!    
7. Examples   •  Let’s  Try  Some  Client  Side  Dynamic  Web  Pages!   –  Hello  World!     •  console.log() •  alert() •  document.write() •  <div> DOM object –  document.getElementById().innerHTML –  Date/Time  page   •  Date().toString()   –  Refresh  the  page   –  Why  is  this  page  “dynamic”   –  Where  is  this  date  coming  from?   –  Can  you  think  of  how  to  make  this  a  :cking  clock?  
8. More  Examples   •  UI  Interac:on   –  Events   •  <input type="button" value="Click me!" onclick="alert('Ouch!');"> –  Note  how  you  mix  single  and  double  quotes.  You  can  reverse  this  too.   –  Your  turn:  make  this  write  Ouch!  in  a  <div>   »  Refresh  and  see  what  happens.  Do  you  know  why?   »  Bonus:  how  would  you  get  it  to  write  Ouch!  In  the  same  line  as  the  buUon?   »  Bonus2:  try  other  events  e.g.  onmouseover   »  Bonus3:  can  you  add  another  buUon  to  remove  the  text?   •  <input type=”text” id=“input-field"> –  Get  value  of  this  aEer  click  and  write  to  document  element   –  Your  turn:  change  the  buUon  label  aEer  click  with  the  text  in  input-­‐field   •  <input type="text" id="input-box" onkeypress="document.getElementById('hello- div').innerHTML = this.value"> –  Your  turn:  make  this  change  the  page  :tle