module 1: basic digital skills unit 3: · pdf filelogical schemes are graphical notations made...

This project has been funded with support from the European Commission. This publication reflects the

views only of the author, and the Commission cannot be held responsible for any use which may be made of

the information contained therein.

PROJECT TITLE

PROJECT ACRONYM

DATE OF DELIVERY

AUTHORS ALEXANDRU STRUNGĂ

EDITORS

INTELECTUAL OUTPUT

AVAILABILITY OF DELIVERABLE

MODULE 1: BASIC DIGITAL

SKILLS

UNIT 3: ALGORITHMS, LOGICAL

BLOCK SCHEMAS, CONTROL

STRUCTURES

Module/Unit: 1.3

https://www.silvercodeproject.eu/

Table of Contents

Entrance 2

Keywords 2

I. Module/unit overview 2

II. Learning content 2

Introduction (short description) 2

Learning Objective 3

1. Introduction to basic programming concepts 3

Variables 3

Constants 4

Keywords 4

Data Types 4

Operators 5

2. Introduction to algorithms 8

3. Logical block schemas 9

4. Testing a very simple algorithm in JavaScript 10

5. Control structures 11

Summary of Key Points (what did the participant learn) 17

III Conclusion 17

IV Further resources / Additional reading 17

Further resources 17

Additional reading 17

V Self-test questions 17

VI Glossary 18

VII References 19


Module/Unit: 1.3


Module/unit 1.3: ALGORITHMS, LOGICAL BLOCK SCHEMAS, CONTROL STRUCTURES _____________________________________________________________________

Entrance Keywords

Variables, constants, keywords, operators, algorithm, logical block schema, control

structures, sequence, selection, looping

I. Module/unit overview

Learning outcomes1 As a result of engaging with the materials in this module, learners are intended to

achieve the following learning outcomes:

Competences:

Defining basic programming concepts (variables, constants, keywords,

operators)

Defining the main notions presented in the unit (algorithms, logical block schema,

control structures)

Reading a logical block schema

Appreciating the importance of algorithms and control structures in coding

Using algorithms, logical block schemas and control structures in approaching a

coding problem

Time schedule

Structure

II. Learning content

Introduction (short description) The proper understanding of algorithms, logical block schemas and control structures

is critical in coding. Every application has a logical framework that can be expressed in very simple and finite steps and basic operations.

1 https://europass.cedefop.europa.eu/education-and-training-glossary/l


https://europass.cedefop.europa.eu/education-and-training-glossary/l

Module/Unit: 1.3


Learning Objective: What you will learn in this module/unit? - To define variables, constants, keywords, operators; - To define an algorithm; - To give real-life examples of algorithms; - To understand what is a logical block schema; - To use a logical block schema with a mathematical expression; - To construct a logical block schema for a simple application; - To appreciate the importance of algorithms and control structures in coding.

1. Introduction to basic programming concepts

Variables Like many other programming languages, JavaScript has variables. Variables can be

thought of as named container or storage for data. We can put data into these containers and then refer to the data simply by naming the container. The name of a variable, that will always start with a letter, can contain: upper-case letters, lower case letters, numbers and “..” character (underscore).

The statement below creates (in other words: declares or defines) a variable with the name “message”:

var message;

The semicolon “;” is used in JavaScript and other programming languages for a statement or a command given to computer. The comma operator “,” evaluates each of its operands (from left to right) and returns the value of the last operand.

Now we can put some data into it by using the assignment operator =, which we will

discuss in more detail further in the unit:

var message;

message = 'Hello'; // stores the string

The string is now saved into the memory area associated with the variable. We can access it using the variable name:

var message;

message = 'Hello!';

alert(message); // shows the variable content

To be concise we can merge the variable declaration and assignment into a single line:

var message = 'Hello!'; // define the variable and assign the

value

alert(message); // Hello!

Now, let’s try to create a HTML document and check if the code is executed properly.

First, we need to write the following code in Notepad++. We will save this as an HTML file

and proceed to run it in Chrome.

<script>

var message = 'Hello!'; // define the variable and assign the

value


Module/Unit: 1.3


alert(message); // Hello!

</script>

Constants

A constant is another important concept. It holds a value that is assigned when the

program is compiled, and never changes after that. Explicit constants are zones in memory

with fixed values, but without name. In the following code, 1 is an explicit constant:

var message = 1;

Symbolic constants are zones in memory with fixed values and without name, as it is

the case of PI in the following code:

var PI = 3.14;

var message = PI/2;

Keywords

By rule, keywords are reserved and cannot be used as variable or function names.

Here is the complete list of JavaScript keywords: break, case, catch, continue, default, delete,

do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof,

var, void, while, with.

If you use a keyword as a variable or function name, we will meet an error message

like this: “Identifier expected.” The same is true for reserved words, which, broadly speaking,

words that are reserved for future use as keywords. The complete list of reserved words is as

follows: abstract, Boolean, byte, char, class, const, debugger, double, enum, export, extends,

final, float, goto, int, interface, implements, import, long, native, package, private, protected,

public, short, static, super, synchronized, throws, transient, volatile. It is recommendable to

avoid the use of reserved words in coding.

Data Types

A variable can contain any data. However, we can use 7 basic data types in

JavaScript. The first category are primitive data types (numbers, string, Booleans, null and

undefined. The second category are objects and symbols.

number for numbers of any kind: integer or floating-point;

string for strings. A string may have one or more characters, there’s no separate single-character type;

boolean for true/false;


Module/Unit: 1.3


null for unknown values – a standalone type that has a single value null;

undefined for unassigned values – a standalone type that has a single value undefined;

object for more complex data structures;

symbol for unique identifiers.

Let’s try to test in JavaScript these data types using the information we learned about

variables and constants. Create a HTML document using the following code, in Notepad++

and save it in a HTML file. Next, proceed to run it in Chrome.

<script>

var message1 = 1; // define the variable to a number data type

var message2 = 'Hello!'; // define the variable to a string data

type

var message3 = true; // define the variable to a boolean data

type

var message4 = null; // define the variable as null data type

var message5 = []; // define the variable to an object data type

(array)

var showme = typeof message1; // we declare a variable and

assign it to the result of typeof operator for message1

console.log(showme); // we ask the console to show the result

</script>

What is the result? In the end of the code section we added a typeof operator that

can return information about the data type, which in our case is number. We can try using

the same code for the rest of variables (message 2 to 5).

Operators

JavaScript operators are used to assign values, compare values, perform arithmetic

operations, and much more.

Let’s take a simple expression 8 + 2 is equal to 10. Here 4 and 5 are named

operands and ‘+’ is called the operator.

JavaScript supports the following main types of operators:

Arithmetic Operators

Comparison Operators

Logical (or Relational) Operators

Assignment Operators

Conditional (or ternary) Operators


Module/Unit: 1.3


In this unit we will approach

only several type of operators: arithmetic, comparison, logical and assignment. More

details about using operators will be provided in the following modules.

a) Arithmetic operators (given that y = 5):

Operator

Description Example Result in y Result in x

+ Addition x = y + 2 y = 5 x = 7

- Subtraction x = y - 2 y = 5 x = 3

* Multiplication x = y * 2 y = 5 x = 10

/ Division x = y / 2 y = 5 x = 2.5

% Modulus x = y % 2 y = 5 x = 1

++ Increment x = ++y y = 6 x = 6

x = y++ y = 6 x = 5

-- Decrement x = --y y = 4 x = 4

x = y-- y = 4 x = 5

Let’s try to use these operators with the variables we’ve learned earlier:

<script>

var message = 2; // define the variable and assign the value

var myoperator = message + 2; // adding 2 to var message

console.log(myoperator)// 4

</script>


Module/Unit: 1.3


a) Comparison operators (given that x = 5):

Operator Description Comparing Returns

== equal to x == 8 false

x == 5 true

=== equal value and equal type x === "5" false

x === 5 true

!= not equal x != 8 true

!== not equal value or not equal type x !== "5" true

x !== 5 false

> greater than x > 8 false

< less than x < 8 true

>= greater than or equal to x >= 8 false

<= less than or equal to x <= 8 true

b) Assignment operators (given that x = 10 and y = 5):

Operator Example Same As Result in x

= x = y x = y x = 5

+= x += y x = x + y x = 15

-= x -= y x = x - y x = 5

*= x *= y x = x * y x = 50

/= x /= y x = x / y x = 2

%= x %= y x = x % y x = 0


Module/Unit: 1.3


c) Logical operators (given that x = 6 and y = 3)

Operator Description Example

&& and (x < 10 && y > 1) is true

|| or (x === 5 || y === 5) is false

! not !(x === y) is true

2. Introduction to algorithms

The notion of algorithm originates from the name of Arab mathematician and astrologist Al-Khwarizmi who lived in the 9th century A.D.

There are several modalities of understanding the notion of algorithm: (1) A thinking pattern used for resolving a problem in a finite number of steps; (2) A way of thinking – algorithmic thinking;

We can think of several ways of expressing algorithms: (a) Natural language

The algorithms for how to calculate arithmetic mean of two numbers is: 1) Start; 2) Read the first number; 3) Read the second number; 4) Calculate their sum; 5) Divide the result to 2; 6) Display the calculated result; 7) Stop.

(b) Pseudocode

Pseudocode is an informal high-level description of the operating principle of a computer program. The algorithm for how to calculate the largest number in a list of numbers of random order is:

read i=0 for i<n read a[i] i=i+1 end for

(c) Logical block schemas – block diagrams


Module/Unit: 1.3


Logical schemes are graphical notations made up of blocks linked to each other by arrows.

A fragment of the logical block schema for the module function is the following figure:

3. Logical block schemas A logical block schema graphically describes the steps of an algorithm and processing

executed on the data. There are several categories of data included in the logical block schemas:

(1) variables: memory zones that are changing values and are characterized by a name; The name can be a combination of lower case letters, upper case letters, numbers and “_” sign (underscore). Examples: aria, Aria, perimeter, volume, length etc.

(2) constants: memory zones with fixed value, without name (explicit constants) or memory zones with fixed value and name (symbolic constants). Examples: π (PI)

The basic operations of logical block schemas are the following:

start block

stop block

reading block

writing block

attribution block

decision block


Module/Unit: 1.3


In logical block schemas, we will meet many of the elements described above.

Flowcharting (or elaborating logical block schemas) has many advantages: (a) communication: flowcharts are better way of communicating the logic of a system to all concerned; (b) effective analysis: with the help of flowchart, problem can be analyzed in more effective way; (c) proper documentation: program flowcharts serve as a good program documentation, which is needed for various purposes; (d) efficient coding: the flowcharts act as a guide or blueprint during the systems analysis and program development phase; (e) proper debugging: the flowchart helps in debugging process; (f) efficient program maintenance: the maintenance of operating program becomes easy with the help of flowchart; it helps the programmer to put efforts more efficiently on that part.

4. Testing a very simple algorithm in JavaScript

An example of using a very simple algorithm (using logical block schema, pseudocode and JavaScript code), is to find out the sum of two numbers.


Module/Unit: 1.3


Here are the lines of code that we can test ourselves by running Chrome: <script>

var n1 = Number(prompt("Enter first number"));

var n2 = Number(prompt("Enter second number"));

var sum = n1+n2;

console.log(sum);

</script>

Let’s try to explain what’s happening step-by-step: 1. we declared two variables (n1 and n2) and we asked the user for a value for each one

of them; 2. we declared that the variable sum is the sum of n1 and n2; 3. the output is displayed (the sum of n1 and n2).

5. Control structures A control structure is a block of programming that analyzes variables and chooses a

direction in which to go based on given parameters. The term flow control details the direction the program takes (which way program control "flows"). Hence it is the basic decision-making process in computing; flow control determines how a computer will respond when given certain conditions and parameters.

Pseudocode read a and b sum=a+b write sum


Module/Unit: 1.3


The flow of control through any given function is implemented with three basic types of control structures:

1. Sequence: sequential execution of code statements (one line after another) -- like following a recipe

2. Selection: used for decisions, branching -- choosing between 2 or more alternative paths. In Javascript, for exemple, we can use different types of selection statements:

if else if switch

3. Looping (or repetition): used for looping, i.e. repeating a piece of code multiple times in a row. In Javascript, we can use loop statements such as:

while do/while for

The sequence is the simplest control structure, an abstract notation used to define other control structures (represented in the above figure). While not directly used in logical schemas, it usually include basic operations such as: one reading, two attributions, one decision.

Here is an example of JavaScript sequence! In first line of code we declare a new variable (averageGrade) that the user must input its value in the JavaScript prompt; in the third line of code, we add 1 to the value of averageGrade so the current value is 2; in the fourth line of

code we display the value of the variable. <script>

var averageGrade = Number(prompt("Guess the number from

1 to 10! You can only try once!"))

var averageGrade = averageGrade + 1;

console.log(averageGrade);


Module/Unit: 1.3


</script>

The selection is a control structure that has the role of selecting a sequence of two for

execution depending on the condition value. It is represented by the graphical elements of the appropriate decision block.

<script>

var averageGrade = Number(prompt("Guess the number from

1 to 10! You can only try once!"));

if (averageGrade == 8) {

console.log ("You won!");

}

else {

console.log ("You lost!");

}

</script>

Pseudocode read a a=1+1 write a


Module/Unit: 1.3


Here is a JavaScript example for selection! In first line of code, we declare a new variable

(averageGrade) that the user must input in the JavaScript prompt; in the next lines of code we have two possible situations: if the averageGrade is equal to 8, the message “You won!” will

Pseudocode read a if a==8 write “You won!” end if else write “You lost!” end else


Module/Unit: 1.3


be displayed; (2) if the averageGrade is less or more than 8, the message “You lost” will be displayed.

A loop in coding is an instruction that repeats until a specified condition is reached. In a loop control structure, the loop asks a question. If the answer requires an action, it is executed. The same question is asked again and again until no further action is required. Each time the question is asked is called an iteration. According to the position of the sequence included in the loop, we can identify: (a) loops with initial test and (b) loops with final test. A third type of loop is the loop with counter. It has a more complex structure, and it is based on a counter that (1) has an initial value; (2) go through all the values of a continuous range (3) until a final value is reached and (4) every step is executed in the same sequence.

<script>

var averageGrade = 8;

for(var i=0; i<averageGrade; i++)

{

console.log(i);

}

</script>

Here is a JavaScript example for a loop or repetition! In first line of code, we declare a

new variable (averageGrade) that is equal to 8; in the next lines of code we have a loop that repeats if the condition are satisfied. The condition is that i must be less than the value of averageGrade which is 8. If so, the number will be displayed on the screen. In the end, 8 numbers will be displayed (0,1,2,3,4,5,6,7), after each loop.


Module/Unit: 1.3


Pseudocode read and b sum=a+b write sum


Module/Unit: 1.3


Summary of Key Points (what did the participant learn)

The participant learned the definitions of basic programming concepts, algorithms, logical block schemas and control structures and how can be used in coding. The participant has also started to use logical block schemas in describing simple real-life tasks or basic applications.

III Conclusion

Defining, understanding and using algorithms is a key basic digital skill in coding. Only if the control structures are clearly defined and coherently expressed, a coding activity can be carried out successfully.

IV Further resources / Additional reading

Further resources To directly try the applications from chapter 3 we can test the code in a virtual

JavaScript compiler, which is available online here. What result do you get when

inserting the code individually, for each algorithm?

Additional reading

McPeak, J. & Wilton, P. (2015). Beginning Javascript. Indianapolis: John Wiley &

Sons.

Groner, L. (2016). Learning JavaScript Data Structures and Algorithms. Birmingham:

Packt Publishing Ltd.

Larsen, J.R. (2016). Get Programming with JavaScript. Shelter Island: Manning

https://en.wikiversity.org/wiki/Category:Introduction_to_Computer_Science

V Self-test questions 1. The “>” operator is a:

a. logical operator

b. comparison operator

c. arithmetical operator

d. assignment operator

2. An algorithm is a:

a. piece of code with infinite number of steps;

b. a thinking pattern used for resolving a problem in a finite number of

steps;

c. a mathematical theory.


https://repl.it/languages/javascript


Module/Unit: 1.3


3. A logical block schema includes:

a. start block;

b. stop block;

c. reading block;

d. writing block;

e. attribution block;

f. decision block;

g. all the above;

h. neither option is correct.

3. Which one of the above is a control structure?

a. Sentence;

b. Selection;

c. Concatenation.

4. What is the number of iteration for the following pseudocode:

X is 0

WHILE X is less than 10

add 1 to X

a. 1

b. 5

c. 8

d. 9

e. 10

5. Give an example from day by day life which can be explained as an algorithm.

VI Glossary Variable*

Constant*

Operator*

Keyword*

Algorithm*

logical block schema*

start block*

stop block*

reading block*

writing block*

attribution block*

decision block*

control structure*

sequence*

selection*

loop*


Module/Unit: 1.3


VII References McPeak, J. & Wilton, P. (2015). Beginning Javascript. Indianapolis: John Wiley &

Sons.

Groner, L. (2016). Learning JavaScript Data Structures and Algorithms. Birmingham:

Packt Publishing Ltd.

Larsen, J.R. (2016). Get Programming with JavaScript. Shelter Island: Manning


http://users.evtek.fi/~jaanah/IntroC/DBeech/3gl_flow.htm

https://www.w3schools.com/js/js_if_else.asp

https://www.edx.org/course/introduction-computer-science-harvardx-cs50x

http://www.cs.unm.edu/~joel/cs105/cs105.html

https://javascript.info/operators

http://speakingjs.com/es5/ch01.html#_variables_and_assignment

Learning Objective (at the beginning: What you will learn in this module/unit?)

Summary of key points (at the end: What did you learn?)

Important

Problem/Question (for discussion/reflection)

Background Information

to keep in mind

Advise/Hint/Tip

Definition

Task/To-do

Download


http://www.cs.unm.edu/~joel/cs105/cs105.html

https://javascript.info/operators

Module/Unit: 1.3



module 1: basic digital skills unit 3: · pdf filelogical schemes are graphical notations made...

Documents