Create your first Windows Store app using JavaScript

  • [アーティクル]

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Follow this tutorial series to learn how to use JavaScript with HTML5 and Cascading Style Sheets (CSS) to create Windows Store apps.

To download the accompanying sample, see Getting started with JavaScript: Complete code for the tutorial series.

In this section

Topic Description

Part 1: Create a "Hello, world!" app

Start here to create your first app, a simple "Hello, world" app that displays a personalized greeting. Learn how to:

  • Create a new project
  • Add HTML content to your start page
  • Handle user input from touch, pen, or mouse
  • Switch between the light and dark style sheets
  • Create your own custom styles
  • Use a Windows Library for JavaScript control

Part 2: Manage app lifecycle and state

You can launch several apps and switch between them without having to worry about slowing down the system or running the battery down. That's because the system automatically suspends (and sometimes terminates) apps that are running in the background for you. A well-designed app can be suspended, terminated, and relaunched by the system and seem as though it were running the entire time.

In Part 2 of this tutorial series, you update your "Hello, world" app to respond to lifecycle events and save user and session data.

Part 3: PageControl objects and navigation

The "Hello, world" app that you created in the previous tutorials contains a single page of content, but most real-world apps will contain several pages. In this tutorial, you copy the code from your "Hello, world" app into a new app that uses the Navigation App template, and then you add an additional page and enable navigation between the app's pages.

Part 4: Layout and orientation

In this tutorial, we go over the basics of creating a user interface in HTML and CSS. To learn these basics, you create a simple photo viewer that lets the user pick an image from their Pictures, and then it shows the image and some info about the image file. For this tutorial, we start from scratch with a new app.

Part 5: File access and pickers

In this tutorial, you add functionality to the app you created in Part 4: Layout and views. First, you handle the "Get photo" button click event to open a file picker and let the user select an image from their Pictures. Then you bind UI controls to file properties to show the picture info. Finally, we revisit what you learned in Part 2 about how to save app state. Here, you use a MostRecentlyUsedList to keep access to the image selected by the user.

Doc roadmap

After you're done with the tutorials, check out the doc roadmap for a list of key resources that can help you learn more about creating apps using JavaScript.

 

Getting started with JavaScript: Complete code for the tutorial series