Class[2][29th may] [javascript]

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

Algorithms, Computer Graphics, and Mathematics
for Game Developers and Computer Scientists
© 2021 arche1.co.jp | jaist.ac.jp
All rights reserved.
2
Agenda
One-Bite Wisdom
JS Syntax: Variables & Operators
JS Syntax: Conditional Statements
𝑖
JS Syntax: Loops
Introduction to JS: Brief
JS Syntax: Functions
Today’s Algorithm
𝑔
𝑛
“The future is not just unwritten - it is unsearched”
-Bruce Sterling

P A G E 3
One-Bite Wisdom
RHIND PAPYRUS

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
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

WHAT THAT HAS TO DO WITH
OUR CLASS FOR TODAY?
NOTHING
it has nothing to do with today’s class

P A G E 7
Simple Algorithms
Let’s Brush our Coding Skills

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

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("");
}

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.

P A G E 11
Introduction
What is JavaScript anyway?

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)

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

P A G E 14
JavaScript
Language Syntax: Variables & Operators

The structure of delivering classes:
• Single line comment //
• Multi-lines comment /* */
15
JS SYNTAX,
COMMENTS

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]

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]

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;

Comparison and Logical operators are used to test a statement to check whether it is true or false.
19
JS SYNTAX,
OPERATORS [PART 2]
== 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
&& logical and
|| logical or
! logical not
Can you tell the difference of the following statements?
var voltage = (volt == 110) ? "low voltage" : "high voltage";

P A G E 20
JavaScript
Language Syntax: Conditional Statement

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
End
Execute another set
of rules
True
False
False
True

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
End
False
True
Condition
Execute the
False
True
Condition
Execute the
False
True
Execute the default
set of rules

P A G E 23
JavaScript
Language Syntax: Loop Statement

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
End
True
False

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
End
True
False
Start
Condition
Execute the
End
True
False

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]

P A G E 27
JavaScript
Language Syntax: Functions

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

P A G E 29
HOMEWORK
Let's Exercise What We've Learned

Write a JS code for solving a problem of your choice that contains all the statements you’ve learned today
30
DEADLINE 6/6,
HOMEWORK

THANKS FOR YOUR
ATTENTION

Class[2][29th may] [javascript]

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Class[2][29th may] [javascript]

Similar to Class[2][29th may] [javascript] (20)

More from Saajid Akram

More from Saajid Akram (7)

Recently uploaded

Recently uploaded (20)

Class[2][29th may] [javascript]