Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

122 CHAPTER 3 Getting started with JavaScript

If you haven’t installed Visual Studio Express 2012 for Web, do so now. You can down-
load this from the Microsoft website.

Start Visual Studio. Click File and choose New Project. Navigate to Installed | Templates
| Visual Basic or Visual C# | ASP.NET Empty Web Application.

Set the name of your application to WebCalculator.

Select a location for your applications.

Set the solution name to WebCalculatorSolution.

Be sure to keep the Create Directory For Solution check box selected.

Click OK to create your new project.
When the application is created, you will have an empty project.

In the Solution Explorer window, add a home page by right-clicking the project node.
Click Add, and then choose HTML Page. Name the page default.html and click OK.

In the Solution Explorer window, right-click the default.html file and choose Set As
Start Page.

Open the default.html page and enter Web Calculator into the element.</li><br /> <li>Enter the following HTML into the <body> element to provide a basic user interface<br /> for the calculator:<input id="txtResult" type="text" readonly="readonly" /><br /><br /> <input id="txtInput" type="text" /><br /><br /> <button id="btn7">7</button><br /> <button id="btn8">8</button><br /> <button id="btn9">9</button><br /><br /> <button id="btn4">4</button><br /> <button id="btn5">5</button><br /> <button id="btn6">6</button><br /><br /> <button id="btn1">1</button><br /> <button id="btn2">2</button><br /> <button id="btn3">3</button><br /><br /> <button id="btnClear">C</button><br /> <button id="btn0">0</button><br /> <button id="btnClearEntry">CE</button><br /><br /> <button id="btnPlus">+</button><br /> <button id="btnMinus">-</button><br /> </li><br /> <li>In the Solution Explorer window, add a JavaScript file for your code by right-<br /> clicking the Scripts folder; click Add and choose JavaScript File. Set name to<br /> CalculatorLibrary. js, and click OK.</li><br /> <li>To see what you have so far, press F5 to start debugging the application. You should<br /> see a white screen with a crude calculator interface, as shown in Figure 3-19.</li><br /> </ol> </div> <meta itemprop='headline' content="p 144: 122 CHAPTER 3 Getting started with JavaScript If you haven’t installed Visual Studio Express 2012 for Web, do so now. You can d ... - Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook - free download pdf - issuhub"> </div> <div role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement"> <span itemprop="url"><b><a href="/view/index?id=4154&pageIndex=143" rel="previous" itemprop="name">← Previous</a></b></span> <span itemprop="url" class="mx-3"><b><a href="/view/index?id=4154&pageIndex=145" rel="next" itemprop="name">Next →</a></b></span> </div> <div style=" text-align: center; margin: 20px auto; padding: 13px; width: 240px; font-size: 20px; "> <a class="page-link" style="background-color: #72bf86;" target="_blank" href="/view/index?id=4154&pageIndex=143#bookdownload" title="Free download pdf" >Free download pdf</a> </div> </div> <div class="footer"> <div class="container"> <div class="row"> <div class="col-lg-3 ml-lg-auto mb-5 mb-lg-0"> <div class="mb-4"> <h5 class="text-dark">Get our desktop app</h5> </div> <a class="btn btn-icon btn-indigo rounded-circle mr-2" target="_blank" href="/download/issuhub.dmg"> <i class="fa fa-apple"></i> </a> <a class="btn btn-icon btn-indigo rounded-circle" target="_blank" href="/download/issuhub.exe"> <i class="fa fa-windows"></i> </a> </div> <div class="col-6 col-md-3 col-lg mb-5 mb-lg-0"> <h5 class="text-dark">Company</h5>  <ul class="list-unstyled mb-0"> <li class="my-2"><a href="/about">About</a></li> <li class="my-2"><a href="/contact">Contact</a></li> <li class="my-2"><a href="/news/index">News</a></li> </ul>  </div> <div class="col-6 col-md-3 col-lg mb-5 mb-lg-0"> <h5 class="text-dark">Features</h5>  <ul class="list-unstyled mb-0"> <li class="my-2"><a href="/quick">Quick Start</a></li> <li class="my-2"><a href="/desktop">Desktop</a></li> <li class="my-2"><a href="/editor-help">Editor</a></li> </ul>  </div> <div class="col-6 col-md-3 col-lg"> <h5 class="text-dark">Documentation</h5>  <ul class="list-unstyled mb-0"> <li class="my-2"><a href="/support/index">Support</a></li> <li class="my-2"><a href="/site/pricing">Pricing</a></li> </ul>  </div> <div class="col-6 col-md-3"> <h5 class="text-dark">Resources</h5>  <ul class="list-unstyled mb-0"> <li class="my-2"> <a href="/tutorial" target="_blank"> <span class="media align-items-center"> <i class="fa fa-info-circle mr-2"></i> <span class="media-body">Tutorial</span> </span> </a> </li> <li class="my-2"> <a href="/site/login"> <span class="media align-items-center"> <i class="fa fa-user-circle mr-2"></i> <span class="media-body">Your Account</span> </span> </a> </li> </ul>  </div> </div> </div> </div> <div class="footer"> <div class="container"> <div class="row"> <div class="col-md-6 mb-4 mb-md-0">  <ul class="nav nav-sm nav-white nav-x-sm align-items-center"> <li class="my-2"> <a href="/privacy">Privacy & Policy</a> </li> <li class=" opacity my-2 mx-3">/</li> <li class="my-2"> <a href="/terms">Terms</a> </li> </ul>  </div> <div class="col-md-6 text-md-right"> <ul class="list-inline mb-0">  <li class="list-inline-item"> <a class="btn btn-xs btn-icon btn-soft-light" href="https://www.facebook.com/Issuhub-Flipbook-2315543688769343/"> <i class="fa fa-facebook text-dark"></i> </a> </li> <li class="list-inline-item"> <a class="btn btn-xs btn-icon btn-soft-light" href="https://twitter.com/IssuhubBooks"> <i class="fa fa-twitter text-dark"></i> </a> </li>  </ul> </div> </div>  <div style="text-align: center;"> <div >© ISSUHUB. 2024. All rights reserved.</div> </div>  </div> </div> </div> </div> <script src="/assets/6df76c57/assets/js/vendors/jquery-3.2.1.min.js"></script> <script src="/assets/6df76c57/assets/js/vendors/bootstrap.bundle.min.js"></script></body> </html>