1. ALGORITHMS, COMPUTER GRAPHICS,
AND MATHEMATICS FOR GAME
DEVELOPERS & COMPUTER
SCIENTISTS
Class[2]: Introduction to JavaScript [Part 1]
PREPARED AND PRESENTED BY
Dr.Saajid Abuluaih, PhD
30th of May, 2021
4. 4
ANCIENT EGYPTIAN MATH RIDDLE,
RHIND MATHEMATICAL PAPYRUS
References:
Math Puzzles’ Oldest Ancestors Took Form on Egyptian Papyrus
Episode Transcript – Episode 17 - Rhind Mathematical Papyrus
Rhind papyrus
In seven houses there are seven cats. Each cat catches seven
mice. Each mouse would have eaten seven ears of corn and
each ear of corn, if sown, would have produced seven gallons
of grain. How many things are mentioned in total?
(made around 3,500 years ago)
5. 5
ANCIENT EGYPTIAN MATH RIDDLE,
RHIND MATHEMATICAL PAPYRUS
References:
Math Puzzles’ Oldest Ancestors Took Form on Egyptian Papyrus
Episode Transcript – Episode 17 - Rhind Mathematical Papyrus
Rhind papyrus
In seven houses there are seven cats. Each cat catches seven
mice. Each mouse would have eaten seven ears of corn and
each ear of corn, if sown, would have produced seven gallons
of grain. How many things are mentioned in total?
(made around 3,500 years ago)
The answer is as easy as:
7 + 72 + 73 + 74 + 75
8. Given a string, replace each its character by the next one in the English alphabet (z would be replaced by
a). Example: Example: “o`kdrshmd”, the output should be “palestine”
8
A SIMPLE ALGORITHM,
Alphabet Shifter
9. Given a string, replace each its character by the next one in the English alphabet (z would be replaced by
a). Example: “o`kdrshmd”, the output should be “palestine”
• Method [1] (Stupid):
9
A SIMPLE ALGORITHM,
Alphabet Shifter
function Alphabet_Shift(str) {
var dictionary = {
'a' : 'b', 'b' : 'c', 'c' : 'd', 'd' : 'e', 'e' : 'f', 'f' : 'g',
'g' : 'h', 'h' : 'i', 'i' : 'j', 'j' : 'k', 'k' : 'l', 'l' : 'm',
'm' : 'n', 'n' : 'o', 'o' : 'p', 'p' : 'q', 'q' : 'r', 'r' : 's',
's' : 't', 't' : 'u', 'u' : 'v', 'v' : 'w', 'w' : 'x', 'x' : 'y',
'y' : 'z', 'z' : 'a’};
var temp = str.split('');
for(var i=0; i<temp.length; i++){
temp[i] = dictionary[temp[i]]
}
return temp.join("");
}
10. Given a string, replace each its character by the next one in the English alphabet (z would be replaced by
a). Example: “o`kdrshmd”, the output should be “palestine”
• Method [2] (smarter solution):
10
A SIMPLE ALGORITHM,
Alphabet Shifter
function alphabet_char_Shift(str) {
var all_chars = str.split('');
for(var i = 0; i < all_chars.length; i++) {
var n = all_chars[i].charCodeAt() - 'a'.charCodeAt();
n = (n + 1) % 26;
all_chars[i] = String.fromCharCode(n + 'a'.charCodeAt());
}
return all_chars.join("");
}
console.log(alphabet_char_Shift("o`kdrshmd"))
References:
Look at the following solution to see how do they solve the ‘z’ letter.
12. The early to mid-1990s were a pivotal period in the history of the internet. Browser wars were raging
between major players like Netscape and Microsoft, with Netscape's Navigator and Microsoft's Internet
Explorer going head-to-head.
Due to the rapid growth of JavaScript, it became evident in 1997 that the language would need to be
properly maintained and managed. As a result, Netscape delegated the task of developing a language
definition to the European Computer Manufacturers Association (ECMA), an organization dedicated to
computer standardization.
12
INTRODUCTION,
BRIEF HISTORY
References:
The History of JavaScript: Everything You Need to Know
Netscape Navigator 2
- JavaScript was developed by NetScape to provide functionality to their internet browser in 1995
- Netscape handed the job of creating a language specification to the European Computer
Manufacturers Association (ECMA)
13. JavaScript is a scripting language designed for building interactive functionalities to websites. It is one of
the three most common languages for web development. Unlike HTML and CSS, which offer a website's
structure and appearance, JavaScript allows you to programs functionality and handle event behaviors to
webpages, allowing visitors to interact with page’s contents.
JavaScript is designed to operate on client-side. That means, the browser receives a copy of the source
code and runs it on the client machine within the browser environment. However, recently the
introduction of Node.js, JavaScript can now execute code on servers as well.
13
INTRODUCTION,
WHAT THIS COURSE IS ALL ABOUT
- HTML: is a markup language for
managing the contents
- CSS: cascading style sheet for styling
webpages contents
- JavaScript: programing language for
webpabes
- Most likely to be used as a Client-Side
Programming language
- JavaScript is an interpreter not a compiler
- JavaScript is a case-sensitive language
- JavaScript is a whitespace insensitive
- JavaScript has nothing to do with Java
15. The structure of delivering classes:
• Single line comment //
• Multi-lines comment /* */
15
JS SYNTAX,
COMMENTS
16. To store values, you can use variables. There are three primitive data types, and they are: Numbers,
Strings, and Booleans.
• Declare variables using var keyword, or the key word let (Homework: what is the differences between
them both?)
• You can use the const keyword to define variable that cannot be reassigned
var x = 5;
var y = 6;
var z = x + y;
const pi = 3.14;
let personFirstName = "Hiroyuki";
let personLastName = 'Iida’;
let personFullName = personFirstName + " " + personLastName;
var bool1 = true;
var bool2 = 11 < 10;
var arr = [true, 'true', 1];
16
JS SYNTAX,
VARIABLES DECLARATION & TYPES [1]
17. Objects is one of the most common variable types used in the language.
var car = {type:"Toyota", model:"500", color:"white"};
The Key:Value pairs in JavaScript objects are called properties
You can access object’s properties using the following two methods:
• car.type
• car["type"]
An object can have functions as well:
var car = {
type:"Toyota",
model:"500",
color:"white",
fullInfo:function() {
return this.type + " " + this.model + " " + this.color;
}
};
17
JS SYNTAX,
VARIABLES DECLARATION & TYPES [2]
18. Arithmetic operators are used to perform arithmetic on values of type numbers.
18
JS SYNTAX,
OPERATORS [PART 1]
Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement
Operator Example Same As
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
**= x **= y x = x ** y
Can you tell the difference of the following statements?
var x = 5;
x++;
var y = 6;
++y;
19. Comparison and Logical operators are used to test a statement to check whether it is true or false.
19
JS SYNTAX,
OPERATORS [PART 2]
Operator Description
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
Operator Description
&& logical and
|| logical or
! logical not
Can you tell the difference of the following statements?
var voltage = (volt == 110) ? "low voltage" : "high voltage";
21. Conditional statement is a set of rules performed if a certain
set of constraints is met (IF a set of constraints is true THEN
perform the following rules).
if (Condition) {
statements;
}
if (Condition) {
statements;
} else {
statements;
}
21
JS SYNTAX,
CONDITIONAL STATEMENT [1]
Start
Condition
Execute the
following set of rules
End
Start
Condition
Execute the
following set of rules
End
Execute another set
of rules
True
False
False
True
22. Switch statement is used to perform a set of actions based on
different sets of conditions
var day = "";
switch (dayNum) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
default:
day = " undefined";
}
22
JS SYNTAX,
CONDITIONAL STATEMENT [2]
Start
Condition
Execute the
following set of rules
End
False
True
Condition
Execute the
following set of rules
False
True
Condition
Execute the
following set of rules
False
True
Execute the default
set of rules
24. Loops used to repeat a specific block of code until some condition
is met.
for (i = 0; i < length; i++) {
statements;
}
You can move more than one step at a time.
There are the following loops that works with arrays and objects:
var obj = {prop1:"Hiroyuki", prop2:"Iida"};
var fullName = ""; var x;
for (x in obj) { fullName += obj[x] + " "; }
let arr = ["elm1", "elm2", "elm3"];
let text = "";
for (let x of cars) { text += x + " ";}
24
JS SYNTAX,
LOOPS STATEMENT [1]
Start
Condition
Execute the
following set of rules
End
True
False
25. Loops used to repeat a specific block of code until some
condition is met.
while (i < 10) {
text += "i = " + i;
i++;
}
do {
text += "The number is " + i;
i++;
}
while (i < 10);
25
JS SYNTAX,
LOOPS STATEMENT [2]
Start
Condition
Execute the
following set of rules
End
True
False
Start
Condition
Execute the
following set of rules
End
True
False
26. Break and Continue are used to skip or break the loop if upon request
for (i = 0; i < 10; i++) {
if (i === 5)
break;
text += "i = " + i;
}
for (i = 0; i < 10; i++) {
if (i === 5)
continue;
text += "i = " + i;
}
26
JS SYNTAX,
LOOPS STATEMENT [3]
28. A JavaScript function is a block of code designed to perform a particular task.
function printMessage() {
console.log("JS is a great language");
}
printMessage();
function times(num1, num2) {
console.log("The first number time the second number = " + num1 * num2);
}
time(5, 4);
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
var Cel = toCelsius(95);
28
JS SYNTAX,
FUNCTIONS