Fundamentals of Strings

Introduction

A string is a symbol or a group of symbols. A string can also be an empty space.

Practical LearningPractical Learning: Introducing Strings

  1. Start Microsoft Visual Studio
  2. On the main menu of Microsoft Visual Studio, click File -> New -> Project ...
  3. In the middle list of the New Project dialog box, click ASP.NET Web Application (.NET Framework)
  4. Change the project Name to TrafficTicketsManagement2
  5. Click OK
  6. In the New ASP.NET Web Application dialog box, click the MVC icon
  7. Click OK
  8. In the Solution Explorer, right-click Content -> Add -> New Item...
  9. In the left frame of the Add New Item dialog box, under Visual C#, expand Web and click Markup
  10. In the middle list, click Style Sheet
  11. Change the Name to TrafficTicketsSystem
  12. Click Add
  13. Change the document as follows:
    body {
        background-color: #FFF;
    }
    .bold        { font-weight: bold; }
    .common-font { font-family: Garamond, Georgia, 'Times New Roman', Times, serif; }
  14. In the Solution Explorer, expand App_Start and click BundleConfig.cs
  15. Change the document as follows:
    using System.Web.Optimization;
    
    namespace TrafficTicketsManagement2
    {
        public class BundleConfig
        {
            // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
            public static void RegisterBundles(BundleCollection bundles)
            {
                bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                            "~/Scripts/jquery-{version}.js"));
    
                bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                            "~/Scripts/jquery.validate*"));
    
                // Use the development version of Modernizr to develop with and learn from. Then, when you're
                // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
                bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                            "~/Scripts/modernizr-*"));
    
                bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                          "~/Scripts/bootstrap.js"));
    
                bundles.Add(new StyleBundle("~/Content/css").Include(
                          "~/Content/bootstrap.css",
                          "~/Content/site.css",
                          "~/Content/TrafficTicketsSystem.css"));
            }
        }
    }
  16. In the Solution Explorer, expand Controllers and double-click HomeController.cs
  17. Add two methods as follows:
    using System.Web.Mvc;
    
    namespace TrafficTicketsManagement2.Controllers
    {
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult About()
            {
                ViewBag.Message = "Your application description page.";
    
                return View();
            }
    
            public ActionResult Contact()
            {
                ViewBag.Message = "Your contact page.";
    
                return View();
            }
    
            public ActionResult TrafficTicket() => View();
            public ActionResult Citation() => View();
        }
    }
  18. In the class, right-click TrafficTicket() -> Add View...
  19. In the Add View dialog box, make sure the View Name text box displays TrafficTicket.
    Click Add
  20. Change the document as follows:
    @{
        ViewBag.Title = "Traffic Ticket";
    }
    
    <h2 id="company">Traffic Ticket</h2>
    
    <p id="introduction"></p>
  21. In the Solution Explorer, right-click Scripts -> Add -> New Item...
  22. In the left list of the New Item dialog box, under Visual C#, expand Web and click Scripts
  23. In the middle list, click TypeScript file
  24. Change the Name to TicketsSystem
  25. Click Add
  26. In the empty TicketsSystem.ts document, type the following code:
    const corporation: HTMLElement = document.querySelector("#company");
    const intro: HTMLElement = document.querySelector("#introduction");

A String Variable

In TypeScript, to declare a variable for a string, specify the data type as string.

Practical LearningPractical Learning: Declating String Variables

Initializing a String

The value of a string can be included in single-quotes or in double-quotes. To initialize a string variable, put its empty string, its character, or its group of characters in quotes.

Updating a String Variable

As mentioned in the previous lesson, after declaring a variable, anywhere in your document, you can assign a (new) value to the variable. Here is an example:

let identification: string;

const corporation: HTMLElement = document.querySelector("#company");
const intro: HTMLElement = document.querySelector("#introduction");

identification = "Traffic Tickets Management";

If you are declaring a variable without initializing it, you can start the declaration with the declare keyword.

Practical LearningPractical Learning: Creating Strings

  1. Change the TicketsSystem.ts document as follows:
    declare let identification: string;
    
    const corporation: HTMLElement = document.querySelector("#company");
    const intro: HTMLElement = document.querySelector("#introduction");
    
    identification = "Traffic Tickets Management";
    corporation.innerHTML = identification;
    
    identification = "This application is used by the Solomons County Police Department to monitor and management road traffic for the safety of the county's citizens.";
    intro.innerHTML = identification;
  2. In the Solution Explorer, under Views, expand Shared and click _Layout.cshtml
  3. Change the document as follows:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Traffic Tickets System :: @ViewBag.Title</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink("Traffic Tickets System", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>@Html.ActionLink("Traffic Ticket", "TrafficTicket", "Home")</li>
                        <li>@Html.ActionLink("Citation", "Citation", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p class="text-center common-font">&copy; @DateTime.Now.Year - Traffic Tickets System</p>
            </footer>
        </div>
    
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    </body>
    </html>
  4. Click the TrafficTicket.cshtml tab and change the document as follows:
    @{
        ViewBag.Title = "Traffic Ticket";
    }
    
    <h2 id="company">Traffic Ticket</h2>
    
    <p id="introduction"></p>
    
    <script src="~/Scripts/TicketsSystem.js"></script>
  5. To execute, on the main menu, click Debug -> Start Without Debugging
  6. On the webpage, click the Traffic Ticket link

    TypeScript Variables - Introduction to Strings

  7. Close the browser and return to your programming environment

A Tagged String

In your string, you can include HTML tags. If you decide to do that, make sure you follow the rules of the language such as closing the tags. If you include a string in double-quotes (or in single-quotes), if a tag uses attributes, include the value of the attribute in single-quotes (or double-quotes).

Practical LearningPractical Learning: Adding Tagged to a String

  1. Click the TicketsSystem.ts tab and change the document as follows:
    declare let identification: string;
    
    const corporation: HTMLElement = document.querySelector("#company");
    const intro: HTMLElement = document.querySelector("#introduction");
    
    identification = "<span style='border-bottom: 1px dashed maroon; color: blue;'>Traffic Tickets Management</span>";
    corporation.innerHTML = identification;
    
    identification = "<p class='common-font'>This application is used by the <span class='bold'>Solomons County Police Department</span> to monitor and management road traffic for the safety of the county's citizens.</p>";
    intro.innerHTML = identification;
  2. To execute, on the main menu, click Debug -> Start Without Debugging
  3. On the webpage, click the Traffic Ticket link

    TypeScript Variables - Introduction to Strings

  4. Close the browser and return to your programming environment

Operations on Strings

Adding Strings

If you have two string variables, to add them and get a new string, write their names separated by +. To add two constant strings, separate them with the + operator.

Practical LearningPractical Learning: Adding Strings

  1. In the Solution Explorer, under Controllers, click HomeContoller.cs to access it
  2. In the class, right-click Citation() and click Add View...
  3. In the Add View dialog box, make sure View Name text box is displaying Citation.
    Click Add
  4. Change the Citation.cshtml document as follows:
    @{
        ViewBag.Title = "Citation";
    }
    
    <h2 class="text-center common-font bold">City of Jamies Town</h2>
    <h5 class="text-center common-font bold">6824 Cochran Ave, Ste 318<br />Jamies Town, MD 20540</h5>
    
    <div class="row common-font">
        <div class="col-md-8">
            <h4 class="common-font bold"><span id="violationNumber"></span></h4>
            <h4 class="common-font bold"><span id="violationName"></span></h4>
            <hr />
            <h4 class="common-font bold"><span id="driverName"></span></h4>
            <h5 class="common-font bold"><span id="driverAddress"></span></h5>
            <h5 class="common-font bold"><span id="vehicle"></span></h5>
            <hr />
            <h5 class="common-font bold"><span id="driverName2"></span></h5>
            <p id="summary"></p>
            <p id="conclusion"></p>
        </div>
    </div>
  5. In the Solution Explorer, right-click Scripts -> Add -> TypeScript file
  6. Type Infraction as the name of the file
  7. Click OK
  8. In the empty Infraction.ts document, type the following code:
    let violationNbr: string = 'W829338';
    let car: string = "Toyota Corolla, 2012, Silver";
    let person: string = "Charlotte Bibang";
    let adrs: string = "12382 Lolita Drive, Rockville, MD 20856";
    let violationType: string = "Failure to Use Seat Belt";
    let vDate: string = "2019-04-18";
    let vTime: string = "22:27:34";
    let vLocation: string = "1400 Block of Buffalo Drive";
    let amt: string = "80";
    let pmtDate: string = "2019-06-11";
    
    const person1: HTMLElement = document.querySelector("#driverName");
    const person2: HTMLElement = document.querySelector("#driverName2");
    const address: HTMLElement = document.querySelector("#driverAddress");
    
    person1.innerHTML = "Driver Name: " + person;
    person2.innerHTML = "To: " + person;
    address.innerHTML = "Driver Address: " + adrs;
    
    document.querySelector("#vehicle").innerHTML = "Vehicle: " + car;
    document.querySelector("#violationNumber").innerHTML = "Citation #: " + violationNbr;
    
    document.querySelector("#violationName").innerHTML = "Violation Type: " + violationType;
    document.querySelector("#summary").innerHTML = "Our records indicate that on <b>" + vDate + "</b> at <b>" + vTime + "</b>, at <b>" + vLocation + "</b>, the above mentioned vehicle committed a <b>" + violationType + "</b> violation.";
    document.querySelector("#conclusion").innerHTML = "If you recognize the traffic violation, please pay $" + amt + " by " + pmtDate + ". Failure to pay the amount by that date will result in an increase of the fine and could result in the suspension of your driving priviledges.";
  9. Click the Citation.cshtml tab and change the document as follows:
    @{
        ViewBag.Title = "Citation";
    }
    
    <h2 class="text-center common-font bold">City of Jamies Town</h2>
    <h5 class="text-center common-font bold">6824 Cochran Ave, Ste 318<br />Jamies Town, MD 20540</h5>
    
    <div class="row common-font">
        <div class="col-md-8">
            <h4 class="common-font bold"><span id="violationNumber"></span></h4>
            <h4 class="common-font bold"><span id="violationName"></span></h4>
            <hr />
            <h4 class="common-font bold"><span id="driverName"></span></h4>
            <h5 class="common-font bold"><span id="driverAddress"></span></h5>
            <h5 class="common-font bold"><span id="vehicle"></span></h5>
            <hr />
            <h5 class="common-font bold"><span id="driverName2"></span></h5>
            <p id="summary"></p>
            <p id="conclusion"></p>
        </div>
    </div>
    
    <script src="~/Scripts/Infraction.js"></script>
  10. To execute the application, on the main menu, click Debug -> Start Without Debugging

    Switching a String

  11. Close the browser and return to your programming environment

A Template String

We saw that you can add string constants and string variables to get a new string. TypeScript allows you to create a resulting solution in which you can include the names of variables in a a string so that the value of the string variable would be used in that placeholder. In such a string, the name of the variable must be included between ${ and }. This is referred to as a template string or string interpolation.

Converting a Value to a String

If you have a value in a type other than string, in order to use in some scenarios, such as to display that value in a webpage, you may have to convert that value to a string. To do this, type the value or the name of the variable, a period and toString().

Practical LearningPractical Learning: Converting a Value to a String

  1. Click the Infraction.ts tab and change the document as follows:
    let violationNbr: string = 'W829338';
    let car: string = "Toyota Corolla, 2012, Silver";
    let person: string = "Charlotte Bibang";
    let adrs: string = "12382 Lolita Drive, Rockville, MD 20856";
    let violationType: string = "Failure to Use Seat Belt";
    let vDate: string = "2019-04-18";
    let vTime: string = "22:27:34";
    let vLocation: string = "1400 Block of Buffalo Drive";
    let amt: string = "80";
    let pmtDate: string = "2019-06-11";
    let photoAvailable: boolean = true;
    let videoAvailable: boolean = false;
    
    document.querySelector("#driverName").innerHTML = "Driver Name: " + person;
    document.querySelector("#driverName2").innerHTML = "To: " + person;
    document.querySelector("#driverAddress").innerHTML = "Driver Address: " + adrs;
    
    document.querySelector("#vehicle").innerHTML = "Vehicle: " + car;
    document.querySelector("#violationNumber").innerHTML = "Citation #: " + violationNbr;
    
    document.querySelector("#violationName").innerHTML = "Violation Type: " + violationType;
    document.querySelector("#summary").innerHTML = "Our records indicate that on <b>" + vDate + "</b> at <b>" + vTime + "</b>, at <b>" + vLocation + "</b>, the above mentioned vehicle committed a <b>" + violationType + "</b> violation.";
    document.querySelector("#conclusion").innerHTML = "If you recognize the traffic violation, please pay $" + amt + " by " + pmtDate + ". Failure to pay the amount by that date will result in an increase of the fine and could result in the suspension of your driving priviledges.";
    document.querySelector("#photo").innerHTML = photoAvailable.toString();
    document.querySelector("#video").innerHTML = videoAvailable.toString();
  2. Click the Citation.cshtml tab and change the document as follows:
    @{
        ViewBag.Title = "Citation";
    }
    
    <h2 class="text-center common-font bold">City of Jamies Town</h2>
    <h5 class="text-center common-font bold">6824 Cochran Ave, Ste 318<br />Jamies Town, MD 20540</h5>
    
    <div class="row common-font">
        <div class="col-md-8">
            <h4 class="common-font bold"><span id="violationNumber"></span></h4>
            <h4 class="common-font bold"><span id="violationName"></span></h4>
            <hr />
            <h4 class="common-font bold"><span id="driverName"></span></h4>
            <h5 class="common-font bold"><span id="driverAddress"></span></h5>
            <h5 class="common-font bold"><span id="vehicle"></span></h5>
            <hr />
            <h5 class="common-font bold"><span id="driverName2"></span></h5>
            <p id="summary"></p>
            <p id="conclusion"></p>
            <hr />
            <p><span style="font-weight: 600">Photo Available:</span> <span id="photo"></span></p>
            <p><span style="font-weight: bold">Video Available:</span> <span id="video"></span></p>
        </div>
    </div>
    
    <script src="~/Scripts/Infraction.js"></script>
  3. To execute, on the main menu, click Debug -> Start Without Debugging

    Converting a Value to String

  4. Close the browser and return to your programming environment

A Constant String

A variable that holds a string is referred to as constant if its value never changes. The formula to declare such a variable is:

const variable-name : string = value;

You can omit the string data type.

Practical LearningPractical Learning: Using Constant Strings

  1. Click the Infraction.ts tab and change the document as follows:
    const amt            : string = "225";
    const violationNbr   : string = 'G383749';
    const vTime          : string = "07:18:27";
    const pmtDate        : string = "2019-06-30";
    const vDate          : string = "2019-04-26";
    const person         : string = "Ornella Chumsky";
    const vLocation      : string = "I270 Near Exit 10";
    const car            : string = "Ford Focus, 2019, Navy";
    const violationType  : string = "Illegal Car Pool Lane Driving";
    const adrs           : string = "3094 Serriella Rd, Landisburg, PA 17040";
    let   photoAvailable : boolean = true;
    let   videoAvailable : boolean = false;
    
    document.querySelector("#driverName").innerHTML = "Driver Name: " + person;
    document.querySelector("#driverName2").innerHTML = "To: " + person;
    document.querySelector("#driverAddress").innerHTML = "Driver Address: " + adrs;
    
    document.querySelector("#vehicle").innerHTML = "Vehicle: " + car;
    document.querySelector("#violationNumber").innerHTML = "Citation #: " + violationNbr;
    
    document.querySelector("#violationName").innerHTML = "Violation Type: " + violationType;
    document.querySelector("#summary").innerHTML = "Our records indicate that on <b>" + vDate + "</b> at <b>" + vTime + "</b>, at <b>" +
                                                   vLocation + "</b>, the above mentioned vehicle committed a <b>" + violationType + "</b> violation.";
    document.querySelector("#conclusion").innerHTML = "If you recognize the traffic violation, please pay $" + amt + " by " +
                                                      pmtDate + ". Failure to pay the amount by that date will result in an increase of " +
                                                      "the fine and could result in the suspension of your driving priviledges.";
    document.querySelector("#photo").innerHTML = photoAvailable.toString();
    document.querySelector("#video").innerHTML = videoAvailable.toString();
  2. To execute, on the main menu, click Debug and click Start Without Debugging
  3. Click the Citation link:

    Text Box

  4. Close the browser and return to your programming environment
  5. Close your programming environment

Previous Copyright © 2018-2019, FunctionX Next