Scribd
Upload
21 views14 pages

MM211 Lecture 12 - JS2

The document covers advanced JavaScript concepts including the use of JavaScript with forms, variable declaration, and DOM manipulation techniques. It explains the differences between querySelector() and getElementById(), the importance of code order, event handling, and the use of anonymous functions. Additionally, it discusses processing form inputs, particularly with radio buttons, and provides examples for practical understanding.

Uploaded by

abhishek kumar bhaugeeruthy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
21 views14 pages

MM211 Lecture 12 - JS2

The document covers advanced JavaScript concepts including the use of JavaScript with forms, variable declaration, and DOM manipulation techniques. It explains the differences between querySelector() and getElementById(), the importance of code order, event handling, and the use of anonymous functions. Additionally, it discusses processing form inputs, particularly with radio buttons, and provides examples for practical understanding.

Uploaded by

abhishek kumar bhaugeeruthy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 14

MM211 –

THE WEB & INTERNET

Lecture 12
JavaScript Part 2

Zoubeir Aungnoo
Learning Outcomes
■ JS with Forms
■ JS Variables
■ querySelector() vs getElementById()
■ Order matters
■ Events revisited
■ Anonymous functions
■ Build a simple search
■ Processing forms
Forms
■ It is common to use JS with forms, esp to validate form
info before submitting to web server
■ onSubmit event
■ false stops the form submission
■ this keyword refers to the current form being submitted
– Validate function accepts an argument, which is the
form object

■ hellojs1.html
Variables
■ In JS we use let to declare variables, without needing to indicate
types

■ JavaScript is loosely typed


■ JS auto determine the type based on the data assigned to a
variable
■ In functions you don’t need to specify datatypes of arguments
– Provides flexibility to move faster

■ Lacks the capability of a strongly typed system


– when you are trying to add an int to an object,
– which protects you from spending hours debugging a type
error.
Variables
■ Consider hellojs2.html

■ is a global variable in JS
■ is a function we can use to select a node in
the DOM
■ After we select the element with the ID
■ We get the text inside the input
■ Then add it to our alert
querySelector vs
getElementById
.querySelector() .getElementById()
Select an element based on a can only select an element by its
CSS selector ID
Specify: ID, class, or any other Limited to only select element by
type of selector its specified id
Can use a more elaborate rule to
select elements
e.g. the first element in a list
e.g. the element which has focus

■ CSS Selectors:
https://www.w3schools.com/cssref/css_selectors.asp
Order matters
■ Consider hellojs3.html

■ If your code is loaded first in <head> and in your code


you are accessing an element in the DOM,
■ Results in null error
– The element is not yet rendered

■ Solution:
– Move <script> after the form
– After form rendered we add the event listeners
Events
■ We can listen to events in JavaScript, which occur when
something happens on the page.
■ In previous example, hellojs2.html, the onsubmit event
was added as an attribute
■ In hellojs3.html it didn’t work because of the ordering

■ Fix #1: Refer to hellojs4.html


■ Fix #2: Refer to hellojs5.html

■ JS Events:
– https://www.w3schools.com/js/js_events.asp
– https://www.w3schools.com/jsref/dom_obj_event.asp
Anonymous functions
■ An anonymous function is a function without a name.
■ The following shows how to define an anonymous function:

■ You often need to assign the anonymous function to a


variable.

■ When events occur, we can call an anonymous function to


be executed
Anonymous examples
■ anonymous1.html
■ anonymous2.html
■ quiz.html
■ geolocation.html
Forms
■ If we search for something on Google, we’ll see that the
URL changes to
■ The key, for “query”, has a value of along
with other keys and values.
■ These inputs are part of GET requests that look like:

■ We can thus create a form that takes user input and


sends it to Google’s search engine:
■ search1.html
■ search2.html
Process Forms: radio
button
■ Using queryselector it’s possible to determine which
radio button has been selected
■ Then using programming construct like a switch
statement the choice can be processed

■ process1.html
Process Forms: radio
button
■ Using querySelector() it’s possible to determine which
radio button has been selected
■ Then using programming construct like a switch
statement the choice can be processed
– process1.html

■ Also possible to use getElementById() to determine


which radio button has been selected
■ Then using programming construct like a for loop the
choice can be processed
– process2.html
QUESTIONS?
.

You might also like