Using files as data information in JavaScript Studio

Posted date: 5/31/2016

JavaScript studio supports File Creation and File Reading, you can create files and read it back using a simple Code in your HTML code, I'm going to create an example in how to use Files to save and read information, if you want to know how to create files and read it back step by step see Creating and Reading files using Javascript Studio

If you have not downloaded JavaScript Studio App yet. You can download it from Windows Store
Click one of the following options.

Creating Contacts App

Open JavaScript Studio Pro
Click On Menu
Create New App
Tap Blank App
Write the following code
<!DOCTYPE html> <html lang='en'> <head> <title>My App Title</title> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no' /> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } table{ margin-top:5px } .style1{ font-size:25px } .style2{ background:cornflowerblue; width:400px; } .style3{ margin:20px } </style> </head> <body>  <header></header> <section class='style1 style2'> <article class='style3'> Find Contact? <br/> <input type='text' id='findtxt' class='style1'/> <input type='button' value='Find' onclick='getContact()' class='style1'/> <br/> Find by <br/> <select id="findoptions" class='style1'> <option value="FirstName">First Name</option> <option value="LastName">Last Name</option> <option value="Telephone">Telephone</option> </select> <table id='result'></table> <br/> </article> <script> <ShowFileContentHere/> function getContact(){ var s=document.getElementById('findtxt'); this.result.innerHTML= SearchContact(s.value,findoptions.options[findoptions.selectedIndex].value) ; } </script> </section> <footer></footer> </body> </html>
Save app with the name Contacts
We are going to create a File that will hold the contacts information and the script code.
Tap File from the editor Menu.

Tap New File

Save the File as ContactsData

Write the following code in the file page
var contactInformation={FirstName:[],LastName:[],Telephone:[]}; function AddContact(name,lastname,telephone){ contactInformation["FirstName"].push(name) contactInformation["LastName"].push(lastname) contactInformation["Telephone"].push(telephone) } AddContact("Maria","Hernandez","213-0010150"); AddContact("Lissa","Aguirre","235-4007000"); AddContact("Alonso","Hernandez","213-2500120"); AddContact("Amy","Rodriguez","210-0002001"); AddContact("Leo","Sandoval","210-0002001"); //--------------------------------------------------- var msg="<p style='margin:15px'>Cannot find the Contact</p>" //--------------------------------------------------- var tableheader="<tr style='background-color:steelblue;color:white'><td>Name</td> <td>Last Name</td><td>Telephone</td></tr>" function SearchContact(findvalue,findby){ if(findby=="FirstName"){ var result=''; for (var i = 0; i < contactInformation["FirstName"].length; i++){ if( contactInformation["FirstName"][i].toLowerCase()==findvalue.toLowerCase()){ result +='<tr><td>' + contactInformation["FirstName"][i] + '</td> '+ ' <td>' + contactInformation["LastName"][i] + '</td>'+ '<td>' + contactInformation["Telephone"][i] +'</td>' +'<tr/>'; } } if(result !=""){ return tableheader + result }else{ return msg; } } //--------------------------------------------------- if(findby=="LastName"){ var result=''; for (var i = 0; i < contactInformation["LastName"].length; i++){ if( contactInformation["LastName"][i].toLowerCase()==findvalue.toLowerCase()){ result +='<tr><td>' + contactInformation["FirstName"][i] + '</td> '+ ' <td>' + contactInformation["LastName"][i] + '</td>'+ '<td>' + contactInformation["Telephone"][i] +'</td>' +'<tr/>'; } } if(result !=""){ return tableheader + result }else{ return msg; } } //--------------------------------------------------- if(findby=="Telephone"){ var result=''; for (var i = 0; i < contactInformation["Telephone"].length; i++){ if( contactInformation["Telephone"][i].toLowerCase()==findvalue.toLowerCase()){ result +='<tr><td>' + contactInformation["FirstName"][i] + '</td> '+ ' <td>' + contactInformation["LastName"][i] + '</td>'+ '<td>' + contactInformation["Telephone"][i] +'</td>' +'<tr/>'; } } if(result !=""){ return tableheader + result }else{ return msg; } } }

It looks like the following image and then tap
Save Changes

Tap Back To Code
Tap Run to see The Contact App Working.

There are some important parts on the app that allows us to read files and show the content in any part of the app.

All file content will be reading at Run-time app.
The  allows to read a file, in this app the file is ContactsData and can be added in any part of the HTML code
All File content that we are reading will be shown in <ShowFileContentHere/> tag, Since the ContactsData file contains JavaScript Code only and we want to use it as reference from the HTML code when we click the Find Button we have to add the <ShowFileContentHere/> inside of the Script tag, that's why we have the following code in the app <script> <ShowFileContentHere/> function getContact(){ var s=document.getElementById('findtxt'); this.result.innerHTML= SearchContact(s.value,findoptions.options[findoptions.selectedIndex].value) ; } </script>

I hope you get the idea how to use JavaScript Studio app and how it can helps you using Files

Arrowat MSDN Bing Github Twitter Facebook Linkedin