Міністерство освіти і науки України

Івано-Франківський національний технічний університет нафти і газу

Кафедра КСМ

Лабораторна робота № 7
на тему:
«Опрацювання подій в DOM-моделі»

Виконав:
ст. гр. КІ-22-1
Гулик Р.О.
Перевірив:
Слабінога М.О.

м. Івано-Франківськ
2023
 Мета: Навчитись редагувати данні сторінки через події.
Завдання:

Для завдання "Оцінки студентів":

1. Створіть форму для додавання нових даних та додайте обробник події

2. Додайте кнопки видалення та редагування до записів в таблиці. Додайте

відповідні обробники подій.

Для другого завдання (геометричні фігури, тощо), додайте тільки можливість

редагування

Хід Роботи
Варіант 5
Завдання 1.
JS файл(код):
class Student{
constructor(number,name,math,prog,os,calc){
this.number=number;
this.name=name;
this.math=null;
this.prog=null;
this.os=null;
this.calc=null;
}
setName(name){
this.name=name;
}
setMarks(math,prog,os,calc){
if(typeof(math)=="number"){
this.math=math;
}
if(typeof(prog)=="number"){
this.prog=prog;
}
if(typeof(os)=="number"){
this.os=os;
}
if(typeof(calc)=="number"){
this.calc=calc;
}
}

getStudentInfo(){
 return this.number+`. `+this.name+` `+(this.math?this.math:"-")+` `+
(this.prog?this.prog:"-")+` `+(this.os?this.os:"-")+` `+(this.calc?this.calc:"-");
}
getStudentInfoAsTableRow(){
return `<tr>
<td>`+ this.number+`</td>
<td>`+ this.name+`</td>
<td>`+(this.math?this.math:"-")+`</td>
<td>`+(this.prog?this.prog:"-")+`</td>
<td>`+(this.os?this.os:"-")+`</td>
<td>`+ (this.calc?this.calc:"-")+`</td>
<td><button data-id="`+ this.number+`" class="edit-
student">Edit</button><button data-id="`+ this.number+`" class="delete-
student">Delete</button></td>
</tr>`
}
}

class StudentList{
constructor(){
this.list=[];
this.count=0;
this.isAveragesCalculated=false;
}
addStudent(name){
this.count++;
let newStudent= new Student(this.count,name);
this.list.push(newStudent);
this.isAveragesCalculated=false;
return this.count;
}
editStudentName(number,name){
for(let i=0;i<this.list.length;i++){
if(number==this.list[i].number){
this.list[i].setName(name);
break;
}
}
}
editStudentMarks(number,math,prog,os,calc){
for(let i=0;i<this.list.length;i++){
if(number==this.list[i].number){
this.list[i].setMarks(math,prog,os,calc);
break;
}
}
}
deleteStudent(number){
for(let i=0;i<this.list.length;i++){
if(number==this.list[i].number){
this.list.splice(i,1);
break;
}
 }
}
getStudentById(number){
for(let i=0;i<this.list.length;i++){
if(number==this.list[i].number){
return this.list[i];
}
}
}
displayList(){
for(let i=0;i<this.list.length;i++){
console.log(this.list[i].getStudentInfo());
}
console.log("Average score group of Mathematical analysis:
",this.averageM);
console.log('Average score group of Programming: ',this.averageP);
console.log('Average score group of Operational systems: ',this.averageO);
console.log('Average score group of Math: ',this.averageC);
}
calcMath(){
this.n=0;
this.SumM=0;
for(let i=0;i<this.list.length;i++){
this.SumM+=this.list[i].math;
this.n++;
}
this.averageM=this.SumM/this.n;
return this.averageM;
}
calcProg(){
this.n=0;
this.SumP=0;
for(let i=0;i<this.list.length;i++){
this.SumP+=this.list[i].prog;
this.n++;
}
this.averageP=this.SumP/this.n;
return this.averageP;
}
calcOs(){
this.n=0;
this.SumO=0;
for(let i=0;i<this.list.length;i++){
this.SumO+=this.list[i].os;
this.n++;
}
this.averageO=this.SumO/this.n;
return this.averageO;
}
calcCalc(){
this.n=0;
this.SumC=0;
for(let i=0;i<this.list.length;i++){
 this.SumC+=this.list[i].calc;
this.n++;
}
this.averageC=this.SumC/this.n;
return this.averageC;
}
displayListAsTable(){
let content=``;
content+=`<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Mathematical analysis</th>
<th>Programming</th>
<th>Operation Systems</th>
<th>Math</th>
<th>Actions</th>
</tr>
</thead>
<tbody>`;
for(let i=0;i<this.list.length;i++){
content+=this.list[i].getStudentInfoAsTableRow();
}

content+=`</tbody>
</table>`;
content+=`<p>Average score group of Mathematical
analysis:`+this.averageM+`</p>`;
content+=`<p>Average score group of Programming:`+this.averageP+`</p>`;
content+=`<p>Average score group of Operational
systems:`+this.averageO+`</p>`;
content+=`<p>Average score group of Math:`+this.averageC+`</p>`;

document.getElementById('root').innerHTML=content;
}

let studentlist = new StudentList();

fetch('http://localhost/js-labs/students.json').then(function(response){
response.json().then( function(data){
for(let i=0;i<data.students.length;i++){
let studentId=studentlist.addStudent(data.students[i].name);

studentlist.editStudentMarks(studentId,data.students[i].math,data.students[i].prog,
data.students[i].os,data.students[i].calc)
}
studentlist.calcMath();
studentlist.calcProg();
studentlist.calcOs();
studentlist.calcCalc();
 studentlist.displayListAsTable();
});
} );
document.addEventListener('submit', function(event) {
if (event.target.matches('#studentForm')) {
event.preventDefault();
if(document.querySelector('#studentForm
input[name="id"]').value==""){
let studentName=document.querySelector('#studentForm
input[name="name"]').value;
let studentMath=Number(document.querySelector('#studentForm
input[name="math"]').value);
let studentProg=Number(document.querySelector('#studentForm
input[name="prog"]').value);
let studentOs=Number(document.querySelector('#studentForm
input[name="os"]').value);
let studentCalc=Number(document.querySelector('#studentForm
input[name="calc"]').value);
let studentId=studentlist.addStudent(studentName);

studentlist.editStudentMarks(studentId,studentMath,studentProg,studentOs,studentCal
c);
} else{
let studentName=document.querySelector('#studentForm
input[name="name"]').value;
let studentMath=Number(document.querySelector('#studentForm
input[name="math"]').value);
let studentProg=Number(document.querySelector('#studentForm
input[name="prog"]').value);
let studentOs=Number(document.querySelector('#studentForm
input[name="os"]').value);
let studentCalc=Number(document.querySelector('#studentForm
input[name="calc"]').value);
let studentId=Number(document.querySelector('#studentForm
input[name="id"]').value);
studentlist.editStudentName(studentId,studentName);

studentlist.editStudentMarks(studentId,studentMath,studentProg,studentOs,studentCal
c);
}
studentlist.calcMath();
studentlist.calcProg();
studentlist.calcOs();
studentlist.calcCalc();
studentlist.displayListAsTable();
document.querySelector('#studentForm').reset();
}
}, false);
document.addEventListener('click', function(event) {
if (event.target.matches('.delete-student')) {
event.preventDefault();
let studentId=event.target.getAttribute('data-id');
studentlist.deleteStudent(studentId);
 studentlist.displayListAsTable();
}
}, false);
document.addEventListener('click', function(event) {
if (event.target.matches('.edit-student')) {
event.preventDefault();
let studentId=event.target.getAttribute('data-id');
let studentData=studentlist.getStudentById(studentId);
document.querySelector('#studentForm
input[name="name"]').value=studentData.name;
document.querySelector('#studentForm
input[name="math"]').value=studentData.math;
document.querySelector('#studentForm
input[name="prog"]').value=studentData.prog;
document.querySelector('#studentForm
input[name="os"]').value=studentData.os;
document.querySelector('#studentForm
input[name="calc"]').value=studentData.calc;
document.querySelector('#studentForm
input[name="id"]').value=studentId;
}
}, false);

Результат:

Завдання 2.
JS файл(код):

class Vidrizok{
constructor(a,b,c){
this.a=null;
this.b=null;
this.c=null;
this.isDeleted=false;
}
setParameters(a,b,c){
if(typeof(a)=="number"){
this.a=a;
}
if(typeof(b)=="number"){
this.b=b;
}
if(typeof(c)=="number"){
this.c=c;
}

}
deleteVidrizok(){
delete this.a;
delete this.b;
delete this.c;
this.isDeleted=true;
}
calcArea(){
let p=(this.a+this.b+this.c)/2;
return Math.sqrt(p*(p-this.a)*(p-this.b)*(p-this.c));
}
calcPerimetry(){
return this.a+this.b+this.c;
}
displayVidrizokInfoAsHTML(){
let content=``;
content+=`<h2>Trikutnik</h2>`;
content+=`<h3></h3>`;
content+=`<p><b>Point A: </b>(`+this.a+`;`+this.b+`;`+this.c+`)</p>`;
content+='<td><button data-id="`+ this.number+`" class="edit-
trikutnik">Edit</button>';
content+=`<h3>Trikutnik parameters</h3>`;
content+=`<p><b>Area: </b>`+this.calcArea()+`</p>`;
content+=`<p><b>Perimetry: </b>`+this.calcPerimetry()+`</p>`;
document.getElementById('root').innerHTML=content;
}
}
class Trikutnik extends Vidrizok{}

fetch('http://localhost/js-labs/trikutniks.json').then(function(response){
response.json().then( function(data){
 let tr=new Trikutnik();
tr.setParameters(data.tr.a,data.tr.b,data.tr.c);
tr.displayVidrizokInfoAsHTML();
} );
});
document.addEventListener('submit', function(event) {
if (event.target.matches('#trikuntikForm')) {
event.preventDefault();
let a=Number(document.querySelector('#trikuntikForm
input[name="a"]').value);
let b=Number(document.querySelector('#trikuntikForm
input[name="b"]').value);
let c=Number(document.querySelector('#trikuntikForm
input[name="c"]').value);

let tr=new Trikutnik(a,b,c);

tr.displayVidrizokInfoAsHTML();
document.querySelector('#trikuntikForm').reset();
}
}, false);

Результат:

Висновок: на лабораторній роботі я навчився редагувати данні сторінки

через події.