More javascript and local storage

In this stage I was quite happy with my result, though I copied javascript examples from different tutorials. I have also made some slight modification to code and have tried to understand and read  a code as this is main purpose, learn it, so I could use it in a future again without any difficulties.  Despite my satisfaction, I wasn’t keen on just copying javascript, so I went through more simple tutorials to get basic knowledge and rules of javascript language, what I sreally should do at the first place.

First main source of javascript tutorials was translated version of book:  Ajax Bible, Steven Holzner, 2007

term AJAX means Asynchronous JavaScript and XML   –  so we can talk about combination of javascript and XML. All those examples are too advanced for my skills, so I went along only with javascript chapter. Here are some examples I have managed to work so far:

If you are looking at the examples in safari browser hit ctrl+alt+u on PC and cmd+alt+u Mac to view source code for individual example and see difference

http://www.boristav.sk/_sub/jakub/ajax/chapter2/message.html             document.write

<script language="javascript">
      document.write("You are useing javascript, document.write"); 
    </script>

http://www.boristav.sk/_sub/jakub/ajax/chapter2/message2.html           document.getElementById   /  different approach

    <script language="javascript">
      function showMessage()
      {
        document.getElementById('endDiv').innerHTML = 
          "You are useing javascript, document.getElementById('endDiv').innerHTML"; 
      }
    </script>

http://www.boristav.sk/_sub/jakub/ajax/chapter2/button.html            onClick function

http://www.boristav.sk/_sub/jakub/ajax/chapter2/dialog.html                  pop dialog window

http://www.boristav.sk/_sub/jakub/ajax/chapter2/var.html                       var as variable

http://www.boristav.sk/_sub/jakub/ajax/chapter2/else.html                       else and if statement

http://www.boristav.sk/_sub/jakub/ajax/chapter2/for.html                         for statement

http://www.boristav.sk/_sub/jakub/ajax/chapter2/while.html                     while statement

http://www.boristav.sk/_sub/jakub/remove/index.html                                     remove div element

http://www.boristav.sk/_sub/jakub/ajax/chapter3/svacina.html                   combination of javascript and XML file.

Where button menu1 call for menu1 list from menu1.xml and btn menu2 call menu2 list from menu2.xml

Also I was aware of phonegap book for beginners. Luckily I managed to find free pdf version, but with lots of mistakes in code, so not all of the examples worked well.

This is not a free 🙂                    http://www.amazon.com/PhoneGap-Beginners-Guide-Andrew-Lunny/dp/1849515360

example of the mistakes on pages 62/63, phonegap_for_beginners.pdf

<div id=»main»>                                                                                                                           <div id=”main”>
<h1>List Some Food</h1>
<form id=»foodForm»>                                                                                                             <form id=”foodForm”>

document.addEventListener(«DOMContentLoaded», function () {                        document.addEventListener(“DOMContentLoaded”, function () {
var foodList = document.getElementById(‹foodList’);                                                 var foodList = document.getElementById(‘foodList’);

These mistakes are easily spotted as I am familiar with this/similar code now and also I have to mention safari – web inspector (firefox – firebug), which was very helpfull in determining javascript bugs. But there are sections of code I do not understand, so it’s difficult for me to experiment with those advanced tutorials.

Here is few of those examples from a book I managed to run successfully.

http://www.boristav.sk/_sub/jakub/phonegapexamples/chapter3/               local storage (save item) list stays active even after closing and opening browser

http://www.boristav.sk/_sub/jakub/phonegapexamples/chapter4/              transition on click (need to open in safari)

http://www.boristav.sk/_sub/jakub/phonegapexamples/chapter5/             last added item is highlited in bold white colour.  red x button fo removing an item doesnt work

Thanks to those few examples I have decided to implement interaction within one of the game rule, where you will be able to add/edit/remove your own rules. Idea is there, although I haven’t got right code for it. Also its impossible to write a code just myself. Luckily I found great tutorial for local storage. It was exactly what I was looking for http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application

with result:   http://static.diveintojavascript.com/files/tutorials/web-storage-contacts/contacts.html

Here are my steps of modification:

  1. http://www.boristav.sk/_sub/jakub/phonegapexamples/locstor2/
  2. http://www.boristav.sk/_sub/jakub/phonegapexamples/locstor3/
  3. http://www.boristav.sk/_sub/jakub/phonegapexamples/locstor4/
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: