The first JavaScript I ever wrote
Tags: jamstack, webdev, javascript, beginners
Published: 2021-02-05 13:00:50

---
title: The first JavaScript I ever wrote
description:  "An Arabic landing page form"
published: true
date: 2021-02-05 08:00:00 UTC
tags: jamstack,webdev,javascript,beginners
canonical_url: https://katiekodes.com/my-first-javascript/
---

I dismiss my JavaScript skills all the time because it's not my primary practice, but I was awfully proud of the first program I ever wrote, in late 2011.  Would you like to see it?

## Backstory

My boss was going to a massive trade show in the Arabic-speaking Gulf.  There was no way she'd have time to collect paper inquiries as she usually did -- particularly with so much of her particular target audience still struggling with English.

I generated a QR code for this landing page's URL and had it printed on a massive poster, so people could photograph it over the heads of a crowd.

The landing page itself simply asked two questions:

1. name _(using Latin A-Z letters only)_
2. e-mail address _(same constraints)_.

Our mailing list tool's autoresponder took care of delivering a more thorough e-mail in Arabic.

HTML-wise, I'm proud of what I learned about the `SPAN` tag's `dir="rtl"` option so that field labels would display cleanly.

However, any good form on the internet needs validation, and my validation rules were complex enough to require JavaScript.

* My error messages had to be in English _(so my boss could understand them if shown one)_ and in Arabic.
* Many visitors' smartphones would have Arabic-alphabet keyboards by default.  I needed to constrain input to the Latin alphabet _(for the sake of our mass mailing tool)_ and, if someone tried to enter Arabic characters, present a different error message from the one they'd receive if they simply left a field blank.

[You can play with my form](https://katiekodes.com/files/arabicform.html) to see if you think it works.  Try leaving "name" blank, "email" blank, or copying some Arabic from the labels into the "name" field and submitting the form.

## Code

I didn't realize it at the time, but I got my first taste of making an [HTTP POST request](https://dev.to/katiekodes/intro-to-http-for-data-folks-managers-especially-24n6) when I edited some form HTML provided to us by our mass mailing tool.  _(This code is so old, the endpoint was over HTTP, not HTTPS!  Yikes.)_

{% link https://dev.to/katiekodes/intro-to-http-for-data-folks-managers-especially-24n6 %}

I put two visible fields into my form's HTML:  name and email.  The Arabic in the field labels and the pop-up error messages is a bit crude, but I can't find our final edits proofread by native speakers anymore.

All the JavaScript is in one massive `formValidator()` function, which is attached to the HTML's opening `FORM` tag.

The function simply runs 3 `if` statements, one after the other, adding text to a string called `helperMsg` as it goes.  If anything was wrong, it uses JavaScript's `alert()` to pop up the value of `helperMsg`.  I hadn't really started coding at the time yet, so I probably took that pattern from one of my company's existing landing pages coded by a professional.

I'm sure I didn't understand [regular expression](https://www.worldcat.org/search?q=mastering+regular+expressions&dblist=638&fq=dt%3Abks+%3E+ap%3A%22friedl%2C+jeffrey+e+f%22&qt=facet_ap%3A) patterns when I copied `[^A-Za-z .-]` off the internet, but it did the job to prevent Arabic characters from getting through in the "name" field.

It looks like in the end, I didn't bother validating the character set of values entered into the "email" field, but simply relied upon browsers' interpretations of `<input type="email">` to get close enough on my behalf.  _(Seems risky in 2011, but cool, I guess?  Or maybe I added it later into the long-lost final codebase.)_

As long I was careful to use an appropriate text editor, JavaScript and properties within HTML tags don't seem to need much special treatment to handle the two alphabets' different directionalities.  I notice that the Arabic string literals typically stand alone, isolated from any English, in my JavaScript string variables and between HTML tags, but that's probably to facilitate copy-paste operations and selecting Arabic text with my cursor on a left-to-right-based computer.

```html
<html>
 <head>
  <title>Request Information</title>

  <!-- I still need to clean this HTML up -->

  <!-- Recommended by a different person -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- end -->

  <!-- Recommended by one person -->
  <meta name="MobileOptimized" content="width" />
  <meta name="HandheldFriendly" content="true" />
  <!-- end -->

  <script type="text/javascript">
   function formValidator() {
    var formOkay = true;
    var helperMsg = "";

    // Checks whether the user entered his/her name, and sets variables accordingly.
    var name = document.getElementById("name");
    if (name.value.length == 0) {
     formOkay = false;
     helperMsg =
      helperMsg +
      "Please enter your Name.\n" +
      "الاسم: الإلزامية" +
      "\n\n";
    }

    // Checks whether the name the user provided contains any disallowed characters ([^A-Za-z .-]) and sets variables accordingly.
    var englishNamePatt = /[^A-Za-z .-]/;
    if (englishNamePatt.test(name.value) == true) {
     formOkay = false;
     helperMsg =
      helperMsg +
      "Please only use English in your Name.\n(This means the letters A-Z, a-z, hyphens (-), periods (.), and spaces.)\n" +
      "الإنجليزية: الإلزامية" +
      "\n(A-Z) (a-z) (-) (.) ( )" +
      "\n\n";
    }

    // Checks whether the user entered his/her email address, and sets variables accordingly.
    var email = document.getElementById("email");
    if (email.value.length == 0) {
     formOkay = false;
     helperMsg =
      helperMsg +
      "Please enter your E-mail Address.\n" +
      "البريد الإلكتروني: الإلزامية" +
      "\n\n";
    }

    // Displays an alert letting the user know what he/she did wrong.
    if (formOkay == false) {
     alert(helperMsg);
    }

    // Ensures the form won't submit if the validator is not satisfied.
    return formOkay;
   }
  </script>
 </head>
 
 <body>
  <!-- Next steps : (*) Good (close to mass-mailing tool validation) in-form email validator, (*) Fix zooming, (*) Branding & possibly change "what this form will do for you" text, (*) Arabic -->

  <p style="font-size: medium">
   <b>Our Company</b><br />
   <span dir="rtl">شركتنا</span>
  </p>

  <p style="font-size: medium">
   <b>Request Information</b><br />
   <span dir="rtl">احصل على المعلومات</span>
  </p>

  <form onsubmit="return formValidator()" action="http://example.com/subscribe" method="post" name="theForm">
   <label for="firstname" style="display: block; font-size: small">
    <b>Name (in English):</b><br />
    <span dir="rtl">الاسم (باللغة الإنجليزية):</span><br />
   </label>
   <input type="text" id="name" name="name" maxlength="100" placeholder="Name" alt="Name" title="Name" style="display: block; width: 100%; font-size: xx-large; margin-bottom: 0.2em;"/>

   <label for="email" style="display: block; font-size: small">
    <b>Email:</b><br />
    <span dir="rtl">البريد الإلكتروني:</span><br />
   </label>
   <input type="email" id="email" name="email" placeholder="Email Address" alt="Email Address" title="Email Address" style=" display: block; width: 100%; font-size: xx-large; margin-bottom: 0.2em;"/>
   <input type="submit" name="subscribe" value="Submit • التسجيل" style="display: block; padding: 0.65em 0em; font-size: large"/>
   <input type="hidden" name="list" value="conference_floor" />
   <input type="hidden" name="name_required" value="T" />
   <input type="hidden" name="confirm" value="many_hello" />
   <input type="hidden" name="showconfirm" value="F" />
   <!-- Enable this at the last minute once I get around to making this web page:
    <input type="hidden" name="url" value="http://www.example.com/thankyou">
   -->
  </form>
 </body>
</html>
```

> What's the first project you made?