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.
<!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.
Tagged: