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

▶
widgets and javascr cript
SMART_READER_LITE
LIVE PREVIEW

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

Aug 17, 2023 262 likes •668 views

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

slide-1
SLIDE 1

Widgets and JavaScr cript

  • Prof. Lydia Chilton

COMS 4170 19 February 2018 No screens

Say your name

slide-2
SLIDE 2

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

slide-3
SLIDE 3

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

slide-4
SLIDE 4

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

slide-5
SLIDE 5

Buttons and Text Inputs are examples of widgets.

slide-6
SLIDE 6

HTML JavaScript

Remember the JQuery Button Counter?

slide-7
SLIDE 7

Widgets standardized low-level interaction interfaces

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

slide-8
SLIDE 8

Widgets

Basic elements for users to interact with your UI

slide-9
SLIDE 9

Button Widget interaction: What event fires?

“Click event”

slide-10
SLIDE 10

“Keypress” event

Text Input interaction: What event fires?

slide-11
SLIDE 11

“Change” event

Radio Input interaction: What event fires?

slide-12
SLIDE 12

“Change” event

<select> interaction: What event fires?

slide-13
SLIDE 13
  • “Search” event
  • “Select” event

Autocomplete interaction: What event fires?

slide-14
SLIDE 14
  • “Drag” event
  • “Drop” event

Drag and Drop interaction: What event fires?

slide-15
SLIDE 15

Widgets standardized low-level interaction interfaces

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

slide-16
SLIDE 16

Creating Widgets Dynamically

slide-17
SLIDE 17

HTML JavaScript

St Statically created widget: cr created o

  • n p

page l load.

slide-18
SLIDE 18

HTML JavaScript

Dy Dynam amic ically ally created widget: cr created o

  • n d

demand b based o

  • n u

user i interact ction.

Create a new button when I am clicked! Click me And me! And me! And me! And me! And me! And me!

slide-19
SLIDE 19

HTML JavaScript

Whe Where in n the he code de sho shoul uld d we add dd the he dyna dynamic beha behavi vior?

Create a new button when I am clicked! Click me And me! And me! And me! And me! And me! And me!

slide-20
SLIDE 20

HTML JavaScript

How did we create the button in JavaScript?

slide-21
SLIDE 21

HTML JavaScript

Add widget to UI dynamically

slide-22
SLIDE 22

HTML JavaScript

Where do we create a lin

line e break eak dy dynam namical ally?

slide-23
SLIDE 23

HTML JavaScript

How do we create a lin

line e break eak dy dynam namical ally?

slide-24
SLIDE 24

HTML JavaScript

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

slide-25
SLIDE 25

HTML JavaScript

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

slide-26
SLIDE 26

HTML JavaScript

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

slide-27
SLIDE 27

HTML JavaScript

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

slide-28
SLIDE 28

Static: HTML, JavaScript onReady Dynamic: All JavaScript

You can create elements st

statically in HTML

Or dy

dyna namically in JavaScript (JQuery)

slide-29
SLIDE 29

Pros and Cons of Standardization

slide-30
SLIDE 30

What’s go

good about standardization?

Standardized Non-Standardized

slide-31
SLIDE 31

What’s ba

bad d about standardization?

Standardized Non-Standardized

slide-32
SLIDE 32

Things that have moved toward standardization

slide-33
SLIDE 33

Widgets allow customization

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

slide-34
SLIDE 34

Use your powers of customization wisely.

slide-35
SLIDE 35

Summary

slide-36
SLIDE 36

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

slide-37
SLIDE 37

Widgets standardize common, low-level interaction interfaces

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

slide-38
SLIDE 38

Static: HTML, JavaScript onReady Dynamic: All JavaScript

You can create elements st

statically in HTML

Or dy

dyna namically in JavaScript (JQuery)

slide-39
SLIDE 39

Widgets allow customization. Use it wisely.

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