Creating your first app step by step

Posted date: 6/20/2015

JavaScript Studio lets you create apps coding JavaScript, in this tutorial we will create a new app using the Empty App template to create a new app follow the next steps
Nonte:There is no difference on JavaScript Studio for Windows Phone and JavaScript Studio for Windows.
If you have not downloaded javascript studio please go to Download JavaScript Studio Page

Open JavaScript Studio
The start page will appear
Tap (click) Empty App
A new window will open, this window is the editor page where you will write the code for your app.
Tap (click) Save App Button to save your app, write a name 'My first app' and Tap 'Save Now' Button.
If you Tap Run Button now the app will show the basic navigation as the next image.

Tap 'Back to code' Button to open the editor again.

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

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 and for you PC even is free.. I hope you find it useful.

Arrowat MSDN Bing Github Twitter Facebook Linkedin