Web GUI Development CSE5544

Size: px

Start display at page:

Download "Web GUI Development CSE5544"

Calvin Park
5 years ago
Views:

1 Web GUI Development CSE5544

2 Background We will focus on the client-side. Client-side: HTML, CSS (Bootstrap, etc.), JavaScript (jquery, D3, etc.), and so on. Server-side: PHP, ASP.Net, Python, and nearly any language (C++, C#, Java, etc.) HTML Structure/Content CSS Presentation/Style JavaScript Behavior

3 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.

4 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.

5 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.

6 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 css 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.

7 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 <style> element in the <head> section Inline - by using the style attribute in HTML elements

a heading</h1> </body> 3 Inline <head> <link

8 CSS Style cont. 2 Internal 1 External <head> <style> h1 {color: blue;} #head1 {color: blue;}.head1 {color: blue;} </style> </head> <body> <h1>this is a heading</h1> </body> 3 Inline <head> <link rel="stylesheet" href="styles.css"> </head> <h1 style="color:blue;">this is a Blue Heading</h1>

9 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

10 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

synopsis Note you can nest descendant selectors as deep as you want, but life gets confusing if too much.

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

12 And More CSS Specificity Specificity: which rules take precedence in CSS when several rules could be applied to the same element. 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. CSS Cascade Generally, web-standard browsers will rank a style s significance in this order:

HTML Layout Design your HTML pages and arrange the contents. Websites often display contents in multiple columns (like a magazine or newspaper).

13 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)

14 HTML Layout cont. Some web GUI design patterns (for your reference).

(Useful) HTML Elements (1) The <input> element indicates an input field where the user can enter data. Note that the <input> tag has no end tag in HTML.

Syntax: <input type="value"> A one-line text input field Radio buttons let a user select ONE of a limited number of choices Checkboxes let a user select one or more options of a limited number of

type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="female checked> Female<br> <input type="radio" name="gender" value="other"> Other <input type="checkbox"

15 (Useful) HTML Elements (1) The <input> element indicates an input field where the user can enter data. Note that the <input> tag has no end tag in HTML. The <input> element can be displayed in several ways, depending on the type attribute. Syntax: <input type="value"> A one-line text input field Radio buttons let a user select ONE of a limited number of choices Checkboxes let a user select one or more options of a limited number of choices A clickable button (mostly used to activate a JavaScript script) First name: <input type="text" name="firstname value="mickey"><br> Last name: <input type="text" name="lastname"> <input type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="female checked> Female<br> <input type="radio" name="gender" value="other"> Other <input type="checkbox" name="vehicle1" value="bike" checked> I have a bike<br> <input type="checkbox" name="vehicle2" value="car"> I have a car<br> <input type="checkbox" name="vehicle3" value="boat" checked> I have a boat<br> <input type="button" value="click me" onclick="msg()"> <script> function msg() { alert("hello world!"); } Will address the JavaScript part later </script>

HTML Elements (2) More attribute values for <input type="value"> color a color picker date (or datetime-local) - date control (year, month, day) file - a file-select field and a browse" button (for

16 HTML Elements (2) More attribute values for <input type="value"> 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) - a field for an 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 form data to a form-handler) reset - a reset button (reset all form values to default values) Notes about forms and PHP: The HTML <form> 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. We won t go into PHP here, but you are welcome to explore more! If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php"

HTML Elements (3) The <select> element defines a drop-down list; and the <option> element defines an option

<select name="cars"> <option value="volvo">volvo</option> <option value="saab" selected>saab</option> <option

<option value="volvo selected>volvo</option> <option value="saab" selected>saab</option> <option

His name is Pipi, and he is in grey and white. He is naughty, fluffy, and warm!

17 HTML Elements (3) The <select> element defines a drop-down list; and the <option> element defines an option that can be selected. One or multiple options can be selected. <select name="cars"> <option value="volvo">volvo</option> <option value="saab" selected>saab</option> <option value="fiat">fiat</option> <option value="audi">audi</option> </select> <select name="cars" size="5" multiple> <option value="volvo selected>volvo</option> <option value="saab" selected>saab</option> <option value="fiat">fiat</option> <option value="audi">audi</option> </select> The <textarea> element defines a multi-line input field (a text area). <textarea name="message" rows="5" cols="30">the cat was playing in the garden. His name is Pipi, and he is in grey and white. He is naughty, fluffy, and warm!</textarea> rows=5 size=5 The <button> element defines a clickable button (similar usage with <input type= button">). <button type="button" onclick="msg()">click Me</button> <script> function msg() { alert("hello world!"); } </script> OR <button type="button" onclick="alert('hello World!')">Click Me</button> cols=30

18 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.

19 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.

20 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

21 Where to put In HTML, JavaScript code must be inserted between <script> and </script> tags. You can place any number of scripts in an HTML document. Scripts can be placed in the <body>, in the <head>, or in both. <script> function myfunction() { document.getelementbyid("demo").innerhtml = "Paragraph changed."; } </script> Scripts can also be placed in external files (.js), which can easy the readability and maintenance, and speed up page loads. <script src="myscript.js"></script> document.getelementbyid() is a useful function in JS, we will address it later.

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.

22 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.

23 HTML JS DOM The W3C Document Object Model (DOM) is a platform and languageneutral 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.

24 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

Find Element(s) The getelementsbytagname() and getelementsbyclassname() methods return an HTMLCollection object. An HTMLCollection object is an array-like list of HTML elements.

25 Find Element(s) 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 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

26 Find Element(s) cont. Finding HTML elements by CSS selectors - all elements that matches a specified CSS selector (id, class names, types, attributes, values of attributes, etc.) Finding HTML elements by HTML object collections all element from: head, title, script, body, form, etc. Apple Apple Donald Duck Submit

</p> <script> document.getelementbyid("p1").innerhtml = "New text!"; </script> Change the value of an HTML attribute. document.getelementbyid(id).

27 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 <p id="p1">hello World!</p> <script> document.getelementbyid("p1").innerhtml = "New text!"; </script> Change the value of an HTML attribute. document.getelementbyid(id).attribute = new value <p id="p1" title="old Title">The title Attribute</p> <img id="myimage" src="smiley.gif"> <script> document.getelementbyid("p1").title = "New Title"; document.getelementbyid("myimage").src = "landscape.jpg"; </script> Old Title New Title

Change Element Styles The HTML DOM allows JavaScript to change the style of HTML elements. document.getelementbyid(id).style.property = new style <p id="p1">hello World!</p> <script> document.

28 Change Element Styles The HTML DOM allows JavaScript to change the style of HTML elements. document.getelementbyid(id).style.property = new style <p id="p1">hello World!</p> <script> document.getelementbyid("p1").style.color = "blue"; document.getelementbyid("p1").style.fontsize = "larger"; document.getelementbyid("p1").style.fontfamily = "Arial"; document.getelementbyid("p1").style.fontweight = "bold"; document.getelementbyid("p1").style.fontstyle = "italic"; </script> <svg width="200" height="100"> <circle id="c1" class="mycircle" cx="50" cy="50" style="r:40; stroke:green; stroke-width:4; fill:yellow;" /> <circle id="c2" class="mycircle" cx="150" cy="50" style="r:40; stroke:green; stroke-width:4; fill:yellow;" /> </svg> <script> document.getelementbyid("c1").style.fill = "green"; </script> Hello World! Hello World!

29 Add/Remove Element(s) Recall HTML DOM An element node can be a <title>, <div>, <h1>, <p>, <a>, etc. To add text, an element node can have a text node. 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"> <p id="p1">this is a paragraph.</p> <p id="p2">this is another paragraph.</p> </div> <script> var para = document.createelement("p"); var node = document.createtextnode("this is new."); para.appendchild(node); var element = document.getelementbyid("div1"); element.appendchild(para); </script> To remove an HTML element, you must know the parent of the element: <div id="div1"> <p id="p1">this is a paragraph.</p> <p id="p2">this is another paragraph.</p> </div> <script> var parent = document.getelementbyid("div1"); var child = document.getelementbyid("p1"); parent.removechild(child); </script>

accordingly, for example, display information related to user

30 More Examples in Practice 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. Get/Set text inputs Get selected radio button Get checked boxes

31 JavaScript Events 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()"> You can either capsulate the script for implementation in a function (and trigger the function), or elaborate the script in the event attribute.

32 JavaScript Events cont. 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 onreset - When a user clicks the reset button onkeydown - When a user is pressing/holding down a key onkeypress - When a user is pressing/holding down a key onkeyup - When the user releases a key onkeyup - When the user releases a key onkeydown vs onkeyup - Both Mouse Events onmouseover/onmouseout - When the mouse passes over an element onmousedown/onmouseup - When pressing/releasing a mouse button onmousedown - When mouse is clicked: Alert which element onmousedown - When mouse is clicked: Alert which button 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 Load Events onload - When the page has been loaded onload - When an image has been loaded onerror - When an error occurs when loading an image onunload - When the browser closes the document onresize - When the browser window is resized Others What is the keycode of the key pressed? What are the coordinates of the cursor? What are the coordinates of the cursor, relative to the screen? Was the shift key pressed? Which event type occurred?

When the timer interval is small, the animation looks continuous.

33 JavaScript Animations 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. The red square will move from the top-left to the bottom-right

34 jquery 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, createanimations, and so on.

35 jquery a quick example <script src="

jquery Syntax and Selectors The jquery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $(selector).

36 jquery Syntax and Selectors 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. $(document).ready(function(){ $("button").click(function(){ $("p").hide(); //$("#test").hide(); //$(".test").hide(); }); });

mouseleave(), mousedown(), mouseup() hover(), focus(), blur() on() - attaches one or more event handlers for the selected elements And more: touch keyboards, touch SVG elements, touch

37 jquery Events 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 Commonly used jquery event methods click() and dblclick() double click mouseenter(), mouseleave(), mousedown(), mouseup() hover(), focus(), blur() on() - attaches one or more event handlers for the selected elements And more: touch keyboards, touch SVG elements, touch blank space, etc. $("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } });

jquery Effects Hide and show HTML elements with the hide() and show() methods. Fade elements in and out of visibility with fadein(), fadeout(), fadetoggle(), and fadeto().

38 jquery Effects 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);

39 Some Resources W3School: Bootstrap: jquery: D3: dat.gui: CodePen:

WELCOME TO JQUERY PROGRAMMING LANGUAGE ONLINE TUTORIAL

WELCOME TO JQUERY PROGRAMMING LANGUAGE ONLINE TUTORIAL 1 The above website template represents the HTML/CSS previous studio project we have been working on. Today s lesson will focus on JQUERY programming