SENG1050 Chap.8 JavaScript, the DOM and Form Validation
JavaScript, the DOM and Form Validation
This chapter follows the Week 8 lecture on behaviour in the browser. It places JavaScript beside Java, HTML and PHP, introduces objects, properties, methods and events, and covers variables, scope, types, operators, pop-up boxes, decisions, loops and functions. It then explains the document object model and how scripts read form values, and builds client-side validation for text boxes, checkboxes, radio buttons and menus.
The JavaScript lab extends a calculator, validates form fields, stores form data in a cookie and adds and removes elements through the DOM.
What this chapter covers
- 01
JavaScript versus Java and PHP
- 02
Objects, properties, methods and events
- 03
Variables, scope and const
- 04
Types, operators and string joining
- 05
Alert, confirm and prompt
- 06
Functions and return values
- 07
The document object model
- 08
Validating text, checkbox, radio and select
Worked example · free
Read a form value two ways through the DOM
- 1Through the form object: document.order.qty.value, because the browser creates an object for each named form and its named controls.
- 1By id: document.getElementById("qty").value, which reaches any element with that unique id.
- 1Both start from document, which itself sits under window, the default object.
Key terms
- Document object model
- The document object model represents a page as objects, from window down to forms and their elements, that scripts can read and change.
- Event
- An event is an occurrence, such as a click or a page load, that triggers a method.
- Global variable
- A global variable is declared outside any function and is available to the whole page.
- Undefined value
- Undefined is the value of a variable that has been declared but never assigned.
- Client-side validation
- Client-side validation checks form input in the browser before the form is submitted.
- Selected index
- The selected index is the 0-based position of the chosen option in a select menu.
- Loose typing
- Loose typing lets a JavaScript variable change type during a program, a practice the lecture warns against.
JavaScript, the DOM and Form Validation FAQ
How do I stop a form submitting when a field is empty?
Write a function that checks whether the field's value equals the empty string, shows an alert and returns false, and otherwise returns true. Call it with return, either from the submit button's onclick or from the form's onsubmit, but never from both.
What is the difference between null and undefined in JavaScript?
Undefined means a variable has been declared but no value has been assigned. Null is a value that the programmer deliberately assigns to say there is nothing there. Both are among the five primitive types the lecture covers.
Why is client-side validation not enough on its own?
JavaScript runs in the visitor's browser, so it can be switched off or bypassed. Browser checks improve the experience for honest users, but any rule that protects stored data must be checked again by the server-side script that receives the form.
How is JavaScript different from PHP?
The syntax is close, apart from PHP's dollar-sign variables and its dot for joining strings where JavaScript uses a plus sign. The key difference is where the code runs: JavaScript runs in the browser and its source is visible, while PHP runs on the server and sends only its output.
What do alert, confirm and prompt return?
Alert shows a message with an OK button and returns nothing useful. Confirm offers OK and Cancel and returns true or false. Prompt asks a question with an optional default and returns the text the user typed.
Exam move
Write a complete page by hand with two inputs, a button and a function that reads the values, checks them and reports a result, then trace it with two sets of numbers, one valid and one empty. Practise one validation function for each control type. Keep a list of the slips you make, such as joining strings with + or misspelling getElementById.
Add a short comment to every function you write, since the lecture ties comments to full assignment marks.
Working through JavaScript, the DOM and Form Validation in SENG1050? Sia is AskSia’s AI Computer Science tutor — ask any SENG1050 JavaScript, the DOM and Form Validation question and get a clear, step-by-step explanation grounded in how SENG1050 is taught and assessed. Read this chapter free, then take your hardest questions to Sia.
