Creating your first app step by step

-In this tutorial we use JavaScript Studio for Android, you can use the version for Windows 10 too. If you don't have the app, please go to the download page and install it.

JavaScript Studio lets you create apps coding JavaScript, in this tutorial we will create a new app using the Blank App template to create a new app follow the next steps.


  1. Open JavaScript Studio
    You will see the start Page

    Start page


  2. Tap (click) Menu and then New App


    Tap Blank App


    A new window will open, this window is the editor page where you will write the code for your app.



  3. Tap (click) Save App Button to save your app, write a name 'My first app' and Tap 'Save' Button.
Now you have created, saved and tested the app is time to code something using JavaScript. Before to continue look at the following code that is already written in the app and delete it, because we don't need the navigation part by now.

<nav>
<ul>
<li><a href='#'>Navigation 1 </a></li>
<li><a href='#'>Navigation 2 </a></li>
<li><a href='#'>Navigation 3 </a></li>
</ul>
</nav>

Tap 'Save Changes' button to save the changes you have made.

Personal Info

Now we are going to start a small app code, we will ask the person who use our app his/Her Name, Last Name and we will return the full name and description provided.
Locate the following HTML tags <article> </article>
Write the following code

<article>
<p>Write your Name </p>
<input type='text' id='nametxt' />
<p>Write your Last Name</p>
<input type='text' id='lastnametxt' />
<p>Age</p>
<select id='ageselect'> </select>
<p id='personinfo'> </p>
<input type='button' id='showinfobtn' onclick='showInfo()' value='Show Info' />
<script>
var getName = document.getElementById('nametxt');
var getLastName = document.getElementById('lastnametxt');
for (var i = 0; i < 80; i++) {
var ageOption = document.createElement('option');
ageOption.text = i;
this.ageselect.add(ageOption);
};
this.ageselect.selectedIndex = 7;
function showInfo() {
this.personinfo.innerText = 'Hello ' + getName.value + ' ' + getLastName.value + ' you are ' + this.ageselect.selectedIndex + ' years old'; }
</script>
</article>
Now Tap 'Save Changes' button. That's our first app using JavaScript Studio. Tap 'Run' button to see a preview of the app.
Close the editor page and go to the Start page, there you will see the app you created 'My first app' in the section 'Apps'. Tap the app name to open it, write your Name and your last Name, Select an Age then tap 'Show info' button to see the info you provided. The following image shows the app in action.

JavaScript Studio is a great tool for your Windowsphone, Android phone and for your PC. I hope you find it useful.

Posted date: 03/27/2018
Author: Melvin Dev
Twitter: @melvindevdotcom



Help Privacy Twitter Facebook

© 2018 Melvin Dev