HTML5 Tutorial6: Javascript Making onscreen buttons that will make a pop-up box and open up webpages

Ok guys if your new to HTML I suggest you do at least part 1&2 before going into this one. In this tutorial we will make 2 onscreen buttons , one of them when pressed will give a pop-up alert to engage user and the other button will open up a webpage. Ok as you already know lets set up a basic HTML document. Source code can be downloaded at the end of tutorial.

<!DOCTYPEhtml>
<head>
</head>
<body>
</body>
</html>

Alright now the first thing we will do is make a function() . We will put the function() in between the <head> tags.

<!DOCTYPEhtml>
<head>

<script>
function clicker()
{
alert("Hello there");
}

</script>

</head>
<body>
</body>
</html>

<script> this tells the computer or mobile device that we will be using javascript. <script> goes in the top before starting
javascript and </script> goes at the end of javascript.

function clicker()
{
place function code here, then end it with ;
}
function -- tells the computer that you will be making a function .
clicker() -- you can put any name you want plus () . For this example I used the word clicker.

Alert("Hello there");
This tells computer that when the function is called to make a pop-up box with the words
 "hello there" . You can change the words inside the bracket to whatever you like.

Ok now we will be adding the buttons

<!DOCTYPEhtml>
<head>

<script>

function clicker()
{
alert("Hello there");
}
</script>

</head>
<body>
<button type="button" onclick="clicker()">Click Me
</button>
</br>
</br>
<button type="button"
onclick=location.href="http://androidfreegamesapps.forumotion.com/">
Visit Webpage</button>


</body>
</html>

Ok now to make a basic button the code is this with no functionality.
The word >Click Me< can be changed to your liking.

<button type="button">Click me</button>

Now we added the command called onclick="" this tells the device that the button is clickable
and what is in the "" will be executed .

<button type="button" onclick="clicker()">Click Me</button>

Now you see the function we made will be called once we click the button in the app.
Now on the the webpage opening.

<button type="button" onclick=location.href="http://androidfreegamesapps.forumotion.com/">Visit Webpage</button>

The command location.href="" is used to tell the device to open a webpage if the button is clicked.

Ok that wraps it up make sure you went slowly and didnt miss anything. Now run it in your computer!!
As always I have included source code  file you can download it here on sourceforge

http://sourceforge.net/projects/andromoapps/files/buttonchecker.html/download

Any questions please don't be shy ,no question is a stupid question only the one that is not asked. I look forward to
hearing your feedback.

Sign In or Register to comment.