We expect that you have experience with HTML, CSS, and Javascript. If you have not previously taken Fundamentals of Web Programming (FWP) with us, then we strongly recommend that you brush up on these topics at FWP.
Write a loops that prints the array in reverse order.
Here’s a solution.
Objects contain variables, called properties. Each property has a name, and a value.
Write a single line of code that prints out information about the company, including the symbol and the market capitalization.
Here’s a solution.
Write an if-statement that tests if the company has a capitalization greater than $300 billion. If so, print ‘big’; otherwise, print ‘not so big’.
Here’s a solution.
Arrays are indexed by numbers. Sometimes, it’s useful to index something by name. For example, I might want the grade for some student Kyle Balkcom, and would like to be able to look that up by name. We call the string used to index the data the key, and the value of the data the value.
The properties in an object are names of variables. If the key in the dictionary is a legitimate variable name (no spaces), then you can use dot-notation to fetch the value:
Below is some code that creates an array of company objects. Write a function printCompanies that loops over elements of the array and prints tickers and capitalizations.
Here is a solution.
Write a function printBig that takes an array of company objects as a parameter. The function should contain a loop with an if-statement that prints out only the company information for any company with capitalization greater than $300B.
Here is a solution.
Write a function isBig that takes a company object as a parameter, tests if the company has a capitalization greater than $500 billion, and returns true if so, and false if not. (Bonus: write the body of the function using only one line of code.
Here is a solution with an if-statement, and a more clever solution.
Functions can take parameters, and a parameter can have a value that this the name of some other function.
Here’s an example that puts everything together, with a function select that takes an array and a boolean-valued function, and creates a new array containing every element of the original array that ‘passes’ the function.
Most of our webpage design has been focused on delivering content to the user. We often also need to allow users to send information back to us (their name, email, order, credit card information, etc.). We will refer to this interaction as the client/server model: the client refers the computer being used to view a webpage and the server refers to the computer to which information will be sent (the server is under your–the web programmer’s–control,).
We will consider both parts of the client-server model. In the client portion, we will discuss how to create web pages that collect data from the user. In the server portion, we will discuss how to send this data to the server and process this data on the server.
Forms provide the mechanism to collect information from the user and submit back to you for processing. A web form consists of different types of input fields each contained within a <form> tag. Although these input fields will usually be found within a <form> tag, they can appear anywhere in the HTML document. A field, however, cannot be submitted to the server – only a form can be submitted.
Show below is a simple form with one input field, a checkbox.
And here is a version where the default setting is checked
There are many different input fields, any number of which may be included in a form. Here are some popular fields.
The text input field allows the user to enter a single line of text. We can control the size of the text window with the size option and can optionally add default text into the input field.
The password intput field is similar to the text input field, but the text does not appear when it is typed.
The checkbox that we saw above allows the user to select or de-select an option. The radio input field allows the user to select one (and only one) of two or more options. In this example, we have four buttons and the second button is choosen as the default using the checked option (in the same way that we set the default for the button input field.). You’ll notice two new options name and value. By using the same name (“choice”) for each button, we tell HTML that these buttons are part of a single group and only one of the buttons can be selected at a time. The value for each button is not seen by the user, but when this form is sent back to the server, the value associated with the checked button will be provided to the server.
The select input field is similar to the radio input field, but the options to choose from are enumerated in a drop-down menu (the first enumerated option is the default selection).
The file input fields allows users to specify a file to eventually be uploaded to the server. This field only specifies the file to be uploaded, we’ll show you later how to send it to the server.
The button input device employs a slightly different syntax. A button can be placed in a form using the open and close button tag – the text between these tags appears on the button. Below, for example, is a simple OK button. An action is associated with a button using the onClick attribute. In this case, the action is to simply print the text OK in the console. This action can be any action including a call to a Javascript function.
A submit button is a special type of button whose action submits the form to the server. We’ll discuss this button in detail below.
You should notice that languages like HTML–and most other modern programming languages–provide a rich set of features that greatly simplify programming. Twenty years ago, a programmer would have had to write customized code to implement each one of these input fields. Today, these (and many more) features are built directly into the programming language making development much easier and faster.
Unlike most elements in an HTML document, input fields can get keyboard focus. That is, when an input field is selected it becomes the “active” element and can accept input from the user keyboard or mouse. If a document has, for example, a text field, then the user must select the text field in order to have the typed text appear in the text field. Run the code below and start typing – what you type doesn’t appear in the text field; you have to select the field to give the text field focus.
There are two ways to give focus to an input field. In the first, we add the attribute autofocus to the input field. Run the code below and start typing – this time, your text immediately appears in the text field without having to first select the input field.
The difference between autofocus and no autofocus may seem minor, but don’t underestimate the importance of even these small things to simplifying a user’s experience on your website. User interfaces (UI) and user experience (UX) are an incredibly important part of programming and great care and time should be given to even the smallest detail to ensure that your user’s can easily and enjoyably navigate your website.
The second way is with a bit of Javascript code. In the example below, we call the function setFocus when the page is first loaded and this function sets the focus of the input field with name=textAF.
Most browsers also allow you to use the tab key to move the focus through the various input fields. Run the code below and press the tab key and you’ll notice that the focus changes between the three input fields.
We can control the order in which elements receive focus using the tabindex attribute. In the example below, the tabindex attributes specify the order (1, 2, 3, 4) in which the tab key will choose input fields.
Sometimes it is necessary to disable certain input fields until a certain condition is met. For example, a “submit” button (see below) may be disabled until the user has supplied all of the required information. An input field can be disabled using the – well – disabled attribute. When disabled, the input field is grayed-out and you won’t be able to interact with it.
As with setting the focus, we can use Javascript to disable an input field. Notice that the Javascript code disables an input device by setting its disabled attribute to true (as opposed to calling a function, as we did with setting focus). An input field can be re-enabled by setting the disabled attribute to false.
When submitting a form to the server, we need to be able to individually identify each input field. In previous examples, we used the id attribute to identify elements in the DOM. We will now use the name attribute to identify the elements that will sent to the server. Of course, both of these attributes can be used at the same time.
Each input field should be given a name attribute in the form name="a_meaningful_name". When the form is sent to the server (we’ll see shortly how to do this), you will be able to access these input fields using the specified name and extract the value corresponding to this input field.
We are now ready to submit a form to the server. To submit a form, create a button with a type attribute of submit. When this button is selected, the form will be sent to the server. Submitting a form typically means that the browser navigates to the page indicated by the form’s action attribute. Below is a simple form with a button of type submit and an action attribute. In this form the action is a PHP function submit.php that runs server side and receives the form and returns data to the browser (we’ll discuss PHP in lecture 4 is and how this all works server-side).
You may have noticed a second attribute associated with the form, method=POST. There are two types of protocols for sending information to the server, GET and POST. Each have their relative strenghts and weaknesses which we won’t get into at this point. For now, we will focus on the POST method.
Run this script, enter some text into each field and select the Log in submit button. After submitting, the server-side script will receive the name and password you typed, and return some information to you. We will soon learn how to handle these requests server-side.