Download presentation
Presentation is loading. Please wait.
1
Revision
2
You should know: The framework for Web GUI development (the interplay between HTML5, CSS, and JS) Selecting elements from the Document Object Model (DOM) Different ways to define JS functions (function statement, function expression, IIFE, etc.) A way to subdivide the screen into multiple views (containers) (using Bootstrap, or CSS grid) D3: binding data to SVG elements D3: drawing different shapes (circle, rectangle, line)
3
Lab material by Dr. Mai Elshehaly
Web GUI Framework GUI = Graphical User Interface HTML5 is a markup language for creating web pages HTML Tags specify the structure of the document <html> <head> </head> <body> </body> </html> Lab material by Dr. Mai Elshehaly
4
Lab material by Dr. Mai Elshehaly
Master Internet Volunteer Program 09/22/97 HTML Example: <HTML> <HEAD> <TITLE> Candy Crush Game </TITLE> </HEAD> <BODY> Nothing here yet </BODY> </HTML> Lab material by Dr. Mai Elshehaly University of Minnesota Extension Service 9
5
Selecting elements from the Document Object Model (DOM)
6
The Document Object Model (DOM)
It represents the page so that programs can change the document structure, style and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript. JavaScript allows web pages to perform tasks such as: reading elements from the DOM, add elements to the DOM, manipulate or move elements of the DOM, react to events (e.g. mouse clicks), determine the user’s screen size, date and time, etc.
7
DOM [Example 1] <html> <head>
<title>Sample Page</title> </head> <body> <p>Hello World!</p> </body> </html>
![DOM [Example 1] <html> <head>](http://slideplayer.com./slide/14099622/86/images/7/DOM+%5BExample+1%5D+%3Chtml%3E+%3Chead%3E.jpg "<title>Sample Page</title> </head> <body> <p>Hello World!</p> </body> </html>")
8
DOM [Example 2]
![DOM [Example 2]](http://slideplayer.com./slide/14099622/86/images/8/DOM+%5BExample+2%5D.jpg "DOM [Example 2]")
9
Lab material by Dr. Mai Elshehaly
CSS Selectors Go to: Test the id selector Test the class selector (for all elements) Test the class selector (for only <p> elements) Test the grouping selectors Lab material by Dr. Mai Elshehaly
10
Lab material by Dr. Mai Elshehaly
The id selector Lab material by Dr. Mai Elshehaly
11
The class selector (for all elements)
Lab material by Dr. Mai Elshehaly
12
The class selector (for only <p> elements)
Lab material by Dr. Mai Elshehaly
13
The grouping selectors
Lab material by Dr. Mai Elshehaly
14
Built in functions in JS
The getElementById(): method returns the element that has the ID attribute with the specified value. The createElement(): method creates an Element Node with the specified name. Element.setAttribute(name, value): method adds the specified attribute to an element, and gives it the specified value. The Node.appendChild() method adds a node to the end of the list of children of a specified parent node. The createTextNode() method creates a Text Node with the specified text.
15
Example
17
JS Functions
18
JS Functions The most important fact about functions is that in JavaScript, functions are first-class objects. They are treated like any other JavaScript object. Just like other JavaScript data types, they can be referenced by variables, declared with literals, assigned to variables or array entries, returned from other functions, and even passed as function parameters.
19
JS Functions: (1) function statement
Functions are the pieces where you will wrap all your code, hence they will give your programs a structure. One way to declare a function is as a function statement (an object with the same name as the function is created during compilation): function add(a,b) { return a+b; }
20
JS Functions: (2) Function expression
We create an anonymous function and assign it to the “add” variable The function is invoked just like the function statement We CANNOT use recursion with this style of function declaration (because the function has no name so it cannot call itself) var add = function(a,b){ return a+b; }
21
JS Functions: (3) Self-invoking function expressions
(function sayHello() { console.log("hello!"); })();
22
Passing function as function parameter
function changeCase(val) { return val.toUpperCase(); } function demofunc(a, passfunction) { console.log(passfunction(a)); } demofunc("smallcase", changeCase);
23
A way to subdivide the screen into multiple views (containers) (using Bootstrap, or CSS grid)
24
Lab material by Dr. Mai Elshehaly
Bootstrap Bootstrap is an Open-Source front-end Frame-work. It is for creating responsive websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It is the No.1 project on Github with 65,000+ stars and 23,800 forks (as of March 2014)( Bootstrap Official Address ( ). Lab material by Dr. Mai Elshehaly
25
Let’s start simple use Bootstrap
You need to be connected to the Internet to link your code to the Bootstrap library You can download a version of the library and keep a local version and link to that Lab material by Dr. Mai Elshehaly
26
Bootstrap Grid Layout Grid systems are used for creating page layouts through a series of rows and columns that house your content. Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). The classes can be combined to create more dynamic and flexible layouts. Therefore, applying any -md- class to an element will not only affect its styling on medium devices but also on large devices if a -lg- class is not present. We will use class col-md-4
27
Bootstrap Grid System Example :
28
W3 Schools: Bootstrap Grid Layout
Lab material by Dr. Mai Elshehaly
29
Lab material by Dr. Mai Elshehaly
In your code Lab material by Dr. Mai Elshehaly
30
Now the page looks like this
Lab material by Dr. Mai Elshehaly
31
Steps for defining a grid area:
Select the wrapper container Style it as a grid display area Define the gap between grid elements grid-template-columns grid-template-areas. Other styles like color and background-color color is referring to the text color in that element. background-color refers to the background color
32
Assigning content to grid areas
With the grid-area property I can assign each of these areas a name.
33
Other styles
34
border-radius Property
35
border-radius Property
36
padding Property padding:10px 5px 15px 20px; padding:10px 5px 15px;
top padding is 10px right padding is 5px bottom padding is 15px left padding is 20px padding:10px 5px 15px; right and left padding are 5px padding:10px 5px; top and bottom padding are 10px padding:10px; all four paddings are 10px
37
padding Property
38
font-size Property % => Sets the font-size to a percent of the parent element's font size
39
D3: binding data to SVG elements
40
What is SVG? SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG graphics do NOT lose any quality if they are zoomed or resized Every element and every attribute in SVG files can be animated
41
Simple example: draw a circle
42
What is D3? D3.js (or just D3 for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely implemented SVG, HTML5, and CSS standards.
43
To include D3.js in your code
If you are online, link directly to the latest release: Or copy the folder D3 in your folder and use the line <script src=" <script src=“./D3/d3.min.js"></script>
44
Draw a circle using D3.js
45
D3 selection Purpose: obtain a handle of DOM element(s) to manipulate them in Javascript. In this example, we used d3.select(“body”) to get a handle of the HTML document’s <body> Once this handle is returned, method cascading allows us to call append immediately on the returned handle The result of the call is a document containing the same tags as on slide 25, except that we increased the height and width of the SVG from 100x100 to 200x200 This increase has no effect on the displayed circle because the SVG is just a white container that we cannot see, we only see the circle which has a radius of 40 in both cases.
46
Binding data D3 stands for “Data-Driven Documents”
Drawing shapes without data is useless In data visualization, we draw shapes to represent data Let’s do this!
47
Binding data
48
D3: drawing different shapes (circle, rectangle, line)
49
Drawing Circle
50
Drawing Rect
51
Drawing Line
Similar presentations
