Basic Concepts of Programming

1. Basic Concepts of Programming CMPCD1003 - Lecture 2 The JavaScript Language

2. Contents • Introduction to JavaScript. • Programming Statements. • Variables and Declarations. • Strings and Expressions. • Comparison Operators. • Logical Operators. • Using Functions. • String Conversion. • Debugging

3. Introduction • What is Computer Program, and why do we learn to program at all? • JavaScript is Scripting Language that shares the same basic feature of other programming language (VB, C, C++, Java, C#) • Store and refer to data values. • Perform Calculation. • Perform input/output.

4. Programming Statements • Statements are made up of keywords, data values and names (You should choose meaningful names). • JavaScript is case-sensitive and can contain lower-case or upper-case but cannot contain space. • Count and count are Different items. • LoanRate, Loan_Date. • The precise format that statements take in programming (SYNTAX). • JavaScript has more flexibility in its syntax than many other programming language. • Comments can be used with a double slash symbol (//).

5. Variable and Declarations • Data values and variables // Declare the data var TomSales; TomSales = 120; • The syntax of the assignment statement is : variableName = expression; • You can declare several variables in one statement. var TotalSale, MarySales, JimSales;

6. Variable and Declarations…. • Variables are used to store data and they hold values that can be changed during running of the programmer. var TotalSale, MarySales, JimSales; MarySales = 150; JimSales = 250; TotalSale = MarySales + JimSales; • Data Type (Numbers, String and Boolean) Distance = 150; Customer =“John Smith”; registered =false;

7. Example (Declaration) // Declare the data var TomSales, MarySales, JimSales; var TotalSales, AvgSales; // Set up the values TomSales = 120; MarySales = 350; JimSales = 228;

8. Example (Calculations) // Calculate the statistics TotalSales = TomSales + MarySales + JimSales; AvgSales = TotalSales/3;

9. Example (Output) document.write("<H3>Sales figures </H3>"); document.write("Tom's sales ", TomSales, "<BR>"); document.write("Mary's sales ", MarySales,"<BR>"); document.write("Jim's Sales ", JimSales, "<BR>"); document.write("<BR>"); document.write("Total sales: ", TotalSales,"<BR>", " Average: ", AvgSales);

10. Strings • String Literals • ‘testing’ • “3.14” • ‘name = “ myform " ’ • Working with strings • // produce the string hello world • msg= "Hello, "+ “World"; • Greeting = "Welcome to my programming, " + “ “ + name;

11. Numbers • Arithmetic • These include arithmetic operations on numbers • (+ - * / %) • Find the remainder ( 16 % 3 ) • Operator Precedence • It control the order in which operations are performed • Payment =12*(monthlyIssues –MonthlyReturn)

12. Comparison Operators • These are operators that compare values of various types and return a boolean value (true or false). (Example: Andy is 31 years old, Smith is 35 years old, John is 31 years old) • Less Than (<); evaluate to TRUE if its first operand is LESS than its second operand; otherwise it evaluate to FALSE. • Is Andy Younger than Frank ( Andy_Age < Frank_Age) • Greater Than (>); evaluate to TRUE if its first operand is GREATER than its second operand; otherwise it evaluate to FALSE. • Is Andy Older than Frank ( Andy_Age > Frank_Age)

13. Comparison Operators …. • Less Than or Equal (<=); evaluate to TRUE if its first operand is LESS than or EQUAL its second operand; otherwise it evaluate to FALSE. • Is Andy the same age or younger than John (Andy_Age <= John_Age) • Greater Than or Equal (>=); evaluate to TRUE if its first operand is GREATER than or EQUAL its second operand; otherwise it evaluate to FALSE. • Is Andy the same age or older than Frank (Andy_Age >= Frank_Age)

14. Logical Operators • These usually used with conjunction with comparison operators to express complex comparisons that involve more than one variable. • (Example: Andy is 31 year old, Smith is 35 year old, John is 31 year old) • Logical AND (&&); When used with boolean operands, it returns TRUE if and only if its both operands are TRUE, otherwise its returns FALSE. • Andy_Age = 31 AND Smith_Age = 35 • Logical OR (||); When used with boolean operands, it returns TRUE if and either the first operand or the second operand is TRUE (or both are TRUE), if both operands are FALSE, it returns FALSE. • Andy_Age = 31 OR Smith_Age = 31 • Logical NOT (!); the ! Operator is a unary operator; Its purpose is to invert the boolean value of its operand • ! (Andy_Age > Smith_Age)

15. Example // declare variables and set values var Andy_Age = 31; var Smith_Age = 33; var Comp_Age1, Comp_Age2, Comp_Age3, Comp_Age4, Comp_Age5; // set age condition Comp_Age1 = (Andy_Age >= Smith_Age); Comp_Age2 = (Andy_Age < Smith_Age); Comp_Age3 = (Andy_Age >= Smith_Age) && (Andy_Age < Smith_Age); Comp_Age4 = (Andy_Age >= Smith_Age) || (Andy_Age < Smith_Age); Comp_Age5 = !Comp_Age1; // display results document.write(“Comparison age 1: ",Comp_Age1, "<BR>"); // TYPE STATEMENT FOR EACH OF THE OUTPUT

16. Using Methods • A function is a piece of code that is defined once in a program and can be executed or invoked many times by the program. • A method is nothing more than a JavaScript function. • Maths Functions • max; to find the maximum of two values. • min; to find the minimum of two values. • And many more

17. Example // declare variables and set values var Andy_Age = 31; var Smith_Age = 33; var Max_Age, Min_Age; // set age condition Max_Age = Math.max (Andy_Age, Smith_Age); Min_Age = Math.min (Andy_Age ,Smith_Age); // display results document.write(“Maximum Age : ",Max_Age, "<BR>"); document.write(“Minimum Age: ",Min_Age, "<BR>");

18. String Conversion • A Function can be used to convert string into a number • Convert string to an integer parseInt (StringName) • Convert string to a Decimal number parseFloat (StringName)

19. Example var stringA, stringB; var numA, numB, numC, avg; stringA = "123"; stringB = "49.35";  // convert string A to an integer numA = parseInt(stringA); // convert stringB to a decimal number numB = parseFloat(stringB);  // find nearest integer numC = Math.round(numB);  // calculate average avg = (numA+numB)/2;  // display results document.write("Two values are ",numA, " and ",numB, "<BR>"); document.write("Nearest integer to ",numB," is ", numC, "<BR>"); document.write("Average is ",avg, "<BR>"); 

20. Debugging • locating the errors (Bugs) with your program. • Putting a statement to print out what’s going on (we can use document.write) • Correcting the Error. • Putting several statements in the code will help in the debugging process.

21. Example // declare variables and set values var Andy_Age = 31; var Smith_Age = 33; var Max_Age, Min_Age, Avrg_Age; // set age condition Max_Age = Math.Max (Andy_Age, Smith_Age); Min_Age = Math.min (Andy_Age ,Smith_Age); Avrg_Age = Andy_Age + Smith_Age /2 ; // display results document.write(“Maximum Age : ",Max_Age, "<BR>"); document.write(“Minimum Age: ",Min_Age, "<BR>"); document.write(“Minimum Age: ",Avrg_Age, "<BR>");