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

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

Algorithms, Computer Graphics, and Mathematics for Game Developers and Computer Scientists © 2021 arche1.co.jp | jaist.ac.jp All rights reserved. WHAT THAT HAS TO DO WITH OUR CLASS FOR TODAY? NOTHING it has nothing to do with today’s class

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

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

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.

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

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] 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";

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

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

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

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

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]

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

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

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

More Related Content

What's hot

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

More from Saajid Akram

Recently uploaded

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