UNIT 5
EVENTS
•Events are actions or occurrences recognized by the
browser
•Triggered by: user interactions, browser actions, or
system changes
•JavaScript is event-driven — most web interactivity
depends on events
•Key concept: When an event occurs → browser notifies
→ your code responds
•Common analogy: Events are like "signals" — your code
"listens" and reacts
EVENT HANDLING
• THE PROCESS OF DETECTING EVENTS AND EXECUTING
JAVASCRIPT CODE (HANDLERS/LISTENERS) IN RESPONSE TO
MAKE WEB PAGES INTERACTIVE
•ENABLES INTERACTIVE WEB PAGES (CLICK BUTTONS, HOVER
EFFECTS, FORM VALIDATION, ETC.)
•CORE TO MODERN WEB APPS (SINGLE-PAGE APPS, DYNAMIC UIS)
•HANDLES USER INPUT WITHOUT PAGE RELOADS
HANDLING EVENTS
•Inline Event Handler Old method: attaches handler directly in HTML via attributes (e.g.,
onclick="..."). Simple but mixes structure and behavior — not recommended for maintainable
code.
•
•Traditional (DOM Level 0) Handler Assigns a single function to an element's event property
(e.g., [Link] = fn). Easy but overwrites previous handlers and lacks advanced
features.
•
•addEventListener (DOM Level 2) Modern, preferred method: attaches multiple handlers to
the same event, supports options (bubbling/capturing), and allows easy removal with
removeEventListener.
EVENT PHASES (BUBBLING & CAPTURING)
•The order in which an event propagates:
[Link] (top-down from window to target)
[Link] (reaches the element that triggered it)
[Link] (bottom-up from target to window) — most
common/default.
•Bubbling Default phase where events propagate upward from the
target element to ancestors — enables event delegation.
•Capturing Less common phase where events propagate downward
from ancestors to the target (set via useCapture: true in
addEventListener).
•Event Object (e) Object passed to every handler containing details:
[Link] (event name), [Link] (element that triggered it),
[Link] (element the handler is on), methods like
preventDefault() and stopPropagation().
TYPES OF EVENTS
•Mouse Events
•Keyboard Events
•Form / Input Events
•Window / Document Events
•Clipboard Events
•Drag & Drop Events
•Touch Events (mobile)
•Focus / Blur Events
•Others: Media, Animation, Transition, etc.
MOUSE EVENTS
• CLICK - FIRES WHEN A POINTING DEVICE BUTTON (USUALLY LEFT
MOUSE) IS PRESSED AND RELEASED ON AN ELEMENT.
• DBLCLICK - FIRES WHEN AN ELEMENT IS DOUBLE-CLICKED QUICKLY.
• MOUSEDOWN - FIRES WHEN A MOUSE BUTTON IS PRESSED DOWN
OVER AN ELEMENT.
• MOUSEUP FIRES WHEN A MOUSE BUTTON IS RELEASED OVER AN
ELEMENT.
• MOUSEMOVE FIRES REPEATEDLY AS THE MOUSE POINTER MOVES
OVER AN ELEMENT.
• MOUSEOVER FIRES WHEN THE MOUSE POINTER ENTERS AN
ELEMENT OR ONE OF ITS CHILDREN.
• MOUSEOUT FIRES WHEN THE MOUSE POINTER LEAVES AN ELEMENT
OR ITS CHILDREN.
• MOUSEENTER FIRES WHEN THE MOUSE POINTER ENTERS THE
ELEMENT (DOES NOT BUBBLE, IGNORES CHILD ELEMENTS).
• MOUSELEAVE FIRES WHEN THE MOUSE POINTER LEAVES THE
ELEMENT (DOES NOT BUBBLE, IGNORES CHILD ELEMENTS).
KEYBOARD EVENTS
• KEYDOWN FIRES WHEN A KEY IS PRESSED
DOWN (REPEATS IF HELD); PROVIDES [Link]
(CHARACTER/VALUE) AND [Link] (PHYSICAL
KEY).
• KEYUP FIRES WHEN A KEY IS RELEASED.
• KEYPRESS DEPRECATED — FIRED FOR
PRINTABLE KEYS; USE KEYDOWN + INPUT
INSTEAD FOR MODERN CODE.
FORM & INPUT EVENTS KEYWORDS
•submit Fires when a form is submitted (via button or Enter key);
often prevented with [Link]() for AJAX.
•change Fires when an input/select/textarea value changes and the
element loses focus.
•input Fires immediately on every value change in a text/input
element (real-time typing detection; best for live updates).
•focus Fires when an element receives focus (via click, tab, etc.).
•blur Fires when an element loses focus.
•reset Fires when a form is reset (via reset button).
WINDOW / DOCUMENT EVENTS KEYWORDS
•load Fires when the entire page (including images, stylesheets) has
fully loaded.
•DOMContentLoaded Fires when the HTML document has been
completely parsed and the DOM is ready (faster/safer than load for
most scripts).
•resize Fires when the browser window is resized.
•scroll Fires when the user scrolls the document or an element.
•unload / beforeunload Fires when the page is about to be
unloaded (e.g., closing tab); beforeunload allows prompting the user.
INTRODUCTION TO AWT
•AWT stands for Abstract Window Toolkit
•Part of Java since version 1.0; first GUI toolkit in Java
•Platform-dependent (uses native OS components → "heavyweight")
•Located in [Link] package
•Used for creating window-based applications & applets (though applets are
deprecated)
•Key features:
•Platform-independent API but native look & feel
•Components: Buttons, Labels, TextFields, etc.
•Event-driven programming
•AWT vs Swing: AWT is older, simpler; Swing is lightweight, more flexible, and
preferred today
AWT CLASS HIERARCHY
•[Link]
•[Link] (base for all visual elements)
•[Link], Label, Checkbox, Scrollbar, etc.
•[Link] (holds other components)
•[Link], Window, Frame, Dialog
•Component → Basic visual/control elements (non-
container)
•Container → Can hold other Components/Containers
COMPONENTS VS CONTAINERS
•Component:
•Basic building blocks of GUI
•Examples: Button, Label, TextField, Checkbox, Scrollbar
•Cannot contain other components
•Container:
•Special Component that can hold other Components
•Manages layout of child components
•Examples: Frame (main window), Panel (sub-container),
Window
•Rule: Add components to containers using add() method
TYPES OF CONTAINERS IN AWT
•Window → Top-level, borderless window (rarely used directly)
•Frame → Most common top-level container (has title bar, borders,
menus)
•Default layout: BorderLayout
•Panel → Lightweight container (no window of its own)
•Used to group components inside Frame
•Default layout: FlowLayout
•Dialog → Pop-up window (modal/non-modal)
import [Link].*;
public class MyFrame extends Frame {
public MyFrame() {
setTitle("AWT Frame Example");
setSize(400, 300);
setVisible(true);
}
public static void main(String[] args) {
new MyFrame();
} }
LABELS IN AWT
•Label → Displays read-only text or message
•Cannot be edited by user
•Used for titles, instructions, or labeling other controls
•Constructors:
•Label() — empty
•Label(String text)
•Label(String text, int alignment) ([Link], CENTER,
RIGHT)
Label lbl = new Label("Welcome to AWT!", [Link]);
add(lbl); // add to container (e.g., Frame or Panel)
[Link](new Font("Arial", [Link], 18));
[Link]([Link]);
BUTTONS IN AWT
• BUTTON → CLICKABLE CONTROL THAT TRIGGERS AN ACTION
• FIRES ACTIONEVENT ON CLICK
• CONSTRUCTOR: BUTTON(STRING LABEL)
• EXAMPLE CODE:
Button btn = new Button("Click Me");
add(btn);
[Link](e -> {
[Link]("Button clicked!");
// or show dialog, change text, etc.
});
CHECKBOXES IN AWT
• CHECKBOX → TOGGLE ON/OFF (TRUE/FALSE) STATE
• CAN BE STANDALONE OR GROUPED
• CONSTRUCTOR: CHECKBOX(STRING LABEL), CHECKBOX(STRING LABEL,
BOOLEAN STATE)
• EXAMPLE CODE:
Checkbox chk1 = new Checkbox("Option 1", true);
Checkbox chk2 = new Checkbox("Option 2");
add(chk1); add(chk2);
[Link](e -> {
[Link]("Option 1: " + [Link]());
});
RADIO BUTTONS IN AWT
•AWT has no built-in JRadioButton (like Swing)
•Use Checkbox + CheckboxGroup for mutual exclusion (radio
behavior)
•Only one can be selected in a group
•EXAMPLE CODE:
CheckboxGroup group = new CheckboxGroup();
Checkbox r1 = new Checkbox("Male", group, true);
Checkbox r2 = new Checkbox("Female", group, false);
add(r1); add(r2);
SCROLLBARS IN AWT
•Scrollbar → Allows user to scroll through content
(horizontal/vertical)
•Used standalone or with ScrollPane (for containers)
•Constructors:
•Scrollbar() — vertical
•Scrollbar(int orientation, int value, int visible, int min, int max)
•EXAMPLE CODE:
Scrollbar sb = new Scrollbar([Link], 50, 10, 0, 100);
add(sb);
[Link](e -> {
[Link]("Scroll value: " + [Link]());
});
LAYOUT MANAGERS IN AWT
•Control how components are arranged in a container
•Set using setLayout(LayoutManager mgr)
•Common AWT Layouts:
•FlowLayout — Left-to-right, row-by-row (default for Panel)
•BorderLayout — 5 regions: NORTH, SOUTH, EAST, WEST,
CENTER (default for Frame)
•GridLayout — Equal-sized rows & columns
•CardLayout — Stack of cards (one visible at a time)
•Others: GridBagLayout (advanced), null (absolute positioning –
avoid)
LAYOUT EXAMPLES – FLOW LAYOUT & BORDER
LAYOUT
• FLOW LAYOUT EXAMPLE :
setLayout(new FlowLayout([Link], 10, 10));
add(new Button("One"));
add(new Button("Two"));
add(new Button("Three"));
• BORDERLAYOUT EXAMPLE:
setLayout(new BorderLayout(5, 5));
add(new Button("North"), [Link]);
add(new Button("South"), [Link]);
add(new Button("Center"), [Link]);
LAYOUT EXAMPLES – GRIDLAYOUT
• GRIDLAYOUT EXAMPLE (2 ROWS × 3 COLUMNS):
setLayout(new GridLayout(2, 3, 10, 10)); // rows, cols, hgap, vgap
add(new Button("1"));
add(new Button("2"));
add(new Button("3"));
add(new Button("4"));
add(new Button("5"));
add(new Button("6"));
INTRODUCTION TO JDBC
•JDBC = Java Database Connectivity
•Standard Java API (in [Link] & [Link] packages) for connecting
Java apps to relational databases
•Platform-independent way to execute SQL queries (SELECT, INSERT,
UPDATE, DELETE)
•Key goal: Write database code once → run on any DB with
appropriate driver (MySQL, Oracle, PostgreSQL, etc.)
•JDBC is part of core Java SE – no extra installation needed beyond
driver JAR
TYPES OF JDBC DRIVERS
• FOUR TYPES (TYPE 1–4); MOST COMMON TODAY IS TYPE 4
• TYPE 1: JDBC-ODBC BRIDGE (DEPRECATED, REMOVED IN JAVA 8+)
• JAVA → ODBC → DB; REQUIRES ODBC DRIVER ON CLIENT
• TYPE 2: NATIVE-API / PARTLY JAVA
• JAVA → VENDOR NATIVE LIBRARY → DB; PLATFORM-DEPENDENT
• TYPE 3: NETWORK PROTOCOL / MIDDLEWARE
• JAVA → MIDDLEWARE SERVER → DB; MIDDLEWARE HANDLES PROTOCOL
• TYPE 4: THIN / PURE JAVA DRIVER (RECOMMENDED)
• 100% JAVA; DIRECT NETWORK COMMUNICATION WITH DB PROTOCOL
• PORTABLE, NO NATIVE CODE, FASTEST IN MOST CASES
STEPS TO USE JDBC (OVERVIEW)
• STANDARD 6–7 STEP PROCESS FOR ANY JDBC APPLICATION:
• IMPORT PACKAGES ([Link].*)
• LOAD & REGISTER THE DRIVER
• ESTABLISH CONNECTION
• CREATE STATEMENT / PREPAREDSTATEMENT
• EXECUTE QUERY
• PROCESS RESULTSET (FOR SELECT)
• CLOSE RESOURCES (CONNECTION, STATEMENT, RESULTSET)
• STEP 1 – LOAD & REGISTER THE DRIVER
• IN JAVA 6+ (JDBC 4.0+), DRIVER AUTO-LOADS VIA SERVICE PROVIDER →
OFTEN NO EXPLICIT LOAD NEEDED
• FOR OLDER/COMPLETE CONTROL:
[Link]("DRIVERCLASSNAME")
• REGISTERS DRIVER WITH DRIVERMANAGER
// Optional in modern Java, but good practice
try {
[Link]("[Link]");
} catch (ClassNotFoundException e) {
[Link]("Driver not found: " + e);
}
• STEP 2 – ESTABLISH CONNECTION
• USE [Link](URL, USER, PASSWORD)
• URL FORMAT: JDBC:<SUBPROTOCOL>://<HOST>:<PORT>/<DATABASE>?
KEY=VALUE
• COMMON URLS:
• MYSQL: JDBC:MYSQL://LOCALHOST:3306/MYDB?USESSL=FALSE
• ORACLE: JDBC:ORACLE:THIN:@LOCALHOST:1521:ORCL
• POSTGRESQL: JDBC:POSTGRESQL://LOCALHOST:5432/MYDB
• EXAMPLE:
String url = "jdbc:mysql://localhost:3306/employeedb";
String user = "root";
String pass = "password";
Connection con = [Link](url, user, pass);
[Link]("Connected successfully!");
• STEP 3 – CREATE STATEMENT
• THREE TYPES:
• STATEMENT — FOR STATIC SQL
• PREPAREDSTATEMENT — FOR PRECOMPILED SQL (WITH ?
PLACEHOLDERS) – PREVENTS SQL INJECTION, FASTER
• CALLABLESTATEMENT — FOR STORED PROCEDURES
• EXAMPLE:
// Simple Statement
Statement stmt = [Link]();
// PreparedStatement (recommended)
PreparedStatement pstmt = [Link](
"INSERT INTO employees (name, salary) VALUES (?, ?)");
• STEP 5 – ITERATE RESULTSET
• RESULTSET IS A CURSOR POINTING BEFORE FIRST ROW
• METHODS: NEXT(), GETSTRING(COL), GETINT(COL), GETDOUBLE(), ETC.
• COLUMN ACCESS: BY INDEX (1-BASED) OR NAME
• EXAMPLE:
while ([Link]()) {
int id = [Link]("id");
String name = [Link]("name");
double sal = [Link]("salary");
[Link](id + " | " + name + " | " + sal);
}
SCROLLABLE & UPDATABLE RESULTSET
•Default: Forward-only, read-only
•Create scrollable:
createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,
ResultSet.CONCUR_READ_ONLY)
•Types:
•TYPE_FORWARD_ONLY (default)
•TYPE_SCROLL_INSENSITIVE — scrollable, sees own changes only after
requery
•TYPE_SCROLL_SENSITIVE — sees DB changes
•CONCURRENCY: CONCUR_READ_ONLY OR CONCUR_UPDATABLE
Statement stmt = [Link](
ResultSet.TYPE_SCROLL_INSENSITIVE,
ResultSet.CONCUR_READ_ONLY);
ResultSet rs = [Link]("SELECT * FROM employees");
// Move freely
[Link](); // go to last row
[Link](); // back one
[Link](3); // jump to row 3
[Link]("Row 3 name: " + [Link]("name"));