JavaScript Fundamentals A290 TOOLS IN COMPUTING JavaScript Fundamentals Week 1 Class 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

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: https://www.w3schools.com/js/js_events.asp)

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

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.

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)

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)

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

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

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

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?

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

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

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

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

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

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.

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

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

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

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

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

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

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

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.

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.

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.