ascfasdcas

1. 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.
2

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
1. Control document appearance and content (create dynamic and conditional HTML)
2. Control the browser (e.g. pop up dialog boxes)
3. Interact with HTML forms (e.g. read and write user inputs)
4. Interact with the user (e.g. event handlers)
5. 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:
1. Lets see an example
2. Go to the same link, and explore and apply different events.
(Here are some other events you can use: https://www.w3schools.com/js/js_events.asp)
3

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
4

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.
5

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)
6

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)
7

8. Variables
Declaration
var i;
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
8

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
9

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
10

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.
11

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: https://www.w3schools.com/jsref/obj_window.asp
12

13. Expressions and Operators
An expression is a phrase of JS that a JS interpreter can evaluate to produce a value
Examples
3.17 //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
13

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
14

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: http://www.javascriptkit.com/jsref/precedence_operators.shtml
15

16. Arithmetic Operators
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
16

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.
17

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
18

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
19

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

21. String Operators
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);
21

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

23. Assignment Operator
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
23

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
24

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.
25

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.
26

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.
27