Home > Articles > Programming

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Start Small: Create a Test File

Now that you have your project directory, let’s start programming. The first thing you’re going to do is create an HTML file in your kittenbook directory called kittenbook.html. You can create a new file in a few different ways, but the easiest is to open your chosen text editor, create a new file (click File → New File), and then save it as kittenbook.html (File → Save As, then find your kittenbook directory, type in kittenbook.html as the filename, and click Save). Now fill in kittenbook.html with the code in Listing 1.1.

Listing 1.1 kittenbook.html

<html>
    <head>
        <title>My First Program</title>
    </head>
    <body>
        <p>Hello, World!</p>
    </body>
</html>

Save the file and then open it in a web browser by double-clicking it in your file browser. You should see something similar to Figure 1.4.

Figure 1.4

Figure 1.4 You told the computer to do something, and it worked!

Take a break to enjoy this moment. Now look back at your code and compare it to what you see in the web browser. You should see Hello, World! in the window body, and you should see My First Program in the tab. HTML (Hypertext Markup Language) is made up of elements. An element consists of an opening tag, an optional body, and a closing tag. For instance <p> is an opening tag for the paragraph element, Hello, World is the content, and </p> is the closing tag. The body of an element can also contain other elements. For instance, see Listing 1.2.

Listing 1.2 The <head> Tag of kittenbook.html

<head>
    <title>My First Program</title>
</head>

The head element contains a title element. This tells the web browser the title of the HTML page, and most web browsers display that title in the tab. You have plenty more to learn about HTML, but we’ll leave it at that for now.

How HTML and JavaScript Work Together in a Browser

You’ve just created your first web page. Now let’s make the page a little more interactive. Create another file in your kittenbook directory called kittenbook.js. This will be a JavaScript file, and it will make your web page more interesting.

Open kittenbook.js with your text editor and fill it with the code in Listing 1.3.

Listing 1.3 Hello, Friend!

alert('Hello, [your name]!');

Replace [your name] with your real name. For me, this would be alert('Hello, Steven!').

Now open your web page again (or reload it) and see what happens. It’s a trick! The page should look exactly the same as it did before. The HTML doesn’t know that the JavaScript exists, and that’s because we didn’t tell the HTML about the JavaScript. Update kittenbook.html by adding the line from Listing 1.4 inside the <body> element.

Listing 1.4 Add Your JavaScript to kittenbook.html

<script type="text/javascript" src="kittenbook.js"></script>

Now kittenbook.html should look like Listing 1.5.

Listing 1.5 kittenbook.html with JavaScript

<html>
    <head>
        <title>My First Program</title>
    </head>
    <body>
        <p>Hello, World!</p>
        <script type="text/javascript" src="kittenbook.js"></script>
    </body>
</html>

This time, you should see something similar to Figure 1.5.

Figure 1.5

Figure 1.5 Hello, you wrote a real program!

That was awesome! You made a window appear with your name in it. You could type whatever you wanted, and it would show up in that window. Let’s talk about what you just did; then we’ll take it to the next level.

The JavaScript you wrote is a single instruction for your computer. alert is something called a function that tells the web browser to open a window with an OK button. You can add some text to the window by adding an argument to alert. A function is a piece of code that can be called to perform a task. An argument can modify how the function performs the task. The semicolon at the end of the line indicates to JavaScript the end of an instruction. Programs usually have many instructions, so the semicolons separate the instructions.

The Value of Small Changes

Now we’re going to enhance our program so that we can say hello to anyone, instead of just “Hello, World!” As you make the enhancements, make small changes. Then test those small changes before you make more changes. At first, this process might seem tedious and unnecessary. However, if you make many changes before testing and find that your program isn’t working, you will have a hard time determining which of your changes broke the program. If you make one small change before testing and see that your program is broken, you will know exactly what you did to break it.

Our first small change is to ask for a name. A personalized greeting isn’t much good without a name. For this example, we use a function called prompt because it is simple and it works well here. However, I beg you not to use prompt (or alert) with a real website. Although prompt and alert are convenient for testing and learning, they make for a poor and outdated user experience. We cover alternatives for them in Chapter 8, “Functions and Methods.” For now, update your kittenbook.js to use prompt instead of alert, and change the message to say “Hello, what’s your name?” (see Listing 1.6).

Listing 1.6 Prompt for a Name

prompt('Hello, what\'s your name?');

You might be wondering why this code says what\'s instead of what's. A group of characters such as 'Hello, World!' is called a string. A string starts with a quote and ends with a quote. If I type prompt('Hello, what's your name?');, then I have three quotes (even though one of them is intended to be an apostrophe), which confuses the computer. The computer sees the string 'Hello, what', then sees some other characters that it doesn’t understand, and then sees another string: ');'. I use a backslash before the single quote in what\'s to tell the computer that I don’t mean the apostrophe to signify the end of the string. The backslash is called an escape character.

Now if you refresh your page, you should see a window with a place for you to type your name (see Figure 1.6).

Figure 1.6

Figure 1.6 What’s your name?

Notice that when you type in your name and click OK, the page still says Hello, World! What gives? Why ask for a name if you’re not going to show it? Well, we haven’t told the computer what to do with the name. We made a small change: We switched the alert window for a prompt window. It worked, so now we can tell the computer what to do with the name.

One of the most important tools in programming is the variable. A variable is a place to store some data that affects how the program works—Chapter 5, “Data (Types), Data (Structures), Data(bases),” discusses variables in great detail. In this case, we want to store the name from the prompt window. (See Listing 1.7.)

Listing 1.7 Your First Variable

var userName = prompt('Hello, what\'s your name?');

All variables have names, and we have called our variable userName. To tell the computer that we are creating a variable, we use a reserved word: var. A reserved word is a word that has special meaning to a programming language. It is reserved, so you cannot use that word as the name of a variable; you don’t want to confuse your computer.

Now that we have stored our variable, refresh the page to see that everything still works. The web page should look the same as the last time you refreshed. We have stored the username, but we haven’t told the computer to do anything with it yet. The next step is to insert the username in the web page (see Listing 1.8).

Listing 1.8 Put Your Variable to Work

var userName = prompt('Hello, what\'s your name?');
document.body.innerHTML = 'Hello, ' + userName + '!';

We add a new instruction to change the HTML document’s body. Remember the <body> element from kittenbook.html? document.body.innerHTML refers to everything between the opening tag and the closing tag of the <body> element. document.body.innerHTML = 'Hello, ' + userName + '!'; effectively changes the HTML to look like Listing 1.9 (assuming that I type Steven when the prompt asks for my name).

Listing 1.9 kittenbook.html When Your JavaScript Is Done with It

<html>
    <head>
        <title>My First Program</title>
    </head>
    <body>
        Hello, Steven!
    </body>
</html>

Congratulations! You just created a real program. Admittedly, this is not the most useful program that has ever been written, but it is certainly not the least useful—and you learned a lot along the way.

  • + Share This
  • 🔖 Save To Your Account

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020