cmsc434 tutorial #2 html css javascript jquery html5 · jquery*example* form*textvalidaon* …!...
Post on 15-May-2019
222 Views
Preview:
TRANSCRIPT
CMSC434 TUTORIAL #2 HTML CSS JavaScript Jquery Ajax Mobile WebApp HTML5
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)
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
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
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.
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
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
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
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!
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
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 } );
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})+$
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’, … ];
quesDon?
top related