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

adding week1 lecture slides and code examples

parent 7347d04c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 322 additions and 0 deletions
LectureCodeExamples/Week1/RestSpreadOpsArrayFuncCode/Filter.html 0 → 100755
+ 25
− 0
View file @ b82f1c02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Filter Method</title>
</head>
<body>
<script>
"use strict";
document.writeln("***** <strong>Example #1</strong> Using map function to double values *****<br>");
let numbers = [2, 7, 30, 44, 5];
let evenValues = numbers.filter(num => num % 2 === 0);
document.writeln(`Original array: ${numbers}<br>`);
document.writeln(`New array: ${evenValues} <br><br>`);
document.writeln("*****<strong>Example #2</strong> Using map function to triple values *****<br>");
let names = ["Rose", "Peter", "Bob", "Al", "Kathy"]
let greaterThan = names.filter(name => name.localeCompare("Kathy") > 0);
document.writeln(`Original array: ${names} <br>`);
document.writeln(`New array: ${greaterThan}`);
</script>
</body></html>
\ No newline at end of file
LectureCodeExamples/Week1/RestSpreadOpsArrayFuncCode/ForMapIndex.html 0 → 100755
+ 51
− 0
View file @ b82f1c02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Example</title>
<script>
"use strict";
let data=[77, 88, 99];
let initialValue = 0;
document.writeln("<br>========= forEach =========<br>");
let result = data.forEach((elem, index, array) => {
document.writeln(`elem: ${elem}<br>`);
document.writeln(`index: ${index}<br>`);
document.writeln(`array: ${array}<br>`);
document.writeln("*** next ***<br>");
});
document.writeln(`Result ${result}<br>`);
document.writeln("<br>========= map =========<br>");
result = data.map((elem, index, array) => {
document.writeln(`elem: ${elem}<br>`);
document.writeln(`index: ${index}<br>`);
document.writeln(`array: ${array}<br>`);
document.writeln("*** next ***<br>");
// return elem; // uncomment to add elem to result
});
document.writeln(`Result ${result}<br>`);
document.writeln("<br>========= filter =========<br>");
result = data.filter((elem, index, array) => {
document.writeln(`elem: ${elem}<br>`);
document.writeln(`index: ${index}<br>`);
document.writeln(`array: ${array}<br>`);
document.writeln("*** next ***<br>");
// return true; // uncomment to add elem to result
});
document.writeln(`Result ${result}<br>`);
document.writeln("<br>========= every =========<br>");
result = data.every((elem, index, array) => {
document.writeln(`elem: ${elem}<br>`);
document.writeln(`index: ${index}<br>`);
document.writeln(`array: ${array}<br>`);
document.writeln("*** next ***<br>");
// return true; // uncomment to return true
});
document.writeln(`Result ${result}<br>`);
</script>
</head>
</html>
\ No newline at end of file
LectureCodeExamples/Week1/RestSpreadOpsArrayFuncCode/Reduce.html 0 → 100755
+ 67
− 0
View file @ b82f1c02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Example</title>
</head>
<body>
<script>
"use strict";
let initialValue = 0;
let data = [2, 2, 3];
document.writeln("<br>========= Case 1 (Sum) =========<br>");
const sum = data.reduce((result, elem) => {
return result + elem;
}, initialValue);
document.writeln(`Sum: ${sum}`);
initialValue = 1;
data = [2, 2, 3];
document.writeln("<br>========= Case 2 (Product) =========<br>");
const product = data.reduce((result, elem) => {
return result * elem;
}, initialValue);
document.writeln(`Product: ${product}`);
data = [2, 2, 3];
document.writeln("<br>========= Case 3 (Product (no initialValue)) =========<br>");
const product2 = data.reduce((result, elem) => {
return result * elem;
});
document.writeln(`Product: ${product2}`);
data=[77, 88, 99];
initialValue = 0;
document.writeln("<br>========= Case 4 (with initialValue)=========<br>");
data.reduce((result, elem, index, array) => {
document.writeln(`result: ${result}<br>`);
document.writeln(`elem: ${elem}<br>`);
document.writeln(`index: ${index}<br>`);
document.writeln(`array: ${array}<br>`);
document.writeln("*** next ***<br>");
}, initialValue);
document.writeln("<br>========= Case 5 (no initialValue)=========<br>");
data.reduce((result, elem, index, array) => {
document.writeln(`result: ${result}<br>`);
document.writeln(`elem: ${elem}<br>`);
document.writeln(`index: ${index}<br>`);
document.writeln(`array: ${array}<br>`);
document.writeln("*** next ***<br>");
});
document.writeln("<br>========= Case 6 (returning 20)=========<br>");
data.reduce((result, elem, index, array) => {
document.writeln(`result: ${result}<br>`);
document.writeln(`elem: ${elem}<br>`);
document.writeln(`index: ${index}<br>`);
document.writeln(`array: ${array}<br>`);
document.writeln("*** next ***<br>");
return 20;
}, initialValue);
</script>
</body>
</html>
\ No newline at end of file
LectureCodeExamples/Week1/RestSpreadOpsArrayFuncCode/ReduceObject.html 0 → 100755
+ 41
− 0
View file @ b82f1c02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Example</title>
</head>
<body>
<script>
"use strict";
const employees = [
{
name: "John",
salary: 10000,
},
{
name: "Kelly",
salary: 50000,
},
{
name: "Sarah",
salary: 2000,
},
];
const totalSalary = employees.reduce((result, elem) => {
return result + elem.salary;
}, 0);
document.writeln(`totalSalary: ${totalSalary}<br>`);
const avgSalary = employees.reduce((result, elem) => {
return result + elem.salary / employees.length;
}, 0);
document.writeln(`avgSalary: ${avgSalary}<br>`);
const maxSalary = employees.reduce((result, elem) => {
return result > elem.salary ? result : elem.salary;
}, 0);
document.writeln(`maxSalary: ${maxSalary}<br>`);
</script>
</body>
</html>
LectureCodeExamples/Week1/RestSpreadOpsArrayFuncCode/RestOperator.html 0 → 100755
+ 21
− 0
View file @ b82f1c02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JS Rest Operator Example</title>
</head>
<body>
<script>
"use strict";
partyInfo("FirstParty", "Ali", "Theresa", "Arushi");
document.writeln("<br>*****<br>");
partyInfo("SecondParty", "Josh", "Trenton");
function partyInfo(partyName, host, ...guests) {
document.writeln(`Party name: ${partyName}, Host: ${host}<br>`);
document.writeln(`Guests: ${guests}`);
}
</script>
</body>
</html>
LectureCodeExamples/Week1/RestSpreadOpsArrayFuncCode/Set.html 0 → 100755
+ 61
− 0
View file @ b82f1c02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Set Example</title>
</head>
<body>
<script>
"use strict";
/* Notice the use of const instead of let */
const mySet = new Set();
const student1 = {
name: "Mike",
id: 10
};
const student2 = {
name: "Rose",
id: 20
};
document.writeln("<strong>Example #1</strong> Adding entries to set<br><br>");
mySet.add(150);
mySet.add(student1).add(student2); /* Add is chainable */
document.writeln("Set size: " + mySet.size + "<br>");
document.writeln("Set Entries<br>");
for (let entry of mySet) {
document.writeln(entry + "<br>");
}
document.writeln("150 part of the set? " + mySet.has(150) + "<br><hr>");
document.writeln("<br><strong>Example #2</strong> After deleting an entry<br><br>");
mySet.delete(student1);
for (let entry of mySet) {
document.writeln(entry + "<br>");
}
document.writeln("<hr>");
document.writeln("<br><strong>Example #3</strong> After clearing the set<br>");
mySet.clear();
for (let entry of mySet) {
document.writeln(entry + "<br>");
}
document.writeln("<hr>");
document.writeln("<br><strong>Example #4</strong> Set based on array (removing duplicates)<br>");
let arr = ["C", "JavaScript", "Pascal", "Pascal", "C", "Nava"];
document.writeln(`Array: ${arr}<br>`);
let setFromArray = new Set(arr);
document.writeln("Iterating over set:<br>");
for (let value of setFromArray) {
document.writeln(`${value}<br>`);
}
</script>
</body>
</html>
LectureCodeExamples/Week1/RestSpreadOpsArrayFuncCode/SpreadOperator.html 0 → 100755
+ 56
− 0
View file @ b82f1c02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Spread Operator Example</title>
</head>
<body>
<script>
"use strict";
process(1, 10, 2, "DataTestOne");
process(...[1, 10, 2, "DataTestTwo", "DataTestThree"]);
process(1, ...[10, 2], "DataTestFour"); /* will not work without spread operator */
function process(start, end, delta, message) {
document.writeln(message + "<br>");
for (let i = start; i <= end; i += delta) {
document.writeln(i + " ");
}
document.writeln("<br>");
document.writeln("arguments.length: " + arguments.length + "<br>");
document.writeln("arguments[arguments.length - 1]: " + arguments[arguments.length - 1])
document.writeln("<br>### Arguments: ###<br>");
for (let val of arguments) {
document.writeln(`Argument: ${val}|`);
}
document.writeln("<br>***** END *****<br><br>");
}
document.writeln("***** Combining arrays *****<br>");
let part1 = ["C", "Java"];
let part2 = ["Python"];
let combined = [...part1, ...part2];
document.writeln(combined.join() + "<br><br>");
document.writeln("***** Computing maximum of arrays *****<br>");
let numArray1 = [1, -21, 3, 4];
let numArray2 = [9, 3, -8, 10, 7];
document.writeln(`Maximum is: ${Math.max(...numArray1, ...numArray2)}<br><br>`);
document.writeln("***** Breaking Strings *****<br>");
let string = "CMSCXYZ";
let charArray = [...string];
document.writeln(`Original: ${string}<br>`);
document.writeln(`As array: ${charArray}<br>`);
document.writeln(`Type of character: ${typeof charArray[0]}<br>`);
</script>
</body>
</html>
LectureSlides/Week1/JSObjectsFetch.pdf 0 → 100644
+ 0
− 0
View file @ b82f1c02
File added
LectureSlides/Week1/JavaScriptII.pdf 0 → 100644
+ 0
− 0
View file @ b82f1c02
File added
LectureSlides/Week1/JavaScriptIII.pdf 0 → 100644
+ 0
− 0
View file @ b82f1c02
File added
LectureSlides/Week1/JavaScriptIV.pdf 0 → 100644
+ 0
− 0
View file @ b82f1c02
File added
LectureSlides/Week1/JavaScriptIntro.pdf 0 → 100644
+ 0
− 0
View file @ b82f1c02
File added
LectureSlides/Week1/ObjsOps.pdf 0 → 100644
+ 0
− 0
View file @ b82f1c02
File added
LectureSlides/Week1/RestSpreadOpsArrayFunc.pdf 0 → 100644
+ 0
− 0
View file @ b82f1c02
File added
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