1 of 33

jQuery

Easy interaction

Pili Hu

​

e@hupili.net

​

2 of 33

Agenda

  • Homework 3
  • jQuery with guided in-class exercises
  • Use your own domain:
    • See http://datavis.studio/

3 of 33

Homework 3 Discussion

4 of 33

Homework 3

This is similar to homework1. Build a webpage at xxx.github.io/homework3 . The requirements：

  • Include those elements: image, URL, table
  • Use the semantic tags for the main body of your article and apply styles. The tags include: article, section, header, footer.
  • Use bootstrap to make it look clean and mobile-friendly
  • Use bootstrap’s grid system to layout the main part

The topic is explain one confusing statistics concept or cases observed in the media publications.

Example topics

Deadline: Feb 25, 2017

5 of 33

Errata

I had a typo in previous slides. Please move your Homework 3 to following location: (Exercise GitHub repo rename function)

xxx.github.io/homework3

(previously xxx.github.io/homework2)

6 of 33

Traffic improvements and government waste

http://callingbullshit.org/case_studies/case_study_traffic_improvements.html

  • Game-theoretic analysis of the facts of traffic distribution
  • Time v.s. Volume. "Seattle road improvement project allows 10 million extra trips per year with no increase in travel times"

7 of 33

jQuery

8 of 33

Background of jQuery

  • To unify the behaviour across browsers.
  • Not an advantage after the introduction of HTML5 APIs
  • Still the highest market share in terms of “framework”

9 of 33

Key concepts

  • Get element by CSS Selector
  • Imperative way to modify elements, in a batch
  • Callback:
    • Event listener in function style, e.g. .click
    • AJAX
      • (next week)
  • Many UI components (plugins)
    • (next week)

​

10 of 33

Example 1: Make a calculator

https://hkbu-jour2106.github.io/week6-sample/jquery.html

​

​

11 of 33

Example 1 breakdown

  • UI layout
  • Assign “id” to access the element easier

12 of 33

Example 1 breakdown

Any codes here. This code block is executed after all HTML elements are loaded on this page. For now, just follow this common practice.

13 of 33

Example 1 breakdown

  • .click set the event listener to the enclosed function.
    • I.e. that function is executed when the user click the element
  • Common event listener:
    • .click, .dblclick, .focus, .hover, .keypress, .mousedown, …
  • Full list here: https://api.jquery.com/category/events/
    • ​

14 of 33

Example 1 breakdown

  • .val reads or writes the “value” property of an element
  • Convention of content operation:
    • .operation() -- reads the content
    • .operation(newContent) -- writes the content to be newContent
  • Similar operations:
    • .data, .html, .text, ...

15 of 33

Exercise Example 1

16 of 33

Example 2: Toggle style

https://hkbu-jour2106.github.io/week6-sample/jquery.html

​

​

17 of 33

Example 2: Toggle style - Key points

  • .hide()/.show() applies on a batch of elements
  • Common trick for interaction:
    • Define the CSS class of state1 and state2
    • Toggle state by .addClass and .removeClass

​

18 of 33

Exercise Example 2

19 of 33

Example 3: A moving bar chart

  • Learn from comments. “// ….”

https://hkbu-jour2106.github.io/week6-sample/jquery.html

​

​

20 of 33

Exercise Example 3

21 of 33

Example 4: Animation

  • Learn from comments. “// ….”

https://hkbu-jour2106.github.io/week6-sample/jquery.html

​

22 of 33

Exercise Example 4

23 of 33

Further Readings

  • 如何做到 jQuery-free？阮一峰 http://www.ruanyifeng.com/blog/2013/05/jquery-free.html
  • Better animation (efficiency), same syntax as jQuery: http://velocityjs.org/
    • (to be further covered in last 1 or 2 class if time permits)
  • ​

24 of 33

Let’s be cooler:

Bind your own domain name!

25 of 33

Purchase your domain

  • name.com is one example
  • You can choose other providers, e.g. namecheap.com , godaddy.com , …
  • For “.hk” domain name, https://www.hkdnr.hk/

​

26 of 33

Configure your nameserver to point your domain to GitHub’s server (DNS)

  • Add an “A record” of answer “151.101.64.133”
    • Note that there are many IP addresses that also work.
    • If you know command line (future topic), try “ping hkbu-jour2106.github.io” to get a sample address

27 of 33

Configure Github Pages to serve this domain

  • Create a files named “CNAME”
  • In this file, put one line of your newly purchased domain name

28 of 33

How DNS (Domain Name Server) works with GH-Pages?

More on DNS (very good animation!): https://www.verisign.com/en_US/website-presence/online/how-dns-works/index.xhtml

name.com

​

A: 151.101.64.133

User (Browser)

GitHub

​

Repo: github.com/hkbu-jour2106/hkbu-jour2106.github.io

​

CNAME: datavis.studio

Where is datavis.studio?

Accordingly to my A record,

please checkout 151.101.64.133

Hey, 151.101.64.133 (GitHub)

I want to visit datavis.studio

I checked the CNAME, and find that datavis.studio is binded to repo github.com/hkbu-jour2106/hkbu-jour2106.github.io . Let me serve its gh-pages to you

29 of 33

Homework 4

Topic (samples) for selection:

​

Logistics:

  • If you follow the samples, please apply another data set
  • Submit at xxx.github.io/homework4
  • Deadline: Mar 10, 2017

Tech requirements:

  • Use bootstrap
  • Use jQuery

​

​

(next page for more notes)

30 of 33

Notes on Homework 4 requirement

Homework 4 is due on Mar 10 (two weeks from now). The purpose of homework 4 is to help you exercise Javascript & jQuery for basic interaction. Strongly suggest you finish it before next week (Mar 4, topic is eChart). The tech requirement is that you can use jQuery to manipulate elements: read/ write value/ content/ data; add/remove style; bind event (try something other than "click"). At the same time, you continue exercising using Bootstrap to build your web UI. The content requirement is flexible. We shortlist those calculator/ bar-chart as examples that suit your current skill-set (assuming no background before the class). If you feel comfortable with jQuery, you can try to build more complex stuff, as long as the tech requirement is fulfilled.

31 of 33

Common Questions

32 of 33

Absolute VS. Relative Paths/ Links

Relative Paths

  • index.html
  • /graphics/image.png (in the current folder graphics)
  • ../graphics/image.png (in a folder above the current folder, and you can use ../ as many times as you need)

Absolute Paths

  • http://www.mysite.com
  • http://www.mysite.com/graphics/image.png

​

33 of 33

Jump using Hash(#) anchor links

​

Target of the Link: Append a hash with an ID of an element to the URL

E.g. <div id="go_middle">Hello There</div>

Link to the Target: Simply append the hash #ref to the URL of your link to jump to the desired reference

E.g. <a href="#go_middle">Go Middle</a>

<a href="http://path/to/page/#go_middle">Go Middle</a> (if linking from a different page)

​