Chapter 10 Programming Fundamentals with JavaScript

In this lecture, you will learn: the differences between programming languages and scripting languages programming concepts and constructs: syntax, data types, variables, statements, assignment statements, operators, constants, keywords, expressions

Coding Writing code Run, running, execution Compiling, compilation means entering the code is part of the process of creating the computer program Run, running, execution refers to the process by which the computer carries out the instructions in a computer program Compiling, compilation refers to the process of assembling code into a format suitable for the computer to execute the instructions

IDE stands for: Integrated Development Environment refers to: the software in which you are developing an application for example, Adobe Animate, Microsoft Visual Studio

Programming Languages Multimedia authoring scripting languages, such as JavaScript and Animate Actionscript are often the highest level. high level Programming languages that look more like human language. Easy for human to read and write, but require more "translation" behind the scenes to be understandable to the computer. e.g. C++, C#, Java, FORTRAN Assembly language low level lowest level: Machine language: a programming language that communicates with a computer through 0's and 1's

Scripting Languages Examples: Javascript and Animate ActionScript Very-high-level programming languages Advantage: easier for non-programmer to learn because the syntax and keywords are close to human languages Disadvantages: Not as full-fledged as programming languages such as C++, Java, and FORTRAN Don't have the features to let the programmer to control low level details, such as memory allocation

JavaScript Syntax prescribes the ways in which statements must be written in order for them to be understood by the computer like the rules of grammar and punctuation in human languages, but these rules must be followed precisely in computer programming for examples, for JavaScript: case sensitive each statement ends with a semi-colon(;) the naming of variables and functions has to start with a letter , _ or $

Basic Programming Constructs syntax variables statements assignment statements keywords operators expressions procedures functions arguments control structures conditions comments arrays loops In this Powerpoint

Variables Purpose: to store values that can be updated and retrieved at runtime Data is stored in memory as bits. Variable lets you refer, by name, to the data's memory location stored. has 3 Properties: Name: Code refers to memory location by name Value:The actual information stored at the location Type: The particular type of data (data type) Examples: integer, floating point, string

Loose vs. Strict Data Typing When a programming language requires that you explicitly declare the data type of a variable when the variable is first created Loose data typing When a programming language does not have such data typing requirement. JavaScript is loosely typed language

Variable Naming can contain a number, a letter, underscore (_), or dollar sign ($) cannot begin with a number in this course, variables always begin with a letter must not contain spaces cannot be a keyword score and Score are different number and nuMBer are different

Variable Naming Which are valid variable names? myScore my_score myScore -- valid my_score -- valid my score -- invalid because of the space my-score -- invalid because of the dash (-), which is the substraction operator my4score -- valid 4score -- invalid because it starts with a number

Assigning a Value to a Variable Means giving a value to a variable The statement that assigns a value to a variable is called an assignment statement. General Syntax: variableName = value or expression; Examples: score = 10; letterGrade = "A"; sum = a + b;

Statements Statements are instructions that can be executed A statement ends with a semi-colon (;) when there are more than one statements on the same line Purposes: For examples, to give values to variables (assignment statements) to cause things to happen only under certain conditions (e.g. if-statements) to cause instructions to repeat (used in loops)

Operators symbols that cause a new value to be calculated from one or more other values Examples: arithmetic: +, -, *, /, % give new calculated values comparison operators: >, >=, <, <=, ==, != give a value of true or false logical operators: &&, ||,! give a value of true or false

Assignment Operators =, +=, -=, *=, /=, %= score += 3; score = score + 3; score -= 3; score = score – 3; score *= 3; score = score * 3; score /= 3; score = score / 3; score %= 3; score = score % 3;

Assignment Operators =, +=, -=, *=, /=, %= score = 10; score += 5; What is the value for score after these two statements? Answer: 15

Assignment Operators =, +=, -=, *=, /=, %= score = 10; score *= 2; What is the value for score after these two statements? Answer: 20

Keywords Reserved words that have a special meaning in a programming language.  You are not allowed to use these words for any other purpose, such as variable or function names. Examples: var if for function true false

How a Program Runs A program is written as a sequence of statements as instructions. The program executes the instructions sequentially--one instruction after the other, in the order in which they appear in the code. Use control structures to make nonsequential execution of the instructions.

Types of Control Structures Loop A set of statements is executed repeatedly until a certain condition is reached Will be covered in Chapter 11 Conditional A set of statements is executed only if some conditions are met if statements and switch statements

if Statements if if...else if...else if Nested if statements

if General Syntax: if (logical expression(s)) { statement(s) } The statements grouped within the curly braces are called the block statements.

if If there is only one statement to be executed, the curly braces are optional. Examples: if (score > 60) grade = "pass"; The statement may be on a single line: if (score > 60) grade = "pass";

if...else General Syntax: if (logical expression(s)) { statement(s) } else

if...else Example: if (score > 60) { grade = "pass"; } else grade = "fail";

if...else if General Syntax: if (logical expression(s)) { statement(s) } else if (logical expression(s)) ... else

if...else if Example: if (score > 90) { grade = "A"; } else if (score > 80) grade = "B"; else if (score > 70) grade = "C"; else if (score > 60) grade = "D"; else grade = "F";

if...else if The conditions are checked one at a time sequentially. Once a condition is found to be true, the statement(s) for that condition will be executed and the rest of the conditions in the if . . . else if statements group will not be checked.

if...else if Suppose score = 85. Example: if (score > 90) { grade = "A"; } else if (score > 80) grade = "B"; else if (score > 70) grade = "C"; else if (score > 60) grade = "D"; else grade = "F";

if...else if Suppose score = 85. First check: (score > 90). (85 > 90) is false! Example: if (score > 90) { grade = "A"; } else if (score > 80) grade = "B"; else if (score > 70) grade = "C"; else if (score > 60) grade = "D"; else grade = "F";

Logical Operators && AND || OR ! NOT

Logical AND: && logicalExpression1 && logicalExpression2 true : only when both logicalExpression1 and logicalExpression2 are true false : when either logicalExpression1 or logicalExpression2 is false

Logical OR: || logicalExpression1 || logicalExpression2 true : when either logicalExpression1 or logicalExpression2 is true false : only when both logicalExpression1 and logicalExpression2 is false

Logical NOT: ! !logicalExpression1 true : when logicalExpression1 is false false : when logicalExpression1 is true

Examples Example 1 Example 2 if (age < 40 && weight < 150) { group = 2; } else group = 3; if (age < 40 || weight < 150) { group = 2; } else group = 3; Example 1: group = 2 Example 2: group = 2 Which statement will be executed in these examples when age = 38 and weight = 145?

Examples Example 1 Example 2 if (age < 40 && weight < 150) { group = 2; } else group = 3; if (age < 40 || weight < 150) { group = 2; } else group = 3; Example 1: group = 3 Example 2: group = 2 Which statement will be executed in these examples when age = 38 and weight = 157?

Examples Example 1 Example 2 if (age < 40 && weight < 150) { group = 2; } else group = 3; if (age < 40 || weight < 150) { group = 2; } else group = 3; Example 1: group = 3 Example 2: group = 2 Which statement will be executed in these examples when age = 46 and weight = 145?

Examples Example 1 Example 2 if (age < 40 && weight < 150) { group = 2; } else group = 3; if (age < 40 || weight < 150) { group = 2; } else group = 3; Example 1: group = 3 Example 2: group = 3 Which statement will be executed in these examples when age = 46 and weight = 157?