Skip to content
Snippets Groups Projects
Commit e9105b7b authored by Andrej Rasevic's avatar Andrej Rasevic
Browse files

adding week1 material

parent cd7820e2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 754 additions and 0 deletions
codeExamples/week1/EventsJSClassesCode/AccessingElementEventOcurred.html 0 → 100755
+ 52
− 0
View file @ e9105b7b
<!doctype html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8" />
</head>
<body>
<div id="OuterElement">
This text is part of the
outer element.<br><br><br>
<div id="InnerElement">
&nbsp&nbsp;This text is part of the inner element.<br><br><br>
<div id="WayInnerElement">
&nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;This text is part of the way inner element :)<br><br><br>
</div>
</div>
</div>
<script>
/* This refers to the element on which the event handler is registered and it does need to be
* the element on which the event occurs */
let outerElement = document.getElementById("OuterElement");
let innerElement = document.getElementById("InnerElement");
let wayInnerElement = document.getElementById("WayInnerElement");
outerElement.addEventListener("click", function (event) {
if (this == outerElement) {
alert("this is refering to outerElement");
} else if (this == innerElement) {
alert("this is referring to innerElement");
} else if (this == wayInnerElement) {
alert("this is referring to wayInnerElement");
} else {
alert("other");
}
if (event.target == outerElement) {
alert("outerElement was the target");
} else if (event.target == innerElement) {
alert("innerElement was the target");
} else if (event.target == wayInnerElement) {
alert("wayInnerElement was the target");
} else {
alert("Other");
}
});
//innerElement.addEventListener("click", () => alert("InnerElement"));
//wayInnerElement.addEventListener("click", () => alert("WayInnerElement"));
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/ArrayMethods1.html 0 → 100755
+ 31
− 0
View file @ e9105b7b
<!doctype html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8" />
</head>
<body>
<script>
const a = [10, 20, 30];
a.length = 4;
a[3] = 50;
document.writeln(`a[3]=${a[3]}<br>`);
/* using foreach to iterate over elements (ignores undefined elements) */
a.forEach(i => document.writeln(i));
delete a[0];
document.writeln("<br>After deleting<br>");
a.forEach(i=> document.writeln(i));
document.writeln(`<br>Length: ${a.length}<br>`);
let removed = a.splice(0, 2); // first argument index, second number elements to remove
// if you don't provide second argument all elements are removed
// until the end of the array.
document.writeln(`array returned by splice: ${removed.join()}<br>`);
document.writeln(`original array after splice: ${a.join()}<br>`);
document.writeln(`original array length after splice: ${a.length}<br>`);
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/ArrayMethods2.html 0 → 100755
+ 60
− 0
View file @ e9105b7b
<!doctype html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8" />
</head>
<body>
<script>
const tas = [
{name: "John", course: "cmsc131", type:"full", hours: 4},
{name: "Mary", course: "math106", type: "half", hours: 10},
{name: "Laura", course: "psyc101", type:"full", hours: 3},
{name: "Kelly", course: "cmsc131", type:"full", hours: 5},
];
/* forEach is a built-in array method; callback is called on each array element */
tas.forEach(i => document.writeln(i.name + "<br>"));
/* mapping - map each item of an array to a new item of new array based on the callback */
/* We want to retrieve array of courses. */
const allCourses = tas.map(ta => ta.course);
document.writeln(`TA courses: ${allCourses.join()}<br>`);
/* Testing items in array */
/* We want to identify whether all elements of an array satisfy a condition */
/* every returns true if call back is true for all elements */
const allFullType = tas.every(ta => ta.type === "full");
document.writeln(`allFullType:${allFullType}<br>`);
/* some will applies callback to each element until one is found to be true */
const anypsyc101TA = tas.some(ta => ta.course === "psyc101");
document.writeln(`anypsyc101TA:${anypsyc101TA}<br>`);
/* finding first element in array that satifies condition; undefined returned if none found */
const tacmsc131 = tas.find(ta => { return ta.name === "John"; });
document.writeln(`Name: ${tacmsc131.name}, Type: ${tacmsc131.type}<br>`);
/* filter returns array with items satisfying condition */
const allcmsc131Tas = tas.filter(ta => ta.course === "cmsc131");
document.writeln(`allcmsc131Tas:${allcmsc131Tas.map(ta => ta.name).join()}<br>`);
/* indices */
const laurasIndex = tas.findIndex(ta => ta.name === "Laura");
document.writeln(`Laura\'s index ${laurasIndex}<br>`);
/* visiting every element in the collection and aggregating some value to generate */
/* a single value from the array */
const values = [2, 3, 9];
const initialValue = 0;
/* reduce has two parameters: callback and initial value */
const valuesSum = values.reduce((accumulated, curr) => accumulated + curr, initialValue);
document.writeln(`valuesSum:${valuesSum}<br>`);
const totalHours = tas.reduce((accumulated, curr) => accumulated + curr.hours, initialValue);
document.writeln(`totalHours:${totalHours}<br>`);
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/ClassDefinitionDeclaration.html 0 → 100755
+ 50
− 0
View file @ e9105b7b
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Example</title>
</head>
<body>
<script>
"use strict";
class Student {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {
return this.name + " " + this.age;
}
getName() {
return this.name;
}
static getCollegeName() {
return "UMCP";
}
}
main();
function main() {
let s1 = new Student("Mary", 20);
let s2 = new Student("Peter", 30);
document.writeln(s1 + "<br>");
document.writeln(s2 + "<br>");
document.writeln("College Name: " + Student.getCollegeName() + "<br>");
document.writeln("Student's name: " + s1.getName() + "<br>");
s1.name = "CHANGED NAME";
document.writeln("Student's name: " + s1.getName() + "<br>");
/* Student("Kyle", 40); */ /* Check console when commented out */
}
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/ClassDefinitionExpression.html 0 → 100755
+ 39
− 0
View file @ e9105b7b
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Example</title>
</head>
<body>
<script>
"use strict";
main();
function main() {
let Student = class St {
constructor(studentsName, age) {
this.studentsName = studentsName;
this.age = age;
}
toString() {
return this.studentsName + " " + this.age;
}
getNameOfClass() {
return St.name;
}
}
let s1 = new Student("Michael", 101);
let s2 = new Student("Rose", 345);
document.writeln(s1 + "<br>");
document.writeln(s2 + "<br>");
document.writeln("Class name: " + s1.getNameOfClass() + "<br>");
}
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/ComputePropKeys.html 0 → 100755
+ 24
− 0
View file @ e9105b7b
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Example</title>
</head>
<body>
<script>
"use strict";
let part1 = 'camp', part2 = 'us';
let preFunc = "getD", postFunc = "ata";
let student1 = {
id: 1,
[part1 + part2] : "UMCP",
[preFunc + postFunc]() { return [part1 + part2]; }
};
document.writeln("id: " + student1.id + ", campus: " + student1.campus + "<br>");
document.writeln("Function: " + student1.getData() + "<br>");
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/EventPropagation.html 0 → 100755
+ 32
− 0
View file @ e9105b7b
<!doctype html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8" />
</head>
<body>
<div id="OuterElement">
This text is part of the
outer element.<br><br><br>
<div id="InnerElement">
&nbsp&nbsp;This text is part of the inner element.<br><br><br>
<div id="WayInnerElement">
&nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;This text is part of the way inner element :)<br><br><br>
</div>
</div>
</div>
<script>
/* In some event's model the listener is executed starting at the targeted element */
/* and bubbling up the DOM tree. This is refered to as event bubbling. In other models */
/* event handling starts with the top element trickling down the target element. This is referred to
/* as event capturing. W3 Consortium approach relies onhandling an event
/* in two phases: capturing phase (event first trickles down); bubbling phase (after target
/* element has been reached during the capturing phase the event bubbles up). */
document.getElementById("OuterElement").addEventListener("click", () => alert("OuterElement"));
document.getElementById("InnerElement").addEventListener("click", () => alert("InnerElement"));
document.getElementById("WayInnerElement").addEventListener("click", () => alert("WayInnerElement"));
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/EventPropagationControlled.html 0 → 100755
+ 27
− 0
View file @ e9105b7b
<!doctype html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8" />
</head>
<body>
<div id="OuterElement">
This text is part of the
outer element.<br><br><br>
<div id="InnerElement">
&nbsp&nbsp;This text is part of the inner element.<br><br><br>
<div id="WayInnerElement">
&nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;This text is part of the way inner element :)<br><br><br>
</div>
</div>
</div>
<script>
/* We can control which event-handling order we want by using a boolean value in addEventLister. */
/* If the value is false (or not present) bubbling will be used; otherwise capturing */
document.getElementById("OuterElement").addEventListener("click", () => alert("OuterElement"), true);
document.getElementById("InnerElement").addEventListener("click", () => alert("InnerElement"), true);
document.getElementById("WayInnerElement").addEventListener("click", () => alert("WayInnerElement"), true);
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/FunctionContextCorrecta.html 0 → 100755
+ 46
− 0
View file @ e9105b7b
<!doctype html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8" />
</head>
<body>
<form>
<input type="button" id="testCustomType" value="TestCustomType">
<input type="button" id="terpButton" value="TerpButton">
<input type="button" id="checkState" value="CheckState">
</form>
<div id="displayArea"></div>
<script>
function displayMessage(message) {
document.getElementById("displayArea").innerHTML = message;
}
function ButtonState() {
var self = this; /* instead of self we could have used that */
self.clicked = false;
self.setClicked = function() { self.clicked = true; alert(`Button Selected: ${self.clicked}`);};
self.getClicked = function() { return self.clicked; };
}
document.getElementById("testCustomType").addEventListener("click", function() {
const buttonState = new ButtonState();
let output = `Initial Button State: ${buttonState.getClicked()}<br>`;
buttonState.setClicked();
output += `After State Change: ${buttonState.getClicked()}<br>`;
displayMessage(output);
});
const terpButtonState = new ButtonState();
/* Using above custom type to keep track of click state */
document.getElementById("terpButton").addEventListener("click", terpButtonState.setClicked);
/* displaying state of above ButtonState */
document.getElementById("checkState").addEventListener("click", function() {
displayMessage("terpButtonState.getClicked(): " + terpButtonState.getClicked());
});
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/FunctionContextCorrectb.html 0 → 100755
+ 47
− 0
View file @ e9105b7b
<!doctype html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8" />
</head>
<body>
<form>
<input type="button" id="testCustomType" value="TestCustomType">
<input type="button" id="terpButton" value="TerpButton">
<input type="button" id="checkState" value="CheckState">
</form>
<div id="displayArea"></div>
<script>
function displayMessage(message) {
document.getElementById("displayArea").innerHTML = message;
}
function ButtonState() {
this.clicked = false;
/* Arrow functions do not have their own this reference; they remember */
/* this parameter at the point they are defined */
this.setClicked = () => { this.clicked = true; alert(`Button Selected: ${this.clicked}`);};
this.getClicked = () => { return this.clicked; };
}
document.getElementById("testCustomType").addEventListener("click", function() {
const buttonState = new ButtonState();
let output = `Initial Button State: ${buttonState.getClicked()}<br>`;
buttonState.setClicked();
output += `After State Change: ${buttonState.getClicked()}<br>`;
displayMessage(output);
});
const terpButtonState = new ButtonState();
/* Using above custom type to keep track of click state */
document.getElementById("terpButton").addEventListener("click", terpButtonState.setClicked);
/* displaying state of above ButtonState */
document.getElementById("checkState").addEventListener("click", function() {
displayMessage("terpButtonState.getClicked(): " + terpButtonState.getClicked());
});
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/FunctionContextCorrectc.html 0 → 100755
+ 47
− 0
View file @ e9105b7b
<!doctype html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8" />
</head>
<body>
<form>
<input type="button" id="testCustomType" value="TestCustomType">
<input type="button" id="terpButton" value="TerpButton">
<input type="button" id="checkState" value="CheckState">
</form>
<div id="displayArea"></div>
<script>
function displayMessage(message) {
document.getElementById("displayArea").innerHTML = message;
}
function ButtonState() {
this.clicked = false;
this.setClicked = function() { this.clicked = true; alert(`Button Selected: ${this.clicked}`);};
this.getClicked = function() { return this.clicked; };
}
document.getElementById("testCustomType").addEventListener("click", function() {
const buttonState = new ButtonState();
let output = `Initial Button State: ${buttonState.getClicked()}<br>`;
buttonState.setClicked();
output += `After State Change: ${buttonState.getClicked()}<br>`;
displayMessage(output);
});
const terpButtonState = new ButtonState();
/* Using above custom type to keep track of click state */
/* Using bind to define object to use */
const setClickedBound = terpButtonState.setClicked.bind(terpButtonState);
document.getElementById("terpButton").addEventListener("click", setClickedBound);
/* displaying state of above ButtonState */
document.getElementById("checkState").addEventListener("click", function() {
displayMessage("terpButtonState.getClicked(): " + terpButtonState.getClicked());
});
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/FunctionContextIncorrect.html 0 → 100755
+ 47
− 0
View file @ e9105b7b
<!doctype html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8" />
</head>
<body>
<form>
<input type="button" id="testCustomType" value="TestCustomType">
<input type="button" id="terpButton" value="TerpButton">
<input type="button" id="checkState" value="CheckState">
</form>
<div id="displayArea"></div>
<script>
function displayMessage(message) {
document.getElementById("displayArea").innerHTML = message;
}
function ButtonState() {
this.clicked = false;
this.setClicked = function() { this.clicked = true; alert(`Button Selected: ${this.clicked}`);};
this.getClicked = function() { return this.clicked; };
}
document.getElementById("testCustomType").addEventListener("click", function(e) {
console.log(e.target)
console.log(this)
const buttonState = new ButtonState();
let output = `Initial Button State: ${buttonState.getClicked()}<br>`;
buttonState.setClicked();
output += `After State Change: ${buttonState.getClicked()}<br>`;
displayMessage(output);
});
const terpButtonState = new ButtonState();
/* Using above custom type to keep track of click state */
document.getElementById("terpButton").addEventListener("click", terpButtonState.setClicked);
/* displaying state of above ButtonState */
document.getElementById("checkState").addEventListener("click", function() {
displayMessage("terpButtonState.getClicked(): " + terpButtonState.getClicked());
});
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/Generator1.html 0 → 100755
+ 32
− 0
View file @ e9105b7b
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Example</title>
</head>
<body>
<script>
function *numGenerator() {
document.writeln("In generator<br>");
yield 10;
yield 20;
// return "Really Done"; /* What if you comment this out? *?
}
let myGen = numGenerator();
document.writeln("After creating generator<br>");
let entry = myGen.next();
document.writeln(entry.value + ", " + entry.done + "<br>");
entry = myGen.next();
document.writeln(entry.value + ", " + entry.done + "<br>");
entry = myGen.next();
document.writeln(entry.value + ", " + entry.done + "<br>");
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/Generator2.html 0 → 100755
+ 30
− 0
View file @ e9105b7b
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Example</title>
</head>
<body>
<script>
function *oddNumGenerator(max) {
for (let i = 1; i <= max; i += 2) {
yield i;
}
}
let myGen = oddNumGenerator(10);
let entry = myGen.next();
document.writeln(entry.value + ", " + entry.done + "<br>");
entry = myGen.next();
document.writeln(entry.value + ", " + entry.done + "<br>");
entry = myGen.next();
document.writeln(entry.value + ", " + entry.done + "<br>");
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/GeneratorInClass.html 0 → 100755
+ 46
− 0
View file @ e9105b7b
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Example</title>
</head>
<body>
<script>
class SummerCourse {
constructor(name, credits) {
this.name = name;
this.credits = credits;
this.headTA = "Mary";
this.grader = "Peter";
}
toString() {
return `${this.name}, ${this.credits}`;
}
* taGenerator() {
document.writeln("Beginning of generator<br>");
yield this.headTA;
yield this.grader;
}
}
let course = new SummerCourse("cmsc111", 4);
document.writeln(course + "<br>");
let generator = course.taGenerator();
let ta = generator.next();
document.writeln(ta.value + ", " + ta.done + "<br>");
ta = generator.next();
document.writeln(ta.value + ", " + ta.done + "<br>");
ta = generator.next();
document.writeln(ta.value + ", " + ta.done + "<br>");
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/ImmediatelyInvokedFunctionExpression.html 0 → 100755
+ 20
− 0
View file @ e9105b7b
<!doctype html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8" />
</head>
<body>
<script>
/* Immediately Invoked Function Expression (IIFE) */
/* Placing the function expression within parenthesis */
document.writeln("IIFE<br>");
(function (x, y) {
document.writeln(x * y);
} (4, 6));
document.writeln("End of IIFE<br>");
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/Iterable1.html 0 → 100755
+ 24
− 0
View file @ e9105b7b
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Example</title>
</head>
<body>
<script>
"use strict";
let message = "Fear the turtle";
for (let char of message) {
document.writeln(char + "<br>");
}
// Accessing the iterator
document.writeln("Accessing iterator<br>");
let strIterator = message[Symbol.iterator]();
document.writeln(strIterator.next().value);
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/Iterable2.html 0 → 100755
+ 38
− 0
View file @ e9105b7b
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Example</title>
</head>
<body>
<script>
class SummerCourse {
constructor(name, credits) {
this.name = name;
this.credits = credits;
this.headTA = "Mary";
this.grader = "Peter";
}
toString() {
return `${this.name}, ${this.credits}`;
}
* [Symbol.iterator]() {
yield this.headTA;
yield this.grader;
}
}
let course = new SummerCourse("psyc200", 3);
document.writeln(course + "<br>");
for (let ta of course) {
document.writeln(ta + "<br>");
}
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/MethodDefinitions.html 0 → 100755
+ 29
− 0
View file @ e9105b7b
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Example</title>
</head>
<body>
<script>
"use strict";
let doctor = {
printSpecialty: function() {
document.writeln("heart<br>");
},
/* not using function */
printDailySchedule(patients, minutes) {
document.writeln("Total time: " + patients * minutes + "<br>");
}
}
doctor.printSpecialty();
doctor.printDailySchedule(10, 20);
</script>
</body>
</html>
\ No newline at end of file
codeExamples/week1/EventsJSClassesCode/ObjectMethods.html 0 → 100755
+ 33
− 0
View file @ e9105b7b
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Example</title>
</head>
<body>
<script>
"use strict";
let personsInfo = { name: "Bob", age:24 };
let personsCourses = { course1: "ENGL101", course2: "PSYC100"};
let combined = Object.assign(personsInfo, personsCourses);
/* Notice use of for in */
for (let key in combined) {
document.writeln(key + ": " + combined[key] + "<br>");
}
let student1 = { name: "Tom" };
let student2 = { name: "Mary" };
let student3 = { name: "Tom" };
document.writeln("Object.is(NaN, NaN): " + Object.is(NaN, NaN) + "<br>");
document.writeln("Object.is(student1, student2): " + Object.is(student1, student2) + "<br>");
document.writeln("Object.is(student1, student3): " + Object.is(student1, student3) + "<br>");
document.writeln("Object.is(student1, student1): " + Object.is(student1, student1) + "<br>");
</script>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment