Unit 2. JavaScript programming for web applications
Duration: 1 hour and 30 minutes
|
Overview
|
This unit covers some of the essential features of JavaScript. JavaScript is an important programming language for building the next generation of interactive web applications, including mobile web applications. In this unit, you learn how to use JavaScript to manipulate the document object model elements of an HTML page.
|
Learning objectives
|
After completing this unit, you should be able to:
-
Describe JavaScript primitives and objects
-
Explain how variables are declared and used in JavaScript
-
Describe JavaScript control structures
-
Describe functions in JavaScript
-
Describe the document object model (DOM) hierarchy
-
Describe the window and document objects
-
Identify the DOM objects that are commonly used in JavaScript applications for working with HTML documents
|
Exercise 1. Working with JavaScript in HTML documents
Duration: 45 minutes
|
Overview
|
In this exercise, you work with the WebSphere Application Server Developer Tools for Eclipse V8.5 Beta environment to develop HTML documents and JavaScript functions.
|
Learning objectives
|
After completing this exercise, you should be able to:
-
Create HTML web pages
-
Use style statements in HTML documents
-
Connect scripts to documents
-
Write JavaScript functions
-
Create interactive alert and confirm window objects
-
Use JavaScript to modify the document object model (DOM)
|
Unit 3. HTML5 features
Duration: 45 minutes
|
Overview
|
This unit covers the new structural and form features of HTML5.
|
Learning objectives
|
After completing this unit, you should be able to:
-
List new elements in HTML5
-
Describe HTML5 structural elements: section, article, header, footer, figure, figcaption
-
Describe the attributes of the HTML5 input element: tel, email, datetime, number, range, color
|
Exercise 2. Working with HTML5 features
Duration: 45 minutes
|
Overview
|
In this exercise, you explore some of the features available in HTML5.
|
Learning objectives
|
After completing this exercise, you should be able to:
-
Create a web page and insert a simple HTML5 form layout
-
Add new markup elements
-
Use input types that include attributes such as email to perform client-side validation
-
Test the application
|
Unit 4. Course summary
Duration: 5 minutes
|
Overview
|
This unit provides a summary of the course, a description of the class evaluation process, and information for future study.
|
Learning objectives
|
After completing this unit, you should be able to:
-
Explain how the course met its learning objectives
-
Submit an evaluation of the class
-
Identify other WebSphere Education courses that are related to this course
-
Access the WebSphere Education website
-
Locate appropriate resources for further study
|
Course III – Developing Mobile Web Applications with Dojo
Duration: 4.7 hours
Course introduction
Duration: 15 minutes
|
Unit 1. Introduction to Ajax and JavaScript frameworks
Duration: 30 minutes
|
Overview
|
This unit describes what Ajax is, and lists the requirements for developing web applications with the Ajax programming model. It shows you the Ajax application model architecture, describes JavaScript frameworks, and explains how JavaScript frameworks fit into the Ajax application model architecture. Finally, the unit describes some of the benefits of using the Dojo framework for web application development.
|
Learning objectives
|
After completing this unit, you should be able to:
Describe what Ajax is
Describe the Ajax programming model
Describe the Ajax application model architecture
Describe JavaScript frameworks
Describe how JavaScript frameworks fit into the Ajax application model architecture
List some Ajax JavaScript frameworks
Describe the benefits of using the Dojo JavaScript framework
|
Unit 2. Getting started with the Dojo toolkit
Duration: 1 hour and 15 minutes
|
Overview
|
This unit describes the core Dojo, Dijit, and Dojox libraries, and how to use Dojo to access DOM nodes. It also describes Dojo mobile form controls, how the Dojo parser generates mobile widgets from decorated Dojo elements, and how Dojo is used in the Eclipse environment.
|
Learning objectives
|
After completing this unit, you should be able to:
Describe the Dojo base and core libraries
Describe how Dojo is used to access DOM objects
Describe the widgets and themes in the Dijit library
Describe the benefits of using the Dojo mobile libraries
Describe Dojo mobile form control widgets
Describe the markup of Dojo mobile form control widgets
Describe the source template for a Dojo mobile page
Describe how the Dojo parser generates widgets from decorated HTML
Describe the environment that is used for Dojo Mobile Web development
|
Exercise 1. Developing an HTML5 Mobile Web page that uses Dojo mobile form controls
Duration: 45 minutes
|
Overview
|
In this exercise, you work with the Eclipse Indigo SR1 for Java EE Developers V4.2.1 and IBM WebSphere Application Server Developer Tools V8.5.1 environment. You use this software to develop a web page that uses Dojo mobile form controls.
|
Learning objectives
|
After completing this exercise, you should be able to:
Create a project and import the Dojo libraries
Develop a Mobile Web page to display form input controls that use dojox/mobile widgets
Run the page on the web preview server of Eclipse
|
Unit 3. Developing Mobile Web applications with Dojo
Duration: 1 hour and 15 minutes
|
Overview
|
This unit introduces the Mobile Web application features of the Dojo Toolkit V1.8. You learn how to code mobile views, headings, lists, and tab bars with Dojo, and how to move between views. You also learn how to declaratively develop mobile pages by adding mobile features to web pages.
|
Learning objectives
|
After completing this unit, you should be able to:
Describe the characteristics of mobile applications
Describe what Dojo mobile is
Describe the mobile themes that are available in Dojo
List the Dojo mobile widgets added in Dojo 1.8
Describe the mobile views
Describe the Dojo mobile headings
Describe Dojo mobile lists
Describe Dojo mobile tab bars
Explain how to move between views
Describe the various transitions between views
|
Exercise 2. Creating a mobile user interface for the index page of a web application
Duration: 45 minutes
|
Overview
|
In this exercise, you transform the index page of a traditional web application into a Mobile Web application. You use mobile device themes, views, and widgets to change the application for display on mobile devices, such as an Android phone.
|
Learning objectives
|
After completing this exercise, you should be able to:
Develop a mobile device user interface with dojox.mobile themes
Build views that are accessed from the index.html page
Move between mobile views
Run the page on the web preview server of Eclipse.
|
Unit 4. Ajax calls to services with Dojo
Duration: 45 minutes
|
Overview
|
This unit describes how to make Ajax requests in Dojo.
|
Learning objectives
|
After completing this unit, you should be able to:
Describe the Web 2.0 architecture
Describe how to use Dojo events
Describe the general-purpose event handler dojo/on
Describe how to use Dojo query
Describe how to call Ajax server functions from Dojo
Describe the dojo/request feature
Describe JSON data
Describe the process for handling asynchronous requests with callbacks
|
Exercise 3. Developing a Dojo mobile page that gets server-side data with the dojo/request API
Duration: 45 minutes
|
Overview
|
In this exercise, you create a web page that retrieves information by using a dojo/request asynchronous call to a server-side web application. You write the dojo/request function that makes a Dojo Ajax call and updates the web page with the weather data returned from the call.
|
Learning objectives
|
After completing this exercise, you should be able to:
Create a Dojo mobile page for weather by city
Add views for the list of cities and the current weather response
Add the code to make an Ajax call to retrieve data
Use a callback function to return the data and format it on the page
Run the page on the WebSphere Application Server Liberty Profile server in Eclipse
|
Unit 5. Course summary
Duration: 15 minutes
|
Overview
|
This unit summarizes the course, explains the class evaluation process, and provides information for future study.
|
Learning objectives
|
After completing this unit, you should be able to:
Explain how the course met its learning objectives
Submit an evaluation of the class
Identify other WebSphere Education courses that are related to this topic
Access the WebSphere Education website
Locate appropriate resources for further study
|
Course IV – Developing Mobile Web Applications with jQuery Mobile
Duration: 5.5 hours
Course introduction
Duration: 15 minutes
|
Unit 1. jQuery Mobile overview
Duration: 1 hour
|
Overview
|
In this unit, you learn about the jQuery Mobile framework: a touch-optimized framework that is designed for mobile phones and tablets. The unit explains the structure and programming model of a jQuery Mobile web application. You learn about the user interface elements and themes from the jQuery Mobile framework, and you examine the lab environment that is used for jQuery web application development.
|
Learning objectives
|
After completing this unit, you should be able to:
Describe the features of jQuery Mobile
Identify jQuery Mobile user interface elements
Describe how to create mobile list views
Describe how to create mobile form elements
Describe how to create mobile navigation bars
Describe how to create mobile dialogs
Explain the navigation between views
Describe the data attributes that are used in mobile pages
Describe the jQuery Mobile themes
Describe the environment that is used for jQuery web development in the exercises
|
Exercise 1. Developing an HTML5 mobile web page that uses jQuery mobile form controls
Duration: 1 hour
|
Overview
|
In this exercise, you work with the Eclipse Indigo for Java Developers environment to develop a web page that uses jQuery mobile form controls.
|
Learning objectives
|
After completing this exercise, you should be able to:
Create a project and link to the jQuery Mobile libraries and CSS files
Develop a mobile web page that displays form input controls that use jQuery Mobile widgets
|
Unit 2. Getting started with jQuery scripting
Duration: 1 hour
|
Overview
|
This unit describes the JavaScript programming model in jQuery and jQuery Mobile. You learn how to manipulate the web page by using the jQuery document ready function and the mobile pageinit event. You also examine how to change Cascading Style Sheets (CSS) styles programmatically. Lastly, you examine Ajax functions and mobile events in jQuery Mobile.
|
Learning objectives
|
After completing this unit, you should be able to:
Describe what you can do with jQuery
Describe what you need to get started with jQuery scripting
Describe the jQuery global $-function
Describe how to use jQuery with DOM objects
Describe how to use jQuery and CSS to change the style elements on a page
List the jQuery selectors
List the jQuery events
List the jQuery Ajax functions
Describe jQuery Mobile events
|
Exercise 2. Creating a mobile user interface for the index page of a web application
Duration: 1 hour
|
Overview
|
In this exercise, you transform the index page of a traditional web application into a mobile web application. You apply mobile device themes, views, and widgets to change the application for display on mobile devices.
|
Learning objectives
|
After completing this exercise, you should be able to:
Develop a mobile device user interface with jQuery themes
Build views that are accessed from the index.html page
Move between mobile views
Run the page on the web preview server of Eclipse
|
Exercise 3. Developing a jQuery Mobile page that updates its information from a web service
Duration: 1 hour
|
Overview
|
In this exercise, you create a web page that uses a web service call to retrieve information. You also write a JavaScript function that makes a jQuery Ajax call and updates the web page with the data returned from the call.
|
Learning objectives
|
After completing this exercise, you should be able to:
Create a jQuery mobile page for weather by city
Add elements to the page and use jQuery to apply CSS styles to these elements
Add the code to make an Ajax call to retrieve data
Use a callback function to return the data and format it on the page
Run the page on the web preview server of Eclipse
|
Unit 3. Course summary
Duration: 15 minutes
|
Overview
|
This unit provides a summary of the course, a description of the class evaluation process, and information for future study.
|
Learning objectives
|
After completing this unit, you should be able to:
Explain how the course met its learning objectives
Submit an evaluation of the class
Identify other WebSphere Education courses that are related to this course
Access the WebSphere Education website
Locate appropriate resources for further study
|
Share with your friends: |
