{"id":10560,"date":"2015-01-09T05:05:31","date_gmt":"2015-01-08T18:05:31","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10560"},"modified":"2015-01-09T05:05:31","modified_gmt":"2015-01-08T18:05:31","slug":"windows-onunload-event-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/windows-onunload-event-primer-tutorial\/","title":{"rendered":"Windows Onunload Event Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onunloadevent.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Windows Onunload Event Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onunloadevent.jpg\" title=\"Windows Onunload Event Primer Tutorial\" id='azxcv'   style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Windows Onunload Event Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rotate3d.html'>tutorial<\/a> looks at creating a Speed Reading game by using the <i>&#8220;dreaded&#8221;<\/i> window.onunload event &#8230; <i>&#8220;dreaded&#8221;<\/i> because so many websites have misused it to harrass users as they shape to leave a webpage with onunload event logic that makes it difficult to leave.   However, the onunload window event can be used to time a window.open popup window, which we do today for useful effect with our game, where the time the user takes to read a small phrase is reflected by the length of time a popup window stays open.  A first snapshot time is taken as the window loads and the parent sets up the popup window&#8217;s onunload event to take another snapshot time then, and calculate that time to read the phrase as the time difference between these two times.  Give the user some points to start, and encourage them to <i>&#8220;stay positive&#8221;<\/i> for as many goes as they can &#8230; and &#8230; voila &#8230; a game making useful use of the window onunload event.<\/p>\n<p>Generally speaking, though, it is best not to use the window onunload event, because of the history of its use on the net &#8230; sad to say.<\/p>\n<p>For today&#8217;s tutorial also made big use of the Javascript function <a target=_blank title='Javascript function window.open() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp'>window.open()<\/a> as well as <a target=_blank title='Javascript string function document.write() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_doc_write.asp'>document.write()<\/a>.   Using popup windows here, unfortunately, right now, it may not suit iPhone or iPad or Android usage, and some web browsers you are using may be set to decline this functionality &#8230; but &#8230; it is specifically a popup window we want to time with our onunload event.<\/p>\n<p>You can download source code and rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onunloadevent.html_GETME' title=\"onunloadevent.html\">onunloadevent.html<\/a> as you see fit.<\/p>\n<p>Thanks to the <a target=_blank title='Ideas from the Huffington Post ... thanks' href='http:\/\/www.huffingtonpost.co.uk\/stephen-hamilton\/27-annoying-sayings-and-phrases_b_5129083.html'>Huffington Post<\/a> for some of the sayings used in the code above.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d10560' onclick='var dv=document.getElementById(\"d10560\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d10560' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s tutorial looks at creating a Speed Reading game by using the &#8220;dreaded&#8221; window.onunload event &#8230; &#8220;dreaded&#8221; because so many websites have misused it to harrass users as they shape to leave a webpage with onunload event logic that makes &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/windows-onunload-event-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,13,14,15,37],"tags":[396,400,476,576,874,939,997,1092,1319],"class_list":["post-10560","post","type-post","status-publish","format-standard","hentry","category-elearning","category-esl","category-event-driven-programming","category-games","category-tutorials","tag-esl","tag-event","tag-game","tag-html","tag-onunload","tag-phrase","tag-programming","tag-sayings","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/10560"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=10560"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/10560\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=10560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=10560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=10560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}