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",](http://slidetodoc.com/presentation_image_h2/90a2d36b4d73f2442b21739234e764fb/image-20.jpg "Arrays var a = [1, 2, 3, 4]; var b = [1, 2, \"3\",")
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