Javascript: Variables

This entry is part 6 of 27 in the series Javascript Tutorial

<!DOCTYPE html>
<html>
 <body>
 <h1>Second JavaScript Program</h1>
 <p>Click the button to change the sentence</p>
 <p id="second">Second Program</p>
 <button type="button" onclick="myFunction()">Try it</button>
 <script>
    function myFunction() {
          var new_string = "This is my second Javascript program";
          document.getElementById("second").innerHTML = new_string;
 }
 </script>
 </body>
</html>

button

In this example, we introduce a variable called new_string.

var new_string = "This is my second Javascript program"

We first assign a sentence to new_string, update the paragraph with id=”second” with new_string.

document.getElementById("second").innerHTML = new_string;

Javascript: HTML DOM

This entry is part 23 of 27 in the series Javascript Tutorial

The Document Object Model (DOM) is a programming API for HTML.  It defines the logical structure of documents and the way a document is accessed and manipulated.

With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content.  And in this case, we are talking about modifying the content of the HTML elements.

In the earlier examples, there were 2 examples where we have used Javascript to find and access HTML elements.

  1. getElementById
  2. getElementsByName

We have used the above 2 methods to access a particular HTML element and make changes or updating the content in the element.

Javascript: If Else

This entry is part 15 of 27 in the series Javascript Tutorial

The If…Else… statement in Javascript is similar to other programming languages such as C.

It will first check if a condition is true and will execute a block of code if the condition is met.

<!DOCTYPE html>
<html>
<head>
 <title>If Else</title>
 <script>
 function myFunction() {
   var passing_score = 60;
   var your_score = 70;
   if (your_score > passing_score) {
      document.getElementById("str1").innerHTML = "You have passed";
      } else {
      document.getElementById("str1").innerHTML = "You failed";
      }
    }
 </script>
</head>
 <body>
  <p id="str1">Passed or failed</p>
  <br>
  <button onclick="myFunction()">Click Me</button>
 </body>
</html>

button

As your_score, which is 70 is greater than passing_score which is 60, the first condition is output in the browser.

In the fiddle, you can try changing the value for passing_score or your_score to see what is output in the browser.

jQuery Mobile: Mobile App Development

This entry is part 1 of 73 in the series jQuery Mobile

If you are new to app development, you might be surprised to learn that it is possible to develop touch based app using HTML5.

Apps developed using HTML5 are the so called non-native app as it actually depends on webview to display the web pages.

Webview is part of the Android or iOS class activity. All that webview does is actually to display a web page.

For an app to access the native tools such as camera or GPS built inside a phone or tablet, most people would rely on phonegap, a framework that allow developers to wrap the app for running in Android or iPhone.

So in a way, you could say Javascript + HTML5 + phonegap = Mobile Apps.

PHP: Passing variables from Javascript to PHP

This entry is part 54 of 54 in the series PHP Tutorial

Javascript is a client side programming language and it can’t interact with server side database such as MySQL.

If you are developing HTML 5 apps for Andoid or IOS, you will have to save some inputs into the database.  To store data, you can always pass them into php and store them using PHP.

A common technique is to use AJAX is illustrated by the example below.

ajax.html
<html>
<head>
    <script>
        function submitForm(form)
        {
            var text_input = form.inputbox.value;

            var xmlhttp=new XMLHttpRequest();

            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("text_id").innerHTML=xmlhttp.responseText;
                }
            }            
            xmlhttp.open("GET","get.php?str="+text_input,true);
            xmlhttp.send();
        }
    </script>
</head>

<body>
<form>Enter something in the box: <br><br>
    <input type="text" name="inputbox" value=""><P>
        <input type="button" name="button" value="Click" onClick="submitForm(this.form)">
</form>
<p id="text_id">Input your name to get a response from server</p>
</body>
</html>

get.php:

<?php
$name = $_GET['str'];
echo 'Hello ' . $name . '!';
?>

Put the above 2 files, ajax.html and get.php in the same directory and run ajax.html.

You can try it here.

In the line

xmlhttp.onreadystatechange=function(){}

We put the browser in a ready state to receive a response from the server.

We then send a request to the server using:

xmlhttp.open("GET","get.php?str="+text_input,true);
xmlhttp.send();

The syntax for the method is open(method,url,async)

Method is either in post or get method, we are using get method which is faster and simpler.

async needs to be set to true to enable asynchronous rather than synchronous.

The variable will be passed into the get.php script and store as $name variable.  We can then input the $name variable into MySQL if needed.