JavaScript Advanced

Algemene omschrijving

In deze tweedaagse training krijg je door middel van klassikale of virtuele uitleg en labopdrachten diepgaande kennis van JavaScript.

Doelgroep

Deze training is voornamelijk bedoeld voor beginnende en ervaren programmeurs. Enige ervaring in C++, C# of Java zou goed van pas kunnen komen.

Leerdoelen

Na afloop van deze training heb je de volgende kennis opgedaan:

• Het toevoegen van jQuery aan projecten en jQuery gebruiken om de DOM te manipuleren en Ajax-oproepen te doen.
• Begrip van Ajax en webdiensten, inclusief HTTP Verbs en asynchrone Ajax-oproepen.
• Het werken met XML- en JSON-gegevensindelingen.
• Begrip en gebruik van RESTful Web Services inclusief ODATA-query's.
• Het werken met Anonymous Functions, Self-Invoking Functions en Closures.
• Begrip van de rol van de objecten: Window en Navigator.
• Het beschrijven en begrijpen van de variabelen: "variabel hoisting" en JavaScript-objecten.

Voorkennis

Voordat je deelneemt aan deze training raden wij aan dat jij eerst de JavaScript Fundamentals-training hebt afgerond.

We gaan ervan uit dat je bekend bent met de algemene manier om op basis van code websites te maken. Je bent bekend met een code-editor als WebStorm, Visual Studio Code of vergelijkbaar. Trefwoorden in je voorkennis zijn:

• Enige voorkennis van HTML en CSS. Specifieke HTML5- of CSS3-kennis is niet noodzakelijk.
• Enige voorkennis van algemene programmeertalen, bijvoorbeeld: Java, C, C#, PHP of vergelijkbaar, strekt tot de aanbeveling, maar is niet beslist noodzakelijk.

Onderwerpen

Module 1: Introduction to jQuery

A lot of the coding work you will do with JavaScript will be to first find an HTML element, and then manipulate that element. Often, all we are doing is some searching, or querying, of the HTML and then performing a quick update. In this module we will exploring using the jQuery library to search for, and modify, elements in the DOM.

Lessons

• jQuery.
• Downloading the jQuery Library.
• jQuery Versions.
• Linking to the Library.
• Selecting Elements using jQuery.
• Working with the Data Returned by jQuery.
• Setting CSS Properties.
• Running a Function Against the jQuery Return Set.

Lab 1: jQuery

• Q&A quiz.
• Add the jQuery Library to the Project.
• Create New Elements using jQuery.

After completing this module, students will be able to:

• Describe the role of libraries like jQuery in JavaScript and web development.
• Add the jQuery library to a project.
• Find and retrieve, update and create new elements in the DOM.

Module 2: Ajax and Web Services

This module explores web services and the use of Ajax to call those services.

Lessons

• Web Services.
• HTTP Verbs.
• Data Formats – XML and JSON.
• Ajax.
• RESTful Web Services.
• OData.
• OData Queries.
• OData Updates.

Lab 1: Ajax and Web Services

• Q&A quiz
• Exploring a REST Web Service
• Load Data from a Web Service

After completing this module, students will be able to:

• Describe web services and how to interact with them from JavaScript and jQuery.
• Work with XML and JSON data.
• Create queries and update data using REST and OData.

Module 3: Diving in Deeper

In this module we will explore the topics you will need to know as you move from a “JavaScript scripter” to a “JavaScript developer”. Some of the topics include:

• More about Data Types and data conversion.
• Variables: more on Scopes, Hoisting, Creating and Deleting.
• Functions: Anonymous functions, Closures, Self-invoking functions, the “this” keyword and the Module Pattern.
• More on error handling.
• Recursion.

Lessons

• Is JavaScript Compiled?
• Data Types and Objects.
• Extending Data Types.
• Variables, Scopes and Hoisting.
• Functions.
• The “this” Keyword.
• Errors.
• Recursion.

Lab 1: Diving in Deeper

• Q&A quiz.

After completing this module, students will be able to:

• Describe how JavaScript variables are used, stored, and manipulated.
• Understand how JavaScript variables and functions are scoped, and occasionally “hoisted”.
• Create functions, anonymous functions and Closures.
• Describe and use the “this” keyword in functions.
• Create try-catch blocks and handle errors.