1. Training & Development
App functionality G9 – Unit 3
Training & Development

2. Learning outcomes After completing this unit, you will be able to:
• Describe a variable and Identify some data types.
• Decompose computing problems using functions.
• Store and retrieve data from a database and Debug computer programs.
• Design and write a program in JavaScript.
Fast walkthrough: CSS is a language that allows you to make designs that are well organized and beautiful. HTML describes the content of web pages. CSS describes how that content should look. CSS provides a way to control the layout and presentation of an app. It is used to change the elements properties, including colour, font, size and placement. You will use CSS to make your app look great!

3. Key terms
JavaScript
a programming language commonly used to make interactive web pages and apps.
variable
a reference to a location in memory for data storage
data type
classification data based on the values it can take
function
a named block of code or section of a program that carries out a specific task
database
A system for storing and taking care of data
key-value database
stores data as a collection of key-value pairs in which a key serves as a unique identifier.
HTML events
occur when the user or the browser manipulates a page such as a button being pressed.
Important Vocab

4. JavaScript
JavaScript is a programming language that makes web pages and apps more interactive. JavaScript can be used for dynamic changes of content and creating interactive elements that respond to events (for example, mouse clicks).
You put JavaScript code between script tags (<script></script>).
You can also point to an external JavaScript file through the src attribute. JavaScript files have the extension .js. After creating a JavaScript file, add it to the HTML file in the script tag. The src attribute is used to include JavaScript files

5. Variables
A variable is like a container for the data. You can store, read or change the data stored in variables
Variables are declared by using the var keyword followed by the variable name. The assignment operator (=) is used to assign a variable value.

6. Explaining Variables In the statements shown:
In the statements shown:
you store 34 in a variable called num2.
the total of num1 and num2 is stored in num3.
If you create a variable called num1, it is like creating an empty container for your data. You can store data in the variable as follows:
This means that you have put the number 271 in a variable called num1.

7. Data types Numbers are written without quotes.
Strings are written inside double or single quotes.
Datatypes are used to label the data used in a computer program. JavaScript variables can hold numbers like 100 and text values like "United Arab Emirates". In programming, text values are called strings. JavaScript can handle many types of data, but for now, just think of numbers and strings.
If you put a number in quotes, it will be treated as a string.

8. CCQ Activity Is the data type a string or number? Data Data type 2018
- 22
3006.0
The result of 15 x 200
The result of 17 x
"6.0"
"pi"
The result of x
100.21

9. JavaScript operators
Operators are used to process data such as adding or subtracting. In the example below, the program will add two numbers. The answer is stored in total.
The operators tell the computer what to do. The data that we are working on are known as operands. The following arithmetic are some of the operators defined in JavaScript

10. Activities
1- Write a program that adds two number and store the result in a variable. Show the result on the browser. Use the document.write() function to show the result in the browser.
For example, document.write(total);
2- Write a program that will subtract 5 from 8 and store the result in a variable.
Explain document.write() function is used to send JavaScript values to the browser.
For example,
document.write(4)
document.write(variable-name)

11. Activities
1- Write a program that adds two number and store the result in a variable.
2- Write a program that will subtract 5 from 8 and store the result in a variable.
document.write() function is used to send JavaScript values to the browser.
For example,
document.write(4)
document.write(variable-name)

12. String concatenation
You can also use the addition operator on strings, but strings will be concatenated.

13. Activities
1- Write a program that concatenates two strings. Show the result on the browser.
Explain document.write() function is used to send JavaScript values to the browser.
For example,
document.write(4)
document.write(variable-name)

14. Selecting HTML elements
Changing HTML elements
HTML elements are selected by using the document.getElementById() function. This function selects an element with the same id as the one you put in as the function’s parameter
To give an element an ID, use the id attribute ( id = “id-name” )
Once you have selected an element, you can perform tasks like changing the selected element’s content or storing the value of the selected element into a variable.
The innerHTML property is used to change the content of HTML elements. To change the content of the element, select the element using the id and add the new content using the .innerHTML. In the code below, the heading element’s content is being change from My heading to Welcome to my app.

15. You can send HTML to an element using JavaScript
You can send HTML to an element using JavaScript. In the code below, the table contents are being placed inside a table element:

16. Retrieving HTML element values
You can also use the innerHTML property to retrieve the value of an element. In the code below, the value of the element is being stored in a variable.

17. Activities
1- Write the code to reteive the contents of a HTML element. Show the contents on the browser in a paragraph element.
Answer

18. Activities
Answer

19. Activities
1- Write the code to change the text of a HTML element.

20. Functions
A function is a block of code designed to perform a specific task. Functions are helpful when you need to reuse a code block that carries out a specific task at different times
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().
The code to be executed, by the function, is placed inside curly brackets: {}

21. Calling a function
The code inside the function will not be executed until you call the function. To call a function, you use the function name with the round brackets (FunctionName()). You can call a function using a JavaScript event. The onclick event will execute instructions whenever an element is pressed.
In the following code, the ChangeText() function is added to an onclick event in a button element. The function will change the content of the paragraph element. Every time that the button is pressed, the ChangeText() function will execute.

22. Activities
1. Create a function that will change an element’s text to “Welcome to my app”
2. Use the onclick event to call the function when a button is clicked
The 2 previous slides will help with this activity

23. Retrieving HTML element values
The inner HTML property won’t get values from input elements. To get values from an input element, use the value property (document.getElementById(id).value).
Let the teachers run this code and experiment with it.
Tell them change .value to .innerHTML and see if it retrieves the value (it won’t)

24. Database
A database allows you to store data in your app, permanently. That means the data stored will be available on the next day, the next week, or the next year unless you remove it. There are many types of databases. The one that you will use in your app is a key-value database. In this type of database, each piece of data is stored in a key-value pair. The key identifies the name of the information (like Name1), and the value is the value linked to that key (like Fatima).

25. Storing data
The name of the database is localStorage. The database has functions that allow you to store, retrieve and delete data. To store data, use the setItem function. This function takes a key and a value as parameters and stores them in the database. Below, Dates is being stored as the key and 3 is being stored as the value

26. Activities
1. Store a key and a value in the Database. Both values need to be Strings.

27. Retrieving values

28. Activities
1. Retreive the value you stored in the previous activity. Show the value in the browser.

29. Activities
Example answer of the previous activity

30. How to Retrieve KEYS
To retrieve a key, use localStorage.key(index). The index of the key that you want to retrieve goes into the parameter of this function. Below, the first key in the storage will be retrieved. If you changed 0 to 1, the second key in the storage would be retrieved.

31. Activities
Retreive the key you stored in the previous activity using the index. Store the key in a variable.
Show the key on the browser (use the variable).
Use the variable to retrieve the value linked to the key
Show the value on the browser.

32. Activities

33. For loop Note – General students don’t cover for loop
You will be displaying all the items (keys) and quantities (values) in the shopping list (database) on your app. To do this, you can use a for loop.
Sometimes you will want to repeat code a certain number of times, but you want to keep track of values as you do. This is where a for loop is useful. When you use a for loop, you know right from the start what your beginning value is, what your ending value is, and how much the value changes each time through the loop.

34. For loop

35. For Loop Coding The for loop has the following syntax:
Statement 1 sets a variable before the loop starts (var index = 0).
Statement 2 defines the condition for the loop to run (index < 5). The condition will result in be either true or false. The loop statements will execute if the result of the condition is true. If the result is false, the loop will stop executing.
Statement 3 adds 1 to a variable’s value (index++) each time the code in the loop has been executed. The third statement is executed after the code block has finished executing

36. Activity
Fill in the table with the index variable value and condition result for each iteration of the following for loop.
iteration
index variable value
condition (index < 3?)
First
True
Second
Third
Fourth

37. Null values
If you try to retrieve a key at an index that doesn’t exist in the database, you will get a null value returned.

38. For Loop using . length
To make sure that your loop doesn’t try to retrieve an empty index, you need to know how many keys are stored in the database. The localStorage.length will tell you how many keys are stored in the database.
Adding this to your condition (index<localStorage.length;) will stop the loop execution once it has reached the last key in the database.

39. Retrieving all keys and values from the database
The keys are used to retrieve all the values. In the code below, each iteration is saving a key into a variable. It is then using this variable to retrieve the value linked to that key.

40. Deleting data

41. Clearing the database
To clear all the data stored in the HTML storage, use the following code:
Below the database on the left has 4 keys. When you execute the code to clear the database, all of the key-value pairs in the database are deleted and you will have an empty database like the one on the right.

42. Project Task 3 Advance
In Project Task 3, you will add the functionality to the app.
Your app will need to be able to:
- display all the items in the shopping list
- add items to the shopping list
- delete items from the shopping list
- clear the whole shopping list

43. Project Task 3
1 - When a user enters an item and quantity into the input area and presses a button to add the item and quantity to the list, the item and quantity should be added to the shopping list.

44. Project Task 3 Advance
Create a function for storing shopping list item in the app.
Create a JavaScript file. Add the function to this file. You will put all you JavaScript code that you will use in your app in this file.
Write the first line of the function. Give the function a suitable name.
In your function statements, create a variable. Store the item input element value in the variable (use a placeholder element id for now).
Create another variable. Store the quantity input element value in the variable (use a placeholder element id for now).
Store the item and quantity in the database, using the variables.

45. Project Task 3 Advance 1 2 3 4

46. Project Task 3 Advance
2 - The shopping list should be displayed on the app at all times. When items are added or deleted, the shopping list should display the updated list.

47. Project Task 3 Advance
Create a function for displaying shopping list item in the app.
Write the first line of the function. Give the function a suitable name.
Create a variable to that will store the HTML that will contain the shopping list. Use a table to store the shopping list. You don’t need the <table></table> tags. You will add them in the HTML file later. The table should have two columns, one for items and one for quantities. Put a row with the table headings in the variable.
Create a variable to store keys and another to store values
Use a for loop to get each key and value from the database.
In each iteration of the loop, the key and value should be stored in a new row in the table.
After the loop has finished, add the table containing the shopping list to an element on your app (use list as the ID).

48. Project Task 3 Advance 1 2 3 4 5 6

49. Project Task 3 Advance
After you have added items, you need to display updated shopping list on the app.
To do this, execute the function for displaying items at the end of the function for storing items in the shopping list

50. Project Task 3
3- user should be able delete an item from the shopping list by putting the item name in the item input box and clicking a button that will delete the item.

51. Project Task 3 Advance
Create a function for deleting an item from the list.
Write the first line of the function. Give the function a suitable name.
Create a variable that will store the delete item input element value in the variable
Use the variable to delete the item from the shopping list.
Add the function for displaying the shopping list to the end of this function.
Why do you need step 4?
You need step 4 because after you delete an item you need to execute the diplaylist function again to display the updated list on the app.

52. Project Task 3 Advance 1 2 3 4

53. Project Task 3
4- Whenever the button for clearing the shopping list is clicked, all the items in the shopping list will be deleted

54. Project Task 3 Advance Create a function for clearing the list.
Write the first line of the function. Give the function a suitable name.
Put the code for clearing the database in your function statements.
Add the function for displaying the shopping list to the end of this function.

55. Project Task 3 Advance 1 2 3

56. Project Task 3 Advance
Now that you have the functions complete, implement the functions in the HTML document.
First, link the JavaScript file to the HTML file.
Execute the function for displaying items once the app loads (onload = DisplayItems()). Put this in the body element.
Add an id to the item input element. Id should be “item”.
Add an id to the quantity input element. Id should be “quantity”.
The function for storing an item in the app should execute when the Save button is pressed. Used the onclick event.
The function for deleting an item in the app should execute when the Delete button is pressed. Used the onclick event.
Add a table element below the horizontal line. Give the element an id. The id should be “list”. This is where the shopping list will be displayed.
The function for clearing the list should execute when the Clear button is pressed. Used the onclick event.

57. 1 2 3 4 5 6 7 8

58. Project Task 3 General
The app, for general students, will need to be able to:
- display the notes
- add notes
- delete notes

59. Project Task 3 General
1. The notes should be displayed on the app at all times. When notes are added or deleted, the app should display the updated notes.

60. Project Task 3 General
Create a function to store the notes on the app.
Write the first line of the function. Give the function a suitable name.
Get the notes from the database. Use “notes” as the key. Store the value in a variable.
Target an element in your app where you will display the notes. The ID should be “display”.
Set the element’s content to the value that you stored in the variable.

61. Project Task 3 General 1 2 4 3

62. Project Task 3 General
2. When a user enters a note and presses a button to add the note to the app, the note should be added to the notes.

63. Project Task 3 General
Create a function to display the notes on the app.
Write the first line of the function. Give the function a suitable name.
Get the notes that are stored in the database. The key for the notes stored in the database is “notes”. Store the value in a variable.
Get the new note from the note input element in the app. Use the ID “note-input”.
Concatenate the new note to the note you got from the database.
Put a line break between each note. To do this, concatenate a line break tag to the end of the new note.
Store the note in the database using the key “notes”.
Call the function for displaying notes at the end of this function to ensure that the updates notes are displayed.

64. Project Task 3 General 1 2 3 4 5 6 7

65. Project Task 3 General
2. Whenever the button for clearing the notes is pressed, all the notes in the app should
be deleted.

66. Project Task 3 General
Create a function to delete the notes on the app.
Write the first line of the function. Give the function a suitable name.
Put the code for clearing the database in your function statements.
Add the function for displaying the notes to the end of this function.

67. Project Task 3 General 1 2 3

68. Project Task 3 General
Now that you have the functions complete, implement the functions in the HTML document.
First, link the JavaScript file to the HTML file.
Execute the function for displaying items once the app loads (onload = DisplayNotes()). Put this in the body element.
Add an id to the note input element. Id should be “note-input”.
The function for storing anote in the app should execute when the Save button is pressed. Used the onclick event.
Add a paragradh element with an “display” as the id. The notes will be added to this element.
The function for clearing the notes should execute when the Clear button is pressed. Used the onclick event.

69. 1 2 3 4 5 6

70. Project Task 4 Project task 4 requires Apache Cordova to be setup.
There is a folder in SharePoint containing the resourse required to setup Apache Cordova.
There is a guide included. Following the the guide to setup Apace Cordova.
The setup only needs to be done on one computer. Deploying an app using Apache Cordova takes a short time. The students can take turns using that computer.
There is no need to setup Apache Cordova on multiple computers.

71. Project Task 4
Open the command prompt program.

75. Copy the app-debug. apk file to a mobile device
Copy the app-debug.apk file to a mobile device. Find the file on your device and execute it. This will install the app onto the device.

76. Thank You