Web Scripting Languages: Master Client-Side and Server-Side Development

Web scripting languages make it possible to create dynamic and interactive Web applications by executing code either in the browser or on the server. In this handout, we will examine client-side scripting through JavaScript, learning how it interacts with the DOM, events and browser Web APIs. We will then explore server-side scripting through PHP, which processes HTTP requests, accesses data and generates responses before they reach the browser. We will also study JavaScript and DOM interaction for dynamic interface updates and PHP and MySQL integration, showing how a server-side application can retrieve, process and present data stored in a relational database.

Web Scripting Languages

Fullscreen Download

Key points

Web scripting languages → enable dynamic and interactive behavior by executing code in the browser, on the server, or through cooperation between both.

Client-side ≠ server-side: client-side code runs on the user’s device, while server-side code processes requests, manages data, and performs trusted operations.

JavaScript = programming language used to implement interactive behavior, process information, modify page content, and communicate with servers.

ECMAScript ≠ Web APIs: ECMAScript defines the JavaScript language, while Web APIs provide browser capabilities such as DOM manipulation, events, networking, and storage.

<script> → connects JavaScript to an HTML document; the defer attribute postpones execution until HTML parsing is complete without blocking parsing during download.

DOM manipulation → JavaScript locates elements, reads or changes their content and attributes, and updates the interface without modifying the original HTML file.

Event = signal indicating an occurrence; event listeners associate functions with events such as click, input, change, and submit.

Event-driven interaction → user action → browser event → callback execution → data processing → DOM modification → interface update.

Client-side validation → provides immediate feedback but ≠ authoritative verification; sensitive operations and security-critical checks must be performed on the server.

PHP (Hypertext Preprocessor) = server-side scripting language used to process HTTP requests, execute application logic, and generate responses such as HTML or JSON.

PHP execution → browser request → web server → PHP application → optional database operations → HTTP response; the browser receives results, not PHP source code.

Routing = mechanism associating URL paths with application functions; a requested path does not necessarily correspond to a physical PHP file.

PHP request data → $_GET accesses query parameters, $_POST accesses ordinary POST form data, and $_COOKIE accesses cookies sent by the browser.

Cookies ≠ sessions: cookies store information in the browser, while PHP sessions normally retain user-associated data on the server using a cookie-based session identifier.

SQL (Structured Query Language) ≠ MySQL: SQL defines operations on relational databases, while MySQL is a database management system that executes SQL statements.

SQL operations → SELECT retrieves data, INSERT adds rows, UPDATE modifies records, DELETE removes rows, and CREATE TABLE defines tables.

PDO (PHP Data Objects) → connects PHP to database systems such as MySQL, executes SQL statements, and retrieves results for server-generated content.

Prepared statements → separate SQL instructions from parameter values, allowing user-supplied data to be passed without directly inserting it into SQL code.

Input handling → user-provided data must be processed according to its destination; htmlspecialchars() prepares text for appropriate HTML contexts but does not protect SQL operations.

Dynamic page generation → HTTP request → PHP processing → SQL query through PDO → database results → HTML generation → HTTP response → browser rendering.