# Need to know

To do the exercises you need sufficient knowledge of HTML5, CSS3 and JavaScript.
For cordova, it doesn't matter which CSS or JavaScript framework you use. In this course we have chosen for:

# CSS: materializecss

Because we only develop for Android, we will also try to emulate the look-and-feel of a native Android app.
Materializecss is a modern responsive front-end framework based on Google's Material Design principle.

Go to http://materializecss.com/.
Examine the different components and example codes.

# Icons: Google Material Icons

Materializecss uses the standard Material Icons from Google.

How to use icons in materializecss:
http://materializecss.com/icons.html
An overview of all Google icons:
https://material.io/icons/

# JavaScript: jQuery

JQuery is a popular JavaScript framework for dynamic and interactive websites, including for editing the DOM, CSS and interacting with the web server (also known as AJAX).

# HTML5: data-attributes

# JavaScript: revealing module pattern

You can program your JavaScript code in separate, independent functions if you want. This has the disadvantage that after a while the code becomes confusing and difficult to maintain. Therefore, there are various design patterns available with which you can structure your code nicely. In this course, the revealing module pattern is often used.

In the revealing module pattern we are going to put all our variables (properties) and functions (methods) in one module.
Methods and properties can be either private or public.
By default, all methods and properties are private until they are explicitly exposed or make public.
You can find a nice introduction here:

# JavaScript: template literals

Template literals (or string interpolation) are strings with embedded variables or expression and can be spread over several lines.

https://itf-web-advanced.netlify.app/ES6/string.html#template-literals

Example:

let name = 'John Doe';
let a = 5;
let b = 7;

// Old fashion
let string_a = 'My name is ' + name;
console.log('string_a:', string_a);
let sum_a1 = 'Sum a + b = ' + (a + b);
let sum_a2 = 'Sum ' + a + ' + ' + b + ' = ' + (a + b);
let compare_a = (a > b) ? 'a > b' : 'a < b';
console.log('sum_a1:', sum_a1);
console.log('sum_a2:', sum_a2);
console.log('compare_a:', compare_a);

console.log('------------------------------');

// Template literals with `back ticks`
let string_b = `My name is ${name}`;
console.log('string_b:', string_b);
let sum_b1 = `Sum a + b = ${a + b}`;
let sum_b2 = `Sum ${a} + ${b} = ${a + b}`;
console.log('sum_b1:', sum_b1);
console.log('sum_b2:', sum_b2);
console.log('compare_b:', `${(a > b) ? 'a > b' : 'a < b'}`);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# JSON

JSON (JavaScript Object Notation) is currently the most popular and widely used format for exchanging and storing data.
In this course you will encounter JSON among others in the configuration file package.json, storing local data in local storage and retrieving external data via an API.

# PhpStorm

# Set Git Bash as default terminal

Open the settings (File > Settings).
Go to Tools > Terminal.
Set bash.exe as default Shell path (select it from the dropdown list).

# Code completion in PhpStorm

As we mainly link JavaScript libraries via a CDN in the examples, PhpStorm cannot automatically help you with code completion, syntax highlighting and documentation. Therefore, it is best to add some definition files to the IDE.

Go to Languages & Frameworks > JavaScript > Libraries.
Click on Download, install jquery and then materialize-css.

TIP

You have to check both libraries again per project if you want to use code completion for jQuery and Materialize-css.
Both libraries are maintained by a community of volunteers. This means that a new version of e.g. jQuery may not be updated from day one.
The documentation, with example, appears as soon as you hover over a method.
Most jQuery events (such as click, mouseover, hover, ...), are wrongly marked as deprecated. However, this is not correct. You may certainly still use these events.