1. JavaScript Fundamentals
A290 TOOLS IN COMPUTING
JavaScript Fundamentals
Week 1
Class 2

2. Before you start
Make sure to review chapter 2 from the the Elequent JavaScript (2nd edition) book before you start this presentation.
There is a compressed (.zip) file called week1class2examples in the class website schedule page. Download that file, which has all the examples necessary for this presentation.
Unzip the folder and save it to your computer.
Make sure to read the slides and the below notes carefully. There are 5 assignment questions hidden in this presentation.
YOUR ASSIGNMENT QUESTIONS CAN BE HIDDEN IN
THE SLIDES
THE NOTES ARE HERE
THE EXAMPLES

3. JavaScript Basics
<script> </script> tags are used to embed JS code within HTML file
JS allows control of HTML documents and behavior of those documents
Control document appearance and content (create dynamic and conditional HTML)
Control the browser (e.g. pop up dialog boxes)
Interact with HTML forms (e.g. read and write user inputs)
Interact with the user (e.g. event handlers)
Read and write client state with cookies (cookies allow a web page to remember things about the client- e.g. user preference about the colors and layout)
Example: Interacting with a user >> When a user clicks on a button, a particular event occurs:
Lets see an example
Go to the same link, and explore and apply different events.
(Here are some other events you can use:

4. Lexical Structure of JS
JS is case sensitive: For example, myName and myname are two different variables.
JS ignores whitespace between lines of code
Try creating spaces in an example
Lexical Structure: set of elementary rules that specifies how you write programs in that language

5. Comments
Comments:
// This is a single line comment
/* This is a multi line
comment*/
Open the 1example.html file with a text editor and write comments for what each line does. This is question1 for assignment1.
Create a folder named assignment1 and put this 1example.html file in that folder with your comments. You will be asked to complete other tasks. Put all those files in this same folder.

6. Identifier
Identifier: An identifier is simply a name. When we declare a variable “number”, we are creating an identifier for the number variable.
In JS, identifiers are used to name variables and functions, and to provide labels for certain loops
Reserved names cannot be used as an identifier (e.g. var, break, continue, new)

7. Data Types and Values
The types of values that can be represented and manipulated in a programming language are known as data types.
JS Primitive Data Types
Numbers (e.g. 3, 2.15, 345)
Strings (e.g. Hello World)
Boolean (true, false)
NULL (a special value that indicates no value)
Undefined (a variable that has been declared but no value assigned) (e.g. var name)
NaN
JS Reference Data Types
Objects (e.g. document object)
Function (functions are true values in JS that can be stored in variables, arrays, and objects, and can be passed as arguments to other functions)

8. Variables Declaration
var name, lastname;
var quote=‘The goal of education is not to increase the amount of knowledge but to create the possibilities for a child to invent and discover. Piaget’;
Scope: The scope of a variable is the region of your program in which it is defined.
Global variable: It is defined everywhere in your code
Local variable: Variables declared within a function
See 2example.html

9. Undeclared VS Unassigned Variable
var x; //declare an unassigned variable. Its value is undefined alert(u); //using an undeclared variable causes an error //alert is a JS method. Go ahead and test it var u=3; //assigning a value to an undeclared variable creates the variable

10. Primitive and Reference Types
A primitive type has a fixed size in memory.
Examples:
A number occupies eight bytes of memory
A Boolean value can be represented with only one bit

11. Primitive and Reference Types
Reference types do not have a fixed size.
Examples:
An array can have any number of elements
A function can contain any amount of JS code
Since these types do not have a fixed size, their values cannot be stored directly in the eight bytes of memory associated with each variable. Instead, the variable stores a reference to a value. Typically, this reference is some sort of pointer or memory address. It is not the data value itself, but it tells the variable where to look to find the value.
Assignment Question #2: See the notes section of this slide.
Strings are unusual. Even though they behave as primitive data type in many ways, they cannot be stored in directly in fixed-size variables and for efficiency we would expect JSS to copy references to strings, not the actual content of strings.
Question #2 (ANSWER THIS QUESTION HERE IN THE NOTES SECTION OF THIS SLIDE):
a) Explain what reference type is with your own words? Give an example.
b) What is garbage collection?

12. Variables as Properties of the Global Object
Variables in JS are fundamentally the same as object properties.
In JS, the window object serves as the global object for all JS code contained in the browser window it represents.
When you declare a global JS variable, you are actually defining a property of the global window object.
Window object also has its own properties
See window object properties:
In the global execution context (outside of any function), this refers to the global object.
Inside a function, the value of this depends on how the function is called.

13. Expressions and Operators
An expression is a phrase of JS that a JS interpreter can evaluate to produce a value
Examples
//a numerical literal
“This is a string” // a string literal
[3,6,9,21,15] //an array literal
Name //the name variable
result //the result variable

14. Operator Behaviors Some operators expect certain data types
‘x’ * ‘y’ //this is not legal in JS
However, in some instances JS tries to convert expressions to the appropriate type whenever possible:
‘3’ * ‘7’ // the result is 21
Some operators act differently in different expressions
+ operator adds numeric values but concatenates string values

15. Operator Precedence
Operator precedence controls the order in which operations are performed.
Ex: result= 2+4*4; //outputs 18
The multiplication operator has a higher precedence than the addition operator +.
Operator precedence can be overwritten with the explicit use of parentheses.
Ex: result=(2+4)*4 //outputs 24
See more:

16. Arithmetic Operators See 3example.html Addition + Subtraction -
Multiplication *
Division /
Modulo % (returns the reminder: 7%3 //returns 1 )
Unary minus – (converts a positive value to negative: -4)
Increment ++ (adds 1: x=3; x++ //returns 4)
Decrement – (subtracts 1: x=3; x-- //returns 2)
See 3example.html

17. Equality Operators
These are operators that compare two values to determine whether they are the same or different, and return a Boolean value (true or false)
They are commonly used in control or flow statements
Be careful, = is not an equality operator. It is an assignment operator for assigning values.

18. Equality Operators == checks whether two variables are same in value
EX: if (x==y) alert(message);
=== checks whether two variables are identical (same value and data type)
EX: if (x===y) alert(message);
See 4example.html and 5example.html

19. Equality Operators != checks whether two variables are not equal
EX: if (x!=y) //returns true when the variables are not equal
!== checks whether two variables are not identical
EX: if (x!==y) //returns true when the variables are not identical

20. Relational Operators >> Comparison
Less than <
Greater than >
Less than or equal <=
Greater than or equal >=

21. String Operators document.write(z);
The + operator can be used to add (concatenate) strings.
cont=”Merhaba”+” Dünya”; //This is Hello World in Turkish.
The += assignment operator can be used to add (concatenate) strings
txt1 = "What a very "; txt1 += "nice day";
Adding two numbers will return the sum, but adding a number and a string will return a string:
var z = "Hello" + 5;
document.write(z);
Assignment Question #3: What is the output of the following? (Explain your answer in the notes section here)
var z = "Hello" + 5;
document.write(z); ?

22. Logical Operators
&& and || or ! not See 6example.html

23. Assignment Operator This is same with others such as -=, *=, /=, %=
varia= 5;
varia+=5; // this is equal to var=var+5; This is addition and assignment together.
This is same with others such as -=, *=, /=, %=
See 7example.html

24. Other operators we will apply later
The in operator returns true if the specified property is in the specified object.
The typeof operator returns the type of a variable, object, function or expression
See the 8example.html example
The delete operator deletes a property from an object.
The instanceof operator returns true if the specified object is an instance of the specified object.
The void operator evaluates an expression and returns undefined. This operator is often used to obtain the undefined primitive value, using "void(0)”
The new operator creates a new object and invokes a constructor function to initialize it.
Ternary operator ?: //used to shorten conditional statements
[] and . are both operators to access elements of an object

25. Assignment Question #4 Open the 9example.html file
There are three errors in that code.
Find and correct the errors and write comments for each error in the script.
Submit the corrected/commented file with other files in the assignment1 folder.

26. Assignment Question #5
Write a script that converts a user entered Fahrenheit degree to Celsius.
You need to create an html page with the .js file included with the following line of code:
<script type="application/javascript" src=”question5.js"> </script>.
Hints
The user will enter fahrenheit value in a text box (hint: prompt)
An alert box will show the celsius value of the user input
Ex: 32 fahrenheit is 0 degrees Celsius
Equation is °C = 5/9 (°F - 32).
Name the html and js files as question5.html and question5.js
Put them with the other assignment files in the same folder.

27. Assignment #1 There are 5 questions in this assignment.
Q1: 20 points Q2: 10 points Q3: 10 points Q4: 20 points Q5: 30 points
You need to put all the html and js files, and the presentation file in the same folder.
We will be looking at the notes section of the presentation file for the conceptual questions’ answers.
Then, compress all your work (zip) and submit your work in Canvas assignments.
You are allowed to work in teams. Make sure to include both team members’ last names in the submission file.