CS 4540 Special Topics in Web Development UI

CS 4540 Special Topics in Web Development UI with CSS and Java. Script Chengyu Sun California State University, Los Angeles

Goals Understand _Layout. cshtml Basic usage of Bootstrap Use of additional CSS/Java. Script libraries n Creating charts

Why CSS? Your forms could look like this … instead of this

A Simple CSS Example HTML <p>This is a paragraph. </p> CSS Ruleset p {color: red; font-size: 200%; }

Anatomy of a CSS Ruleset Selector Declaration p { color: red; font-size: 200%; } Property Value Declaration Block

Three Ways to Include CSS in a Web Page … Internal stylesheet <style> p {color: red; font-size: 200%; } </style> External stylesheet <link rel="stylesheet" href="style. css"> Both <link> and <style> should be inside <head>.

… Three Ways to Include CSS in a Web Page Inline style <p style="color: red; font-size: 200%; "> Some text. </p>

The Need for UI Libraries Using plain CSS to create a decentlooking, responsive website is very hard – it's basically like developing a Java project without using any library

Bootstrap To The Rescue The most popular web UI library Originally developed by Twitter Default for ASP. NET Core web projects

Adding Bootstrap Add Bootstrap to a page n n See the Starter Template Note that Bootstrap need some Java. Script libraries to provide some dynamic effects/behaviors Add Bootstrap to all pages n _Layout. cshtml

Bootstrap in _Layout. html ~/ in Razor view is mapped to the application root path Minimized versions of CSS/Java. Script files reduce download size bootstrap. bundle. js = bootstrap. js + popper. js Local vs CDN (Content Delivery Network)

Local vs. CDN Hosting frontend libraries locally n n Always available, even without internet during development Cost bandwidth for both server and users Using frontend libraries hosted on CDN n n n Not available without internet during development Do not cost server bandwidth Users may already have them in browser cache from other websites

Using Bootstrap applies styles via a number of predefined CSS classes Learning Bootstrap, for the most part, is about learning those classes by reading the documentation Examples: tables and forms

Use Bootswatch Themes https: //bootswatch. com/ Manage CSS/Java. Script libraries (a. k. a. client-side libraries) using Lib. Man

About Java. Script THE language for client-side programming (i. e. programs that run inside a browser) Syntax is similar to Java but there are some significant differences

Add Java. Script to an HTML Page Directly in <script> or in a separate file referenced by <script> It's customary to place <script> at the end of <body> (i. e. right before </body>)

Simple Java. Script Example <script> var a = 10; var b = 20; console. log(a+b); </script> Use Developer Console in your browser (you may need to set a preference for Safari)

Java. Script Basics Types and literals Arrays Object literal and JSON Functions DOM and selecting elements

Types and Literals Type Boolean Number String Literals (a. k. a. Values) true, false 123, 4. 56 "hello", 'world' Null Undefined null undefined
![Arrays var a = [1, 2, 3, 4]; var b = [1, 2, "3", Arrays var a = [1, 2, 3, 4]; var b = [1, 2, "3",](http://slidetodoc.com/presentation_image_h2/90a2d36b4d73f2442b21739234e764fb/image-20.jpg)
Arrays var a = [1, 2, 3, 4]; var b = [1, 2, "3", "4"]; var c = [1, 2, a, b ]; console. log(a[2]); console. log(b[2]); console. log(c[2]);

Object Literal Valid Java. Script Identifier (Variable Name) { make: "Honda", model: "Civic", "Year": 2001, 'owner': { name: "Chengyu" } String or Number } An object literal consists of zero or more property: value pairs

JSON (Java. Script Object Notation) Used as a data { exchange format "make": "Honda", Based on a subset of "model": "Civic", Java. Script syntax "year": 2001, n n String are double quoted Property name are strings "owner": { "name": "Chengyu" } }

Function function add( x, y ) { return x+y; } Function vs method No need to specify types for parameters or return value

Functions as First-class Citizens In Java. Script, functions are actually objects n Assigned to a variable w Assigned as a property of an object w Function literals (i. e. functions without names) n n Passed as a function argument Returned as a function result

Function Examples function foo() { alert("foo"); } bar = function() { alert("bar"); } Regular function declaration Function literal Function assignment set. Timeout( bar, 5000 ); Function as parameter set. Timeout( function() { alert("foobar"); }, 5000 ) Function literal as parameter

Processing an HTML Document <html> <head><title>Java. Script Example</title></head> <body> <h 1>Java. Script Example</h 1> <p>Some content. </p> </body> </html> As a text file – very difficult As an object

Document Object Model (DOM) Representing documents as objects so they can be processed more easily by a programming language

DOM Representation document <html> <head> <title> "Java. Script Example" <body> <h 1> "Java. Script Example" <p> "Some content. "

Find Elements document. get. Element. By. Id(): returns a single element (because id is supposed to be unique) document. get. Elements. By. Name() document. get. Elements. By. Tag. Name() document. query. Selector(): find elements using CSS selectors

Some Popular Charting Libraries … High. Charts n n n Lots of chart types Free for non-commercial use Used in CSNS D 3. js n n Open source Very powerful but somewhat complex to use

… Some Popular Chart Libraries Chart. js n n Open source Use HTML 5 Canvas API Chartist n n Open source Very easy to use Separation of concerns – style with CSSS and control with Java. Script Require additional plugins for fairly basic functions

Chart Basics … COVID-9 Testing Information Tested Confirmed 6/10/2020 100 12 6/11/2020 17 6/12/2020 85 8

… Chart Basics … Cases COVID-19 Testing Information 150 100 50 0 6/10/2020 6/11/2020 Tested 6/12/2020 Confirmed Dates

… Chart Basics Chart types: bar, line, pie, … Data series Legends Axis: title, labels, values/ticks

Examples Chartist n Use @Json. Serialize() to convert C# objects to JSON in view Chart. js n Understand the chart object: object, array of objects. . .

Readings Comparing the Most Popular Java. Script Charting Libraries
- Slides: 36