1. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2016 by Pearson Education, Inc. All rights reserved.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

2. Chapter 10 Programming Fundamentals with JavaScript
Part 1
Programming Fundamentals - Part A
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

3. 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
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

4. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Some Common Terms
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

5. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Writing code
means entering the code
is part of the process of creating the computer program
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

6. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Run, running, execution
refers to the process by which the computer carries out the instructions in a computer program
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

7. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Compile, compilation
refers to the process of assembling code into a format suitable for the computer to execute the instructions
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

8. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
IDE
stands for: Integrated Development Environment
refers to:
the software in which you are developing an application
for example, Adobe Flash, Microsoft Visual Studio
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

9. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Runtime
Refers to the time when the application is running
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

10. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Design Time
Refers to the time when the application is being developed
e.g. writing the code
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

11. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Compile Time
Refers to when you compile the code into an application
At compile time, the compiler analyzes all the code in the project and translates it into a format that the computer understands
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

12. Computer Programming Languages
are for writing instructions that can be followed by a computer
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

13. Programming Languages
Multimedia authoring scripting languages, such as JavaScript and Flash 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
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

14. Example Syntax of High and Low Level Languages
An assignment statement of most high level languages, such as Actionscript, C++, Java
Equivalent Assembly language example for a particular CPU
total = 2 * score - 1;
score: .word
total: .word
lw $t0, score
add $t0, $t0, $t0
addi $t0, $t0, -1
sw $t0, total
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

15. Example Syntax of Low Level Languages
An Assembly language for a particular CPU
Equivalent machine language for a particular CPU
addi $21,$0,5
ori $t0,$t0,0xff
lui $s0,0xdad
lw $v0,53($gp)
sw $sp,-4($sp)
sll $t9,$a0,3
loop: bne $s0,$s0,loop
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

16. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Scripting Languages
Examples: Javascript and Flash 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
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

17. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
What is JavaScript?
A scripting language for Web pages
JavaScript is NOT Java programming language
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

18. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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 $
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

19. Basic Programming Constructs
syntax
variables
statements
assignment statements
keywords
operators
expressions
procedures
functions
arguments
control structures
conditions
comments
arrays
loops
In this Powerpoint
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

20. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Variables
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

21. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

22. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Variables
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
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

23. Data Types in JavaScript
When programming in JavaScript, you do not need to explicitly specify the data type.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

24. Loose vs. Strict Data Typing
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
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

25. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

26. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Variable Naming
Which are valid variable names?
myScore
my_score
my score
my-score
my4score
4score
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
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

27. Case Sensitivity of Variable Names
score and Score are different
number and nuMBer are different
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

28. 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.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

29. Assigning a Value to a Variable
General Syntax:
variableName = value or expression;
Examples:
score = 10;
letterGrade = "A";
sum = a + b;
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

30. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Declaring a Variable
Before you use a variable or assigning a value to a variable, you need to declare the variable.
General Syntax: Two ways to declare a variable:
Declare without assigning a value: var variableName;
Declare and assign a value: var variableName = value or expression;
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

31. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Declaring a Variable
Examples:
var score;
var score = 0;
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

32. Variables vs. String Literals
score vs. "score"
a variable:
a data is stored in a memory location that can be referred to with the variable named score
If score has a value of 3, then:
the expression score + 9 gives you a value of 12.
a string literal:
it is a data itself
a text string
enclosed by two quotation marks
the expression "score" + 9 gives you a concatenated text string "score9"
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

33. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Questions
Suppose the variable score is equal to 3.
An expression score + score gives a ___ (text string or number?) equal to ___.
An expression score + "score" gives a ___ (text string or number?) equal to ___.
An expression "score" + "score" gives a ___ (text string or number?) equal to ___.
An expression score + "" gives a ___ (text string or number?) equal to ___.
answers:
1. number, 6
2. text string, "3score"
3. text string, "scorescore"
4. text string, "3"
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

34. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Statements
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

35. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

36. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Statements
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)
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

37. Assignment Statements
To assign a value to a variable
General Syntax:
variableName = value or expression;
Examples:
score = 0;
score = score + 1;
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

38. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Operators
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

39. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

40. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Operator %
Modulo
Gives the remainder in a division
Examples:
20 % 2 gives 0
23 % 2 gives 1
20 % 11 gives 9
437 % 60 gives 17
Application examples:
determine whether a number is even or odd
converting total number of seconds into minutes:seconds
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

41. 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;
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

42. Assignment Operators =, +=, -=, *=, /=, %=
score = 10; score += 5; What is the value for score after these two statements?
Answer: 15
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

43. Assignment Operators =, +=, -=, *=, /=, %=
score = 10; score *= 2; What is the value for score after these two statements?
Answer: 20
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

44. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
-= vs. = -
These are different statements:
score -= 5;
score = -5;
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

45. Assignment Operators =, +=, -=, *=, /=
score = 10; score = -score; What is the value for score after these two statements?
Answer: -10
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

46. Assignment Operators =, +=, -=, *=, /=
score = 10; score -= score; What is the value for score after these two statements?
Answer: 0
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

47. Operator = vs. Mathematical = Sign
The operator = is totally different from the mathematical equal sign (=)
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

48. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Operator =
score = 0;
The value on the right-hand side (0 in this example) is assigned to the variable on the left-hand side (score in this example).
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

49. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Operator =
0 = score;
This statement will cause an error!
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

50. Mathematical Equal Sign
0 = score score = 0 These two math equations are equivalent.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

51. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Operator =
score = score + 1;
The value of score is incremented by 1 and then assigned back to itself. The result is that the score is incremented by 1.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

52. Mathematical Equal Sign
score = score + 1
This equation does not make sense as score does not have a solution.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

53. Increment Operator: ++
To add 1 to the expression
General Syntax:
expression++;
Examples:
score++;
is same as:
score = score + 1;
and:
score += 1;
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

54. Decrement Operator: --
To substract 1 from the expression
General Syntax:
expression--;
Examples:
score--;
is same as:
score = score - 1;
and:
score -= 1;
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

55. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Keywords
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

56. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

57. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Expressions
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

58. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Expressions
Any part of a statement that produces a value
Examples:
2 + 3
(a + b + c) / 3
a > b
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

59. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Expressions
Any part of a statement that produces a value
Examples:
2 + 3
(a + b + c) / 3
a > b
produces a value of 5
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

60. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Expressions
Any part of a statement that produces a value
Examples:
2 + 3
(a + b + c) / 3
a > b
produces a value of the average of a, b, and c
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

61. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Expressions
Any part of a statement that produces a value
Examples:
2 + 3
(a + b + c) / 3
a > b
produces a value of true or false depending on whether a is greater than b
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

62. Exercise in the textbook: Identify variables, constants, and operators
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

63. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Questions
Note to instructor:
Depending on your preference, you may want to go over the review questions at the end of this lecture as an instant review or at the beginning of next lecture to refresh students' memory of this lecture.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

64. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
True/False: If it is strict data typing, a programming language requires that you explicitly declare the data type of a variable when the variable is first created.
True
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

65. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
JavaScript is a ___ language.
strictly typed
loosely typed B
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

66. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
The statement in JavaScript ends with a ___.
colon (:)
semicolon (;)
closing parenthesis ())
closing curly brace (}) B
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

67. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
True/False: JavaScript syntax is case-sensitive.
True
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

68. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
The type of the value is called a(n) ___.
variable
function or procedure
argument
statement
data type E
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

69. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
___ are used to store values, which can be updated and retrieved when the program is running.
Variables
Functions and procedures
Arguments
Statements
Data types A
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

70. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
Which of the following is a valid variable name in JavaScript?
3_high_score
high score
high_score
high-score
highScore
C and E
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

71. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
To declare a variable, you use the keyword ___.
var
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

72. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
To declare a constant, you use the keyword ___.
const
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

73. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
True/False: The operator = has the same meaning as the mathematical equal sign (=).
False
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.