SAPX04: HTML5 Foundations for SAP SAPUI5 Development

SAPX04 HTML5 Foundations for SAP SAPUI5 Development

SAP SAPGUI5 Training System: Windows 2008 R2 with latest SAPUI5 component) Collection 95

© 2014 SAP AG. All rights reserved.

1

© 2014 SAP AG. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. Microsoft, Windows, Excel, Outlook, PowerPoint, Silverlight, and Visual Studio are registered trademarks of Microsoft Corporation. Apache Maven, Maven, Apache, the Apache feather logo, and the Apache Maven project logos are trademarks of The Apache Software Foundation. This course is not designed to teach candidates MAVEN technology. Existing knowledge of MAVEN is a pre-requisite. IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, z10, z/VM, z/OS, OS/390, zEnterprise, PowerVM, Power Architecture, Power Systems, POWER7, POWER6+, POWER6, POWER, PowerHA, pureScale, PowerPC, BladeCenter, System Storage, Storwize, XIV, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, AIX, Intelligent Miner, WebSphere, Tivoli, Informix, and Smarter Planet are trademarks or registered trademarks of IBM Corporation. Linux is the registered trademark of Linus Torvalds in the United States and other countries. Adobe, the Adobe logo, Acrobat, PostScript, and Reader are trademarks or registered trademarks of Adobe Systems Incorporated in the United States and other countries. Oracle and Java are registered trademarks of Oracle and its affiliates. UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group. Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems Inc. HTML, XML, XHTML, and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology. Apple, App Store, iBooks, iPad, iPhone, iPhoto, iPod, iTunes, Multi-Touch, Objective-C, Retina, Safari, Siri, and Xcode are trademarks or registered trademarks of Apple Inc. IOS is a registered trademark of Cisco Systems Inc.

Google App Engine, Google Apps, Google Checkout, Google Data API, Google Maps, Google Mobile Ads, Google Mobile Updater, Google Mobile, Google Store, Google Sync, Google Updater, Google Voice, Google Mail, Gmail, YouTube, Dalvik and Android are trademarks or registered trademarks of Google Inc. INTERMEC is a registered trademark of Intermec Technologies Corporation. Wi-Fi is a registered trademark of Wi-Fi Alliance. Bluetooth is a registered trademark of Bluetooth SIG Inc. Motorola is a registered trademark of Motorola Trademark Holdings LLC. Computop is a registered trademark of Computop Wirtschaftsinformatik GmbH. SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork, SAP HANA, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects Software Ltd. Business Objects is an SAP company. Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and other Sybase products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Sybase Inc. Sybase is an SAP company. Crossgate, m@gic EDDY, B2B 360°, and B2B 360° Services are registered trademarks of Crossgate AG in Germany and other countries. Crossgate is an SAP company. All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary. The information in this document is proprietary to SAP. No part of this document may be reproduced, copied, or transmitted in any form or for any purpose without the express prior written permission of SAP AG.

RIM, BlackBerry, BBM, BlackBerry Curve, BlackBerry Bold, BlackBerry Pearl, BlackBerry Torch, BlackBerry Storm, BlackBerry Storm2, BlackBerry PlayBook, and BlackBerry App World are trademarks or registered trademarks of Research in Motion Limited. © 2014 SAP AG. All rights reserved.

2

© 2014 SAP AG. Alle Rechte vorbehalten.

Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, ohne die ausdrückliche schriftliche Genehmigung durch SAP AG nicht gestattet. In dieser Publikation enthaltene Informationen können ohne vorherige Ankündigung geändert werden.

Google App Engine, Google Apps, Google Checkout, Google Data API, Google Maps, Google Mobile Ads, Google Mobile Updater, Google Mobile, Google Store, Google Sync, Google Updater, Google Voice, Google Mail, Gmail, YouTube, Dalvik und Android sind Marken oder eingetragene Marken von Google Inc.

Die von SAP AG oder deren Vertriebsfirmen angebotenen Softwareprodukte können Softwarekomponenten auch anderer Softwarehersteller enthalten.

INTERMEC ist eine eingetragene Marke der Intermec Technologies Corporation.

Microsoft, Windows, Excel, Outlook, PowerPoint, Silverlight und Visual Studio sind eingetragene Marken der Microsoft Corporation.

Bluetooth ist eine eingetragene Marke von Bluetooth SIG Inc.

Apache Maven, Maven, Apache, the Apache feather logo, and the Apache Maven project logos sind eingetragene Marken der Apache Software Foundation. IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, z10, z/VM, z/OS, OS/390, zEnterprise, PowerVM, Power Architecture, Power Systems, POWER7, POWER6+, POWER6, POWER, PowerHA, pureScale, PowerPC, BladeCenter, System Storage, Storwize, XIV, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, AIX, Intelligent Miner, WebSphere, Tivoli, Informix und Smarter Planet sind Marken oder eingetragene Marken der IBM Corporation. Linux ist eine eingetragene Marke von Linus Torvalds in den USA und anderen Ländern. Adobe, das Adobe-Logo, Acrobat, PostScript und Reader sind Marken oder eingetragene Marken von Adobe Systems Incorporated in den USA und/oder anderen Ländern. Oracle und Java sind eingetragene Marken von Oracle und/oder ihrer Tochtergesellschaften. UNIX, X/Open, OSF/1 und Motif sind eingetragene Marken der Open Group. Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame und MultiWin sind Marken oder eingetragene Marken von Citrix Systems, Inc. HTML, XML, XHTML und W3C sind Marken oder eingetragene Marken des W3C®, World Wide Web Consortium, Massachusetts Institute of Technology. Apple, App Store, iBooks, iPad, iPhone, iPhoto, iPod, iTunes, Multi-Touch, Objective-C, Retina, Safari, Siri und Xcode sind Marken oder eingetragene Marken der Apple Inc. IOS ist eine eingetragene Marke von Cisco Systems Inc. RIM, BlackBerry, BBM, BlackBerry Curve, BlackBerry Bold, BlackBerry Pearl, BlackBerry Torch, BlackBerry Storm, BlackBerry Storm2, BlackBerry PlayBook und BlackBerry App World sind Marken oder eingetragene Marken von Research in Motion Limited.

© 2014 SAP AG. All rights reserved.

Wi-Fi ist eine eingetragene Marke der Wi-Fi Alliance. Motorola ist eine eingetragene Marke von Motorola Trademark Holdings, LLC. Computop ist eine eingetragene Marke der Computop Wirtschaftsinformatik GmbH. SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork, SAP HANA und weitere im Text erwähnte SAP-Produkte und -Dienstleistungen sowie die entsprechenden Logos sind Marken oder eingetragene Marken der SAP AG in Deutschland und anderen Ländern. Business Objects und das Business-Objects-Logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius und andere im Text erwähnte BusinessObjects-Produkte und Dienstleistungen sowie die entsprechenden Logos sind Marken oder eingetragene Marken der Business Objects Software Ltd. Business Objects ist ein Unternehmen der SAP AG. Sybase und Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere und weitere im Text erwähnte Sybase-Produkte und -Dienstleistungen sowie die entsprechenden Logos sind Marken oder eingetragene Marken der Sybase Inc. Sybase ist ein Unternehmen der SAP AG. Crossgate, m@gic EDDY, B2B 360°, B2B 360° Services sind eingetragene Marken der Crossgate AG in Deutschland und anderen Ländern. Crossgate ist ein Unternehmen der SAP AG. Alle anderen Namen von Produkten und Dienstleistungen sind Marken der jeweiligen Firmen. Die Angaben im Text sind unverbindlich und dienen lediglich zu Informationszwecken. Produkte können länderspezifische Unterschiede aufweisen. Die in dieser Publikation enthaltene Information ist Eigentum der SAP. Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, nur mit ausdrücklicher schriftlicher Genehmigung durch SAP AG gestattet.

3

Course Topics

This course covers:



• • • •

HTML5 for SAPUI5 Essentials Creation of HTML and CSS styles JavaScript Development jQuery Development

© 2014 SAP AG. All rights reserved.

4

Course Description

•

This course is designed to give participants the opportunity to gain an understanding of HTML5 by introducing the basics of web programming techniques using HTML5, CSS3, JavaScript, and jQuery.

•

This course is a pre-requisite course for all courses on SAP SAPUI5, especially if a developer is new to the field of web development.

•

There will be hands-on exercises performed during the course to gain experience with HTML5 so as to prepare the participant for follow up SAP SAPUI5 classes.

© 2014 SAP AG. All rights reserved.

5

Course Goals

This course will prepare you to: • Understand and practice the basics of web programming technique: HTML5, CSS3, JavaScript, and jQuery • Describe and understand the basics of security in web programming languages

© 2014 SAP AG. All rights reserved.

6

Course Objectives

After completing this course, you will be able to: • Create web pages using basic HTML5 and CSS3 • Make web pages more lively through JavaScript programming • Further improve web pages by using parts of jQuery and jQueryUI

© 2014 SAP AG. All rights reserved.

7

Course Prerequisites Required Knowledge (Essential) • • •

Basic web skills and experiences such as working with a browser Experience with files and folders, editing source code, using an integrated development environment Basic knowledge on what programming is about and willingness to write code

Recommended •

None

© 2014 SAP AG. All rights reserved.

8

Target Audience & Course Duration

This course is intended for the following audiences: • • •

Developers Technology Consultants Product owners and consultants looking for an in-depth overview of web development

Duration: 2 days

© 2014 SAP AG. All rights reserved.

9

Course Content Content: Unit 1 – Foundations of HTML5 & CSS Unit 2 – Foundations of JavaScript Unit 3 – Foundations of JQuery Unit 4 – Security

© 2014 SAP AG. All rights reserved.

10

Course Outline and Schedule Preface Day 1: Welcome & Introductions UNIT 1 – Foundations of HTML5 & CSS •

Lesson 1: HTML5 and CSS3 Essentials

UNIT 2 – Foundations of JavaScript •

Lesson 2: Essentials of the JavaScript Language

© 2014 SAP AG. All rights reserved.

11

Course Outline and Schedule Preface

Day 2: Unit 3 – Foundations of JQuery •

Lesson 3: JQuery Foundations

UNIT 4 – Security •

Lesson 4 - Foundations of HTML, CSS, JavaScript, jQuery Security

© 2014 SAP AG. All rights reserved.

12

UNIT 1 Foundations of HTML5 & CSS

Unit 1 – Foundations of HTML5 & CSS: Unit Objectives

After completing this unit, you will be able to: •

Describe and write HTML5 and CSS code

© 2014 SAP AG. All rights reserved.

14

Unit 1 – Foundations of HTML5 & CSS: Unit Lessons Foundations of HTML5 & CSS Lesson 1: HTML5 and CSS3 Essentials

© 2014 SAP AG. All rights reserved. © SAP 2014 /

15

Lesson Objectives

After completing this lesson, you will be able to: •

Describe and write HTML5 and CSS code

© 2014 SAP AG. All rights reserved.

16

HTML5 Essentials

Web Technologies Technology

Role

Examples

HTML (HTML5)

Markup Language Page Content Semantics of the Page

Headings, Paragraphs Sections, Headers, Footers, Articles Hyperlinks, Buttons

CSS (CSS3)

Annotation Language Page Style Appearance of the Page

Font Style, Size, and Color Layout of the Sematic Blocks Transitions, Animations

JavaScript

Programming Language Page Dynamics Behavior of the Page

Popup Windows Event Handlers for Buttons DOM Manipulation AJAX and related Techniques

jQuery jQueryUI

Streamlining of Common Tasks JavaScript Libraries Reusable UI Blocks Best Practice Solutions Domain Specific Language Browser Independency

© 2014 SAP AG. All rights reserved.

18

What is HTML5?

•

Next generation of HTML superseding HTML 4.01, XHTML 1.0, XHTML 1.1

•

Standardizes features of the web platform

•

Designed to be cross-platform like its predecessors

•

Defines new tags and markup

•

Describes new JavaScript APIs

•

Deprecates or redefines some so far common elements

•

Supported to a wide extent by the latest versions of Opera, Chrome, Firefox, and, to a lesser extent, by IE9

© 2014 SAP AG. All rights reserved.

19

What does HTML5 contain? Class

Examples

Semantics

Giving meaning to structure, data driven web

Offline & Storage

Local Storage, Indexed DB, File API

Device Access

Geo Location, Audio/Video Input Access

Connectivity

Web Sockets, Pushing Data from the Client

Multimedia

Audio and video are first class citizens in the HTML5

3D, Graphics & Effects

SVG, Canvas, WebGL, and CSS3 3D

Performance & Integration

Web Workers, XMLHttpRequest2

CSS3

Wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance

© 2014 SAP AG. All rights reserved.

(Source: http://www.w3.org/html/logo/)

20

Basic HTML 5 Page Template

Basic HTML 5 Page Template

•

Regarding charset see e.g. http://webdesign.about.com/od/metatags/qt/meta-charset.htm

© 2014 SAP AG. All rights reserved.

21

Know Your Browser

•

Some special URIs (http://en.wikipedia.org/wiki/URI_scheme)

about:

Shows version information and copyright information

about:about

Lists all the 'about:' URIs

about:blank

Shows a blank HTML document

view-source:

Shows a web page as code 'in the raw'

file:

Addressing files on local or network file systems

© 2014 SAP AG. All rights reserved.

22

Useful Tools

•

Validate your HTML http://validator.w3.org

Validate your CSS • http://jigsaw.w3.org/css-validator •

Online version of a complete HTML and CSS Guide • http://webkompetenz.wikidot.com/docs:html-handbuch http://www.selfhtml.org •

•

Try all HTML elements and CSS properties http://www.w3schools.com/html5/default.asp

© 2014 SAP AG. All rights reserved.

23

Additional Information

The W3C maintains an HTML5 landing page • http://www.w3.org/html/logo/ •

•

The W3C has released a Web Developer's Guide about HTML5 http://dev.w3.org/html5/html-author/ All about HTML5 can be read in the specification http://www.w3.org/TR/html5/ On the website http://html5doctor.com you can find a brief discussion on the use of any HTML5 element; if you are not sure whether an item was marked up correctly, this is the place to look it up Microsoft also offers a web site about HTML5 http://html5labs.interoperabilitybridges.com/

© 2014 SAP AG. All rights reserved.

24

Installation of the SAPUI5 Development Environment

•

Get familiar with the structure of the provided training material

•

Download link for the SAPUI5 Developer Studio (Eclipse based)

•

http://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/Documentation/Tools/download

•

Recommended is the 64bit version; only if NGAP/BSP repositories are to be used (not relevant for the training) the 32bit version should be installed

•

MAC users in addition follow the steps from the Installation Guide for ABAP in Eclipse

•

https://wiki.wdf.sap.corp/wiki/display/aie/ABAP+In+Eclipse+on+Mac

© 2014 SAP AG. All rights reserved.

25

Exercise: Lab Environment Setup 1

•

Launch Eclipse from Start  All Programs  eclipse  eclipse.

•

When the Workspace Launcher dialog window appears, enter the workspace N/workspace and tick the check box Use this as the default and do not ask again. • If you change your default project location, make a note of it.

© 2014 SAP AG. All rights reserved.

26

Lab Environment Setup 2

•

Close the Welcome tab.

•

Go to File  Import.

•

In the Import window that appears, select General  Existing Projects into Workspace and then choose Next.

© 2014 SAP AG. All rights reserved.

27

Lab Environment Setup 3

•

On the current window, click Select root directory and click Browse…

•

On the next window, navigate to the Application (N:) drive  SAPX04_95\Modul_1_HTML and select as root directory.

•

Click OK. © 2014 SAP AG. All rights reserved.

28

Lab Environment Setup 4

•

Make sure that all projects appearing in the Projects area are ticked, and press Finish

•

Verify that your Eclipse Project explorer looks similar to the following:

© 2014 SAP AG. All rights reserved.

29

Total View

•

Expand the “Modul_1_HTML_ Practice” folder to view all directories & files and confirm

•

Note that your start up project files are all in the “exercises” folder • Also note that there is a solutions folder containing all the code solutions

© 2014 SAP AG. All rights reserved.

30

Installing the Firebug Add-on in FireFox (1)

•

Launch FireFox and make sure you are on the Start Page

•

Click the Add-ons icon at the bottom of the browser: • This will launch the Add-ons Manager.

•

Use the search field to search for the Firebug Add-on.

•

Install it by means of the corresponding Install button: © 2014 SAP AG. All rights reserved.

31

Installing the Firebug Add-on in FireFox (2)

•

Upon installation, note the new tab and the change in status:

•

Close all tabs.

© 2014 SAP AG. All rights reserved.

32

Setup for Debugging with FireBug

•

Make sure that your Firebug Console is activated/enabled by going to FireFox and click the FireBug and set to On for All Web Pages:

•

Enable the Console and click All, as you see in the screen shot example below:

© 2014 SAP AG. All rights reserved.

33

Exercise: Basic HTML Page Goal Write an HTML page showing a push button and an alert popup Method Go to Eclipse Expand the exercises folder in your project* Use the code from P02_HTML_Essentials_Exercise_1 Task Copy or create the HTML page skeleton Add a push button to the body section Add an event handler for button “onclick” Use an alert popup as the event handler Test the webpage using FireFox (see next slide to enable FireBug) Duration

* Note that there is also a solutions folder containing completed code in case you need help

15 minutes © 2014 SAP AG. All rights reserved.

34

CSS3 Essentials

Connecting Stylesheets to HTML

My Page

© 2014 SAP AG. All rights reserved.

36

Basic Selectors

Universal Selector • The universal selector is an asterisk. It is like a wildcard and matches all element types in the document •

*{} •

Type Selector body, footer, p {}

The ID Selector • The ID selector works on the value of ID attributes •

#mainHeader {}

© 2014 SAP AG. All rights reserved.

37

Basic Selectors

Class Selector • The class selector matches on the value of class attributes •

paragraph .topNavigation {} •

The Descendant Selector A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A table td {}

© 2014 SAP AG. All rights reserved.

38

Property Survey

/* property: value; */ font-family: Georgia, Arial; font-size: 10px; text-transform: uppercase; text-decoration: none; font-weight: bold; background-color: #FF4400; color: #949494; border: 2px solid green; border-radius: 5px; margin-top: 20px; padding-bottom: 5px; width: 200px; height: 100px; © 2014 SAP AG. All rights reserved.

39

CSS Reset

•

Original CSS Reset from meyerweb

•

http://meyerweb.com/eric/tools/css/reset/

•

The goal of a reset style sheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on

•

Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, (http://www.blueprintcss.org/) among others

* { margin: 0; padding: 0; }

© 2014 SAP AG. All rights reserved.

40

CSS Box Model

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas • The final width (height) of an element is the sum of the margin, padding, border and the given width (height) •

•

http://imagecss.com/

© 2014 SAP AG. All rights reserved.

41

Working with Browser Tools

•

Use function button F12 in browser

•

Firebug plugin for Firefox, no install for Chrome and IE

© 2014 SAP AG. All rights reserved.

42

Exercise: Basic CSS Selectors and Properties

Goal Practice the use of basic CSS selectors and properties Method Return to Exclipse Use the code from P03_CSS_Essentials_Exercise_1 in your exercises folder Task • Create the HTML document including the section • Replace _universal, _type, … by appropriate markup •Test the webpage Duration 15 minutes

© 2014 SAP AG. All rights reserved.

43

CSS3 Special Features – Gradients, Shadows and Corners

Linear Gradients Linear Gradient background: -moz-linear-gradient(left, blue, white); background: -webkit-linear-gradient(left, blue, white);

Linear Gradient with Angle background: -moz-linear-gradient(90deg, red, white); background: -webkit-linear-gradient(90deg, red, white);

Linear Gradient with Color Stops background: -moz-linear-gradient(top, blue, white 80%, orange); background: -webkit-linear-gradient(top, blue, white 80%, orange);

Linear Gradient with Transparency background: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(img/bg_landscapeFooter.png); background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(img/bg_landscapeFooter.png); © 2014 SAP AG. All rights reserved.

45

Box Shadows Color and Blur box-shadow: 8px 8px lightgrey; box-shadow: 8px 8px 4px lightgrey;

Spread and Blur box-shadow: 8px 8px 0px 4px lightgrey; box-shadow: 8px 8px 4px 4px lightgrey;

No Offset and Inset box-shadow: 0px 0px 4px cyan; box-shadow: inset 0px 0px 4px cyan; #box11:hover { box-shadow: 0px 0px 4px cyan; }

© 2014 SAP AG. All rights reserved.

46

Rounded Corners Circular Arcs border-radius: 16px; border-radius: 20%;

Elliptic Arcs border-radius: 16px/32px;

Two Corners border-radius: 16px 32px;

Individual Corners border-top-left-radius: 8px; border-top-right-radius: 16px; border-bottom-right-radius: 24px; border-bottom-left-radius: 32px;

© 2014 SAP AG. All rights reserved.

47

Exercise: Design of a Form

Goal Use gradients, shadows, corners Method Use P03A_CSS_Features_Exercise_1 Design a form according to the picture on the right Task • Add gradient effects • Add shadow effects • Add rounded corners •Test form in browser Duration 30 minutes © 2014 SAP AG. All rights reserved.

48

Using HTML5 Semantic Markup

(New) Structural Semantic Tags

• • • • • •

•

Defines a logical region of a page or a grouping of content Defines an article of complete piece of content Defines a header region of a page or section Defines a footer region of a page or section Defines a navigation region of a page or section Defines secondary or related content (block layout) and (inline layout) Represents a container with no special meaning used for layout purposes

© 2014 SAP AG. All rights reserved.

50

Exercise: Define a Blog Using Semantic Markup Goal Use the new structural tags und style the resulting page Method Use the code from P04_HTML_Semantic_Markup_Excerise_1 Task • Create an HTML page • Add a header, a footer, and two sections for posts and a sidebar • Add horizontal navigation areas to both, the header and the footer • Add an article with an aside to the posts section • Add a vertical sidebar menu • Style the page •Test the webpage Duration 30 minutes

© 2014 SAP AG. All rights reserved.

51

Exercise: Define a Blog Using Semantic Markup

•

You tested page should appears as follows:

© 2014 SAP AG. All rights reserved.

52

User-Friendly Web Forms

Survey of Input Types

•

Best supported in Opera and Chrome

•

Groups related elements in a form

•

Displays a slider control

•

Displays a form field for numbers, often as a spin box

•

Displays a form field for dates

•

Displays a form field for email addresses

© 2014 SAP AG. All rights reserved.

54

Survey of Input Types

•

Displays a form field for URLs

•

Displays a form field for specifying colors

•

Jump to the first field with autofocus.

© 2014 SAP AG. All rights reserved.

55

Providing Hints with Placeholder Text

•

Placeholder text provides users with instructions on how they should fill in the fields.

•

HTML5 introduces an autocomplete attribute that tells web browsers that they should not attempt to automatically fill in data for the field.

© 2014 SAP AG. All rights reserved.

56

Exercise: User-Friendly Web Forms

Goal Use the new HTML5 input features to design a registration form Method Use the code from P06_HTML_Forms_Exercise_1 Task • Create an input form with labels and input fields • Add first name, last name (both text) • Add age (number), email (email), homepage (url) • Add Password (password), submit (submit) • Use placeholder text and check input validation • Validate the entire page using http://validator.w3.org/ •Test the page in a browser Duration 15 minutes © 2014 SAP AG. All rights reserved.

57

Exercise: User-Friendly Web Forms

•

You tested page should appears as follows:

© 2014 SAP AG. All rights reserved.

58

Working with HTML5 Custom Attributes

Custom Attributes (“data- Attributes”)

•

Any attribute that starts with "data-" will be treated as a storage area for private data (private in the sense that the end user can't see it - it doesn't affect layout or presentation)

•

This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page John says: Hello, how are you?

© 2014 SAP AG. All rights reserved.

60

JavaScript API

•

A simple JavaScript API is presented to access these attribute values

•

The .dataset property behaves very similarly to the the .attributes property (but it only works as a map of key-value pairs) var user = document.getElementsByTagName("li")[0]; var pos = 0, span = user.getElementsByTagName("span")[0]; var phrases {name: {name: {name: ];

= [ "city", prefix: "I am from "}, "food", prefix: "I like to eat "}, "lang", prefix: "I like to program in "}

user.addEventListener( "click", function(){ var phrase = phrases[ pos++ ]; // Use the .dataset property span.innerHTML = phrase.prefix + user.dataset[ phrase.name ]; }, false); © 2014 SAP AG. All rights reserved.

61

Exercise: Custom Data Attributes

Goal Use custom data attributes to dynamically change a document. Method Use code from P07_HTML_Attributes_Exercise_1 Task • Create a document, add a paragraph with custom attributes • Add button and a div tag • Add a button event handler • On button click, the custom data shall be written into the div tag •Test the page in a browser Duration 15 minutes

© 2014 SAP AG. All rights reserved.

62

Styling Tables with HTML5 Pseudoclasses

Pseudoclasses

•

:nth-child(n) The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent

n can be a number, a keyword, or a formula (e.g. 2, even, odd, or 2n+3) • :nth-of-type(n) The :nth-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent • :last-child The :last-child selector matches every element that is the last child of its parent • :nth-last-child(n) The :nth-last-child(n) selector matches every element that is the nth child, regardless of type, of its parent, counting from the last child

© 2014 SAP AG. All rights reserved.

64

Exercise 1: Styling Tables with Pseudoclasses

Goal Use pseudoclasses as CSS selectors to style a table Method Use code from P08_HTML_Styling_Tables_Exercise_1 Task • Create an HTML document with a table • Define table header, body, and footer • Style the table header • Add a zebra pattern to the table body • Style the footer and the last table column •Test the page in a browser Duration 15 minutes © 2014 SAP AG. All rights reserved.

65

Exercise 1: Styling Tables with Pseudoclasses

•

You tested page should appears as follows:

© 2014 SAP AG. All rights reserved.

66

Exercise 2: Reacting to Mouse Events

Goal Modify the table to make it more interactive Method Use code from P08_HTML_Styling_Tables_Exercise_2 If a user moves the mouse over a table row its text should become more readable and its color should change Task • Use the :hover selector to modify the text color • Use the :hover selector to modify the text decoration • Use the :hover selector to modify the background color •Test the page in a browser by hovering the mouse over the rows Duration 15 minutes © 2014 SAP AG. All rights reserved.

67

Exercise 3: Deletion of Table Rows

Goal Using events, enable row deletion Method Use code from P08_HTML_Styling_Tables_Exercise_3 If a user clicks on a row it should be removed from the screen Task • Add event handlers to the table row elements •Test the page in a browser by selecting a row (s) to delete Duration 15 minutes

© 2014 SAP AG. All rights reserved.

68

Exercise 3: Deletion of Table Rows

•

Example of deletions:

© 2014 SAP AG. All rights reserved.

69

CSS Floats

The Definition

•

Definition of a float according to the W3C “A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the “clear” property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.” http://www.w3.org/TR/CSS2/visuren.html#floats

•

Reference http://www.alistapart.com/articles/css-floats-101/

•

Tutorial http://www.maxdesign.com.au/articles/css-layouts/ © 2014 SAP AG. All rights reserved.

71

CSS Floats

•

•

How Elements Float 

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.



A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.



The elements after the floating element will flow around it.



The elements before the floating element will not be affected.



If an image is floated to the right, a following text flows around it, to the left.

Turning off Float – Using Clear 

Elements after the floating element will flow around it. To avoid this, use the clear property.



The clear property specifies which sides of an element other floating elements are not allowed.

© 2014 SAP AG. All rights reserved.

72

Building a Full CSS Layout

Reference: http://www.maxdesign.com.au/articles/process/ © 2014 SAP AG. All rights reserved.

73

Building a Full CSS Layout •

Step 1 – Make your layout idea explicit It could be in the form of a digital mockup, a sketch on paper or an existing site or template

•

Step 2 – Look for the containers To position elements on the page, the overall containers need to be established Look at your design and work out the main containers on the page

•

Step 3 – Name the containers Identify container, header, footer, main navigation, menu, content, …

•

Step 4 – Create the HTML mark up Use semantic markup and ID attributes whenever possible

•

Step 5 – Position the overall containers with CSS rules The positioning of the containers gives the skeleton of the CSS style sheet

•

Step 6 – Style the elements in detail Decide on the use of colors, fonts, decorations, images, link behavior, mouse effects, … Reference: http://www.maxdesign.com.au/articles/process/ © 2014 SAP AG. All rights reserved.

74

Exercise 1: CSS Floats – Two Column Layout

Goal Get comfortable with CSS float layouts by writing a page with header, footer, left (floated) column, and right (floated) column Method Use the code from P10_HTML_CSS_Floats_Exercise_1 Use screen shot in the following slide to design and build your page Task • Create the page, refer to the screen shot on the next page • Add styles for header, footer, content, and navigation column •Test your page in a browser Duration 15 minutes

© 2014 SAP AG. All rights reserved.

75

Screen Shot for Exercise 1

© 2014 SAP AG. All rights reserved.

76

Exercise: CSS Floats – Thumbnail Gallery

Goal Design a thumbnail gallery Method Use the code from P10_HTML_CSS_Floats_Exercise_2 Use gallery screen shot from the following slide Create a float layout and style it appropriately Task • Create a container for the gallery • Create a thumbnail CSS class for the images • Add hover effects •Test your page in a browser by hovering over the images Duration 15 minutes © 2014 SAP AG. All rights reserved.

77

Screen Shot for Exercise 2

© 2014 SAP AG. All rights reserved.

78

Unit Summary

After completing this unit, you should now be able to: •

Describe and write HTML5 and CSS code

© 2014 SAP AG. All rights reserved.

79

UNIT 2 Foundations of JavaScript

Unit 2 – Foundations of JavaScript: Unit Objectives

After completing this unit, you will be able to: Describe the JavaScript Language • Write JavaScript code •

© 2014 SAP AG. All rights reserved.

81

Unit 2 – Foundations of JavaScript: Unit Lessons Foundations of JavaScript Lesson 2: Essentials of the JavaScript Language

© 2014 SAP AG. All rights reserved.

82

Lesson Objectives

After completing this lesson, you will be able to: Describe the JavaScript Language • Write JavaScript code •

© 2014 SAP AG. All rights reserved.

83

JavaScript Language Basics

First Example: HTML and JavaScript

JavaScript Language Basics

// Message popup alert("Hello, world!"); /* Write to console */ console.log("Hello, world!");

© 2014 SAP AG. All rights reserved.

85

Script Placement

Short scripts • Place them in the header after the title element and after the CSS includes. • All other scripts should be placed at the end of the body region. •

o The page loading will not be halted while JavaScript is processed o HTML elements will be available •

Do not use the defer Attribute. It only works in IE and Firefox.

© 2014 SAP AG. All rights reserved.

86

Syntax Issues

Identifier  JavaScript is case sensitive  The first character of an identifier can be a dollar sign or an underscore and any other letter, but no number  Keywords cannot be used as identifiers

Comments // single line comment /* multiline comment multiline comment */

Use a documentation generator  JSDoc Toolkit http://www.jsdoctookit.org

 YUI Doc http://developer.yahoo.com/yui/yuidoc

© 2014 SAP AG. All rights reserved.

87

Variables

•

Use the var keyword o If you omit the var keyword, you automatically create a global variable o JavaScript is loosely typed, change of type is always possible o Multiple definitions are possible

•

Statements o One statement per line o All statements should end with a semicolon o Keep your code clean and readable

© 2014 SAP AG. All rights reserved.

88

Alternatives and Further Developments Language

Developer

Remarks

CoffeeScript

Open Source

http://coffeescript.org/

Dart

Google

http://code.google.com/p/dart/

TypeScript

Microsoft

http://www.typescriptlang.org/

Node

Open Source

http://nodejs.org/

© 2014 SAP AG. All rights reserved.

89

Resources

Documentation of ECMA-262 http://www.ecmascript.org/docs.php •

SELFHTML http://de.selfhtml.org/

•

Mozilla Developer Network https://developer.mozilla.org/en/JavaScript

•

Using Style Guides http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml •

JavaScript Tutorials http://www.w3schools.com/js/default.asp

•

 Interactive Environment http://eloquentjavascript.net/paper.html

© 2014 SAP AG. All rights reserved.

90

Exercise: Embed JavaScript into an HTML Page

Goal Learn how to process JavaScript within an HTML page Method Use as starter code P21_JS_Language_Basics_Exercise_1 Task • Create an HTML document • Insert the tag at the end of the body • Send an alert popup and write some text to the console • Display the document in a browser and open the console (F12) • Open the script debugger and set a breakpoint • Load the page again and see the script stopping •Test the page in a browser Duration 10 minutes © 2014 SAP AG. All rights reserved.

91

JavaScript Primitive Data Types

Comments and Variables

// this is a comment

•

There are 2 types of JavaScript comments – a single line comment and a block comment

•

By using the keyword „var“ you begin the declaration of a variable (no type is required – since JavaScript is dynamic)

•

To specify more than one variable you can separate them via comma.

•

A good practice is to use Hungarian notation for naming variables. You can find some hints in Wikipedia.

/* this is a block comment */ // variable declaration var iMyVariable = 12; // multi variable declaration var iVar1 = 0, sVar2 = "Hello";

© 2014 SAP AG. All rights reserved.

93

Basic Data Types

// string var sVar = "Hello World"; var sVarAlt = 'Hello World'; // number (integer && float) var iVar = 1234; var fVar = 12.34; // boolean var bVar = true; // null && undefined var vNull = null; var vUndefined = undefined;

© 2014 SAP AG. All rights reserved.

•

A string value can be specified either via double or single quotes. In each case the surrounding quotes are the leading one and the other quotes can be used within the string value.

•

A number can be either an integer or a float. By using the dot you can define the variable to be a float value.

•

A boolean value is either true or false.

•

null and undefined are special values whereas null is the null object and undefined means explicitly that the variable is not defined.

94

Basic Data Types – String (1)

// string var sVar = "Hello World"; var sVarAlt = 'Hello World'; // string escaping var sEsc = "Hello \"World\""; // Hello "World" // string with a newline var sNL = "Hello\nWorld"; // Hello // World

© 2014 SAP AG. All rights reserved.

•

Next to using the two different quotes a string can be escaped via using backslash to escape the following character.

•

There are a couple of special character representations: • • • •

\n \r \t \uXXXX

newline carriage return tab unicode character

95

Basic Data Types – String (2)

// string operations var sText = "test string"; alert(sText.length); alert(sText.substring(5,7)); alert(sText.charAt(5)); alert(sText.indexOf("s"));

• // // // //

11 "st" "s" 2

// string separation var sNames = "Peter,Tim,Frank,Andreas"; var aNames = sNames.split(","); // "Peter", "Tim", "Frank", "Andreas" // string transformation alert("JavaScript".toUpperCase());

© 2014 SAP AG. All rights reserved.

The String object provides the following functions: • • • • • • • •

charAt charCodeAt concat fromCharCode indexOf lastIndexOf match replace

• • • • • • • •

search slice split substr substring toLowerCase toUpperCase valueOf

// JAVASCRIPT

96

Basic Data Types / Object Representation

// string + string object var sString = "Hello World"; var oString = new String("Hello World"); var ooString = new Object("Hello World"); // number + number object var iInt = 1234; var oInt = new Number(1234); var ooInt = new Object(1234); var fFloat = 12.34; var oFloat = new Number(12.34); var ooFloat = new Object(12.34); // boolean + boolean object var bBool = true; var oBool = new Boolean(true); var ooBool = new Object(true);

© 2014 SAP AG. All rights reserved.

•

•

•

•

•

For each of the 3 basic types an object representation exists By calling the constructor you can create a String object You don’t need to care about dealing with objects or primitives since JavaScript automatically converts them. As alternative the objects can be created by using the Object constructor. The difference is that the objects can be extended whereas the primitives not! 97

Exercise: String Processing

Goal Implement Caesar's cipher (the shift cipher) Method Use as starter code P22_JS_Primitive_Data_Types_Exercise_1 Task • In Caesar's cipher, each character is shifted by a certain offset • Consider charCodeAt(), fromCharCode(), and % • Use a for loop, e.g. for (var i = 0; i < n; i++) { … } • Test the cipher for the alphabet with different offsets Duration 15 minutes

© 2014 SAP AG. All rights reserved.

98

JavaScript Reference Types

JavaScript Objects •

Array – Array Object

•

Boolean – Boolean Object (Wrapper)

•

Date – Date Object: Working with Date and Time

•

Function – Function Object (Wrapper)

•

Math – Math Object: Perform Mathematical Tasks

•

Number – Number Object (Wrapper)

•

String – String Object (Wrapper)

•

RegExp – Regular Expression Object: Pattern Matching and Search & Replace

© 2014 SAP AG. All rights reserved.

100

Objects

// object literal var oObjLiteral = {};

•

Objects can be created via object literal syntax or by using the object constructor

•

Properties and/or methods can be accessed via dot or square bracket notation

•

Properties and/or methods can be added and deleted dynamically during runtime

// object var oObject = new Object(); // dot notation oObject.property; oObject.method([parameter]); // square bracket notation oObject["property"]; oObject["method"]([parameter]); // adding a property to an object oObject.newProperty = "Property Value"; // adding a new method to an object oObject.newMethod = function() { /* impl */ }; // deleting properties or methods delete oObject.newMethod;

© 2014 SAP AG. All rights reserved.

101

Objects (Map)

// define the map var oMap = { key1: "value1", key2: "value2", key3: "value3" }; alert(oMap["key1"]);

// value1

alert(oMap["key3"]);

// value3

© 2014 SAP AG. All rights reserved.

•

Objects are also often used as Maps

•

Definition in the Object literal syntax with key value pairs.

•

Values can be accessed via square bracket plus the name of the value

102

Arrays

// array literal var aArrLiteral = []; var aArrLiteral1 = [1, 2, 3, 4]; // array var aArray = new Array(); var aArray1 = new Array(1, 2, 3, 4); // adding values aArray.push(5, 6, 7, 8);

•

Arrays can be created via literal syntax by using the square brackets or by using the Array constructor.

•

Values can be added by using the push method

•

Values can be accessed via square bracket plus the index of the value

•

An array can be converted into a string by using the join method and specifying the separator characters

•

The size can be determined via the property length

// accessing values alert(aArray[0]); // 5 // joining values alert(aArray.join(" - ")); // "5 - 6 - 7 - 8" // size of an array alert(aArray.length); // 4

© 2014 SAP AG. All rights reserved.

103

Functions

// function expression (anonymous function) var fnAdd = function(a, b) { return a + b; };

•

Functions are first-class objects • Can be created dynamically • Assignable to variables • Can be passed as arguments to other functions • Can have properties and methods

•

JavaScript does not have a local scope (block scope). Furthermore you only have a “function” scope.

•

Function expressions are assigned to a variable and not added to the global or function scope as the function declaration.

•

Function declarations don’t need a trailing semicolon

// named function expression var fnAdd = function add(a, b) { return a + b; }; // function declaration function foo() { // implement function here } // function object (only for demonstration) var fnAdd = new Function('a, b', 'return a + b'); fnAdd(2, 3); // 5

© 2014 SAP AG. All rights reserved.

104

Math

// min Math.min(1, 2);

// 1

// max Math.max(1, 2);

// 2

// PI Math.PI

// 3.14…

// round Math.round(Math.PI);

// 3

// random Math.random();

// 0..1

© 2014 SAP AG. All rights reserved.

•

The Math object allows you to perform mathematical tasks.

•

Math is not a constructor. All properties/methods of Math can be called by using Math as an object, without creating it.

105

Date

// today var d = new Date(); // day of the month (from 1-31) d.getDate();

•

The Date object is designed to work for date and time.

•

Date objects are created with new Date().

// day of the week (from 0-6) d.getDay(); // month (from 0-11) d.getMonth(); // year (four digits) d.getFullYear();

© 2014 SAP AG. All rights reserved.

106

Exercise: Reference Types

Goal Get familiar with array operations Method Use the start up code from P23_JS_Reference_Types_Exercise_1 Task • Write the function insertAfter • It takes an array, an element, and a list of new elements • The new elements are inserted after the given element • If the given element does not occur, the array does not change • Consider the use of the array indexOf and splice functions Duration 15 minutes

© 2014 SAP AG. All rights reserved.

107

JavaScript Operators

Operators

// assignment operator =

•

Important operators are the assignment, comparison, calculation and logic operators.

•

Bit and void operators are mentioned for completeness.

// logic operators &&, ||, !

•

By using the delete operator you can delete unused objects and properties.

// bit operators >>,