Intro to the Web: Client-Side Scripting

Web Programming with HTML and JavaScript

As part of Intro the World-Wide-Web (WWW) classes, we have covered web programming languages HTML and JS to provide a foundation into how information is processed from (inputs) and/or presented to the user (outputs). Manipulating data provided through both system and users serve a particular purpose, be it presenting information on a webpage or passing data to other systems that result in transactions or calculations. As a markup language, tags are identified by the browser to organize how data is presented by HyperText Markup Language (HTML). Starting from the top and working down, a web page is loaded once the code is received from a server. Because HTML is limited, JS can pick up where it falls short by invoking advanced programming structures and capabilities. We previously provided basic functionality into the user interface but with this lesson we are going to cover how web code is presented to the application users interact with, or the client-side.

Client-Server Model

When a user visits a website, such as https://www.archive.org, they enter a Uniform Resource Locator (URL) into the browser's address bar. The browser then sends a HyperText Transfer Protocol (HTTP) request to the server to retrieve the resource specified in the URL (e.g., a webpage). The server processes this request and responds with an HTTP response that includes the requested resource, along with a status code (such as 200 for a successful request or 404 when the resource is not found). There are multiple types of HTTP methods a client can use; GET and POST are among the most common.

(Note: The additional steps involved in making the request work, such as resolving human-readable URLs into IP addresses, will be covered later in the course.)

Activity: Viewing Browser Code

Take a look at the code used by your browser to render the page on the client-side. Open the webpage https://www.usna.edu/CyberDept/sy110/resources/student_renders/ex2.html and follow the instructions below:

For Google Chrome:

1. Click on the vertical ellipses in the upper right corner to expand the menu and select More tools followed by Developer tools or use the shortcut Ctl+Shift+I.
2. Ensure the Elements tab is selected and expand the HTML code to view data rendered on the webpage.
3. Now select the Network tab and refresh the webpage, observing the time and data being loaded.
4. Try to identify the data sources for each of the files.

For Mozilla Firefox:

1. Click on the hamburger menu in the upper right corner to expand the menu and select More tools followed by Web Developer tools or use the shortcut Ctl+Shift+I.
2. Ensure the Inspector tab is selected and expand the HTML code to view data rendered on the webpage.
3. Now select the Network tab and refresh the webpage, observing the time and data being loaded.
4. Try to identify the data sources for each of the files.

Dynamic Web Pages

The web pages primarily seen up to this point have been static web 1.0 pages. Content may look like it's changing but is done by loading different web pages. Here is a good example of a static webpage. Every link accessed loads a new web page and everyone looking at that page sees exactly the same thing. All but the most basic sites these days have dynamic content, which means that changes occur to the current page, with or without user interaction, and websites have pages that look different to different users. More complex websites, like Google Maps, are built around the idea of dynamic web content. The box on right is an example of a basic form of dynamic content. Click on the +'s and -'s and see what happens. Note that the URL address at the top of the page never changes!

Dynamic content is possible through the execution of a snippet of code called a script. The snippet of code can execute on either client machine (meaning in the web browser) or on the web server. So we can have either client-side scripting or server-side scripting. Scripts can also be either event or non-event driven. What this means is that the scripts can either run in response to user action, such as clicking on something (event driven), or can run automatically when the web page is loaded (non-event driven). The boxes with the +'s and -'s that you clicked on are event driven since you, as the user, had to take an action for the event to take place.

When thinking about whether the script is executing on the client machine or the server, there are some important considerations:

1. Allowing code to execute, whether in response to user action or automatically, could pose a security risk. In client-side scripting, the client incurs the risk as it is running on their local machine. In server side scripting, the server incurs the risk as the script is running on the remote server.
2. Client-side scripts only require the initial communication to GET the web page HTML file. No additional communication with the server is required. With server-side scripts, there is additional back and forth communication as your web browser tells the server to execute the script and the server then replies back with the web page changed by the result of running the script.
3. Executing scripts costs CPU cycles. Server-side scripts cause more work for the server machine, client-side scripts cause more work for the client-side machine.

Embedding Scripts

JS is a vital web language for businesses across the world and is also why it's the most popular as websites and mobile apps rely on distributing many services for users and consumers. JS is invoked in HTML code through the use of <SCRIPT> tags in order to embed scripts, with the type attribute, which identifies the language used:

<SCRIPT type="text/javascript">...</SCRIPT>

Document Object Model (DOM). The use of JS embedded scripts leverages DOMs, which is a World Wide Web Consortium (W3C) standard model and programming interface that defines HTML elements as objects, the properties of HTML elements, methods to access all HTML elements, and the events for all HTML elements. What does that mean? The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

Objects in programming languages are created and referenced as you would physical objects around you. There are tables and chairs in the classroom, all of which are objects that are referred to by names. Tables and chairs comprise of parts, such as legs and surfaces, but these parts or classes are different for each of the objects. Once the tables and chairs are assembled using the appropriate classes, these objects may now be referred to with actions, called methods for executing actions, such as move the table or sit on the chair. This series of statements within the classroom now establishes a function. As such, classes define properties of objects, objects are referenced in methods for moving, copying, manipulating, and storing data associated with objects, and functions are a series of statements that perform tasks but not associated with objects, like methods would be.

Structuring programming languages in this way allows for easy referencing and consistent processes for developers to build applications. The primary use of DOM in JS will be document in order to leverage the use of dynamic HTML. The DOM document will accomplish the following:

• Scripts can access the DOM using the document object;
• The term "document" will be used in combination with a "method" of affecting the web page;
• A specific property can also be defined for some methods that would allow you to change, for example, specific parts of an element such as the font or color;
• The four methods used in this course are:
  1. document.write
  2. document.location
  3. document.getElementById
  4. document.forms

Non-Event Driven Scripts

Within the document object in JS, document.write and document.location are examples that can depict the use of non-event driven scripts. These methods are not exclusive to non-event driven scripts but they will be employed in examples for event-driven scripts.

DOM: document.write

document.write sends data to HTML output and is used to insert text, elements, or a combination. Its usage and syntax uses the document object to manipulate HTML code.

• document.write("Hello World") would print Hello World on the web page.
• document.write("<b>This is a bold element</b>") would insert the bold element in the parenthesis into the web page and the browser should render This is a bold element in boldface.

With the ability to reference an object using JS, calculations can now be performed to write to a web page. The code below is an example of what can be accomplished with embedded scripts:

More examples of DOM object use of document.write are provided, along with its code. In ex0.html, a while loop is leveraged to write GONAVY to HTML output 1,000 times. What would be a tedious task has now been simplified with a few lines of code and is useful for iterative content.

<html>
<head></head>
<body>
<script type="text/javascript">
  var iter = 0;
  while(iter < 1000)
  {
    iter = iter + 1;
    document.write("G O N A V Y ! ");   
  }
</script>
</body>
</html>

<html>
<head></head>
<body>
<script type="text/javascript">
  var iter = 0;
  while(iter < 1000)
  {
    iter = iter + 1;
    document.write('<span style="color: #ff0000">G O</span> <b>N A</b> V Y ! ');
  }
</script>
</body>
</html>

A key consideration for the use of embedded scripts is when they are executed. The location of the script in the HTML file determines where the code appears, replacing <SCRIPT type="text/javascript">...</SCRIPT> when rendering in the browser and reading from the top, down.

DOM: document.location

alert(document.location);

document.location = "https://www.westpoint.edu";

<html>
 <head></head>
 <body>
  <script type="text/javascript">
   document.location = 'https://www.westpoint.edu';
  </script>
 </body>
</html>

HTML and email

Event-driven JavaScript

Now that we have covered some common non-event driven scripts, we will learn to identify, understand, and write scripts for web pages that are event driven, meaning that the script executes when some action, typically initiated by the user, occurs. DOM methods covered will include document.getElementById, which allow us to gain access to a specific HTML field and change it after the web page has already been loaded and document.forms. There are two fundamental requirements we will cover that allow a comprehensive understanding of client-side scripting:

• Identifying HTML Content
• User Interaction (Mouse Events)

DOM: document.getElementById

<p id="foo">The <b id="bar">quick</b> brown fox jumps over the lazy dog.</p>

Clicking anywhere
<b onclick='document.body.style.color="#ff0000"'>within the bold text</b>
causes the text to go red!  Refresh the page to return sanity.

<A id="foo" href="http://www.usna.edu"
  onclick="document.getElementById('foo').href='http://www.youtube.com/watch?v=dQw4w9WgXcQ';">
  www.usna.edu
</A>

  Don't click on anything and let your mouse pointer pass over the name:
  <SPAN onmouseover='document.location = "https://www.westpoint.edu/"'>Billy</SPAN>.

Word Jumble Challenge: YGANOV <span id="sol"></span><br>
<b id="inst" onclick='
if (document.getElementById("inst").innerHTML == "show solution") {
  document.getElementById("sol").innerHTML = "&#8594; GONAVY";
  document.getElementById("inst").innerHTML = "hide solution";
} else {
  document.getElementById("sol").innerHTML = "";
  document.getElementById("inst").innerHTML = "show solution";
}
'>show solution</b>

DOM: document.forms

<FORM name="input_types" onsubmit="return false;">
  <p>The text input type is as follows:</p>
  <INPUT type="text" name="text_field"><br><br>

  <p>The password input type is as follows:</p>
  <INPUT type="password" name="text_pswd"><br><br>

  <h5>Radio Examples</h5>
  <INPUT type="radio" name="text_radio1">radio1a
  <INPUT type="radio" name="text_radio1">radio1b
  <INPUT type="radio" name="text_radio1">radio1c
  <INPUT type="radio" name="text_radio1">radio1d<br>
  <INPUT type="radio" name="text_radio2">radio2a
  <INPUT type="radio" name="text_radio2">radio2b
  <INPUT type="radio" name="text_radio2">radio2c
  <INPUT type="radio" name="text_radio2">radio2d

  <h5>Checkbox Example</h5>
  <INPUT type="checkbox" name="text_check1">check1a
  <INPUT type="checkbox" name="text_check1">check1b
  <INPUT type="checkbox" name="text_check1">check1c
  <INPUT type="checkbox" name="text_check1">check1d

  <h5>Button Example</h5>
  <INPUT type="button" name="submit" value="Submit" onclick="alert('Thanks for
    pushing my button!')">
  <INPUT type="reset" value="Reset">
</FORM>

<FORM name="convert" onsubmit="return false;">
  <INPUT type="text" name="feet" value="0"
    onchange="var f = document.forms.convert.feet.value;
              document.forms.convert.inches.value = f*12;">
  feet =
  <INPUT type="text" name="inches" value="0"
    onchange="var i = document.forms.convert.inches.value;
              document.forms.convert.feet.value = i/12;">
  inches
</FORM>

<FORM name="grader" onsubmit="return false;">
  <INPUT type="text" name="score" maxlength="3" size="6" value="0"
  onchange="validate();">
</FORM>

<button onclick="grade(document.forms.grader.score.value);">grade</button>

<INPUT type="text" id="grade" maxlength="2" size="6">

<script>
  function grade(score) {
    if (score >= 93) {
      document.getElementById("grade").value = "A";
    } else if (score >= 90) {
      document.getElementById("grade").value = "A-";
    } else if (score >= 87) {
      document.getElementById("grade").value = "B+";
    } else if (score >= 83) {
      document.getElementById("grade").value = "B";
    } else if (score >= 80) {
      document.getElementById("grade").value = "B-";
    } else if (score >= 77) {
      document.getElementById("grade").value = "C+";
    } else if (score >= 73) {
      document.getElementById("grade").value = "C";
    } else if (score >= 70) {
      document.getElementById("grade").value = "C-";
    } else if (score >= 67) {
      document.getElementById("grade").value = "D+";
    } else if (score >= 60) {
      document.getElementById("grade").value = "D";
    } else {
      document.getElementById("grade").value = "F";
    }
    if (score < 73) {
      alert("MAPR Required");
    }
  }
</script>

<script>
  function validate() {
    if(document.forms.grader.score.value>100 ||
        document.forms.grader.score.value<0 ||
        isNaN(document.forms.grader.score.value)) {
    alert('Invalid score');
    document.forms.grader.score.value=0;
  }
  }
</script>