HTML Forms & Event Listeners

CS511 Final Term Notes

• These notes are compiled by Junaid Waris and Farhan Khan, virtual university students.
• The content comes from the university's reading sections, copied and pasted as text and images.
• Covering weeks 7-13, updated weekly until the final term.
• Do not print this PDF file due to blank pages and focus on reading bold material, SQ, LQ, and quizzes.
• For assistance, contact the official group or use the provided WhatsApp group link.

Event Handling

• In JavaScript, utilized in web development, an event is significant, acting as an action triggered by users or other sources like mouse clicks.

JavaScript Event Introduction

• An action detectable by JavaScript.
• Initiated by user actions or the browser itself.
• An event is triggered and then handled by JavaScript functions.

Ways to Handle Events

• Multiple ways exist, approached linearly.

Event Handling - Inline Hook

• JavaScript code is stored in an external file with functions like function validated(node){....}.
• HTML uses inline hooks to trigger JavaScript functions on events like form submission (onsubmit), input changes (onchange), focus (onfocus), blur (onblur), and clicks (onclick).
• HTML example: <form name='mainForm' onsubmit="validate(this);"> etc.
• Defining event handling functions within markup is not recommended.

Event Handling - Event Property Approach

• Utilize JavaScript to get an element from the DOM tree: var mybutton=document.getElementById (‘example');.
• Function names are then paired with corresponding events: myButton.onclick=alert (‘some message');.
• Several events defined on a single object: myButton.addEventListner (‘mouseout', funcName);.
• JavaScript code segregates from HTML, and the code remains clean, simplifying HTML modifications.

Event Handling - Event Listener Approach

• An anonymous function passes when using the event listener approach
• Example: myButton.addEventListener (‘click', function () { var d = new Date (); alert ("You clicked this on" +d.toString ()); });.
• In the code, the whole function is passed as a parameter to AddEventListner when a click event is generated.

Event Object

• When an event is triggered, the browser constructs an event object that contains information about the event.
• clientX is to where the user clicked
• The e.Target can used to manipulate div elements

Capturing and Bubbling

• JavaScript handles events via capturing and bubbling.

Handling Events Phases

• Capturing: Event propagation from parent to nested child.
• Identifying the target.
• Bubbling: Registered events trigger from the most nested child towards the outermost element.

Event Propagation

• In JavaScript, it progresses from the immediate object causing the event to the document root, known as event propagation or bubbling.
• Clicking on an element means clicking on all ascendants in the DOM tree.

Event Types

• Mouse, keyboard, and touch.

Mouse Events

• Event are related to mouse interactions
• Mouse movements are described
• Mouse click and mouse move events are two types of mouse events
• Some mouse events can be sent at once
• Cancelable and Bubbles properties can be used

Keyboard Events

• Events are related keyboard interactions
• Within input fields, keyboard events are useful
• With each key hit, may validate email addresses or submit asynchronous requests for suggestions with dropdown lists
• Browser handle keyboard properties differently, use Javascript frameworks to handle these quirks

Touch Events

• Touch events relatively new category of events especially used on mobile devices.
• Touch events triggered by devices with touch screens.
• Different events e.g., touchstart, touchmove, and touchend, analogous to mouse events (mousedown, mousemove, and mouseup).

Form Validation

• Form validation determines if a user has filled a form correctly.

Form Validation levels

• HTML Level: Built-in HTML elements for validation (e.g., specifying email type or range for numbers).
• User may disable Javascript.
• Javascript Level: Client-side validation.
• Server level required, so that erroneous data from being stored in the database.
• Webserver Level: Ensures data integrity irrespective of client-side settings.

Form Events

• Form events occur when user input to the server
• The submit event is commonly used and use preventDefault() to prevent server submission if, for example, a password field is blank.

Text Field Events

• blur: Triggered when element loses focus.
• change: When value is changed, a new choice is registered.
• focus: When field is clicked or tabs to it.
• select: User selects some text, used to prevent copy/paste.

JQuery introduction

• One of JavaScript libraries for web dev assistance
• Familiar framework providing devs access to cross-browser animation tools, user interface elements, and DOM manipulation functions.
• Helps improve development abilities by allowing use of evolving frameworks and expected Functionality

Popular Framework

• Makes work with JavaScript and DOM easy.
• JQuery also makes it easy to select an element and perform different operation on it
• Has cross browser compatibility
• Code written executable on all different browsers
• Most popular JavaScript library (as of 2021).

JQuery's uses

• Used by 78% of all websites
• Has 96% market share
• Includes a Content Delivery Network (CDN)
• Includes downloads and usages on web servers
• Installed via package manager( npm, yarn, etc)

JQuery placement

• Can be included in the head, or before body in HTML file

JQuery Selectors

• DOM element selection is a common Javascript jobs
• Selection method both strong and easy.
• Javascript has a variety of functions for selecting an element, like getElementByID() and querySelector().
• querySelectorAll() capabilities now let DOM elements be selected using CSS selectors

JQuery

• Reason programmer were given a straightforward cross-browser way to programmatically select an element using regular CSS selectors.
• Power of jQuery resides in the function named jQuery().
• Notation to select DOM objects that match CSS attributes

JavasScript vs JQuery selection

• Comparing JavaScript and jQuery selection
• Selecting using regular JavaScript.
• equivalent selection using jQuery. var node = document.getElementById(“here”);

basic selectors

• JQuery basic selectors
• The getElementByID() function, as you may recall, returns an Element object
• whereas querySelectorAll() returns a NodeList object.

JQuery object

• Instead of returning a single object, function always returns a group of results.
• Useful if want to return to this element as the Oth array element var color = $("#element").css("background-color");
• To attribute, second version takes two parameters and sets it to red $("#element").css ("background-color", "red");

JQuery Content Filter Selection

var allWarningText = $("body *:contains ('warning')");

JQuery Manipulators

• //manipulator; both read and write. Common element Manipulations in JQuery
• Choose any set of components from a web page using all of the selectors mentioned in this chapter
• Can now alter them in a variety of ways once chosen
• can set and get innerHTML through the method

Common Element Manipulations---- HTML Properties

Common Element Manipulations------- Changing CSS

• Css style is fairly similar to changing attributes in terms of syntax
• syntax The css() technique in jQuery is incredibly user-friendly. var color = $("#element").css("background-color"); // get the color
• use the version of css (), which takes two parameters and set them to red $("#element").css ("background-color", "red");

JQuery Manipulators – Example

• The background color of name field has been changed by using jQuery

Events in JQuery, introduction

• JQuery to create and manage JavaSCript event listeners/handlers
• With syntax modifications these are used as Javascript.
• JQuery setting up listeners for specific events addEventListener () is in pure JavaScript, jQuery includes on () and off() methods with shortcuts to attaching events.

Binding and unbinding events

• jQuery is less verbose than Javascript
• JQuery makes many typical chores easy
• Example shows three different mouse events + easier typical chores
• The click event handler the jQuery off () turns off listening
• Mouse over, mouse move event. far more straightforward than the JavaScript

DOM Manipulation using JQuery

• edit the inside contents of a DOM element with the html () function modify the internal attributes and styles
• jQuery extends the capabilities of native JavaScript DOM functions.

Creating Nodes

• jQuery can translate strings containing correct DOM syntax into DOM objects automatically. <creating new DOM node in JavaScript> <creating new DOM node in jQuery>

Adding DOM Elements

• When an element is defined, it must be inserted into the existing DOM tree.
• Inserted in several places at once you desire, since selectors return a set of DOM elements.

Inserting DOM Elements

The append () method accepts as a parameter an HTML string, a DOM object, or a jQuery object as an argument.

Animations using jQuery

• Different elements through animation in html document
• Some the generic animation as show and fade
• will display the image gradually over given duration

Raw Animations in jQuery

• With generic animation, some raw animations could be used for type requirements animate()

###Introduction to Ajax

• A key JS feature where a data is fetched from server while staying on client side
• AJAX is Asynchronous JS and XML which uses Json format.

###General Sequence of Events

• In browser DOM is created
• Html document will be listen to event
• Client Browser. Browser Interface. Javascript. Server. WebService.
• UML sequence diagram of an AJAX request

Asynchronous Request:

• Sends asynchronous request to server and server sends back the request with data
• Updates html page
• Synchronous request, Page loaded is sent back to server then server change the time

Ajax Asynchronous Example(What's Changed?)

• We send request to change time on web page to server and it only sends us the updated time.
• We update that time on our web page and remaining content of web page are not changed.
• Ajax powerful web pages , not updating whole page to change one element.

Making Asunchrounous Requests-load():

load(): load() is used to update content that we get from server. $("#timeDiv").load(“currentTime.php");

###Get function

• function to send request get data from server, with hints to the user.
• Has function to send data over server and parameter data
• Serialize convertes to query string stored to server.

Module No.93 Asynchronous file transmission

• File transmission
• The default way a file gets uploaded to the server is through the synchronous mode
• But in Ajax, a file to a server in asynchronous

Module No.94 -Server-Side

Client Side Scripts:

• execution of client site scripts has been illustrated. Server Site Scripts:
• Similarly, the execution of the server site scripts has been illustrated in the following figure. and shows client interactions

Server -Side Script Resources:

Resources have access to many resources .

• A server-side script to access multiple resources, include Webservice mail server
• Popularity of PHP Is most popular program language

Module No.95-PHP

• Requires Apache webserver, PHP and MySQL local development setup with software from software stack.
• To access database, it uses https://www.apachefriends.org/download.html
• PHP variables are assigned with value from right to left.
• String: String literal be defined Double Single

Module No.97-PHP

• In PHP, strings can be appended together using the operator

Module 99-PHP

• Program control
• PHP also has to support Program Control three Loops that any program lang has.
• while. for ,

Module no. 100 Function Parameters

• Func can can or return value,
• return to string.
• Parameters-Passing

Module 101 Parameter Scope

• Functions can have default parameter values
• Parameter scope, variables defined have function scope

Module No.102 Array

• $daysarray notation
• for eacharray -foreach, Adding and Deleting

Module NO.103 Array sorting

• Aarrays can be sorting -sort() and assort, arrays can be reversed if required.

Module no104

• arrays use Super Globals allow program easy access
• $GLOBALS
• $COOKIES
• $ SESSION -$_ENV
• $_SERVER

###Module 105 _GET and _POST superglobal arrays

• Both $_GET and $_POST superglobal arrays be use get data (submitted through form) for further processing as show in figure below:
• show you can extract data use $_GET array. show use $ _POST for getting dataset data.

###Module no 108

• $_Files array using data type to store and handle
• You can set the file size data, name

Module No.109

• Mainly, be save the user data
• The easy revertive data
• Techniques

Module No.110

• Object
• OO design
• easy by a well managed method
• Public
• Private
• Protectect

Module no. 112 properties public private.

How they do it better on design of software

• how do you define the set of visible visible

Module No.113

The is the defination. With object how will data set on share all object

• class Cont
• this

Module NO.114 Databases

• In PHP
• Most for store user data.
• Web design database

Module No. 115

• Use different in QL

Module No.117

• What utility in set-up database 1- to which MySQL viaXampp

Module No. 118

After connecting database. See what you for through PHP.

• different from myQSL data

Module no 187 xml

• It is the way information in the browser in ajax

Module no145 three layer

• three layer what is needed?

Module No. 146 , adapter pattern

• pattern what is used for?

Module no 147 Template mathod pattern

• What techinque involves mathod

Module No.148

• To used design the table data
• What is gateway pattern.

Module no 150 Framework.

Three function are there?

###Module No.1487

• Is MVD more effectivent hen alls th esytsteM

###Module no1489

• how we the information more safely

Module no 150 what is needed for set-up, code has to right

Code has to all set-up

HTTP Authentication

• One of the simplest means to identify users logged into web application

X. 509 Certificates

• Used containing details including the algorithms used, the domain it was issued for, and some public key information.

Web App Security, what is the main factors for desing on code -

• Security must be there!
• Confidential
• Integrity and Authentication