From e8a08db25f730a7db0b8d3bcf8be73d7b5ccfcd4 Mon Sep 17 00:00:00 2001
From: Andrej Rasevic <andrej@rasevicengineering.com>
Date: Thu, 17 Jun 2021 08:32:09 -0400
Subject: [PATCH] adding Midterm materials
---
MidtermExam/Midterm/Instructions.md | 44 +++++++++++++++++
MidtermExam/Midterm/Questions.md | 74 +++++++++++++++++++++++++++++
MidtermExam/Midterm/deepEquals.js | 5 ++
MidtermExam/Midterm/events.html | 29 +++++++++++
4 files changed, 152 insertions(+)
create mode 100644 MidtermExam/Midterm/Instructions.md
create mode 100644 MidtermExam/Midterm/Questions.md
create mode 100644 MidtermExam/Midterm/deepEquals.js
create mode 100644 MidtermExam/Midterm/events.html
diff --git a/MidtermExam/Midterm/Instructions.md b/MidtermExam/Midterm/Instructions.md
new file mode 100644
index 0000000..ebe5355
--- /dev/null
+++ b/MidtermExam/Midterm/Instructions.md
@@ -0,0 +1,44 @@
+### Midterm CMSC389N Summer 2020
+
+The exam is worth 100 points
+Exam Duration 90 minutes
+
+To complete the exam you must complete the questions in `Questions.md` as well as complete the code for `deepEqual.js` and `events.html`. `Questions.md` is worth 40 points, `deepEqual.js` is worth 25 points and `events.html` is worth 35 points.
+
+1. `Questions.md` (40 points)
+ To complete `Questions.md`, just type your answers after each question.
+
+2. `deepEquals.js` (25 points)
+ During lecture we covered an example of a custom equal function that assumed that the properties of each key of an object were not nested objects (i.e. the nesting of objects was at most 1 level deep).For `deepEqual.js` you must complete the function inside so that it compares any 2 javscript objects and returns true if and only if every value of every proprty of both objects is identical.
+ Your implementation can include at most 1 helper funtion that should test if the parameter passed to the function is an objecty or not. You may find the `typeof` operator helpful. Also each of the parameters passed to the `deepEquals` function must be objects, i.e. they cannot be primitives, arrays, functions, etc.
+
+3. `events.html` (35 points)
+ We have provided you all the necessary html to complete this part of the exam and an empty script tag. You need to use the html elements we have provided you, __AS WRITTEN__, and add event listeners/handlers so that you get the following output:
+ 1. Stop Event Propogation box is un-checked
+ If the user clicks the `Outer Div` section then the console should print out in __EXACTLY__ this order:
+
+ Outer Div clicked first
+ Outer Div clicked
+
+ If the user clicks the `Inner Div` section then the console should print out in __EXACTLY__ this order:
+
+ Outer Div clicked first
+ Inner Div clicked
+ Outer Div clicked
+
+ If the user clicks anywhere outside of the blue div areas no output should appear.
+ 2. Stop Event Propogation box is checked
+ If the user clicks the `Outer Div` section then the console should print out in __EXACTLY__ this order:
+
+ Outer Div clicked
+
+ If the user clicks the `Inner Div` section then the console should print out in __EXACTLY__ this order:
+
+ Inner Div clicked
+
+ If the user clicks anywhere outside of the blue div areas no output should appear.
+
+To complete this part of the exam you will need to use the `event.stopPropogation()` function . When you invoke this function inside of an event handler it stops the propogation or capturing of the event at the currentTarget. You also may find helpful the `checked` property of an html checkbox element to determine whether or not it is checked. It is a boolean value and will return true or false. You may load the file in your browser to see what the page looks like. You do not need to use `npx http-server` to dos so - you can use the file protocal by just passing the absolute path of the file on your local system inside of your browsers's navigation bar.
+
+
+Good luck!
\ No newline at end of file
diff --git a/MidtermExam/Midterm/Questions.md b/MidtermExam/Midterm/Questions.md
new file mode 100644
index 0000000..9e0d23b
--- /dev/null
+++ b/MidtermExam/Midterm/Questions.md
@@ -0,0 +1,74 @@
+## Javascript/HTML/CSS Short Answer Questions 40 points
+### Complete the questions below
+
+1. What are the differences between declaring a variable in javascript with `var`, `let` or `const`?
+
+
+
+2. What is hoisting? Give an example of code where a function definition can be hoisted and where it cannot be.
+
+
+
+3. What is the difference between `call`, `apply` and `bind`?
+
+
+4. For this problem assume your code is running in the browser. Given the following script:
+
+```
+let goat1 = {
+ firstName: 'Novak',
+ lastNmae: 'Djokovic'
+}
+
+let goat2 = {
+ firstName: 'Novak',
+ lastNmae: 'Djokovic'
+}
+
+console.log(goat1 == goat2)
+console.log(goat1 === goat2)
+console.log(goat1['firstName'] === goat2['firstName'])
+```
+
+What is the output of this script?
+
+
+5. How would you make an object immutable in javascript? Give a code example where you create an object that is immutable.
+
+
+6. What are computed properties?
+
+7. What is the difference between a class and an id attribute in css?
+
+8. Describe the difference between a child and descendent selector in css?
+
+9. What is the difference between `undefined` and `null` in `javascript`?
+
+10. How does the `new` keyword work with a constructor function in `javascript`?
+
+11. What is event bubbling? How is it different from capturing?
+
+12. What is the difference between `event.target` and `event.currentTarget` properties?
+
+13. What are the ways javascript can be included in an html file?
+
+14. What is the output of the following code:
+
+```
+console.log(y);
+y = 1;
+-------------------
+console.log(y);
+var y = 2;
+-------------------
+y = 3;
+console.log(y);
+var y;
+```
+
+
+15. Define higher order functions. Give 3 examples of higher order functions we have encoutered in javascript
+
+16. Create a function named `printDate` 3 different ways (not including a function constructor). It should take 3 parameters: month (name of the month), number (value corresponding to the number day in a given month), and year. It should return a string representation of the passed date in the following format:
+`"The date entered is: <month> <day>, <year>"`
+You must use the template literal syntax to provide your return value.
diff --git a/MidtermExam/Midterm/deepEquals.js b/MidtermExam/Midterm/deepEquals.js
new file mode 100644
index 0000000..3b73dfe
--- /dev/null
+++ b/MidtermExam/Midterm/deepEquals.js
@@ -0,0 +1,5 @@
+// complete the function below
+
+function deepEquals(obj1, obj2) {
+
+}
\ No newline at end of file
diff --git a/MidtermExam/Midterm/events.html b/MidtermExam/Midterm/events.html
new file mode 100644
index 0000000..2152f80
--- /dev/null
+++ b/MidtermExam/Midterm/events.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <style>
+ div {
+ padding: 50px;
+ background-color: rgba(0,0,255,0.3);
+ text-align: center;
+ cursor: pointer;
+ }
+ </style>
+
+ <h1>Event Handling in the DOM</h1>
+
+
+ <div id="outer"> Outer Div
+ <div id="inner">Inner Div</div>
+ </div>
+
+ Stop Event Propogation
+ <input type="checkbox" id="check">
+
+ <script>
+ // Place your code here
+
+ </script>
+
+ </body>
+</html>
--
GitLab