Creating your first app step by step

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

✨

If you are new to JavaScript programming, you can read our free JavaScript Tutorial where you will learn how to code JavaScript.

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.

Open JavaScript Studio, you will see the Start Page
Tap 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.
Tap Save App button, 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.

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.

Write or copy 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' />
<meta name="theme-color" content="#808080" />
<meta name="navigation-bar-button-color" content="#808080" />
<meta name="navigation-bar-button-border-color" content="#ffffff" />
<meta name="navigation-bar-button-hasshadow" content="true" />
<style>
body {
	font-family: Verdana, sans-serif;
	font-size: 0.8em;
	margin: 20px;
	background-color:gray

}

input[type=button]{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding:5px 25px ;
	color:white
}

input[type=text],textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input,select{
	border-radius:5px;
	box-shadow:0px 0px 3px 1px white;

	border:none;
	border-radius:5px;
	font-style:bold;
	font-size:25px;
	padding:5px;

}
input[type=text],input[type=date]{
	width:100%;
}

article{
	background-color:gray; 
	border-radius:5px;
	box-shadow:0px 0px 20px 1px white;
	padding:20px;
	max-width:480px;
	margin:auto;
	margin:auto;
	margin-top:40px; 
	color:white;
	font-size:25px 
}

</style>
</head>
<body>
<header>


</header>
<nav>

</nav>
<section>

<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>

</section>

<footer>

</footer>
</body>
</html>

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, Pull to refresh the app list, there you will see the app you created 'My first app' in the section 'Apps'.

Tap the Run button 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 images show the app in action.

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

Posted date: 03/27/2018
Updated date: 10/05/2020
Author: Melvin Dev
Twitter: @melvindevdotcom

About the author

Melvin Dev

This documentation has been written by Melvin Dev, Melvin Dev is a founder and developer of Arrowat LLC.