Home > Articles > Programming > JavaScript

Beginning the Process of Writing Scripts

  • Print
  • + Share This
Approach your first script the right way by planning, implementing and then testing it properly. Walk through a simple (yet a step above "Hello World"), detailed example to build a solid scripting foundation.
This chapter is from the book

This chapter is from the book

In This Chapter

  • Initial Decisions

  • Starting Your Script

  • Your First Script

Over the first two chapters we have taken a look at JavaScript and how it fits into the Internet picture. We have given you insight into what you can do with the language and how it works with XHTML, and have talked about browser support. We have approached the language from a coder's perspective by helping you understand the tools you will need to get started.

Now we are going to tackle the task of writing your first scripts, which is what excites us all. We are going to keep it simple for a specific purpose—to build a solid foundation on good programming practices. We will cover each step of creating this simple example in detail, so that we do not have to cover the longer examples in as much detail later in the book.

To do this, we are going to approach your first script the right way. By the right way, we mean that we are going to plan the script, implement it, and test it properly. While doing this, we will also remind you of some of the things you learned in the first two chapters.

Initial Decisions

First, remember that JavaScript is embedded into XHTML documents by using the <script> element. As the browser is loading the page, it begins interpreting the code, starting with the first line of the script and processing everything that follows until it reaches the end. This is true whether the code is inline or it is pulled from an external library (.js) file.

JavaScript interprets each line of code into instructions it then uses to perform specified tasks. It is the same as following directions to a party, for example. Just as you would read each instruction and act on it by turning or driving your car in the appropriate direction, JavaScript follows each of your instructions in order.

On your way to the party, you might need to stop at a red light, or you might need to pick up a friend. These types of rules you can also emulate with JavaScript. For instance, you may want the browser to sit idle until some kind of event, such as a mouse click, happens.

Before you even start writing your code, you do have to make some initial decisions. These decisions will help you better understand what you have to do and how to write your code. The following sections will step you through this process with the objective of helping you understand the questions you should be asking yourself that ultimately lead to the creation of successful code.

What Browsers Do You Want to Support?

The first question you need to ask is, "What browsers do you want or need to support?" This is a huge question because it will determine how much code you need to write. As we said previously, JavaScript has changed drastically over the first several versions of the language. So it is important to know what syntax is available to you when writing your scripts.

In fact, the language had a tendency to be all over the map until the ECMAScript standard was released. Because ECMAScript defines only the core portion of the language, however, it still leaves a lot of gray areas in client-side and server-side implementations. Because of this, you are going to spend a substantial amount of time trying to write scripts that work in all browsers. Hence the question, "What browsers do you want to support?"

In deciding what browsers you want to support, there are several factors that can help. They are as follows:

  • Do you have server-side functionality to help you determine the browser before pages are returned to the browser?

  • Do unsupported browsers need to fail gracefully?

Help from the Server Side

If you are able to determine the browser making the request, you have a major advantage when creating client-side JavaScript programs. This allows you to avoid potential client-side errors by not sending code that is not supported. This is especially key because many of today's popular browsers have different versions that support different standards.

True, it might mean that you need several versions of your scripts, but the amount of download time for the browser and the chance of error will be greatly reduced. You are no longer sending code to determine the requesting browser because the excess lines needed to perform "client sniffing" are no longer needed. Having this functionality also allows you to better handle known non-supporting browsers gracefully.

Failing Gracefully

The second question has to do with how gracefully you want to handle non-JavaScript browsers. This would include not only browsers that do not have JavaScript support, but also those that have it turned off.

CAUTION

If you have ever taken a look at the preferences of your browser, you will notice that you can turn off JavaScript. See Figure 3.1 for Mozilla 1.0's Preferences dialog box, where you can turn off JavaScript. This is important to keep in mind, because you will need to be able to handle instances with JavaScript turned off gracefully. To do so, simply treat these instances as browsers that do not support JavaScript at all.

Figure 3.1 Turning off JavaScript in Mozilla 1.0.

When asking yourself this question, you need to understand your true objective. Are you building a site that you want all people to access and get the full experience? Maybe you are developing an intranet for a company, and your users will only have one browser. Or you may just be building a sample site to see what you can do with JavaScript.

By going through this exercise, you are determining the type of restrictions that need to be placed on your users. Be sure to make this decision carefully and with the full understanding that leaving out some people may mean leaving out a percentage of potential users. If you have made the decision not to support users who do not have JavaScript enabled, your task will be a bit easier—simply do not provide secondary XHTML for these users. Otherwise, you should try to provide them with as much functionality as possible with the intention of not compromising your content.

How Do You Want to Handle Non-JavaScript Browsers?

Up to this point, we have not talked about how to actually handle browsers that do not support JavaScript or have it turned off. If you have the ability, you can eliminate some of your worries by using the server-side functionality we spoke of earlier; however, this does not solve the problem of those browsers that have JavaScript turned off. But there is hope: the <noscript> element.

The <noscript> element allows you to specify additional XHTML to be displayed when JavaScript is turned off or not supported. This element and its included code usually go directly under any <script> sections you may have. Listing 3.1 shows how you can use this element, and Figure 3.2 shows how this is rendered in Mozilla with JavaScript turned off.

Listing 3.1 Using the <noscript> Tag

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <title>My First JavaScript Script</title>
</head>
<body>
 <h1>What is returned?</h1>
 <p>
  <script type="text/javascript">
   document.write('JavaScript is turned on!');
  </script>
 </p>
 <noscript>
  <p>JavaScript is turned off!</p>
 </noscript>
</body>
</html>

If you look at Listing 3.1 and Figure 3.2, you will notice that the <noscript> section tells the user that JavaScript is turned off. If it were turned on, this same page would interpret the JavaScript code and ignore the <noscript> section, as shown in Figure 3.3. This is a great tag to help handle non-supporting browsers gracefully.

Figure 3.2 Rendering the <noscript> tag.

Figure 3.3 Listing 3.1 with JavaScript turned on.

CAUTION

Some of the older browsers, such as Navigator 2 and early versions of Internet Explorer, do not support the <noscript> tag. We have also seen problems with using this tag multiple times on a page with older browsers that support JavaScript, but have it turned off.

Inline or src It?

The final question you need to ask is, "How do you want to put it on the page?" The question is a determination of where you want to put all of your code. This can either be in external library files that have been included using the src attribute, or directly in the document itself.

As we mentioned before, by placing your code in an external file, you will be able to edit one file to affect scripts on all of your pages. Additionally, if your code contains the characters < or &, it will not properly validate if you are attempting to create valid XHTML documents. Although this is not a problem for most implementations today, the momentum XHTML has in the market, from a standards perspective, could easily make this a requirement in the near future.

We recommend that you put all of your functions in external source files, which solves these problems. We even recommend you split up functions into separate files according to their functionality. For instance, you might have one file called calculations.js that contains reusable calculations, but another file called formhandling.js that contains form handling functions.

NOTE

The src attribute was not supported until JavaScript 1.1, which means that Navigator 3+ and Internet Explorer 4+ support it fully. Additionally, Internet Explorer 3.02 did attempt to support this method of referencing external scripts, but we have had limited success in getting it to work. The good news is that these older browsers represent only some fraction of 1% of users, although we do feel it is important to point out this information.

What Are Your Objectives?

The process of defining objectives is among the most overlooked steps in starting a project. You would expect it to be the first and most thorough step, but often it is not completed successfully or fully. We have all seen many JavaScript programmers approach a script from what we call the cool angle rather than the functional angle.

JavaScript is definitely "cool," and if the cool factor is your main objective, go for it. However, if your main objective is to provide solid and useful functionality, try to avoid excess and unnecessary coding. In the long run, other programmers and even you will find it hard to follow your code if you have a lot of "cool" features that offer no real value. You will also find it difficult to implement changes and fixes, because you will have to program around your cool code.

When defining your objectives, you fully determine your objectives and ultimately the end result of your program. For instance, you may want it to perform error checking on forms. With this goal in mind, you should work backward to determine what will accomplish this goal. Using the form example, you should ask yourself how many elements are going to be in the form? How many are radio buttons, text fields, selection options, and so on that you want to be able to process?

After you have nailed down this second level of objectives, you can start figuring out how to code your scripts. You will want to write code that handles the radio buttons, text fields, and selection options. You may be able to create a function that will cover all the functionality you need and that simply works from a parameter passed in, such as "radio" to signify the handling of a radio button. Remember that code reuse is a good thing and that you should apply any coding experience you have to reducing the number of lines of code your scripts need.

  • + 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