07/07/2021 1 EECS1012 SU 2021 July 7, 2021 Lecture 8. Net-Centric Introduction to Computing EECE1012 Net-Centric Introduction toComputing JavaScript Review and more variable, type operators Strings Arrays Boolean expression, and Control Functions Object math,date, object Global variables 1 2 07/07/2021 2 Variables variables are declared with the var keyword (case sensitive) types are not specified, but JS does have types (“loosely typed”) Primitive: Number, Boolean, String, Composite: Array, Object, Function, Special: Null, Undefined can find out a variable’s type by calling typeof 3 var name = expression; JS var clientName = “Connie Client”; var age = 32; var weight = 127.4; JS JS variables 2 variables are used to store and retrieved data. variables are defined by the keywords var (and let) variables are categorized into different data types first character must be a letter or an underscore (_) cannot be a number the rest of the variable name can be any letter, number, or underscore variable names are case sensitive age,Age, AGE would all be different variable names you cannot use JSreserved words for variable names 3 4 07/07/2021 3 variable name examples valid names: _myVar thissisalongvariablename num _var eecs1012 myString name1 test_1 X invalid names: /* starts with a number */ /* there is a space in the name */ 1test test 1 t$est var /* non alphanumeric character */ /* reserved word */ 3EECS 1012 – York University JSdata types 4 TYPE Explanation Example number Integers and numbers with decimal places. 99,2.8,5, -10 string A variable that can hold a collection of characters.Sometimes we call this a string literal. “Hello”,”EECS1012″ boolean A variable that holds only two possible values – true or false. true or false undefined When a variable does not have a value var x; Objects Objects are special data types that have functions and data associated with them. These are more common in JS than PHP and we will need to use them often. document.getElementById(); (example of an object) function A user defined function that can be called by a user event (e.g.mouse click, etc) function name () { statements; … } var x= 5; … x=”Hi“; Dynamic type 5 6 07/07/2021 4 Relation to computational thinking w = prompt(); h = prompt(); s = w + h; alert(“sum”, s) number type variables var enrollment = -99; var medianGrade = 70.8; var credits = 5 + 4 + (2 * 3); number types are integers (whole numbers) and numbers with decimal places numbers with decimal places are often called “floating point” numbers, e.g.: 2.99993 3000.9999 -40.00 we call them floating point because the decimal point appears to float around. Sometimes these are just called floats to distinguish them from integers. 8EECS 1012 – York University Use var as much as possible, making it local to the function Math.sqrt(2)*Math.sqrt(2); 7 8 07/07/2021 5 expressions and statements var num2 = num1 + 10; /* num1 + 10 is the expression, /* this computes 5 + 10 */ num2 = num2 + 1; /* this uses num2 and assigns the result back to num2 */ var str1 = “hello”; var str2 = “world”; num1 = ((3.14) * 10.0) / 180.0; /* value is “hello” */ /* value is “world” */ /* multiple operators */ an expression is the combination of one or more variables, values, operators, or functions that computes a result. var num1 = 5; /* value 5 is the expression */ 9EECS 1012 – York University Syntax breakdown of a
statement 9 10 07/07/2021 6 Relation to computational thinking basic arithmetic operators a + b Addition Sum of a and b. a – b Subtraction Difference of a and b. a * b Multiplication Product of a and b. a / b Division Quotient of a and b. a % b Modulo Remainder of a divided by b. here, a and b could be variables, but we could also replace them with numbers, expressions. 10 + 20, 3.14 / 2.0, 10 + (5*6+7) etc.. . 12EECS 1012 – York University 11 12 07/07/2021 7 “short hand” assignment operators assignment same as meaning a += b; a = a + b; Addition a -= b; a = a – b; Subtraction a *= b; a = a * b; Multiplication a /= b; a = a / b; Division a %= b; a = a % b; Modulus a++; a = a + 1; Self Addition a–; a = a – 1; Self Subtraction 13EECS 1012 – York University a -= 1 for(var i = 0; i < 100; i++) …… Don’t use in flow charts “short hand” assignment operators assignment same as meaning a += b; a = a + b; Addition a -= b; a = a - b; Subtraction a *= b; a = a * b; Multiplication a /= b; a = a / b; Division a %= b; a = a % b; Modulus a++; a = a + 1; Self Addition a--; a = a - 1; Self Subtraction 14EECS 1012 – York University a -= 1 for(var i = 0; i < 100; i++) …… Don’t use in flow charts 13 14 07/07/2021 8 js math operator precedence var num1 = 5 * 5 + 4 + 1 / 2; var num2 = 5 * (5 + 4) + 1 / 2; console.log(num1 + "and" + num2); // What is the answer // What is the answer JS Operator Precedence: ( ) * / % + - Highest Lowest 29.5 and 45.5 output * this operator precedence is the same for most programming languages. 15EECS 1012 – York University Example from previous slide 15 16 07/07/2021 9 string type variables strings are treated like a series of characters var favoriteFood = "falafel"; var stringNumber = "234"; Here,variable stringNumber is not the value two hundred and thirty four,but instead the characters 2,3,4. var len = stringNumber.length; // len is assigned the number 3 string variables have a special property called "length" that returns the number of characters in the string. keep in mind that spaces are also characters. var stringNumber = "2 34"; 19EECS 1012 – York University favoriteFood.length stringNumber.length 17 19 07/07/2021 10 string as an object var s1 = "Connie Client"; var len = s1.length; variable s1 is of type String, however, this can also be thought of as a "String object". we can access various properties of the object using a "." operator and object's the property's name. you will see this type of property access often in JS (and other "Object Oriented" languages) 20EECS 1012 – York University more on strings you need to put quotes around a string to let JS know it is a string. You can also use single quotes. var s = "EECS1012"; // CORRECT! var s = 'EECS1012'; // CORRECT! var s = EECS1012; // INCORRECT! In this example, JS will interpret EECS1012 as a variable, not a string! 21EECS 1012 – York University var s = "EECS1012'; // INCORRECT! 20 21 07/07/2021 11 special characters what if you want a quote character " to be part of the string var s = "use " for quote."; //INCORRECT! this statement will cause problems for JS, because when it sees the second double quote it will assume this is the end of the string. 22EECS 1012 – York University escape characters escape characters are used inside strings to tell JS how to interpret certain characters var s = "Use " for quote.""; //CORRECT this string will be interpreted in JavaScript as: Use "" for quote. here