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

adding events code

parent 43b3fded
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 417 additions and 0 deletions
LectureCodeExamples/Week2/EventsCode/Animation.html 0 → 100755
+ 43
− 0
View file @ 4df98db5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animation Example</title>
</head>
<body onload="main()">
<h1>Animation Example</h1>
<img id="myImage" src="images/Testudo1.jpg" width="444" height="293" alt="animationImg"><br>
<input type="button" onclick="stopAnimation()" value="Stop Animation">
<input type="button" onclick="main()" value="Resume Animation">
<script>
let idGlobal;
const intervalInMilliseconds = 1000;
function main() {
/* setInterval calls the function swapImages at the specified rate */
idGlobal = setInterval("swapImages()", intervalInMilliseconds);
}
function swapImages() {
let imageElement = document.querySelector("#myImage");
let currentImage = imageElement.src, nextImage;
if (currentImage.includes("Testudo1.jpg")) {
nextImage = "images/Testudo2.jpg";
} else if (currentImage.includes("Testudo2.jpg")) {
nextImage = "images/Testudo3.jpg";
} else {
nextImage = "images/Testudo1.jpg";
}
imageElement.src = nextImage;
}
function stopAnimation() {
clearInterval(idGlobal);
alert("Animation Stopped");
}
</script>
</body></html>
\ No newline at end of file
LectureCodeExamples/Week2/EventsCode/ArrowFunctions.html 0 → 100755
+ 50
− 0
View file @ 4df98db5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Example</title>
</head>
<body>
<script>
"use strict";
/* Anonymous function */
let productFunc = function(x) {
return x * 3;
}
document.writeln("productFunc(10): " + productFunc(10) + "<br>");
/* No parameters */
let initialValue = () => 1000;
document.writeln("initialValue(): " + initialValue() + "<br>");
/* One parameter and expression as returned value */
let prod2 = x => x * 2;
document.writeln("prod2(10): " + prod2(10) + "<br>");
/* More than one parameter and expression as returned value */
let sum = (x, y, z) => x + y + z;
document.writeln("sum(10, 2, 4): " + sum(10, 2, 4) + "<br>");
/* We need curly brackets */
let formatted = x => {
x++;
return `Value: ${x}`; /* return is needed */
};
document.writeln("formatted(5): " + formatted(5) + "<br>")
/* Using functions with sort() */
let scores = [10, 1, 44, 200];
let sortedAttempt1 = scores.sort();
document.writeln("sortedAttempt1 (Wrong): " + sortedAttempt1 + "<br>");
let sortedAttempt2 = scores.sort((a, b) => a - b);
document.writeln("sortedAttempt2 (Correct): " + sortedAttempt2 + "<br>");
</script>
</body>
</html>
LectureCodeExamples/Week2/EventsCode/AssociateButtonWithFunction.html 0 → 100755
+ 42
− 0
View file @ 4df98db5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Associate Button with Function</title>
</head>
<body onload="main()"> <!-- Important; we are executing main() once document is ready -->
<form>
<input type="button" id="displayMessageButton" value="Display Message">
<input type="button" value="Display School Name" onclick="displaySchoolName()">
<input type="button" id="displayTimeButton" value="Display time">
</form>
<script>
/*
* main is now being called in <body> onload = "main()" says:
* "execute main when page has been created"
*/
function main() {
/* Next statement allow us to access the button from JavaScript */
let buttonInHTMLForm = document.getElementById("displayMessageButton");
/* Following assignment says: when the button is clicked on call the displayValue function */
buttonInHTMLForm.onclick = displayMessage; // DO NOT PUT ()
document.querySelector("#displayTimeButton").addEventListener("click", () => alert(new Date()));
}
function displayMessage() {
alert("Fear the turtle");
}
function displaySchoolName() {
alert("UMCP");
}
</script>
</body>
</html>
LectureCodeExamples/Week2/EventsCode/GetSetAttribute1.html 0 → 100755
+ 39
− 0
View file @ 4df98db5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get/Set Attribute in HTML Element</title>
</head>
<body onload="main()">
<form>
<img id="theImage" src="images/Testudo1.jpg" alt="viewerImg"><br>
<input type="button" id="changeImageButton" value="Change Image"><br>
You can also change the image by double-clicking on the image.
</form>
<script>
function main() {
document.querySelector("#changeImageButton").onclick = changeImage;
let imageElement = document.querySelector("#theImage");
// imageElement.ondblclick = changeImage; // When double-clicking on image we call changeImage
// same as above but using addEventListener
imageElement.addEventListener("dblclick", changeImage);
}
function changeImage() {
let imageElement = document.getElementById("theImage");
let currentPhoto = imageElement.getAttribute("src"); // retrieving value of src attribute
alert("Current photo being displayed is: " + currentPhoto);
let photoToDisplay = prompt("Enter name of photo to display (Testudo1.jpg, Testudo2.jpg, Testudo3.jpg)", "images/Testudo2.jpg");
imageElement.setAttribute("src", photoToDisplay);
}
</script>
</body>
</html>
LectureCodeExamples/Week2/EventsCode/GetSetAttribute2.html 0 → 100755
+ 34
− 0
View file @ 4df98db5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get/Set Attribute in HTML Element</title>
</head>
<body onload="main()">
<form>
<img id="theImage" src="images/Testudo1.jpg" alt="viewerImg"><br>
<input type="button" id="changeImageButton" value="Change Image"><br>
You can change also change the image by double clicking on the image.
</form>
<script>
function main() {
document.querySelector("#changeImageButton").onclick = changeImage;
document.querySelector("#theImage").ondblclick = changeImage;
}
function changeImage() {
let currentPhoto = document.querySelector("#theImage").src;
alert("Current photo being displayed is: " + currentPhoto);
let photoToDisplay = prompt("Enter name of photo to display (Testudo1.jpg, Testudo2.jpg, Testudo3.jpg)", "images/Testudo2.jpg");
document.querySelector("#theImage").src = photoToDisplay;
}
</script>
</body>
</html>
LectureCodeExamples/Week2/EventsCode/GetValueInTextField.html 0 → 100755
+ 40
− 0
View file @ 4df98db5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Value in Text Field</title>
</head>
<body onload="main()">
<!-- Notice this elements are not in a form (if you want a reset button you need form)-->
Enter Value
<input type="text" id="myTextField" value="NoValue"><br><br>
<input type="button" id="displayValueButton" value="Display Value"><br><br>
<script>
function main() {
/* Adding two tasks to same event */
document.getElementById("displayValueButton").addEventListener("click", displayValue);
document.getElementById("displayValueButton").addEventListener("click", extraTask);
}
function displayValue() {
let myTextFieldInHTMLForm = document.getElementById("myTextField");
/* To get the value from the text field you need to use value */
let textProvided = myTextFieldInHTMLForm.value;
alert("The value the user entered is: " + textProvided);
alert("Adding 10 to the value provided generates: " + (textProvided + 10));
}
function extraTask() {
alert("Extra task called");
}
</script>
</body>
</html>
LectureCodeExamples/Week2/EventsCode/GetValueOnChange.html 0 → 100755
+ 32
− 0
View file @ 4df98db5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Value in Text Field</title>
</head>
<body onload="main()">
<form>
Provide value and press enter:
<input type="text" id="myTextField" style="width:100px"><br>
</form>
<script>
function main() {
document.querySelector("#myTextField").onchange = displayValue;
}
function displayValue() {
/* To get the value from the text field you need to use value */
let textProvided = document.querySelector("#myTextField").value;
alert("Value Provided: " + textProvided);
alert("Adding 10 to the value provided generates: " + (Number(textProvided) + 10));
}
</script>
</body>
</html>
LectureCodeExamples/Week2/EventsCode/InnerHTML.html 0 → 100755
+ 44
− 0
View file @ 4df98db5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inner HTML</title>
</head>
<body onload="main()">
<!-- Do not include input element in form -->
Provide value and press enter:
<input type="text" id="myTextField" style="width:100px"><br>
<div id="displayArea">
</div>
<script>
function main() {
document.querySelector("#myTextField").onchange = displaySqrts;
}
function displaySqrts() {
let maximum = Number(document.querySelector("#myTextField").value);
let answer = "<table border='1'>";
for (let i = 1; i <= maximum; i++) {
answer += `<tr><td>${i}</td><td>${Math.sqrt(i)}</td><tr>`;
}
answer += "</table>";
// Try usingInner = true or usingInner = false
let usingInner = true;
if (usingInner) {
document.querySelector("#displayArea").innerHTML = answer;
} else {
document.writeln(answer);
}
}
</script>
</body>
</html>
LectureCodeExamples/Week2/EventsCode/LoadingJSFromFile.html 0 → 100755
+ 18
− 0
View file @ 4df98db5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inner HTML</title>
<script src="code.js" defer></script> <!-- Notice defer specification -->
</head>
<body> <!-- no longer using onload = "main()" -->
Provide value and press enter:
<input type="text" id="myTextField" style="width:100px"><br>
<div id="displayArea">
</div>
</body>
</html>
LectureCodeExamples/Week2/EventsCode/SetTimeout.html 0 → 100755
+ 24
− 0
View file @ 4df98db5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Example</title>
</head>
<body>
<h1>Message will appear soon, please wait ...</h1>
<script>
"use strict";
const delayInMilliSeconds = 4000;
setTimeout("message()", delayInMilliSeconds);
function message() {
alert("Be Real :)")
}
</script>
</body>
</html>
LectureCodeExamples/Week2/EventsCode/UpdateValueInTexField.html 0 → 100755
+ 34
− 0
View file @ 4df98db5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Update Value in Text Field</title>
</head>
<body onload="main()">
<form>
Enter Value
<input type="text" id="myTextField" value="4"><br><br>
<input type="button" id="ComputeValueButton" value="Compute Sqrt">
(press button multiple times and look at textfield)<br><br>
<input type="reset" value="Reset">
</form>
<script>
function main() {
document.getElementById("ComputeValueButton").onclick = displayValue; // DO NOT PUT ()
}
function displayValue() {
let myTextFieldElement = document.getElementById("myTextField");
let textProvided = myTextFieldElement.value;
let numericValue = Number(textProvided);
/* Updating the textfield */
myTextFieldElement.value = Math.sqrt(numericValue);
}
</script>
</body>
</html>
\ No newline at end of file
LectureCodeExamples/Week2/EventsCode/code.js 0 → 100755
+ 17
− 0
View file @ 4df98db5
document.querySelector("#myTextField").onchange = displaySqrts;
function displaySqrts() {
let maximum = Number(document.querySelector("#myTextField").value);
let answer = "<table border='1'>";
for (let i = 1; i <= maximum; i++) {
answer += "<tr>";
answer += "<td>" + i + "</td>";
answer += "<td>" + Math.sqrt(i) + "</td>";
answer += "</tr>";
}
answer += "</table>";
document.querySelector("#displayArea").innerHTML = answer;
}
LectureCodeExamples/Week2/EventsCode/images/Testudo1.jpg 0 → 100755
+ 0
− 0
View file @ 4df98db5
LectureCodeExamples/Week2/EventsCode/images/Testudo1.jpg

18.1 KiB

LectureCodeExamples/Week2/EventsCode/images/Testudo2.jpg 0 → 100755
+ 0
− 0
View file @ 4df98db5
LectureCodeExamples/Week2/EventsCode/images/Testudo2.jpg

26.5 KiB

LectureCodeExamples/Week2/EventsCode/images/Testudo3.jpg 0 → 100755
+ 0
− 0
View file @ 4df98db5
LectureCodeExamples/Week2/EventsCode/images/Testudo3.jpg

17.3 KiB

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