One way to visualize how HTML and CSS work together is to think about a new building under construction. As the building goes up, the structure of the building is built first. At just the structural level, all you see is the frame of the new building, and other than the basic shape, you don’t really know how the building is going to look. Once the frame is complete, the “skin” of the building is added. This could be brick, wood, glass, stucco, or any number of outer materials that determine what the final look of the building will be.
55 |
HTML and CSS work much the same way. HTML gives us the structure, or “frame”, of our pages. We can use CSS to then control how this structure looks, where elements are positioned, and add additional decorative styling. What’s more, much the same way a building can change dramatically by adding a new façade; web pages can change their visual design by simply changing the page’s CSS.
56 |
This separation of structure and presentation creates a very flexible and efficient workflow where the structure of pages is independent of how the pages are presented. This allows you to update styling without changing page content, and provide different visual designs based on the context of where the page is being displayed.
57 |
Allow me to demonstrate
58 |
59 |
60 |
--------------------------------------------------------------------------------
/01_WebTech/03_testJS.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | My first HTML Page
4 |
5 |
6 |
7 |
8 |
9 |
10 |
This is my first Header 1
11 |
this is a paragrapgh that talks about HTML...
12 |
and here is the Header 2
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/01_WebTech/js/jQuerySample.js:
--------------------------------------------------------------------------------
1 | // Only runs once DOM is ready
2 | $(document).ready(function(){
3 | //When button with ID btn1 is pressed
4 | $("#btn1").click(function(){
5 | //change all text on h1 tag
6 | $("h1").text("this is a jQuery text")
7 | $("h2").fadeIn();
8 | });
9 |
10 | $("#btn2").click(function(){
11 | $("h2").fadeOut();
12 | });
13 | });
14 |
15 |
--------------------------------------------------------------------------------
/01_WebTech/js/sample.js:
--------------------------------------------------------------------------------
1 | //create new elements
2 | var newHeading = document.createElement("h1");
3 | var newParagraph = document.createElement("p");
4 |
5 | //to add content, use innerHTML
6 | newHeading.innerHTML = "Did You Know?";
7 | newParagraph.innerHTML = "Most kangaroos are left-handed";
8 |
9 | // Add new elements to the HTML
10 | document.getElementById("jsDiv").appendChild(newHeading);
11 | document.getElementById("jsDiv").appendChild(newParagraph);
12 |
13 | // Untyped variables
14 | var a = 10;
15 | var b = 20;
16 | var c = 'The sum of a + b is ->' + (a+b) ;
17 |
18 | //Pops up Alert to user
19 | alert(c);
--------------------------------------------------------------------------------
/05_XSClassic/01_GetBP_html.xsjs:
--------------------------------------------------------------------------------
1 | //Output variable (Will become a HTML Document)
2 | var output = "Hi " + $.session.getUsername() + "
";
3 | //Parameter to be used in the query
4 | var bpType = "C";
5 | //HANA Connection initialized
6 | var conn = $.hdb.getConnection();
7 |
8 | // ? = PlaceHolder for parameter
9 | var query = 'SELECT "CardCode", "CardName", "CardType", "Balance" '+
10 | 'FROM "SBODEMOUS"."OCRD" WHERE "CardType"= ? ';
11 |
12 | // Execute query, parameters should be set in order of appearance
13 | var rs = conn.executeQuery(query, bpType);
14 |
15 | for(var i = 0; i < rs.length; i++){
16 | output += ' ';
17 |
18 | output += rs[i].CardCode + " - " +
19 | rs[i].CardName + " - " +
20 | rs[i].CardType + " - " +
21 | rs[i].Balance;
22 | }
23 |
24 | //Close HANA connection
25 | conn.close();
26 |
27 | // Set response in the output
28 | $.response.contentType = "text/html";
29 | $.response.setBody(output);
--------------------------------------------------------------------------------
/05_XSClassic/02_GetBP_json.xsjs:
--------------------------------------------------------------------------------
1 | function getBPJSON(bpType){
2 | //Initialize connection
3 | var conn = $.hdb.getConnection();
4 |
5 | // ? = PlaceHolder for parameter
6 | var query = 'SELECT "CardCode", "CardName", "CardType", "Balance" ' +
7 | 'FROM "SBODEMOUS"."OCRD" WHERE "CardType"= ? ';
8 |
9 | // Execute query, parameters should be set in order of appearance
10 | var rs = conn.executeQuery(query, bpType);
11 |
12 | //Close Connection
13 | conn.close();
14 |
15 | // formatting not required for JSON response, already JSON format
16 | $.response.contentType = "application/json";
17 | $.response.setBody(JSON.stringify(rs));
18 | //Set HTTP status (OK = 200) - https://tinyurl.com/httpstatus
19 | $.response.status = $.net.http.OK;
20 | }
21 |
22 | //On server side JavaScript. Functions should be declared before called
23 | getBPJSON('C');
24 |
25 |
--------------------------------------------------------------------------------
/05_XSClassic/03_GetBP_json_params.xsjs:
--------------------------------------------------------------------------------
1 | /**
2 | * This service return a list of Business Partners based on 2 parameters
3 | * bpType = C, L or S // Customer, Lead or Supplier
4 | * top = Number of records
5 | * to call it access http://:/?bpType=&top=
6 | **/
7 |
8 | function showData(query, bpType, topNb){
9 | var conn = $.hdb.getConnection();
10 | var rs = conn.executeQuery(query, topNb, bpType);
11 |
12 | $.response.contentType = "application/json"; // Specify output
13 | $.response.setBody(JSON.stringify(rs));
14 | $.response.status = $.net.http.OK;
15 |
16 | conn.close();
17 | }
18 |
19 | var Statement = 'SELECT TOP ? "CardCode", "CardName", "CardType", "Balance"'+
20 | ' FROM "SBODEMOUS"."OCRD" WHERE "CardType"= ?';
21 |
22 | //Input parameter handling
23 | var CardType = $.request.parameters.get('bpType');
24 | var Records = $.request.parameters.get('top');
25 |
26 | showData(Statement, CardType, Records);
--------------------------------------------------------------------------------
/05_XSClassic/04_CreateProcedure.sql:
--------------------------------------------------------------------------------
1 | /* Create a TABLE TYPE for the procedure results */
2 | CREATE TYPE "SBODEMOUS"."BPDETAILS" AS TABLE (
3 | "CardCode" NVARCHAR(15),
4 | "CardName" NVARCHAR(100),
5 | "CardType" CHAR(1),
6 | "Balance" DECIMAL
7 | );
8 |
9 | /* Create the Procedure */
10 | /* This procedure is invoked via a XSJS Service */
11 | CREATE PROCEDURE GETBPBYTYPE(IN cardtype CHAR(1), OUT bpListDetails "SBODEMOUS"."BPDETAILS")
12 | LANGUAGE SQLSCRIPT
13 | READS SQL DATA AS
14 | BEGIN
15 | bpListDetails =
16 | SELECT T0."CardCode", T0."CardName", T0."CardType", T0."Balance"
17 | FROM OCRD T0
18 | WHERE T0."CardType" =:cardtype;
19 | END;
--------------------------------------------------------------------------------
/05_XSClassic/04_GetBPListProc.xsjs:
--------------------------------------------------------------------------------
1 | function showData(bpType){
2 | $.response.contentType = "application/json";
3 |
4 | var connection = $.hdb.getConnection();
5 |
6 | //Load procedure of specified schema
7 | var getBpByTypeProc = connection.loadProcedure('SBODEMOUS', 'GETBPBYTYPE');
8 |
9 | //The getBpByTypeProc object act as proxy to the procedure
10 | var results = getBpByTypeProc(bpType);
11 |
12 | //Build the response
13 | $.response.status = $.net.http.OK;
14 | $.response.contentType = "application/json";
15 | $.response.setBody(JSON.stringify(results));
16 |
17 | connection.close();
18 | }
19 |
20 | var bpType = $.request.parameters.get("bpType");
21 |
22 | showData(bpType);
--------------------------------------------------------------------------------
/05_XSClassic/05_GetData_xsjslib.xsjs:
--------------------------------------------------------------------------------
1 | //Complete Library Path and Library Name without extension
2 | var lib = $.import("","
2 |
3 | B1 Extreme App framework Login
4 |
5 |
6 |
7 |