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             document.write

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

    <script language="javascript">
      function showMessage()
        document.getElementById('endDiv').innerHTML = 
          "You are useing javascript, document.getElementById('endDiv').innerHTML"; 
    </script>            onClick function                  pop dialog window                       var as variable                       else and if statement                         for statement                     while statement                                     remove div element                   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 🙂          

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.               local storage (save item) list stays active even after closing and opening browser              transition on click (need to open in safari)             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

with result:

Here are my steps of modification:


Leave a Reply

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

You are commenting using your 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: