SAPX04: HTML5 Foundations for SAP SAPUI5 Development

8/15/2019 SAPX04: HTML5 Foundations for SAP SAPUI5 Development

1/246

© 2014 SAP AG. All rights reserved. 1

SAPX04 HTML5 Foundations for SAP

SAPUI5 Development

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


2/246


© 2014 SAP AG. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purposewithout the express permission of SAP AG. The information contained herein may bechanged without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietarysoftware components of other software vendors.

Microsoft, Windows, Excel, Outlook, PowerPoint, Silverlight, and Visual Studio areregistered trademarks of Microsoft Corporation.

Apache Maven, Maven, Apache, the Apache feather logo, and the Apache Maven projectlogos are trademarks of The Apache Software Foundation. This course is not designed toteach 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 registeredtrademarks 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 MultiWinare 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.

RIM, BlackBerry, BBM, BlackBerry Curve, BlackBerry Bold, BlackBerry Pearl, BlackBerryTorch, BlackBerry Storm, BlackBerry Storm2, BlackBerry PlayBook, and BlackBerry App

World are trademarks or registered trademarks of Research in Motion Limited.

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 aretrademarks 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 t rademark of Motorola Trademark Holdings LLC.

Computop is a registered t rademark 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 wellas their respective logos are trademarks or registered trademarks of SAP AG in Germanyand other countries.

Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, CrystalDecisions, Web Intelligence, Xcelsius, and other Business Objects products and servicesmentioned herein as well as their respective logos are trademarks or registered trademarksof Business Objects Software Ltd. Business Objects is an SAP company.

Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and other Sybaseproducts and services mentioned herein as well as their respective logos are trademarks orregistered trademarks of Sybase Inc. Sybase is an SAP company.

Crossgate, m@gic EDDY, B2B 360°, and B2B 360° Services are registered t rademarksof Crossgate AG in Germany and other countries. Crossgate is an SAP company.

All other product and service names mentioned are the trademarks of their respectivecompanies. Data contained in this document serves informational purposes only. Nationalproduct specifications may vary.

The information in this document is proprietary to SAP. No part of this document may bereproduced, copied, or transmitted in any form or for any purpose without the express priorwritten permission of SAP AG.


3/246


© 2014 SAP AG. Alle Rechte vorbehalten.

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

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

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

Apache Maven, Maven, Apache, the Apache feather logo, and the Apache Maven projectlogos 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 eingetrageneMarken von Adobe Systems Incorporated in den USA und/oder anderen Ländern.

Oracle und Java sind eingetragene Marken von Oracle und/oder ihrerTochtergesellschaften.

UNIX, X/Open, OSF/1 und Motif sind eingetragene Marken der Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame und MultiWinsind 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, BlackBerryTorch, BlackBerry Storm, BlackBerry Storm2, BlackBerry PlayBook und BlackBerry AppWorld sind Marken oder eingetragene Marken von Research in Motion Limited.

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 sindMarken oder eingetragene Marken von Google Inc.

INTERMEC ist eine eingetragene Marke der Intermec Technologies Corporation.

Wi-Fi ist eine eingetragene Marke der Wi-Fi Alliance.

Bluetooth ist eine eingetragene Marke von Bluetooth SIG Inc.

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 -Dienst-leistungen sowie die entsprechenden Logos sind Marken oder eingetragene Marken derSAP 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 Business-Objects-Produkte und Dienstleistungen sowie die entsprechenden Logos sind Markenoder eingetragene Marken der Business Objects Software Ltd. Business Objects ist einUnternehmen der SAP AG.

Sybase und Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere und weitere im Texterwähnte Sybase-Produkte und -Dienstleistungen sowie die entsprechenden Logos sindMarken oder eingetragene Marken der Sybase Inc. Sybase ist ein Unternehmen derSAP AG.

Crossgate, m@gic EDDY, B2B 360°, B2B 360° Services sind eingetragene Markender Crossgate AG in Deutschland und anderen Ländern. Crossgate ist ein Unternehmender SAP AG.

Alle anderen Namen von Produkten und Dienstleistungen sind Marken der jeweiligenFirmen. Die Angaben im Text sind unverbindlich und dienen lediglich zu Informations-zwecken. Produkte können länderspezifische Unterschiede aufweisen.

Die in dieser Publikation enthaltene Information ist Eigentum der SAP. Weitergabe undVervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck undin welcher Form auch immer, nur mit ausdrücklicher schriftlicher Genehmigung durchSAP AG gestattet.


4/246


Course Topics

This course covers:

• HTML5 for SAPUI5 Essentials

• Creation of HTML and CSS styles

• JavaScript Development

• jQuery Development


5/246


6/246


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


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

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



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 anintegrated development environment

• Basic knowledge on what programming is about and willingness to

write code

Recommended

• None



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 ofweb development

Duration: 2 days



Course Content

Content:

Unit 1 – Foundations of HTML5 & CSS

Unit 2 – Foundations of JavaScript

Unit 3 – Foundations of JQueryUnit 4 – Security



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

Preface

Course Outline and Schedule



Preface

Course Outline and Schedule

Day 2:

Unit 3 – Foundations of JQuery

• Lesson 3: JQuery Foundations

UNIT 4 – Security

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


13/246



Unit 1 – Foundations of HTML5 & CSS:

Unit Objectives

After completing this unit, you will be able to:

• Describe and write HTML5 and CSS code



© SAP 2014/

Unit 1 – Foundations of HTML5 & CSS:

Unit Lessons

Foundations of HTML5 & CSSLesson 1: HTML5 and CSS3 Essentials



Lesson Objectives

After completing this lesson, you will be able to:



17/246

HTML5 Essentials


18/246


Web Technologies

Technology Role ExamplesHTML(HTML5)

Markup LanguagePage ContentSemantics of the Page

Headings, ParagraphsSections, Headers, Footers, ArticlesHyperlinks, Buttons

CSS (CSS3) Annotation Language

Page Style Appearance of the Page

Font Style, Size, and Color

Layout of the Sematic BlocksTransitions, Animations

JavaScript Programming LanguagePage DynamicsBehavior of the Page

Popup WindowsEvent Handlers for ButtonsDOM Manipulation AJAX and related Techniques

jQuery jQueryUI

JavaScript LibrariesBest Practice SolutionsDomain Specific Language

Streamlining of Common TasksReusable UI BlocksBrowser Independency


19/246


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


20/246


What does HTML5 contain?

Class Examples (Source: http://www.w3.org/html/logo/)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 structureor performance


21/246


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

http://webdesign.about.com/od/metatags/qt/meta-charset.htmhttp://webdesign.about.com/od/metatags/qt/meta-charset.htm


22/246


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

http://en.wikipedia.org/wiki/URI_schemehttp://en.wikipedia.org/wiki/URI_scheme


23/246


Useful Tools

• Validate your HTMLhttp://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 propertieshttp://www.w3schools.com/html5/default.asp

http://validator.w3.org/http://jigsaw.w3.org/css-validatorhttp://webkompetenz.wikidot.com/docs:html-handbuchhttp://www.selfhtml.org/http://www.w3schools.com/html5/default.asphttp://www.w3schools.com/html5/default.asphttp://www.selfhtml.org/http://webkompetenz.wikidot.com/docs:html-handbuchhttp://jigsaw.w3.org/css-validatorhttp://validator.w3.org/


24/246


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 HTML5http://dev.w3.org/html5/html-author/

All about HTML5 can be read in the specificationhttp://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 upcorrectly, this is the place to look it up

Microsoft also offers a web site about HTML5http://html5labs.interoperabilitybridges.com/

http://www.w3.org/html/logo/http://dev.w3.org/html5/html-author/http://www.w3.org/TR/html5/http://html5doctor.com/http://html5labs.interoperabilitybridges.com/http://html5labs.interoperabilitybridges.com/http://html5doctor.com/http://www.w3.org/TR/html5/http://dev.w3.org/html5/html-author/http://www.w3.org/html/logo/


25/246


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 (notrelevant 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

http://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/Documentation/Tools/downloadhttps://wiki.wdf.sap.corp/wiki/display/aie/ABAP+In+Eclipse+on+Machttps://wiki.wdf.sap.corp/wiki/display/aie/ABAP+In+Eclipse+on+Machttp://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/Documentation/Tools/download


26/246


27/246


Lab Environment Setup 2

• Close the Welcome tab.

• Go to File Import.

• In the Import window thatappears, select General Existing Projects into Workspaceand then choose Next.


28/246



• On the current window, click Select rootdirectory and click Browse…

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

• Click OK.


29/246



• Make sure that allprojects appearing in theProjects area are ticked,and press Finish

• Verify that your EclipseProject explorer lookssimilar to the following:


30/246


Total View

• Expand the“Modul_1_HTML_ Practice” folder toview all directories& files and confirm

• Note that your startup project files areall in the “exercises”folder

• Also note that

there is asolutions foldercontaining allthe codesolutions


31/246


Installing the Firebug Add-on in FireFox (1)

• Launch FireFox andmake sure you are onthe Start Page

• Click the Add-ons iconat the bottom of thebrowser:

• This will launch the Add-ons Manager.

• Use the search field to

search for the Firebug Add-on.

• Install it by means of thecorresponding Installbutton:


32/246


Installing the Firebug Add-on in FireFox (2)

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

• Close all tabs.


33/246


Setup for Debugging with FireBug

• Make sure that your Firebug Console isactivated/enabled by going to FireFox and click theFireBug and set to On for All Web Pages:

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


34/246


GoalWrite an HTML page showing a push button and analert popup

Method

Go to Eclipse

Expand the exercises folder in your project*

Use the code fromP02_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 toenable FireBug)

Duration

15 minutes

Exercise: Basic HTML Page

* Note that there isalso a solutions foldercontaining completedcode in case youneed help


35/246

CSS3 Essentials


36/246


Connecting Stylesheets to HTML

My Page


37/246


Basic Selectors

• Universal Selector

• The universal selector is an asterisk. It is like a wildcard and matches all elementtypes in the document

*{}

• Type Selector

body, footer, p {}

• The ID Selector

• The ID selector works on the value of ID attributes

#mainHeader {}


38/246


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 anarbitrary descendant of some ancestor element A

table td {}


39/246


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;


40/246


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 defaultline 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;

}

http://meyerweb.com/eric/tools/css/reset/http://www.blueprintcss.org/http://www.blueprintcss.org/http://meyerweb.com/eric/tools/css/reset/


41/246


CSS Box Model

• Each box has a content area (e.g., text, an image, etc.) and optional surroundingpadding, border, and margin areas

• The final width (height) of an element is the sum of the margin, padding, borderand the given width (height)

• http://imagecss.com/

http://imagecss.com/http://imagecss.com/


42/246


Working with Browser Tools

• Use function button F12 in browser

• Firebug plugin for Firefox, no install for Chrome and IE


43/246


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

Exercise: Basic CSS Selectors and Properties


44/246

CSS3 Special Features – Gradients,

Shadows and Corners


45/246


Linear Gradients

background: -moz-linear-gradient(left, blue, white);

background: -webkit-linear-gradient(left, blue, white);

background: -moz-linear-gradient(90deg, red, white);

background: -webkit-linear-gradient(90deg, red, white);

background: -moz-linear-gradient(top, blue, white 80%, orange);

background: -webkit-linear-gradient(top, blue, white 80%, orange);

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);

Linear Gradient

Linear Gradient with Angle

Linear Gradient with Color Stops

Linear Gradient with Transparency


46/246


Box Shadows

box-shadow: 8px 8px lightgrey;

box-shadow: 8px 8px 4px lightgrey;

box-shadow: 8px 8px 0px 4px lightgrey;

box-shadow: 8px 8px 4px 4px lightgrey;

box-shadow: 0px 0px 4px cyan;

box-shadow: inset 0px 0px 4px cyan;

#box11:hover {

box-shadow: 0px 0px 4px cyan;

}

Color and Blur

Spread and Blur

No Offset and Inset


47/246


Rounded Corners

border-radius: 16px;

border-radius: 20%;

border-radius: 16px/32px;

border-radius: 16px 32px;

border-top-left-radius: 8px;

border-top-right-radius: 16px;

border-bottom-right-radius: 24px;

border-bottom-left-radius: 32px;

Circular Arcs

Elliptic Arcs

Two Corners

Individual Corners


48/246


Goal

Use gradients, shadows, corners

Method

Use P03A_CSS_Features_Exercise_1

Design a form according tothe picture on the right

Task

• Add gradient effects

• Add shadow effects

• Add rounded corners

•Test form in browser

Duration

30 minutes

Exercise: Design of a Form


49/246

Using HTML5 Semantic Markup


50/246


(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


51/246


GoalUse 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

Exercise: Define a Blog Using Semantic Markup


52/246


Exercise: Define a Blog Using Semantic Markup

• You tested pageshould appears asfollows:


53/246

User-Friendly Web Forms


54/246


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


55/246


Survey of Input Types

•

Displays a form field for URLs

•

Displays a form field for specifying colors

•

Jump to the first field with autofocus.


56/246


Providing Hints with Placeholder Text

• Placeholder text provides users with instructions on how they should fill in thefields.

• HTML5 introduces an aut ocompl ete attribute that tells web browsers that theyshould not attempt to automatically fill in data for the field.


57/246


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

Exercise: User-Friendly Web Forms

http://validator.w3.org/http://validator.w3.org/


58/246


Exercise: User-Friendly Web Forms

• You tested page should appears as follows:


59/246

Working with HTML5 Custom

Attributes


60/246


Custom Attributes (“ data- Attributes” )

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

• 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?


61/246


JavaScript API

• A simple JavaScript API is presented to access these attribute values

• The . dat aset 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: "city", prefix: "I am from "},

{name: "food", prefix: "I like to eat "},

{name: "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);


62/246


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


Duration

15 minutes

Exercise: Custom Data Attributes


63/246

Styling Tables with HTML5

Pseudoclasses


64/246


Pseudoclasses

• :nth-child(n)

The :nth-child(n) selector matches every element that is the nth child, regardlessof 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 aparticular 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


65/246


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


Duration

15 minutes

Exercise 1: Styling Tables with Pseudoclasses


66/246


Exercise 1: Styling Tables with Pseudoclasses

• You tested page shouldappears as follows:


67/246


Goal

Modify the table to make it more interactive

Method


If a user moves the mouse over a table row its text shouldbecome 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

Exercise 2: Reacting to Mouse Events


68/246


Goal

Using events, enable row deletion

Method


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

Duration15 minutes

Exercise 3: Deletion of Table Rows


69/246


Exercise 3: Deletion of Table Rows

• Example of deletions:


70/246

CSS Floats


71/246


The Definition

• Defini tion 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/

CSS Fl

http://www.w3.org/TR/CSS2/visuren.htmlhttp://www.alistapart.com/articles/css-floats-101/http://www.maxdesign.com.au/articles/css-layouts/http://www.maxdesign.com.au/articles/css-layouts/http://www.alistapart.com/articles/css-floats-101/http://www.w3.org/TR/CSS2/visuren.html


72/246


CSS Floats

• How Elements Float

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

A floated element will move as far to the left or right as it can. Usually thismeans 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 theclear property.

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

B ildi F ll CSS L t


73/246


Building a Full CSS Layout

Reference: http://www.maxdesign.com.au/articles/process/

B ildi F ll CSS L t

http://www.maxdesign.com.au/articles/process/http://www.maxdesign.com.au/articles/process/


74/246


Building a Full CSS Layout

• Step 1 – Make your layout idea expl ici t

It could be in the form of a digital mockup, a sketch on paper or an existing site ortemplate

• Step 2 – Look for the containers

To position elements on the page, the overall containers need to be establishedLook 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 w ith CSS rulesThe 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/

E i 1 CSS Fl t T C l L t

http://www.maxdesign.com.au/articles/process/http://www.maxdesign.com.au/articles/process/


75/246


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

Exercise 1: CSS Floats – Two Column Layout

S Sh t f E i 1


76/246


Screen Shot for Exercise 1

E i CSS Fl t Th b il G ll


77/246


GoalDesign a thumbnail gallery

Method

Use the code from P10_HTML_CSS_Floats_Exercise_2

Use gallery screen shot from the following slideCreate 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

Exercise: CSS Floats – Thumbnail Gallery

S Sh t f E i 2


78/246


Screen Shot for Exercise 2

Unit Summary


79/246


Unit Summary

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



80/246

Foundations of

JavaScript

UNIT 2

Unit 2 Foundations of JavaScript: Unit Objectives


81/246


Unit 2 – Foundations of JavaScript: Unit Objectives

After completing this unit, you will be able to:

• Describe the JavaScript Language

• Write JavaScript code

Unit 2 Foundations of JavaScript: Unit Lessons


82/246


Unit 2 – Foundations of JavaScript: Unit Lessons

Foundations of JavaScript

Lesson 2: Essentials of the JavaScript Language

Lesson Objectives


83/246


Lesson Objectives

After completing this lesson, you will be able to:

• Describe the JavaScript Language

• Write JavaScript code


84/246

JavaScript Language Basics

First Example: HTML and JavaScript


85/246


First Example: HTML and JavaScript

JavaScript Language Basics

// Message popupalert("Hello, world!");

/* Write to console */

console.log("Hello, world!");

Script Placement


86/246


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.

Syntax Issues


87/246


Syntax Issues

Identifier

JavaScript is case sensitive

The first character of an identifier can be a dollar sign or an underscore and any otherletter, 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

Variables

http://www.jsdoctookit.org/http://developer.yahoo.com/yui/yuidochttp://developer.yahoo.com/yui/yuidochttp://www.jsdoctookit.org/


88/246


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

• Statementso One statement per line

o All statements should end with a semicolon

o Keep your code clean and readable

Alternatives and Further Developments


89/246


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/

http://coffeescript.org/http://code.google.com/p/dart/http://www.typescriptlang.org/http://nodejs.org/http://nodejs.org/http://www.typescriptlang.org/http://code.google.com/p/dart/http://coffeescript.org/


90/246

Exercise: Embed JavaScript into an HTML Page


91/246


GoalLearn 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


Duration

10 minutes

Exercise: Embed JavaScript into an HTML Page


92/246

JavaScript Primitive Data Types

Comments and Variables


93/246


Comments and Variables

// this is a comment

/* this is ablock comment */

// variable declaration

var iMyVariable = 12;

// multi variable declarationvar iVar1 = 0, sVar2 = "Hello";

• There are 2 types of JavaScriptcomments – a single line commentand a block comment

• By using the keyword „var“ you beginthe declaration of a variable (no type

is required – since JavaScript isdynamic)

• To specify more than one variable youcan separate them via comma.

• A good practice is to use Hungariannotation for naming variables. You canfind some hints in Wikipedia.

Basic Data Types

http://en.wikipedia.org/wiki/Hungarian_notationhttp://en.wikipedia.org/wiki/Hungarian_notation


94/246


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 && undefinedvar vNull = null;var vUndefined = undefined;

• A string value can be specified eithervia double or single quotes. In eachcase the surrounding quotes are theleading one and the other quotes canbe used within the string value.

• A number can be either an integer ora float. By using the dot you candefine the variable to be a float value.

• A boolean value is either true or false.

• null and undefined are special valueswhereas null is the null object andundefined means explicitly that thevariable is not defined.

Basic Data Types – String (1)

http://www.w3schools.com/jsref/jsref_obj_string.asphttp://www.w3schools.com/jsref/jsref_obj_number.asphttp://www.w3schools.com/jsref/jsref_obj_boolean.asphttp://www.w3schools.com/jsref/jsref_obj_boolean.asphttp://www.w3schools.com/jsref/jsref_obj_number.asphttp://www.w3schools.com/jsref/jsref_obj_string.asphttp://www.w3schools.com/jsref/jsref_obj_string.asp


95/246


Basic Data Types String (1)

// stringvar sVar = "Hello World";var sVarAlt = 'Hello World';

// string escapingvar sEsc = "Hello \"World\"";

// Hello "World"

// string with a newlinevar sNL = "Hello\nWorld";// Hello// World

• Next to using the two different quotesa string can be escaped via usingbackslash to escape the followingcharacter.

• There are a couple of special

character representations:• \n newline

• \r carriage return

• \t tab

• \uXXXX unicode character

Basic Data Types – String (2)

http://www.w3schools.com/jsref/jsref_obj_string.asp


96/246


yp g ( )

// string operationsvar sText = "test string";alert(sText.length); // 11alert(sText.substring(5,7)); // "st"alert(sText.charAt(5)); // "s"alert(sText.indexOf("s")); // 2

// string separationvar sNames = "Peter,Tim,Frank,Andreas";var aNames = sNames.split(",");

// "Peter", "Tim", "Frank", "Andreas"

// string transformation

alert("JavaScript".toUpperCase()); // JAVASCRIPT

• The String object provides thefollowing functions:

• charAt

• charCodeAt

• concat

• fromCharCode• indexOf

• lastIndexOf

• match

• replace

• search

• slice

• split

• substr• substring

• toLowerCase

• toUpperCase

• valueOf

Basic Data Types / Object Representation


97/246


yp / j p

// string + string objectvar sString = "Hello World";var oString = new String("Hello World");var ooString = new Object("Hello World");

// number + number objectvar 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 objectvar bBool = true;var oBool = new Boolean(true);var ooBool = new Object(true);

• For each of the 3 basictypes an objectrepresentation exists

• By calling the constructoryou can create a Stringobject

• You don’t need to careabout dealing with objects orprimitives since JavaScriptautomatically converts them.

• As alternative the objects

can be created by using theObject constructor.

• The difference is that theobjects can be extendedwhereas the primitives not!

Exercise: String Processing


98/246


GoalImplement 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

g g


99/246

JavaScript Reference Types

JavaScript Objects


100/246


p j

• 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

Objects


101/246


j

// object literalvar oObjLiteral = {};

// objectvar oObject = new Object();

// dot notationoObject.property;oObject.method([parameter]);

// square bracket notationoObject["property"];oObject["method"]([parameter]);

// adding a property to an object

oObject.newProperty = "Property Value";// adding a new method to an objectoObject.newMethod = function() { /* impl */ };// deleting properties or methodsdelete oObject.newMethod;

• Objects can be created viaobject literal syntax or byusing the object constructor

• Properties and/or methodscan be accessed via dot or

square bracket notation

• Properties and/or methodscan be added and deleteddynamically during runtime

Objects (Map)


102/246


// define the mapvar oMap = {key1: "value1",key2: "value2",key3: "value3"

};

alert(oMap["key1"]); // value1

alert(oMap["key3"]); // value3

• Objects are also often usedas Maps

• Definition in the Objectliteral syntax with key valuepairs.

• Values can be accessed viasquare bracket plus thename of the value

Arrays


103/246


// array literalvar aArrLiteral = [];var aArrLiteral1 = [1, 2, 3, 4];

// arrayvar aArray = new Array();var aArray1 = new Array(1, 2, 3, 4);

// adding valuesaArray.push(5, 6, 7, 8);

// accessing valuesalert(aArray[0]); // 5

// joining values

alert(aArray.join(" - ")); // "5 - 6 - 7 - 8"

// size of an arrayalert(aArray.length); // 4

• Arrays can be created via literalsyntax by using the squarebrackets or by using the Arrayconstructor.

• Values can be added by usingthe push method

• Values can be accessed viasquare bracket plus the index ofthe value

• An array can be converted intoa string by using the joinmethod and specifying theseparator characters

• The size can be determined viathe property length

Functions


104/246


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

};

// named function expressionvar fnAdd = function add(a, b) {return a + b;

};

// function declarationfunction foo() {// implement function here

}

// function object (only for demonstration)var fnAdd = new Function('a, b', 'return a + b');fnAdd(2, 3); // 5

• Functions are first-class objects • Can be created dynamically

• Assignable to variables

• Can be passed as argumentsto other functions

• Can have properties and

methods

• JavaScript does not have a localscope (block scope). Furthermoreyou only have a “function” scope.

• Function expressions areassigned to a variable and not

added to the global or functionscope as the function declaration.

• Function declarations don’t needa trailing semicolon

Math


105/246


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

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

// PIMath.PI // 3.14…

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

// randomMath.random(); // 0..1

• The Math object allows you to performmathematical tasks.

• Math is not a constructor. Allproperties/methods of Math can becalled by using Math as an object,

without creating it.

Date


106/246


// todayvar d = new Date();

// day of the month (from 1-31)d.getDate();

// day of the week (from 0-6)d.getDay();

// month (from 0-11)d.getMonth();

// year (four digits)d.getFullYear();

• The Date object is designed to workfor date and time.

• Date objects are created with newDate().

Exercise: Reference Types


107/246


GoalGet 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


108/246

JavaScript Operators

Operators


109/246


// assignment operator=

// comparison operators==, !=, >, =, >,


110/246


alert("1" == 1); // truealert("1" === 1); // falsealert(1 === 1); // true

// weirdnessalert("1" == true); // truealert("0" == true); // false

// even weirderalert("" == 0); // true

• When comparing values using theequality operators (== or !=)JavaScript performs an implicittypecast

• If you want to avoid this behavior, you

should use the strict equalityoperators (=== or !==) because thisdoesn‘t perform a typecast beforecomparing

• When using the equality operator (==)

there are sometimes amazingresults….

String Concatenation Operator


111/246


// number calculation4 + 5; // 9

// string concatenation"hello" + " world"; // "hello world“

// when "+" is used with strings and// numbers the result is a string4 + 5 + "five" + 3 + 4; // "9five34“4 + 5 + "five" + (3 + 4); // "9five7"

• When using + with numbers, thenumbers are added

• When using + with strings, the stringsare concatenated

• When mixing numbers and stringsusing +, the result is always a string.Up to the first string the numbers arestill added, then a concatenationtakes place

•Using brackets will first carry out thecode within the brackets

typeof Operator


112/246


// stringvar sVar = "Hello World";alert(typeof sVar); // string

// number (integer && float)var iVar = 1234;alert(typeof iVar); // numbervar fVar = 12.34;alert(typeof fVar); // number

// booleanvar bVar = true;alert(typeof bVar); // boolean

// null && undefinedvar vNull = null;alert(typeof vNull); // objectvar vUndefined = undefined;

alert(typeof undefined); // undefined

// functionvar fnAdd = function(a, b) { return a + b; };alert(typeof fnAdd); // function

• The typeof-operator allows to checkthe type of a variable.

• In general you can differ betweenstring, number, boolean, object,function and undefined

• Strange behavior - be aware:

• user-defined objects are typeof object

• built-in type Array is typeof object

• the null value is typeof object

typeof Operator (does not work for objects!)


113/246


// stringvar oString = new String("Hello World“);alert(typeof oString ); // objectalert(oString.constructor === String); // true

// number (integer && float)var oInt = new Number(1234);alert(typeof oInt ); // objectalert(oInt.constructor === Number); // truevar oFloat = new Number(12.34);alert(typeof oFloat); // objectalert(oFloat.constructor === Number); // true

// booleanvar oBool = new Boolean(true);

alert(typeof oBool); // objectalert(oBool.constructor === Boolean); // true

• The type of objects can bechecked by utilizing theconstructor property.

• The constructor propertycontains the reference to

the constructor functionwhich can be used tocheck the type of anobject.


114/246

JavaScript Statements

if … else … condition


115/246


// defaultif (condition) {

// impl when true;} else {

// impl when false;}

// checking defined objectsif (object) {// do something

}

• The condition can be either a booleanvariable or you can also checkingobjects for being defined and having acorrect value.

• Not using the curly brackets is bad

style and is a common source forissues. You should acquire the habitto always make use of the curlybrackets.

switch… command


116/246


switch (var) {case value1:

// impl;break;

case value2:// impl;

break;default:

// impl;}

• Each case of the switch commandshould end with a break statement.Otherwise the following case will alsobe executed.

• The default case is executed when no

other case matches.

while… loop


117/246


while (condition) {// loop impl

}

• The while loop executes its codinguntil the condition is true. Thecondition will be checked before theexecution of the code.

do… while… loop


118/246


do {// loop impl

} while (condition);

• The do while loop executes its codinguntil the condition is true. Thecondition will be checked after theexecution of the code.

for… loop


119/246


for (expr; cond; it) {// loop impl

}

• The for loop will be executed until thecondition (cond) is true. The startexpression (expr) will be definedbefore the execution of the for loopand the iteration expression (it) isexecution after each execution of the

coding.

for… in… loop


120/246


var oObject = {key1: "value1",key2: "value2"

};for (var sKey in oObject) {

var oProp = oObject[sKey];}

var aArray = ["value1", "value2"

];for (var iIndex in aArray) {

var oValue = aArray[iIndex];

}

• With the for in loop you can iterateover each property of an object. Ineach loop cycle the name (key) of theproperty is assigned to the definedvariable.

• You can also iterate over the entriesof an array. In each loop cycle theindex of the next value of the array isassigned to the variable.

• Be aware:

• The basic Object type can be extendedwith additional properties. This will adunexpected values to the for in loop(also Arrays are affected since they areObjects).

• No guarantee for the order of properties

looping – doing it right!


121/246


var oObject = {key1: "value1",key2: "value2"

};for (var sKey in oObject) {

if (oObject.hasOwnProperty(sKey)) {var oProp = oObject[sKey];

}}

var aArray = ["value1", "value2"

];

for (var i = 0, l = aArray.length; i < l; i++) {var oValue = aArray[iIndex];}

• Use for in loop toiterate over theproperties of anobject. To prevent sideeffects just add thefunction hasOwnProperty

to make sure that theproperty is defined onthe current object.

• For Arrays just makeuse of the standard for

loop to make sure toget no side effects.

Conditional Assignment ( ? : )


122/246


var nCount = 0;var sText = "test";

if (sText=="test") {nCount += 1;

} else {nCount -= 1;

}

alert(nCount); // 1

// this is the same but shorternCount = (sText == "test") ? nCount + 1 : nCount - 1;alert(nCount); // 2

• The semantic behindthe conditionalassignment is:

• condition ?value_if_true :value_if_false

• Do not nestconditionalassignments sincethis makes the codenot readable anymore.

Exercise: Statements


123/246


GoalUse a for … in … loop to copy the properties of an object

Method

Use the start up code from P25_JS_Statements_Exercise_1

Task• Create an object literal

• Add some properties (remember concept “object as a map”)

• Use a for … in … loop to copy the properties into an array

• Output the array

Duration

15 minutes


124/246

JavaScript Variables and Scope

Variables and Scope


125/246


Characteristics

• Do not create a variable inside a function without the keyword var Otherwise, it is a global variable

• If you copy an object, you copy only the reference on it

You also cannot pass an object by value, only by reference

• Keep an eye on the execution contextIf a variable is created, it is also accessible in a function which has beencreated in the same context (used especially when creating closures)

• JavaScript does not have block-level scopeIt only supports global and function scopeBe aware of variable hoisting

Exercise: Variables and Scope – Closure


126/246


GoalGet familiar with the concept of a “closure”

Method

Use the starter code from P26_JS_Variables_Scope_Exercise_1

Task• Write a (outer) function that returns a (inner) function

• The outer function takes one argument, say n

• The returned inner function also takes one argument, say x

• The inner function returns x+n

• Define several of those “adders” and test them

Duration

15 minutes


127/246

JavaScript Error Handling

Reasons for Throwing JavaScript Errors


128/246


• If programs fail silently, it can take long time to notice an issue

• Throwing errors leads to easier debugging and code maintenance

• Since JavaScript native errors are quite unspecific, consider the use of userdefined error objects

• Compared to other languages, tool support, e.g. debuggers, in JavaScript is stillevolving – thus support for error detection in the code is even more important

How to Throw Errors


129/246


• Throw an error by using the throw operator and providing an object to throw

• Any type of object can be thrown; an Error object is the most typical to use

• Browsers display errors in their specific ways

•Often some console window is used

throw new Error("Something bad happened.");

Throwing an Error String


130/246


Throwing an Error Object


131/246



132/246

Best Practice


133/246


• Provide the text to be displayed to the Error constructor

• Include the function name and why the function failed

When to Throw Errors


134/246


• JavaScript does not have argument or type checking

• Do not implement this for every function!

• The key is proper organization of the code: Modularization and layering

The use of internal or private functions is known and thus they should be tested duringdevelopment

Functions making up the public interface or API should implement arguments checkingand signal wrong use to the caller

Avoid throwing errors from deep below the call stack, since this forces your user to

understand the details of your implementation

Consider to catch those errors in the public interface and eventually throw them againmore digestible to the caller

This is especially important for library design

ECMA-262 Error Object Types


135/246


Type Description

Error Base type for all errors; never actually thrown by the engine

EvalError Thrown when an error occurs during execution of code viaeval()

RangeError Thrown when a number is outside the bounds of its range; forexample, trying to create an array with -20 items (new

Array(-20)); these occur rarely during normal executionReferenceError Thrown when an object is expected but not available, for

instance, trying to call a method on a null reference

SyntaxError Thrown when the code passed into eval() has a syntax error

TypeError Thrown when a variable is of an unexpected type; for example,new 10 or "prop" in true

URIError Thrown when an incorrectly formatted URI string is passed intoencodeURI, encodeURIComponent, decodeURI, ordecodeURIComponent

Error Handling


136/246


• The mechanism of error handling: The try …catch statement

try {

someFunction();

} catch (error){

if (error instanceof TypeError){// Handle type error

} else if (error instanceof ReferenceError){

// Handle reference error

} else {

// Handle all other errors

}

}

Best Practice when Throwing and Catching Errors


137/246


• Do not leave catch clauses empty, since this does not handle errors but justmasks them

• On the contrary, do not expose each and every technical exception to the user

• Target design:

Lower, technical layers throw exceptions

Higher, application layers handle exceptions

• In the application context you can often decide how to deal with the errorsituation, e.g. whether to signal it to the user or to take different approach to

complete the task

User Defined Error Type


138/246


Advantages of User Defined Errors


139/246


function MyError(message) {

this.message = message;}

MyError.prototype = new Error();

try {

throw new MyError("Hello, world!");

} catch (error) {

if ( error instanceof MyError) {

console.log(error.name + ' says "' + error.message + '".');} else {

console.log("Something else happened.");

}

}

• React to the difference between own errors and browser errors

• Error message will be displayed in the browser’s normal error handlingmechanism

• Browser attaches extra information to the error objects when they are thrown

Debugging Techniques


140/246


• Use the consoleconsol e. l og( "Er r or ") ;

• Use a custom di v container

var debugI nf o = document . get El ement ByI d( "debugI nf o") ;

debugI nf o. i nner HTML = " … ";

Exercise: JavaScript Error Handling


141/246


GoalGet familiar with common error situations

Method

Use the starter code from P27_JS_Error_Handling_Exercise_1

Task• Replace '___' by proper code to handle the errors situations

• Replace 'e.name' by more descriptive member of the error object

• Write equivalent code using instanceof

Duration

15 minutes


142/246

JavaScript DOM Manipulation

Selecting Elements


143/246


• By IDgetElementById("col1");

• By name

getElementsByName

• By tag name

getElementsByTagName

• HTML5 method

var selected = document.querySelector(".selected");

Tree Nodes


144/246


• Create an Attr ibutvar attr = document.createAttribute("align");

attr.nodeValue = "right";

var el = document.getElementsByTagName("h2")[0];

el.setAttributeNode(attr);

• Create a Text Node

var txt = document.createTextNode(document.lastModified);

var old = document.createTextNode("Last update: ");

document.getElementById("date").appendChild(old);

document.getElementById("date").appendChild(txt);

• Create an Element

var el = document.createElement("h1");

var txt = document.createTextNode("Content");

el.appendChild(txt);

var content_section = document.getElementById("col1");

content_section.appendChild(el);


145/246

JavaScript Events

Handler Types


146/246


• HTML Event Handlersonclick = alert('hello);

• DOM Level 0 Event Handlers

el.onclick = function() { … };

• DOM Level 2 Event Handlers

el.addEventListener("click", , false);

Multiple event handler can be added

• Internet Explorer

el.attachEvent("onclick", function(){ … });

Cross Browser Solution


147/246


var EventManager = {addHandler: function(element, type, handler){

if (element.addEventListener){

element.addEventListener(type, handler, false);

} else if (element.attachEvent){

element.attachEvent("on" + type, handler);

} else {

element["on" + type] = handler;)};

EventManager.addHandler(el,"click",handler);

Event Bubbling – Definition


148/246


• The concept of event bubbling was introduced to deal with situations where asingle event, such as a mouse click, may be handled by two or more eventhandlers defined at different levels of the Document Object Model (DOM)hierarchy

• If this is the case, the event bubbling process starts by executing the eventhandler defined for individual elements at the lowest level (e.g. individualhyperlinks, buttons, table cells etc.)

• From there, the event bubbles up to the containing elements (e.g. a table or aform with its own event handler), then up to even higher-level elements (e.g. theBODY element of the page)

• Finally, the event ends up being handled at the highest level in the DOMhierarchy, the document element itself (provided that your document has its ownevent handler)

Event Bubbling – Example


149/246


• Event bubbling is the default

• If you want to suppress it, set the event property cancelBubble to true

var cnt3 = document.getElementById('container3');

cnt3.addEventListener('click', function(event) {

console.log("Event handler for container 3 (table row)");

event.cancelBubble = true;

});

Event Propagation – Definit ion


150/246


• The term event propagation is often used as a synonym of event bubbling• However, strictly speaking, event propagation is a wider term: it includes not only

event bubbling but also event capturing

• Event capturing is the opposite of bubbling (events are handled at higher levelsfirst, then sink down to individual elements at lower levels)

• Event capturing is supported in fewer browsers and rarely used; notably, InternetExplorer prior to version 9.0 does not support event capturing

Exercise: JavaScript Event Handling


151/246


Goal

Get familiar with adding event handlers to push buttons

Method

Use code from P29_JS_Events_Exercise_1.html

Task• Add an HTML event handler to the first button

• Add a DOM Level 0 event handler to the second button

• Add two DOM Level 2 event listeners to the third button

• Easy reaction is to send an alert popup or to change “innerHTML”

•Test

Duration

15 minutes

Resulting page withlast button changedafter click event


152/246

Object Oriented Programming

Constructor Functions


153/246


// creation via functionsvar myEmployee = new Employee();

// constructor function executionfunction Employee() {

// create a new object via literal

// var this = {};

// add properties and methods to the// objectthis.property = "propValue";this.method = function () {};

// implicitly return this instance// return this;

}

• If a function is used to create objectsthe function serves as a constructorand is called constructor function. Byconvention those functions start withan upper case character.

• If you call a constructor function via“new” the following happens:

• An empty object will be created which isreferenced via the variable this. Theprototype of the function is inherited.

• Properties and Methods are assigned to

the object via this.• The newly created object will be

implicitly returned at the end of theconstructor function.

Object Properties


154/246


function Employee() {this.property = "propValue";this.method = function () {};

}

var myEmployee1 = new Employee();var myEmployee2 = new Employee();

myEmployee1.myAttr = "test";myEmployee2.myFunc = function() {};

alert(myEmployee1.property);// "propValue"alert(myEmployee2.property);// "propValue"

alert(myEmployee1.myAttr); // "test"alert(myEmployee2.myAttr); // "undefined"

alert(myEmployee1.myFunc); // "undefined"alert(myEmployee2.myFunc); // "function"

• Properties and methods can be addedto an object at any time in theprogram

• Properties or methods which areadded to an object are only available

for the particular object not the otherobjects of the same origin.

• If properties or methods are added inthe constructor function they will beavailable on each object created viathis function.

No Classes, but Prototypes


155/246


• JavaScript has no classes which is strange for developers of other languages• Objects can be created on demand and properties and methods will be added

as required.

• New objects are not empty. It contains some properties and methods but theyare not “own” properties or methods.

• A prototype is an object from which other objects inherit properties.

• Every object has a prototype by default. Since prototypes are themselvesobjects, every prototype has a prototype too (There is only one e

SAPX04: HTML5 Foundations for SAP SAPUI5 Development

Documents

Transcript of SAPX04: HTML5 Foundations for SAP SAPUI5 Development