QA-QAJQUERY

Ladda ner som PDF

Leveraging the Power of JQuery

'Write less, do more!' is the moto of the jQuery JavaScript development team. The free open source development platform is an essential skill for any web site. Leveraging the power of jQuery will teach you how to integrate jQuery into existing sites, understand how it works and send you on your first steps of jQuery application development. Developed as a vendor neutral course it is suitable for existing Javascript developers or experienced web application developers.

The course focuses on understanding and building with jQuery and examining some of the most useful extensions to the core, such as jQueryUI and a variety of plugins allowing a developer to hit the ground running as soon as the course is over.

Prior knowledge

  • Delegates for this course require a good understanding of HTML, CSS the DOM and Javacript. Equivalent to the skills obtained by attending HTML for Programmers (www.qa.com/QAHTMLEV ) or Building an Effective Web Site (www.qa.com/QAEFFWEB) and Web Programming with JavaScript (www.qa.com/LGJAVSC3).

Objectives:

Course Outline:

Module 1 - Introducing jQuery

  • What is jQuery?
  • Selecting elements with jQuery
  • Manipulating properties with jQuery
  • Events with jQuery

Module 2 - JavaScript and CSS for Developers

  • The DOM
  • CSS Selectors
  • CSS Positioning
  • JavaScript types
  • JavaScript Functions
  • Creating Custom Objects
  • Javascript Object Notation (JSON)

Module 3 - Selectors and Events

Unleashing the power of selectors

  • The $() factory function
  • Basic selectors
  • Child selectors
  • Attribute selectors
  • jQuery selectors

Modifying content

  • Adding new elements
  • Removing elements
  • Modifying element values

Module 4 - Enhancing appearance

From HTML to DOM

  • Understanding the DOM
  • NodeList objects

The ready() function
Manipulating CSS

  • Reading CSS attributes
  • Adding CSS attributes
  • Removing CSS attributes

Controlling visibility

  • The show() function
  • The hide() function

Module 5 - Animation

Simple animation

  • Fading in and out
  • Toggling
  • Hide, show and toggle effects
  • Effect options

The animate function

  • CSS attribute animation
  • Animating colour
  • Easing
  • jQuery UI easing
  • The animation queue

Module 6 - Scrolling and Resizing

Scaling

  • The scroll event
  • Creating a custom scroll box

Resizing

  • Calculating position
  • Dynamic layouts
  • Resizing using jQuery UI

Module 7 - Menus and Tabs

  • Building drop down menus
  • Designing with a CSS fall back
  • jQueryUI menus
  • ... Läs mer

Objectives:

Course Outline:

Module 1 - Introducing jQuery

  • What is jQuery?
  • Selecting elements with jQuery
  • Manipulating properties with jQuery
  • Events with jQuery

Module 2 - JavaScript and CSS for Developers

  • The DOM
  • CSS Selectors
  • CSS Positioning
  • JavaScript types
  • JavaScript Functions
  • Creating Custom Objects
  • Javascript Object Notation (JSON)

Module 3 - Selectors and Events

Unleashing the power of selectors

  • The $() factory function
  • Basic selectors
  • Child selectors
  • Attribute selectors
  • jQuery selectors

Modifying content

  • Adding new elements
  • Removing elements
  • Modifying element values

Module 4 - Enhancing appearance

From HTML to DOM

  • Understanding the DOM
  • NodeList objects

The ready() function
Manipulating CSS

  • Reading CSS attributes
  • Adding CSS attributes
  • Removing CSS attributes

Controlling visibility

  • The show() function
  • The hide() function

Module 5 - Animation

Simple animation

  • Fading in and out
  • Toggling
  • Hide, show and toggle effects
  • Effect options

The animate function

  • CSS attribute animation
  • Animating colour
  • Easing
  • jQuery UI easing
  • The animation queue

Module 6 - Scrolling and Resizing

Scaling

  • The scroll event
  • Creating a custom scroll box

Resizing

  • Calculating position
  • Dynamic layouts
  • Resizing using jQuery UI

Module 7 - Menus and Tabs

  • Building drop down menus
  • Designing with a CSS fall back
  • jQueryUI menus
  • jQueryUI accordions
  • jQueryUI tabs

Module 8 - Drag, drop and sorting

  • jQueryUI draggable
  • Draggable options, events and methods
  • jQueryUI droppable
  • Droppable options, events and methods
  • Droppable tolerance
  • jQueryUI sortable
  • Sortable options, events and methods
  • Sortable portlets

Module 9 - Forms

Form selectors

  • Change, blur and focus events
  • The submit event
  • The validation plugin
  • Autocomplete functions

jQuery UI controls

  • Date pickers
  • Sliders
  • Dialog Boxes

Module 10 - AJAX

  • What is Ajax?
  • Ajax enabling technologies
  • XMLHttpRequest object
  • Remote HTML using .load()
  • Handling future elements
  • Getting JSON data
  • Global Ajax event handlers
  • The jqXHR object
  • Defers and Promises
  • Combining Promises

Module 11 - jQuery Plugins

  • Stages for creating a plugin
  • Creating the code and enabling Chaining
  • jQuery $.extend
  • Creating plugin options
  • jQuery Widget Factory

Module 12 - jQuery Mobile Overview

  • What is jQuery Mobile?
  • How jQuery Mobile Works
  • API's and Components
  • Basic Page Template
  • Links and Dialogs
  • Navigation, Tabs and Buttons
  • Forms and Listviews
  • Popups
  • Transitions and Ajax
  • Responsive design

Module 13 - jQuery Mobile Theming

Theming

  • The Default Theme
  • Applying a Theme
  • Icons
  • Styling Forms
  • Styling Selects
  • Styling ListViews

Positioning and Layout

  • Headers and Footers
  • Multi-Column Layouts
  • Collapsible Content

Utbildningen levereras i samarbete med

Kurs-ID: QA-QAJQUERY
Längd: 3 dagar
Pris exkl moms: 23 016 kr

Frågor om kursen?

Har du frågor om kursens innehåll, leveransdatum/ort eller behöver en företagsanpassad variant? Fyll i formuläret nedan!


Avtalsrabatter och kampanjer kan ej nyttjas på denna kurs.


Ort och datum

Cloud Access
i Läs mer

Delta på kursen från ditt hem, jobb eller annan plats.

14 dec-16 dec
Boka nu!
19 dec-21 dec
Boka nu!
13 feb-15 feb
Boka nu!

Tipsa