Widgets and JavaScr cript No screens Say your name Prof. Lydia - PowerPoint PPT Presentation

Widgets and JavaScr cript No screens Say your name Prof. Lydia Chilton COMS 4170 19 February 2018

Goal 1 Build websites that suit the needs and abilities of users To accomplish a goal, users must execute an operation and evaluate the result To execute an operation users must interact with elements on the page

There are some standard ways we interact with elements in an interface:

There are some standard ways we interact with elements in an interface:

Buttons and Text Inputs are examples of widgets.

Remember the JQuery Button Counter? HTML JavaScript

Widgets standardized low-level interaction interfaces When you create a widget… The appearance is standardized, The types of events it responds to are standardized But the actions taken after an event is fired, are not standardized

Widgets Basic elements for users to interact with your UI

Button Widget interaction: What event fires? “Click event”

Text Input interaction: What event fires? “Keypress” event

Radio Input interaction: What event fires? “Change” event

<select> interaction: What event fires? “Change” event

Autocomplete interaction: What event fires? • “Search” event • “Select” event

Drag and Drop interaction: What event fires? • “Drag” event • “Drop” event

Widgets standardized low-level interaction interfaces When you create a widget… The appearance is standardized, The types of events it responds to “Click” “Keypress” “Change” “Search” are standardized But the actions taken after an event is fired, are not standardized

Creating Widgets Dynamically

Statically created widget: cr St created o on p page l load . HTML JavaScript

Dy Dynam amic ically ally created widget: cr created o on d demand b based o on u user i interact ction. HTML Click me And me! JavaScript And me! Create a new button when I am clicked! And me! And me! And me! And me!

Whe Where in n the he code de sho shoul uld d we add dd the he dyna dynamic behavi beha vior? HTML Click me And me! JavaScript And me! Create a new button when I am clicked! And me! And me! And me! And me!

How did we create the button in JavaScript? HTML JavaScript

Add widget to UI dynamically HTML JavaScript

Where do we create a lin line e break eak dy dynam namical ally ? HTML JavaScript

How do we create a lin line e break eak dy dynam namical ally ? HTML JavaScript

Where do we create a bo ally ? Wh boots tstr trap but p button n dynam dynamical HTML JavaScript

How do we create a bo Ho bootstrap p but button n dy dynam namical ally ? HTML JavaScript

Where do we create a cl Whe click ck e event dy dynam namical ally ? HTML JavaScript

How do we create a cl Ho click ck e event dy dynam namical ally ? HTML JavaScript

statically in HTML You can create elements st namically in JavaScript (JQuery) Or dy dyna Static : HTML, JavaScript onReady Dynamic : All JavaScript

Pros and Cons of Standardization

good about standardization? What’s go Non-Standardized Standardized

What’s ba bad d about standardization? Non-Standardized Standardized

Things that have moved toward standardization

Widgets allow customization Customizable scroll bars Bad use of customization. Good use of customization.

Use your powers of customization wisely.

Summary

There are some standard ways we interact with elements in an interface:

Widgets standardize common, low-level interaction interfaces When you create a widget… The appearance is standardized, The types of events it responds to are standardized But the actions taken after an event is fired, are not standardized

statically in HTML You can create elements st namically in JavaScript (JQuery) Or dy dyna Static : HTML, JavaScript onReady Dynamic : All JavaScript

Widgets allow customization. Use it wisely. Customizable scroll bars Bad use of customization. Good use of customization.