lectures/0/src0/cs76/css/index.html index.html David J. Malan A homepage for the course that mimics ios's UI. 11. <!

Transcription

1 lectures/0/src0/cs76/css/index.html <!-- index.html David J. Malan malan@harvard.edu A homepage for the course that mimics ios's UI. --> <link href="ios.css" rel="stylesheet"> <title>csci S-76</title> <h1>csci S-76</h1> <ul> <li><a href="lectures.html">lectures</a></li> <li><a href=" </ul>

2 lectures/0/src0/cs76/css/ios.css body font-family: Helvetica, sans-serif; margin: 0; h1 background-color: #7C92AE; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#abb9cb), color-stop(0.5, #8C9FB8), color-stop(0.51, #7C92AE), to(#6c85a4)); color: #FFF; font-size: 18px; margin: 0; padding: 6px; text-align: center; li a border-bottom: 1px #CCC solid; color: #000; display: block; font-weight: bold; padding: 10px; text-decoration: none; ul list-style: none; margin: 0; padding: 0;

3 lectures/0/src0/cs76/css/lecture0.html <!-- lecture0.html David J. Malan malan@harvard.edu Represents a lecture. --> <link href="ios.css" rel="stylesheet"> <title>lecture 0</title> <h1>lecture 0</h1> <ul> <li><a href=" <li><a href=" </ul>

4 lectures/0/src0/cs76/css/lecturehtml <!-- lecturehtml David J. Malan malan@harvard.edu Represents a lecture. --> <link href="ios.css" rel="stylesheet"> <title>lecture 1</title> <h1>lecture 1</h1> <ul> <li><a href=" <li><a href=" </ul>

5 lectures/0/src0/cs76/css/lectures.html <!-- lectures.html David J. Malan malan@harvard.edu Links to lectures. --> <link href="ios.css" rel="stylesheet"> <title>lectures</title> <h1>lectures</h1> <ul> <li><a href="lecture0.html">lecture 0</a></li> <li><a href="lecturehtml">lecture 1</a></li> </ul>

6 lectures/0/src0/cs76/framework/index.html <!-- index.html David J. Malan malan@harvard.edu Demonstrates jquery Mobile. --> <link rel="stylesheet" href=" <script src=" <script src=" <title>csci S-76</title> <div data-role="page" id="menu"> <div data-role="header" data-theme="b"> <h1>csci S-76</h1> </div> <div data-role="content"> <ul data-role="listview" data-theme="c"> <li><a href="#lectures">lectures</a></li> <li><a href=" rel="external">syllabus</a></li> </ul> </div> </div> <div data-role="page" id="lectures"> <div data-role="header" data-theme="b"> <h1>lectures</h1> </div> <div data-role="content"> <ul data-role="listview" data-theme="c"> <li><a href="#lecture0">lecture 0</a></li> <li><a href="#lecture1">lecture 1</a></li>

7 lectures/0/src0/cs76/framework/index.html </ul> </div> </div> <div data-role="page" id="lecture0"> <div data-role="header" data-theme="b"> <h1>lecture 0</h1> </div> <div data-role="content"> <ul data-role="listview" data-theme="c"> <li><a href=" rel="external">slides</a></li> <li><a href=" rel="external">video</a></li> </ul> </div> </div> <div data-role="page" id="lecture1"> <div data-role="header" data-theme="b"> <h1>lecture 1</h1> </div> <div data-role="content"> <ul data-role="listview" data-theme="c"> <li><a href=" rel="external">slides</a></li> <li><a href=" rel="external">video</a></li> </ul> </div> </div>

8 lectures/0/src0/cs76/html/index.html <!-- index.html David J. Malan malan@harvard.edu A homepage for the course. --> <title>csci S-76</title> <h1>csci S-76</h1> <ul> <li><a href="lectures.html">lectures</a></li> <li><a href=" </ul>

9 lectures/0/src0/cs76/html/lecture0.html <!-- lecture0.html David J. Malan malan@harvard.edu Represents a lecture. --> <title>lecture 0</title> <h1>lecture 0</h1> <ul> <li><a href=" <li><a href=" </ul>

10 lectures/0/src0/cs76/html/lecturehtml <!-- lecturehtml David J. Malan malan@harvard.edu Represents a lecture. --> <title>lecture 1</title> <h1>lecture 1</h1> <ul> <li><a href=" <li><a href=" </ul>

11 lectures/0/src0/cs76/html/lectures.html <!-- lectures.html David J. Malan malan@harvard.edu Links to lectures. --> <title>lectures</title> <h1>lectures</h1> <ul> <li><a href="lecture0.html">lecture 0</a></li> <li><a href="lecturehtml">lecture 1</a></li> </ul>

12 lectures/0/src0/html5/app.html 1 1 <link rel="apple-touch-icon" href="custom_icon.png"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>harvard App</title> <body style="margin: 0"> <img alt="harvard Summer School" src="summer.png"/>

13 lectures/0/src0/html5/htmlhtml <title>html5</title> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur adipiscing dignissim. Aenean lectus erat, ornare ultrices pharetra ac, dignissim vel lacus. Vivamus turpis ante, lacinia placerat ultrices non, suscipit at arcu. Nullam ut fringilla eros. Curabitur tincidunt mollis libero cursus feugiat. Pellentesque tincidunt leo lectus, at feugiat sapien. In dignissim, risus vel faucibus sodales, mauris tortor imperdiet lorem, faucibus porta neque nulla facilisis urna. Donec risus leo, cursus vel cursus vel, luctus ut eros. </p> 1

14 lectures/0/src0/html5/inputs.html <title>tel</title> <form> <input autocapitalize="off" autocomplete="off" autocorrect="off" placeholder="text" type="text"/> <br/> <input autocapitalize="off" autocomplete="off" autocorrect="off" placeholder=" " type=" "/> <br/> <input autocapitalize="off" autocomplete="off" autocorrect="off" placeholder="url" type="url"/> </form>

15 lectures/0/src0/html5/sms.html <title>sms</title> <a href="sms: ">text someone</a>

16 lectures/0/src0/html5/tel.html <title>tel</title> <a href="tel: ">call someone</a>

17 lectures/0/src0/html5/viewport.html <title>viewport</title> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur adipiscing dignissim. Aenean lectus erat, ornare ultrices pharetra ac, dignissim vel lacus. Vivamus turpis ante, lacinia placerat ultrices non, suscipit at arcu. Nullam ut fringilla eros. Curabitur tincidunt mollis libero cursus feugiat. Pellentesque tincidunt leo lectus, at feugiat sapien. In dignissim, risus vel faucibus sodales, mauris tortor imperdiet lorem, faucibus porta neque nulla facilisis urna. Donec risus leo, cursus vel cursus vel, luctus ut eros.

18 lectures/0/src0/js/ajax0.html <!-- ajax0.html Gets stock quote from quote.php via Ajax, displaying result with alert(). David J. Malan malan@harvard.edu --> <script> // an XMLHttpRequest var xhr = null; /** * void * quote() * * Gets a quote. */ function quote() // instantiate XMLHttpRequest object try xhr = new XMLHttpRequest(); catch (e) xhr = new ActiveXObject("Microsoft.XMLHTTP"); // handle old browsers if (xhr == null) alert("ajax not supported by your browser!"); return; // construct URL var url = "quote.php?symbol=" + document.getelementbyid("symbol").value;

19 lectures/0/src0/js/ajax0.html // get quote xhr.onreadystatechange = handler; xhr.open("get", url, true); xhr.send(null); /** * void * handler() * * Handles the Ajax response. */ function handler() // only handle loaded requests if (xhr.readystate == 4) // display response if possible if (xhr.status == 200) alert(xhr.responsetext); else alert("error with Ajax call!"); </script> <title>ajax</title> <form onsubmit="quote(); return false;"> Symbol: <input autocomplete="off" id="symbol" type="text"/> <br/><br/> <input type="submit" value="get Quote"/> </form>

20 lectures/0/src0/js/ajaxhtml <!-- ajaxhtml Gets stock quote from quote.php via Ajax, embedding result in page itself. David J. Malan malan@harvard.edu --> <script> // an XMLHttpRequest var xhr = null; /** * void * quote() * * Gets a quote. */ function quote() // instantiate XMLHttpRequest object try xhr = new XMLHttpRequest(); catch (e) xhr = new ActiveXObject("Microsoft.XMLHTTP"); // handle old browsers if (xhr == null) alert("ajax not supported by your browser!"); return; // construct URL var url = "quote.php?symbol=" + document.getelementbyid("symbol").value;

21 lectures/0/src0/js/ajaxhtml // get quote xhr.onreadystatechange = handler; xhr.open("get", url, true); xhr.send(null); /** * void * handler() * * Handles the Ajax response. */ function handler() // only handle loaded requests if (xhr.readystate == 4) // embed respose in page if possible if (xhr.status == 200) document.getelementbyid("price").innerhtml = xhr.responsetext; else alert("error with Ajax call!"); </script> <title>ajax</title> <form onsubmit="quote(); return false;"> Symbol: <input autocomplete="off" id="symbol" type="text"/> <br> Price: <span id="price"><b>to be determined</b></span> <br/><br/> <input type="submit" value="get Quote"/> </form>

22 lectures/0/src0/js/ajaxhtml <!-- ajaxhtml Gets stock quote from Yahoo Finance via YQL using JSONP. David J. Malan --> <script> 1 1 /** * void 2 * quote() 2 * 2 * Gets a quote. 2 */ 2 function quote() 2 2 // construct URL 2 var url = " ad.finance.yahoo.com%2fd%2fquotes.csv%3ff%3dl1%26s%3d" + document.getelementbyid("symbol").value + "'&format=json&callback=handler"; // get quote via JSONP 3 var script = document.createelement("script"); 3 script.setattribute("src", url); 3 document.getelementsbytagname("head")[0].appendchild(script); /** 3 * void 3 * handler(response) 3 * 40. * Handles the JSONP response. 4 */ 4 function handler(response) 4 4 if (response.query.count === 1) 4 4 alert(response.query.results.row.price);

23 lectures/0/src0/js/ajaxhtml else alert("error in JSONP response!"); </script> <title>ajax</title> <form onsubmit="quote(); return false;"> Symbol: <input autocomplete="off" id="symbol" type="text"/> <br/><br/> <input type="submit" value="get Quote"/> </form>

24 lectures/0/src0/js/ajaxhtml <!-- ajaxhtml Gets stock quote from Yahoo Finance via YQL using JSONP with jquery. David J. Malan --> <script src=" 1 <script> 1 /** 2 * void 2 * quote() 2 * 2 * Gets a quote. 2 */ 2 function quote() 2 2 // construct URL 2 var url = " ad.finance.yahoo.com%2fd%2fquotes.csv%3ff%3dl1%26s%3d" + document.getelementbyid("symbol").value + "'&format=json&callback=handler"; // get quote via JSONP 3 $.ajax( 3 datatype: 'jsonp', 3 url: url 3 ); /** 3 * void 40. * handler(response) 4 * 4 * Handles the JSONP response. 4 */ 4 function handler(response) 4 4 if (response.query.count === 1)

25 lectures/0/src0/js/ajaxhtml alert(response.query.results.row.price); else alert("error in JSONP response!"); </script> <title>ajax</title> <form onsubmit="quote(); return false;"> Symbol: <input autocomplete="off" id="symbol" type="text"/> <br/><br/> <input type="submit" value="get Quote"/> </form>

26 lectures/0/src0/js/dom0.html <script> function greet() alert('hello, ' + document.getelementbyid('name').value + '!'); </script> <title>dom</title> <form id="demo" onsubmit="greet(); return false;"> <input id="name" placeholder="name" type="text"/> <input type="submit"/> </form>

27 lectures/0/src0/js/domhtml <title>dom</title> <form id="demo"> <input id="name" placeholder="name" type="text"/> <input type="submit"/> </form> <script> document.getelementbyid('demo').onsubmit = function() alert('hello, ' + document.getelementbyid('name').value + '!'); return false; ; </script>

28 lectures/0/src0/js/domhtml <script src=" <script> $(document).ready(function() $('#demo').submit(function() alert('hello, ' + document.getelementbyid('name').value + '!'); return false; ); ); </script> <title>dom</title> <form id="demo"> <input id="name" placeholder="name" type="text"/> <input type="submit"/> </form>

29 lectures/0/src0/js/geolocation0.html <script> function callback(position) alert(position.coords.latitude + ', ' + position.coords.longitude); function geolocate() if (typeof(navigator.geolocation)!== 'undefined') navigator.geolocation.getcurrentposition(callback); else alert('your browser does not support geolocation!'); </script> <title>geolocation</title> <body onload="geolocate()">

30 lectures/0/src0/js/geolocationhtml <script> function geolocate() if (typeof(navigator.geolocation)!== 'undefined') navigator.geolocation.getcurrentposition(function(position) alert(position.coords.latitude + ', ' + position.coords.longitude); ); else alert('your browser does not support geolocation!'); </script> <title>geolocation</title> <body onload="geolocate()">

31 lectures/0/src0/js/quote.php <?php /** * quote.php * * Outputs price of given symbol as text/html. * * David J. Malan * malan@harvard.edu */ // get quote $handle "r"); if ($handle!== FALSE) $data = fgetcsv($handle); if ($data!== FALSE && $data[0] == "N/A") print($data[1]); fclose($handle);?>

32 lectures/0/src0/js/storage.html <script> function greet() if (typeof(localstorage)!== 'undefined') if (typeof(localstorage['counter']) === 'undefined') localstorage['counter'] = 0; alert('you have visited ' + localstorage['counter'] + ' time(s) before!'); localstorage['counter']++; else alert('your browser does not support localstorage!'); </script> <title>storage</title> <body onload="greet()">