CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery HTML5 · JQuery*example* Form*textvalidaon* …!...

14
CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery Ajax Mobile WebApp HTML5

Transcript of CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery HTML5 · JQuery*example* Form*textvalidaon* …!...

Page 1: CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery HTML5 · JQuery*example* Form*textvalidaon* …! //zip code validation that accepts five digits with possible blank spaces front and

CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery Ajax Mobile WebApp HTML5

Page 2: CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery HTML5 · JQuery*example* Form*textvalidaon* …! //zip code validation that accepts five digits with possible blank spaces front and

JAVASCRIPT  

•  OO  interpreter  built  into  browser  •  executed  from  top  to  bo=om  of  HTML  without  pre-­‐compliaDon  

•  What  JavaScript  (behavior  layer)  can  do  •  Read  /  Write  DOM  objects  •  adding  interacDvity  to  HTML  page  •  Form  data  validaDon  (  for  project  2  )  •  Assynchronous  communicaDon  with  server  (AJAX)  

•  Syntax  similar  to  Java,  but  dynamic,  weakly  typed  •  no  need  to  declare  variable  in  advance  •  duck  typing    type  of  variable  is  specified  /  respecified  by  the  assigned  value    

“When  I  see  a  bird  that  walks  like  a  duck  and  swims  like  a  duck  and  quacks  like  a  duck,  I  call  that  bird  a  duck.”  –  James  Whitcomb  Riley  

•  Runs  in  sandbox  (no  file  I/O)  

Page 3: CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery HTML5 · JQuery*example* Form*textvalidaon* …! //zip code validation that accepts five digits with possible blank spaces front and

Where  to  put  my  code  

<HTML>!<HEAD>!

!<script type=“text/javascript” src=“code.js”/>!!!<script type=“text/javascript”>!! !…!!</script>!

</HEAD>!<BODY>!

!<script type=“text/javascript”>!! !…!!</script>!

</BODY>!</HTML>!

external  (encouraged)  _  because  of  modularity  and  performance  

internal  1  (minimized)  _  page  specific  se\ng  runs  ahead  of  HTML  

internal  2  (possible…  but  why?)  _  only  when  it  has  to  run  a_er  defining  an  element  

Page 4: CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery HTML5 · JQuery*example* Form*textvalidaon* …! //zip code validation that accepts five digits with possible blank spaces front and

What  JavaScript  can  do  

Read/Write  DOM  objects  

result  

code  <html>!<body>!<h1>My First Web Page</h1>!<p id="demo"></p> <script type="text/javascript"> document.getElementById("demo").innerHTML=Date(); </script>!</body>!</html> ! getElementById()  accesses  the  first  element  with  the  

specified  ID.      But  in  pracDce,  using  JQuery  selector  -­‐  $(“#demo”)  –  is  more  convenient.  

script  needs  to  run  a_er  declaring  ‘demo’  in  this  case  

Page 5: CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery HTML5 · JQuery*example* Form*textvalidaon* …! //zip code validation that accepts five digits with possible blank spaces front and

What  JavaScript  can  do  

Adding  interacDvity  to  HTML  code  <html>!<head>!<script type="text/javascript"> function displayDate() { document.getElementById("demo").innerHTML=Date(); !} </script>!</head>!<h1>My First Web Page</h1>!<p id="demo"></p>!<button type="button" onclick="displayDate()">Display Date</button>!</body>!</html> !

a  funcDon  is  declared  when  page  is  loaded.  

displayDate()  is  called  when  bu=on  is  clicked.  

Page 6: CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery HTML5 · JQuery*example* Form*textvalidaon* …! //zip code validation that accepts five digits with possible blank spaces front and

Number

String

Boolean

Array

What  JavaScript  can  do  

Using  variables   A  variable  type  is  specified  by  given  value  

what  if  firstPart  and  secondPart  are  Numbers  

Page 7: CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery HTML5 · JQuery*example* Form*textvalidaon* …! //zip code validation that accepts five digits with possible blank spaces front and

Function

Object Contains pairs of key and value DOM consists of objects

Similar  to  HashMap  (java)  or  DicDonary  (python)    

JSON(JavaScript  Object  NotaDon)  format  to  

communicate  with  server  and  external  files    (I  hate  XML    L)  

We’ll  see  this  a  lot  as    CallBack  funcDons  

What  JavaScript  can  do  

Using  variables  

Page 8: CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery HTML5 · JQuery*example* Form*textvalidaon* …! //zip code validation that accepts five digits with possible blank spaces front and

Variable  scope  code  

<script type="text/javascript"> !var foo = 1; !!moo = 1; ! !!!function fx(){!! !alert(foo); alert(moo); // can access parent’s variables!! !var foo = 2; // define local variable!!! !moo = 2;! ! !// change global variable!! !alert(foo); alert(moo); // guess output?!!}!!fx();!!alert(foo); alert(moo); // only moo has been changed !

</script>!

global  

local  

•  parent’s  variables  are  accessible  from  its  children.  •  children’s  variables  are  not  accessible  from  parents.  •  scope  chain  looks  for  the  variable  by  climing  up  object  hierarchy  

unDl  finding  it.        •  var  declares  local  variable  in  current  scope  •  no  var  looks  up  scope  chain  unDl  it  finds  the  variable  

•  if  found,  replace  the  variable  •  if  not  found,  declare  global  variable    

Page 9: CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery HTML5 · JQuery*example* Form*textvalidaon* …! //zip code validation that accepts five digits with possible blank spaces front and

JQuery  •  JQuery  source  code  is  an  external  JavaScript  file  

•  <script  src="h=p://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>    

•  Provides  convenient  selectors  for  DOM  •  $(“tag”),        $(“#id”),          $(“.class”),  $(this),          •  $(“tag#id”),        $(“tag.class”)  •  $(“#id  >  .class:first”)  •  for  more  informaDon,  see  JQuery  documentaDon  link    

•  Simpler  methods  for  DOM  manipulaDon  •  $().css(‘font-­‐size’,  ‘16px’)    •  $().html(‘<div>  hello  </div>’),            $().append(‘<div>  added  text  </div>’)  •  $().hide(),          $().show(‘fast’)  •  $().addClass(“bu=onSelected”),            $().removeClass(“bu=onNormal”)  

•  Event  listener  •  $().click(    funcDon  ()  {  //  do  something  here    }      );  •  $(document).ready(        funcDon()  {  …  }      );  

 

•  Request  data  and  Process  response  •  $.get(‘myhtmlpage.html’,  funcDon(response)  {      //  do  something  with  response    });  

JavaScript  is  verbose  L      We  want  a  plugin  making  programming  faster,  easier!  

Page 10: CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery HTML5 · JQuery*example* Form*textvalidaon* …! //zip code validation that accepts five digits with possible blank spaces front and

JQuery  example  

Expandable  Paragraph  <html>!<head>!<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>!<script type="text/javascript">

!$(document).ready(function() {!! !$(“#button_expand”).click( !! ! !function() {!! ! ! !$(“#detail”).show();!! ! !}!! !);!! !$(“#detail”).hide();!!});!

</script>!</head>!<body>!Here’s what I want to say in brief. <br>!You wanna read more? !<div id=“button_expand”>READ MORE</div>!<div id=“detail”>Here’s detail I want to hide at first</div>!</body>!</html> !

run  this  funcDon  when  HTML  document  is  fully  loaded.    

hide  detail  at  first    

Bind  this  funcDon  to  the  click  event  of  the  bu=on  

Page 11: CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery HTML5 · JQuery*example* Form*textvalidaon* …! //zip code validation that accepts five digits with possible blank spaces front and

JQuery  example  

Anonymous  FuncDon  

$(document).ready( !! ! !function(){ alert(“HTML loaded”); } );!

HTMLloaded = function() { alert(“HTML Loaded”);}!$(document).ready( HTMLloaded );!

Using  anonymous  funcDon  to  define&assign  a  funcDon  as  parameter  (WORKING,  simple)      

$().ready()  accepts  funcDon  object  as  its  handler  

Without  anonymous  funcDon.    (WORKING,  but  Verbose)  

$(document).ready( alert(“HTML loaded”); );!

JavaScript  code  is  not  a  valid  handler.    (NOT  WORKING)  

Other  examples  of  using  anonymous  funcDon  •  $(‘#bu=onID’).click(  funcDon()  {  //  do  something  for  the  click  event  }  )  •  $.ajax({url:  ‘…’,  success:  funcDon(data)  {  //  do  something  on  data  //  }    });    •  $(‘.bu=on’).each(  funcDon(i,b)  {  //  do  something  for  each  bu=on  class  objects  }    );  

Page 12: CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery HTML5 · JQuery*example* Form*textvalidaon* …! //zip code validation that accepts five digits with possible blank spaces front and

JQuery  example  

Form  text  validaDon  …!//zip code validation that accepts five digits with possible blank spaces front and back $(document).ready( function() {!! !$("#input_zip").keyup( function() { !! ! ! !value = $(this).val(); // takes value from input!! ! ! !validation = value.match(/^\s*\d{5}\s*$/); !! ! ! !if (validation!=null) { // if there's no match found!! ! ! ! !$("#res").text('yes');!! ! ! !} else {!! ! ! ! !$("#res").text('no');!! ! ! !}!! !});!!

});!

…!<input type='text' id='input_zip' name='zip' />!<div id="res"></div>!

…!

University  ID  validaDon  :    ^\s*\d{9}\s*$  zip  code  validaDon  :    ^\s*\d{5}\s*$!email  validaDon  :    ^([a-­‐zA-­‐Z0-­‐9_\.\-­‐])+\@(([a-­‐zA-­‐Z0-­‐9\-­‐])+\.)+([a-­‐zA-­‐Z0-­‐9]{2,4})+$  

Page 13: CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery HTML5 · JQuery*example* Form*textvalidaon* …! //zip code validation that accepts five digits with possible blank spaces front and

JQuery  example  

Auto-­‐complete  <script  type="text/javascript"  src="jquery.autocomplete.js"></script>  <script  type="text/javascript"  src="departmentList.js"></script>  …  <script  type="text/javascript">  

 $(document).ready(  funcDon()        var  a  =  $('#query').autocomplete(opDons);      a.enable();    });  

</script>  …  <input  type='text'  id='query'  name='department'  />    …  

You  should  download  this  plugin  file  from  website  

var  department  =  [‘computer  science’,  ‘journalism’,  …  ];  

Page 14: CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery HTML5 · JQuery*example* Form*textvalidaon* …! //zip code validation that accepts five digits with possible blank spaces front and

quesDon?