HTML/Javascript Cockpit of Web Applications Home Tutorial

HTML/Javascript Cockpit of Web Applications Home Tutorial

HTML/Javascript Cockpit of Web Applications Home Tutorial

Yesterday ticked all the boxes with our Cockpit Feel web application to suggest that it is now an excellent candidate to be the designated Home Page for a web browser, as it could be the tailorable “web application central” as you enter the web browser for the first time. The Home Page of a web browser can have that important reminder functionality for how you communicate, or do your work and/or collaborate, or perform tasks, or monitor goings-on.

Yesterday’s work meant that you can send a …

  • web browser address bar URL with an established list of web applications you want to open … and/or …
  • cut down web browser address URL ( ie. just //www.rjmprogramming.com.au/HTMLCSS/cockpit_feel.html ) … and let the cookies you have previously set, or not, determine what happens … thing about this is that Safari could have a different set of web applications to Internet Explorer to Firefox to Opera to Google Chrome etcetera etcetera etcetera

The thing is, we often put our favourite Search Engine URL as our web browser’s Home Page, and am not suggesting otherwise, except that these days there are so many shortcut or menu methods of getting to your favourite Search Engine that maybe what is better to put as your web browser Home Page is something more tailored to your actual use, and in any case, one of those web applications could be that favourite Search Engine, anyway.

Today’s tutorial picture URL, for example, is //www.rjmprogramming.com.au/HTMLCSS/cockpit_feel.html?url1=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FSunAngle%2Fsun_angle_now_at.php%3Fdone%3Dy%26nowo%3Dy%26latd%3D-33%26latm%3D52%26lats%3D0%26longd%3D151%26longm%3D12%26longs%3D0%26from%3Dfrom%26country%3DAUSTRALIA%26place%3DSydney%23iframe&url2=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FMoonAngle%2Fmoon_angle_now_at.php%3Fdone%3Dy%26nowo%3Dy%26latd%3D-33%26latm%3D52%26lats%3D0%26longd%3D151%26longm%3D12%26longs%3D0%26from%3Dfrom%26country%3DAUSTRALIA%26place%3DSydney%23nomore%23iframe&url3=&url4=&url5=&url6=&url7=&url8=&url9= … representing a look at Sun Angle and Moon Angle for Sydney, Australia … and you can see that if you pick a web application from this www.rjmprogramming.com.au domain, you can use the suffix #iframe to say that the web application should “live” in an HTML iframe element.


Previous relevant HTML/Javascript Cockpit of Web Applications Form Tutorial is shown below.

HTML/Javascript Cockpit of Web Applications Form Tutorial

HTML/Javascript Cockpit of Web Applications Form Tutorial

Today’s Cockpit Feel web application adds functionality along with yesterday’s pre-existing …

  • Javascript DOM document.write() method nesting …
  • Javascript prompt() window method

… way that asks for input from the user in that old interactive desktop command line application feeling kind of way, an …

… method, the more usual web application way of asking for user input.

Most websites present interactive input in an HTML form for a few reasons (we can think of) …

  • everything that will be asked can be there on the webpage (so that you know what is coming)
  • HTML form elements can direct the web traffic from one web page to the next via HTML input type=’submit’ buttons teamed with HTML form action=[Url] arrangements
  • validation of this user entered data can be validated at the one place (via the HTML form onsubmit event we’ve talked about before), and the HTML5 input element type has several self-validating types (like type=’url’ that we make use of today)
  • huge amounts of user entered data can make use of the HTML form method=’POST’ as necessary, though today we use method=’GET’ for the amounts of data we have and in order to remain with client side programming (method=’POST’ needs server side programming intervention)
  • uploading of files is possible via HTML form element

The concept today remains simple …

  1. take the same 3×3 grid (to the beach this time, because yesterday they enjoyed the zoo so much (they’d like you to know))
  2. check for cookie data and $_GET[] parameters for any/all of the 3×3 and if found get (up to 9) URLs from this data, else document.write(prompt()) for the information interactively, storing good ideas in cookies for either of the two modes of display … that being …

… so that the next time the user runs the same web application, and they have not cleared their cookies out in the meantime, this same configuration of use, personalized to them and the web browser they’re using, will happen.

Again, regarding research and development we’d like to thank “JavaScript & Ajax” seventh edition by Tom Negrino and Dori Smith for the great code regarding cookies.

The HTML and Javascript source code you could call cockpit_feel.html (changed for HTML form functionality in this way) for which you can use this live run link. If you want to simulate the tutorial picture “Cockpit” today try this link. We hope some/all/grid-maintenance information helps today.


If this was interesting you may be interested in this too.


Previous relevant HTML/Javascript Cockpit of Web Applications Primer Tutorial is shown below.

HTML/Javascript Cockpit of Web Applications Primer Tutorial

HTML/Javascript Cockpit of Web Applications Primer Tutorial

Today’s web application continues our interest in …

  • Javascript DOM document.write() method nesting …
  • Javascript prompt() window method

… to give that old interactive desktop command line application feel that many of the “senior citizens” (should we diplomatically say) of the web world, may still secretly gravitate towards?!

Okay … who are the closet interactive desktop command line application lovers out there? … Come on … you know who you are?!

But we digress … so today, we have a web application a bit like a dashboard, a bit like a cockpit (we’ve called it) … though the looks aren’t as good at this stage. Nevertheless, maybe it has a feel of a widget to it as well, because today we only use HTML, making use of cookies to do away with the need for a serverside language like PHP, which could have done the job as well. But not everybody has PHP? Right …

… left …

Damn! Those pesky psychological tests!

The concept today is very simple …

  1. take a 3×3 grid (to the zoo would be nice)
  2. check for cookie data for any/all of the 3×3 and if found get (up to 9) URLs from this data, else document.write(prompt()) for the information interactively, storing good ideas in cookies for either of the two modes of display … that being …

… so that the next time the user runs the same web application, and they have not cleared their cookies out in the meantime, this same configuration of use, personalized to them and the web browser they’re using, will happen.

Regarding research and development we’d like to thank “JavaScript & Ajax” seventh edition by Tom Negrino and Dori Smith for the invaluable code regarding cookies, and an interesting sideline, which we ended up not perusing, but is active in your *._GETME file today, to show you what is possible comes from this useful website … thanks.

The (purely) HTML and Javascript source code you could call cockpit_feel.html for which you can use this live run link. If this helps then we’re happy.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , . Bookmark the permalink.

16 Responses to HTML/Javascript Cockpit of Web Applications Home Tutorial

  1. Leigh Ojala says:

    Some genuinely nice and utilitarian information on this web site, likewise I conceive the style and design has got superb features.

  2. I’ve been browsing online more than three hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. In my opinion, if all site owners and bloggers made good content as you did, the net will be much more useful than ever before.

  3. Thank you for the sensible critique. Me and my neighbor were just preparing to do some research on this. We got a grab a book from our local library but I think I learned more clear from this post. I’m very glad to see such wonderful information being shared freely out there.

  4. health care says:

    I‘¦ve recently started a web site, the info you offer on this website has helped me tremendously. Thank you for all of your time & work.

  5. IÒ€ℒm impressed, I ought to say. Genuinely rarely will i encounter a weblog thatÒ€ℒs both educative and entertaining, and let me let you know, you can have hit the nail about the head. Your concept is outstanding; the catch is something that not enough folks are speaking intelligently about. I am really happy which i discovered this at my seek out some thing concerning this.

  6. I appreciate, result in I found exactly what I was looking for. You have ended my four day long hunt! God Bless you man. Have a great day. Bye

  7. HOME ADVISOR says:

    Ò€œItÒ€ℒs always great to learn guidelines like you share for weblog posting. As I just started posting comments for weblog and facing problem of lots of rejections. I believe your suggestion would be useful for me. I will let you know if its function for me too.Ò€

  8. I savour, lead to I discovered just what I used to be looking for. You’ve ended my 4 day long hunt! God Bless you man. Have a great day. Bye

  9. electroni cigarettes says:

    Thank you for the sensible critique. Me and my neighbor were just preparing to do somewhat research about this. We got a grab a book from our area library but I believe I discovered more clear from this post. I’m extremely glad to see such wonderful info becoming shared freely out there.

    http://laying-laminate.ru/user/johnopera46/

  10. I‘¦m now not positive where you are getting your info, however great topic. I needs to spend some time finding out more or understanding more. Thank you for great info I was in search of this information for my mission.

  11. Automotive says:

    Thank you for every other excellent article. The place else may anybody get that type of info in such a perfect method of writing? I’ve a presentation subsequent week, and I’m at the search for such information.

  12. Automotive says:

    I must convey my passion for your kindness in support of persons that really want help with that theme. Your special dedication to getting the solution all through had become extremely practical and have continually made those just like me to arrive at their dreams. Your personal useful publication means a lot to me and far more to my mates. Thank you; from all of us.

  13. Automotive says:

    you’re truly a good webmaster. The site loading pace is amazing. It sort of feels that you’re doing any distinctive trick. Furthermore, The contents are masterpiece. you have done a fantastic job on this matter!

  14. You can certainly see your skills within the paintings you write. The world hopes for more passionate writers such as you who aren’t afraid to say how they believe. All the time follow your heart.

  15. I have been exploring for a bit for any high-quality articles or blog posts on this sort of space . Exploring in Yahoo I ultimately stumbled upon this site. Studying this information So i am satisfied to exhibit that I have a very good uncanny feeling I found out just what I needed. I most indubitably will make sure to don‘¦t overlook this website and provides it a glance on a relentless basis.

  16. Matt Rardon says:

    Thank you of this blog. That’s all I’m able to say. You undoubtedly have made this web web site into an item thats attention opening in addition to critical. You certainly know a fantastic deal of about the niche, youve covered a multitude of bases. Fantastic stuff from this the main internet. All more than again, thank you for the blog.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>