Web GUI Development CSE5544 We will focus on the client-side. • Client-side: HTML, CSS (Bootstrap, etc.), JavaScript (jQuery, D3, etc.), and so on. Background • Server-side: PHP, ASP.Net, Python, and nearly any language (C++, C#, Java, etc.)

• HTML – Structure/Content • CSS – Presentation/Style • JavaScript – Behavior Outline

• Recall HTML+CSS Basic (warm-up). • HTML element, attribute, style, selector (type, id, class). • HTML+CSS for Web GUI. • HTML layout and commonly used elements. • Bootstrap (HTML+CSS framework with design template). • JavaScript to make Web GUI (HTML pages) dynamic and interactive. • JavaScript basic: function, array, object, etc. • HTML JavaScript DOM: manipulate HTML contents. • jQuery: JS library to simplify HTML contents manipulation and so. • D3: JS library to visualize data using HTML+SVG+CSS. HTML Element

• HTML (Hyper Text Markup Language) is the standard markup language for creating Web pages. • HTML describes the structure of Web pages. • HTML elements are the building blocks of HTML pages, and are represented by tags (to render page contents by your browsers). • W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML. HTML Attribute

• Attributes provide additional information about HTML elements, e.g., define the characteristics of an HTML element. • Attributes are always specified in the start (opening) tag. • Attributes usually come in name/value pairs, e.g., name="value”. • Both double quotes (more common) and single quotes around attribute values can be used. • In case attribute value itself contains double quotes, it is necessary to use single quotes. HTML Attribute cont.

• The four core attributes that can be used on the majority of HTML elements (although not all): • id: uniquely identify any element within an HTML page. • title: provide additional "tool-tip" information. • class: associate an element with a style sheet, and specify the class of element. • style: specify the styling (like color, font, size, etc.) within the element. • We will revisit these attributes soon later. • style: inline styles. • class and id: HTML selector. CSS Style

• CSS (Cascading Style Sheets) describes how HTML elements are to be displayed, e.g., layouts, colors, fonts, etc. • CSS can control the style of multiple elements, pages, or sites all at once. The separation of HTML from CSS can save a lot of work. • CSS can be associated with HTML elements in 3 ways: • External - by using an external CSS file • Internal - by using a

This is a heading

3 Inline

https://internetingishard.com/html-and-css/hello-css/

This is a Blue Heading

HTML Class

• The class is an important attribute of HTML elements. Elements with the same class can have equal styles. • The class name can be used (by CSS and JavaScript) to perform certain tasks for a group of elements with the specified class name. Notice the dot (.) prefixing the class name. This distinguishes class selectors from the type selectors and ID selectors. Class selector

Type selector

ID selector

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_css HTML ID

• The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). • The id value can be used (by CSS and JavaScript) to perform certain tasks for a unique element with the specified id value. Notice the hash character (#) prefixing the ID value. This distinguishes ID selectors from the type selectors and class selectors. ID selector

Type selector

Class selector

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_css More…

Descendant selectors Pseudo classes • Target only those elements that are inside of another • Mainly for links and buttons. element. For example, only phrases () in • For example - :link :visited :hover :active paragraphs of a class of .synopsis a:hover { • Note you can nest descendant selectors as deep as color: aqua; you want, but life gets confusing if too much. text-decoration: underline; .synopsis em { font-style: normal; } }

https://internetingishard.com/html-and-css/css-selectors/ And More…

CSS Specificity CSS Cascade • Specificity: which rules take precedence in CSS when • Generally, web-standard browsers will rank several rules could be applied to the same element . a style’s significance in this order: • Order matters for css rules: top-to-bottom and can result in overriding. • Some selectors will override other ones. For instance, ID selectors have higher specificity than class selectors.

https://cssway.thebigerns.com/special/master-item-styles/ HTML Layout

• Design your HTML pages and arrange the contents. • Websites often display contents in multiple columns (like a magazine or newspaper). • HTML layout techniques to create multicolumn layouts, e.g., • HTML tables (unrecommended), CSS float, CSS flexbox/grid (new), CSS framework (Bootstrap)

https://www.w3schools.com/html/html_layout.asp HTML Layout cont.

• Some web GUI design patterns (for your reference). (Useful) HTML Elements (1)

• The element indicates an input field where the user can enter data. Note that the tag has no end tag in HTML. • The element can be displayed in several ways, depending on the type attribute. • Syntax:

A one-line text First name:
input field Last name:

Radio buttons let a user Male
select ONE of a limited Other

Checkboxes let a user I have a bike
select one or more I have a car
options of a limited I have a boat
number of choices

A clickable button HTML Elements (2)

• More attribute values for • color – a color picker • date (or datetime-local) - date control (year, month, day) • file - a file-select field and a ”browse" button (for file uploads) • email - a field for an e-mail address • password - a password field • number - a field for entering a number (you can also set restrictions on what numbers are accepted) • range - a range control (like a slider control) • hidden - a hidden field (not visible to a user) • submit - a submit button (submit the data to a form-handler) • reset - a reset button (reset all form values to default values) Notes about forms and PHP: • The HTML

element defines a form that is used to collect user input. The form data can be submitted to a form-handler, which is typically a server page (e.g., PHP) with a script for processing input data. • PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages. PHP is generally used to collect form data, control user access, approach and manipulate files on the server and data in the database, generate dynamic page contents, etc. If you click the "Submit" button, the form-data • We won’t go into PHP here, but you are welcome to explore more! will be sent to a page called "/action_page.php" HTML Elements (3)

• The • The

cols=30 • The OR Bootstrap – to make HTML+CSS easier

• Bootstrap is the most popular HTML and CSS (and JavaScript) framework for developing responsive websites. • Bootstrap makes your front-end web development easier and faster.

https://getbootstrap.com/ https://www.w3schools.com/booTsTrap/ Bootstrap Features

• HTML and CSS based design templates for grid (layout), typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. HTML JavaScript

• JavaScript (JS) makes HTML pages more dynamic and interactive. • Common uses include image manipulation, form validation, and dynamic changes of content. • Specifically, we will use JS to: • change/add/remove HTML elements • change HTML attributes • change HTML styles • react to (or create new) HTML events

I am a dynamic gif! Please turn on the Slide Show mode Where to put

• In HTML, JavaScript code must be inserted between tags. • You can place any number of scripts in an HTML document. Scripts can be placed in the , in the , or in both. • Scripts can also be placed in external files (.js), which can easy the readability and maintenance, and speed up page loads. What you may know

• JavaScript basic, e.g., syntax, operation, statement/keyword (especially condition and loop), variable, data type (especially string, array, and object), function, event, etc. • Functions: block of code designed to perform a particular task, and is executed when "something" invokes it (calls it). • Objects: variables that can contain many properties (values). • Arrays: used to store multiple values in a single variable.

Useful JS Array Methods join, push/pop, shift, splice, concat, slice, sort, forEach, map, filter, reduce, every, some, indexOf, find, includes, etc. HTML JS DOM

• The W3C (DOM) is a platform and language- neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. • We will work on HTML DOM - standard model for HTML documents.

• The HTML DOM is a standard for how to get, change, add, or delete HTML elements. • HTML elements are objects with associated properties (get/set values), methods (perform actions), and events.

https://www.w3schools.com/js/js_htmldom.asp HTML DOM Element

• The HTML DOM Document Object represents your web page. • If you want to access any element in an HTML page, you always start with accessing the document object.

This is a method The most common way to access an HTML element is to use the id of the element

This is a property The easiest way to get the content of an element is by using the innerHTML property

This is an event

https://www.w3schools.com/js/js_htmldom_document.asp • The getElementsByTagName() and getElementsByClassName() methods return an HTMLCollection object. • An HTMLCollection object is an array-like list of HTML elements. You can loop through the list and refer to the elements with a Find Element(s) number (just like an array). But you cannot use array methods like valueOf(), pop(), push(), or join() on an HTMLCollection. • Finding HTML elements by id value - the easiest way to find an element. var apple = document.getElementById(“apple”); • Finding HTML elements by class name - all elements with the same class name. var fruit = document.getElementsByClassName(“fruit”); • Finding HTML elements by tag name (type) - all elements with the same tag. var all = document.getElementsByTagName(“p”);

Apple

Orange

Cookie Find Element(s) cont.

• Finding HTML elements by CSS selectors • Finding HTML elements by HTML - all elements that matches a specified object collections –all element from: CSS selector (id, class names, types, • head, title, script, body, form, etc. attributes, values of attributes, etc.)

Apple Donald Apple Duck Submit Change Element Contents

• The HTML DOM allows JavaScript to change the content of HTML elements. • The easiest way to modify the content of an HTML element is by using the innerHTML property: document.getElementById(id).innerHTML = new HTML

Hello World!

• Change the value of an HTML attribute. • document.getElementById(id).attribute = new value

The title Attribute

New Title Change Element Styles

• The HTML DOM allows JavaScript to change the style of HTML elements. • document.getElementById(id).style.property = new style

Hello World!

Recall HTML DOM • An element node can be a , <div>, <h1>, <p>, <a>, etc. • To add text, an element node can Add/Remove Element(s) have a text node.</p><p>• To add a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing element. <div id="div1"> • To remove an HTML element, you must <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> know the parent of the element: </div> <div id="div1"> <p id="p1">This is a paragraph.</p> <script> <p id="p2">This is another paragraph.</p> var para = document.createElement("p"); </div> var node = document.createTextNode("This is new."); para.appendChild(node); <script> var parent = document.getElementById("div1"); var element = document.getElementById("div1"); var child = document.getElementById("p1"); element.appendChild(para); parent.removeChild(child); </script> </script> We can obtain user inputs in these ways (and many other ways), and manipulate the HTML contents accordingly, for example, display information related to user queries. More Examples in Practice</p><p>Get/Set text inputs</p><p>Get selected radio button</p><p>Get checked boxes JavaScript Events</p><p>• A JavaScript can be executed when an event occurs. For example, • When a user clicks on (or mouseover) an HTML element, • When a web page (or an image) has loaded, • When an input field is changed, • When an HTML form is submitted, etc. • To execute JavaScript code when an event occurs, we need to add JavaScript code to an HTML event attribute. For example, • <button onclick="displayDate()">Try it</button> • <h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1> • <div onmouseover="mOver(this)" onmouseout="mOut(this)">Mouse Over Me</div> • <div onmousedown="mDown(this)" onmouseup="mUp(this)"Click Me</div> • <body onload="checkCookies()"> • <input type="text" id="fname" onchange="upperCase()"></p><p>You can either “capsulate” the script for implementation in a function (and trigger the function), or “elaborate” the script in the event attribute. JavaScript Events cont.</p><p>Click Events • onclick - When button is clicked • ondblclick - When a text is double-clicked Input Events • onblur - When a user leaves an input field • onchange - When a user changes the content of an input field • onchange - When a user selects a dropdown value • onfocus - When an input field gets focus • onselect - When input text is selected • onsubmit - When a user clicks the submit button Load Events • onreset - When a user clicks the reset button • onload - When the page has been loaded • onkeydown - When a user is pressing/holding down a key • onload - When an image has been loaded • onkeypress - When a user is pressing/holding down a key • onerror - When an error occurs when loading an image • onkeyup - When the user releases a key • onunload - When the browser closes the document • onkeyup - When the user releases a key • onresize - When the browser window is resized • onkeydown vs onkeyup - Both Others Mouse Events • What is the keycode of the key pressed? • onmouseover/onmouseout - When the mouse passes over an element • What are the coordinates of the cursor? • onmousedown/onmouseup - When pressing/releasing a mouse button • What are the coordinates of the cursor, relative to the screen? • onmousedown - When mouse is clicked: Alert which element • Was the shift key pressed? • onmousedown - When mouse is clicked: Alert which button • Which event type occurred? • onmousemove/onmouseout - When moving the mouse pointer over/out of an image • onmouseover/onmouseout - When moving the mouse over/out of an image • onmouseover an image map https://www.w3schools.com/js/js_events_examples.asp JavaScript Animations</p><p>• JavaScript animations are done by programming gradual changes in an element's style. The changes are called by a timer. When the timer interval is small, the animation looks continuous.</p><p>The red square will move from the top-left to the bottom-right</p><p> https://www.w3schools.com/js/js_htmldom_animate.asp jQuery</p><p>• jQuery is a JavaScript library designed to simplify the client-side scripting of HTML. • jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. • jQuery's syntax is designed to make it easier to navigate a document, manipulate DOM elements, manipulate CSS, handle events, create animations, and so on. jQuery – a quick example</p><p><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> jQuery Syntax and Selectors</p><p>• The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). • Basic syntax is: $(selector).action() • jQuery methods shall be inside a document ready event – to prevent any jQuery code from running before the document is finished loading (is ready). • $(document).ready(function(){ // jQuery methods go here...}); • jQuery selectors allow you to select and manipulate HTML element(s) - based on their name, id, classes, types, attributes, values of attributes, etc. • It's based on the existing CSS selectors, and in addition, it has some own custom selectors.</p><p>$(document).ready(function(){ $("button").click(function(){ $("p").hide(); //$("#test").hide(); //$(".test").hide(); }); }); jQuery Events</p><p>• jQuery is tailor-made to respond to events in an HTML page. An event represents the precise moment when something happens. For example, • moving a mouse over an element • clicking on an element • selecting a radio button</p><p>• Commonly used jQuery event methods $("p").on({ mouseenter: function(){ • click() and dblclick() – double click $(this).css("background-color", "lightgray"); • mouseenter(), mouseleave(), mousedown(), }, mouseup() mouseleave: function(){ $(this).css("background-color", "lightblue"); • hover(), focus(), blur() }, • on() - attaches one or more event handlers click: function(){ for the selected elements $(this).css("background-color", "yellow"); } • And more: touch keyboards, touch SVG }); elements, touch blank space, etc. jQuery Effects</p><p>• Hide and show HTML elements with the hide() and show() methods. • Fade elements in and out of visibility with fadeIn(), fadeOut(), fadeToggle(), and fadeTo(). • Slide elements up and down with slideDown(), slideUp(), and slideToggle(). • Create custom animations with animate() and stop(). • $(selector).animate({params},speed,callback); • A callback function is executed after the current effect is 100% finished. • Chain together actions/methods, thus run multiple jQuery methods (on the same element) within a single statement. For example, • $("#p1").css("color", "red").slideUp(2000).slideDown(2000); Some Resources</p><p>• W3School: https://www.w3schools.com/ • Bootstrap: https://getbootstrap.com/ • jQuery: https://jquery.com/ • D3: https://d3js.org/ • dat.GUI: https://github.com/dataarts/dat.gui • CodePen: https://codepen.io/</p> </div> </article> </div> </div> </div> <script type="text/javascript" async crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8519364510543070"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> var docId = '605d18a61b2cf70581fd9bb13f0f57d6'; var endPage = 1; var totalPage = 39; var pfLoading = false; window.addEventListener('scroll', function () { if (pfLoading) return; var $now = $('.article-imgview .pf').eq(endPage - 1); if (document.documentElement.scrollTop + $(window).height() > $now.offset().top) { pfLoading = true; endPage++; if (endPage > totalPage) return; var imgEle = new Image(); var imgsrc = "//data.docslib.org/img/605d18a61b2cf70581fd9bb13f0f57d6-" + endPage + (endPage > 3 ? ".jpg" : ".webp"); imgEle.src = imgsrc; var $imgLoad = $('<div class="pf" id="pf' + endPage + '"><img src="/loading.gif"></div>'); $('.article-imgview').append($imgLoad); imgEle.addEventListener('load', function () { $imgLoad.find('img').attr('src', imgsrc); pfLoading = false }); if (endPage < 7) { adcall('pf' + endPage); } } }, { passive: true }); </script> <script> var sc_project = 11552861; var sc_invisible = 1; var sc_security = "b956b151"; </script> <script src="https://www.statcounter.com/counter/counter.js" async></script> </html>