Skip to content
Snippets Groups Projects
Commit 12a83c45 authored by zzzang12's avatar zzzang12
Browse files

Initialize project

parents
Branches main
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 759 additions and 0 deletions
.gitignore 0 → 100644
+ 2
− 0
View file @ 12a83c45
**/.DS_Store
\ No newline at end of file
Lab01/Lab01.pdf 0 → 100644
+ 0
− 0
View file @ 12a83c45
File added
Lab01/Lab01_201920756/Lab01_201920756.html 0 → 100644
+ 14
− 0
View file @ 12a83c45
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8" />
<title>Lab01</title>
</head>
<body>
<h1>2023.09.05 웹시설 1주차 실습</h1>
<h2>Student ID</h2>
<p>201920756</p>
<h3>Name</h3>
<p>이장원</p>
</body>
</html>
Lab02/Lab02.pdf 0 → 100644
+ 0
− 0
View file @ 12a83c45
File added
Lab02/Lab2_201920756/css/table-style.css 0 → 100644
+ 10
− 0
View file @ 12a83c45
table {
width: 50%;
text-align: center;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
\ No newline at end of file
Lab02/Lab2_201920756/exercise1.html 0 → 100644
+ 63
− 0
View file @ 12a83c45
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Exercise1</title>
<style>
.info {
border: 1px solid black;
padding: 2%;
font-size: 20px;
display: inline-block;
}
#country {
font-weight: bold;
}
</style>
</head>
<body>
<div class="info">
<div class="apple-image">
<h1>사과</h1>
<img src="image/apple.jpg" alt="사과" />
</div>
<hr />
<div class="history">
<h3>역사</h3>
<p>
<span style="color: red">사과나무</span>의 원산지는 발칸반도로 알려져 있으며<br />
B.C. 20세기 경의 <span id="country">스위스</span> 토굴 주거지에서 탄화된 사과가 발굴된 것으로 보아<br />
<ins>서양사과는 4,000년 이상의 재배 역사를 가진 것으로 추정된다.</ins><br />
<span id="country">그리스</span>시대에는 재배종, 야생종을 구분한 기록이 있고 접목 번식법이 이미 소개 되어 있을
정도로 재배 기술이 진보되었다.<br />
<span id="country">로마</span>시대에는 <i>Malus</i> 또는 <i>Malum</i>이란 명칭으로 재배가 성향하였고 그 후
16-17세기에 걸쳐 유럽 각지에 전파되었다.<br />
17세기에는 <span id="country">미국</span>에 전파되었고 20세기에는 <span id="country">칠레</span> 등 남미
각국에 전파되었다.<br />
</p>
</div>
<hr />
<div class="vitamin">
<h3>비타민</h3>
<ol style="list-style-type: upper-roman">
<li>
비타민 A
<ul>
<li>베타카로틴</li>
<li>루테인 제아잔틴</li>
</ul>
</li>
<li>티아민</li>
<li>리보플라빈</li>
</ol>
</div>
<hr />
<div class="reference">
출처 :
<a href="https://ko.wikipedia.org/wiki/사과">https://ko.wikipedia.org/wiki/%EC%82%AC%EA%B3%BC</a>
</div>
</div>
</body>
</html>
Lab02/Lab2_201920756/exercise2.html 0 → 100644
+ 55
− 0
View file @ 12a83c45
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/table-style.css" />
<title>Exercise2</title>
</head>
<body>
<table>
<caption>
주차장 B1 현황
</caption>
<col style="background-color: skyblue" />
<col style="background-color: pink" />
<col span="3" />
<col style="background-color: skyblue" />
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
<td>A5</td>
<td>A6</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
<td>B5</td>
<td>B6</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td rowspan="2" colspan="2" style="background-color: black; color: red">폐쇄</td>
<td>C5</td>
<td>C6</td>
</tr>
<td>D1</td>
<td>D2</td>
<td>D5</td>
<td>D6</td>
<tr>
<td>E1</td>
<td>E2</td>
<td>E3</td>
<td>E4</td>
<td>E5</td>
<td>E6</td>
</tr>
</table>
</body>
</html>
Lab02/Lab2_201920756/image/apple.jpg 0 → 100644
+ 0
− 0
View file @ 12a83c45
Lab02/Lab2_201920756/image/apple.jpg

20.1 KiB

Lab03/Lab03.pdf 0 → 100644
+ 0
− 0
View file @ 12a83c45
File added
Lab03/Lab03_201920756/Lab03_201920756.html 0 → 100644
+ 110
− 0
View file @ 12a83c45
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Lab03_201920756</title>
<script>
class Task {
constructor(text, isComplete, priority) {
this.text = text;
this.isComplete = isComplete;
this.priority = priority;
}
toggleCompletion() {
this.isComplete = this.isComplete == false ? true : false;
}
}
class TaskManager {
constructor() {
this.tasks = [];
}
addTask(text, priority) {
let task = new Task(text, false, priority);
this.tasks.push(task);
}
deleteTask(index) {
this.tasks.splice(index, 1);
}
listTasks() {
this.tasks.forEach((task, index) => {
this.printTask(index, task);
});
}
filterTasksByPriority(priority) {
this.tasks
.filter((task) => task.priority == priority)
.forEach((task, index) => {
this.printTask(index, task);
});
}
toggleTaskCompletion(index) {
this.tasks[index].toggleCompletion();
}
printTask(index, task) {
console.log(`${index}. 텍스트: ${task.text}, 완료 상태: ${task.isComplete}, 우선순위: ${task.priority}`);
}
}
const manager = new TaskManager();
function action(action) {
if (action === 'add') {
let text = prompt('Task를 입력하세요(빈 문자열 금지)');
if (text == '') {
alert('빈 문자열이 아닌 Task를 입력하세요');
return;
}
let priority = prompt('Priority를 입력하세요(high, medium, low 중 하나)');
if (!(priority == 'high' || priority == 'medium' || priority == 'low')) {
alert('high, medium, low 중 하나를 입력하세요');
return;
}
manager.addTask(text, priority);
} else if (action === 'list') {
manager.listTasks();
} else if (action === 'delete') {
let index = prompt('삭제할 배열의 index 값을 입력하세요');
if (index < 0 || index > manager.tasks.length - 1) {
alert('유효한 index를 입력하세요.');
return;
}
manager.deleteTask(index);
} else if (action === 'toggleComplete') {
let index = prompt('완료 상태를 전환할 배열의 index 값을 입력하세요');
if (index < 0 || index > manager.tasks.length - 1) {
alert('유효한 index를 입력하세요.');
return;
}
manager.toggleTaskCompletion(index);
} else if (action === 'filter') {
let priority = prompt('Priority를 입력하세요(high, medium, low 중 하나)');
if (!(priority == 'high' || priority == 'medium' || priority == 'low')) {
alert('high, medium, low 중 하나를 입력하세요');
return;
}
manager.filterTasksByPriority(priority);
} else {
console.log('Unknown action');
}
}
</script>
</head>
<body>
<h1>Lab03</h1>
<p>아래 버튼을 클릭하여 값을 입력받고, 브라우저 개발자 도구의 콘솔에서 실행 결과를 확인하세요.</p>
<button onclick="action('add')">Task 추가</button>
<button onclick="action('list')">Task 조회</button>
<button onclick="action('delete')">Task 삭제</button>
<button onclick="action('toggleComplete')">Task 완료 전환(toggle)</button>
<button onclick="action('filter')">Task 필터</button>
</body>
</html>
Lab04/Lab4_201920756/exercise1.js 0 → 100644
+ 126
− 0
View file @ 12a83c45
'use strict';
const StateSelector = {
Pending: 'pending',
Fulfilled: 'fulfilled',
Rejected: 'rejected',
};
class MyPromise {
constructor(executor) {
this.state = StateSelector.Pending;
this.value = null;
this.errorMsg = null;
this.onFulfilledCallbacks = [];
this.onRejectedCallbacks = [];
try {
executor(this.resolve.bind(this), this.reject.bind(this));
} catch (error) {
this.reject(error);
}
}
resolve(value) {
if (this.state === StateSelector.Pending) {
this.state = StateSelector.Fulfilled;
this.value = value;
this.onFulfilledCallbacks.forEach((callback) => {
callback();
});
}
}
reject(errorMsg) {
if (this.state === StateSelector.Pending) {
this.state = StateSelector.Rejected;
this.errorMsg = errorMsg;
this.onRejectedCallbacks.forEach((callback) => {
callback();
});
}
}
then(onFulfilled, onRejected) {
return new MyPromise((resolve, reject) => {
const handleFulfilled = () => {
if (typeof onFulfilled === 'function') {
try {
const result = onFulfilled(this.value);
if (result instanceof MyPromise) {
result.then(resolve, reject);
} else {
resolve(result);
}
} catch (error) {
reject(error);
}
} else {
resolve(this.value);
}
};
const handleRejected = () => {
if (typeof onRejected === 'function') {
try {
const result = onRejected(this.errorMsg);
if (result instanceof MyPromise) {
result.then(resolve, reject);
} else {
resolve(result);
}
} catch (error) {
reject(error);
}
} else {
reject(this.errorMsg);
}
};
switch (this.state) {
case StateSelector.Fulfilled:
handleFulfilled();
break;
case StateSelector.Rejected:
handleRejected();
break;
case StateSelector.Pending:
this.onFulfilledCallbacks.push(handleFulfilled);
this.onRejectedCallbacks.push(handleRejected);
break;
}
});
}
catch(onRejected) {
return this.then(null, onRejected);
}
}
const myPr = (val) =>
new MyPromise((resolve, reject) => {
if (val < 4) {
setTimeout(() => {
console.log(val);
resolve(val);
}, 2000);
} else {
reject('greater than or equal to 4!');
}
});
const num = 3;
myPr(num)
.then((val) => {
console.log(val + 1);
return val + 1;
})
.then((val) => {
console.log(val + 1);
return val + 1;
})
.then((val) => {
console.log(val + 1);
return val + 1;
})
.catch((err) => console.log(`${err}`));
Lab04/Lab4_201920756/exercise2.js 0 → 100644
+ 171
− 0
View file @ 12a83c45
'use strict';
const TaskTypeSelector = {
A: 'A',
B: 'B',
C: 'C',
};
const Validator = {
isEmpty: function (str) {
return str === '';
},
isValidIndexInput: function (index) {
if (this.isEmpty(index) || !(index >= 0 && index <= 2)) {
alert('빈 문자열이 아니고 0과 2 사이의 인덱스를 입력하세요');
return false;
}
return true;
},
isValidTimeInput: function (time) {
if (this.isEmpty(time) || !(time >= 1 && time <= 10)) {
alert('빈 문자열이 아니고 1과 10 사이의 시간을 입력하세요');
return false;
}
return true;
},
isValidStatusInput: function (status) {
if (this.isEmpty(status) || !['정상', '고장'].includes(status)) {
alert('정상과 고장 중 하나를 입력하세요');
return false;
}
return true;
},
isValidTaskTypeInput: function (taskType) {
if (this.isEmpty(taskType) || !['A', 'B', 'C'].includes(taskType)) {
alert('A, B, C 중 하나를 입력하세요');
return false;
}
return true;
},
};
class Timer {
constructor(idx) {
this.idx = idx;
this.time = 0;
this.isOperational = false;
}
setTime(time) {
this.time = time;
}
setTimerStatus(status) {
this.isOperational = status;
}
}
document.addEventListener('DOMContentLoaded', () => {
const timerNum = 3;
const setTimerBtn = document.getElementById('setTimerBtn');
const runTaskBtn = document.getElementById('runTaskBtn');
const displayTimersBtn = document.getElementById('displayTimerBtn');
const timers = [];
const timerDivs = [];
setTimerBtn.addEventListener('click', setTimer);
runTaskBtn.addEventListener('click', runTask);
displayTimersBtn.addEventListener('click', displayTimer);
for (let idx = 0; idx < timerNum; idx++) {
timers.push(new Timer(idx));
}
for (let idx = 0; idx < timerNum; idx++) {
timerDivs.push(document.getElementById('timer' + String(idx)));
}
function setTimer() {
let idx = prompt('타이머의 인덱스를 입력하세요(0~2):');
if (!Validator.isValidIndexInput(idx)) {
idx = prompt('타이머의 인덱스를 입력하세요(0~2):');
}
let time = prompt('타이머의 시간을 입력하세요(1~10):');
if (!Validator.isValidTimeInput(time)) {
time = prompt('타이머의 시간을 입력하세요(1~10):');
}
timers[idx].setTime(time);
let status = prompt('타이머의 상태를 입력하세요(정상, 고장):');
if (!Validator.isValidStatusInput(status)) {
status = prompt('타이머의 상태를 입력하세요(정상, 고장):');
}
if (status === '정상') {
timers[idx].setTimerStatus(true);
} else if (status === '고장') {
timers[idx].setTimerStatus(false);
}
}
function displayTimer() {
console.clear();
for (let i = 0; i < timerNum; i++) {
console.log(timers[i]);
}
}
function getTaskType() {
let taskType = prompt('실행할 태스크 타입을 입력하세요(A, B, C)');
if (!Validator.isValidTaskTypeInput(taskType)) {
taskType = prompt('실행할 태스크 타입을 입력하세요(A, B, C)');
}
return taskType;
}
function getPromiseMethod(taskType) {
switch (taskType) {
case TaskTypeSelector.A:
return Promise.all.bind(Promise);
case TaskTypeSelector.B:
return Promise.allSettled.bind(Promise);
case TaskTypeSelector.C:
return Promise.race.bind(Promise);
}
}
function runTask() {
const taskType = getTaskType();
const promiseMethod = getPromiseMethod(taskType);
console.log('=================');
const promises = [];
for (let i = 0; i < timerNum; i++) {
promises.push(
new Promise((resolve, reject) => {
setTimeout(() => {
if (timers[i].isOperational) {
console.log(`Timer ${i} Completed`);
timerDivs[i].style.backgroundColor = 'green';
resolve();
} else {
console.log(`Timer ${i} Failed`);
timerDivs[i].style.backgroundColor = 'red';
reject();
}
}, timers[i].time * 1000);
})
);
}
setTimeout(() => {
for (let i = 0; i < timerNum; i++) {
timerDivs[i].style.backgroundColor = 'white';
}
}, 4000);
promiseMethod(promises)
.then(() => {
console.log('then() executed');
})
.catch(() => {
console.log('catch() executed');
});
}
});
Lab04/Lab4_201920756/index.html 0 → 100644
+ 39
− 0
View file @ 12a83c45
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lab04</title>
<style>
div {
width: 25%;
border: 5px solid gray;
padding: 10px;
margin: 10px;
}
</style>
<script src="exercise2.js"></script>
</head>
<body>
<div>
<button id="setTimerBtn">타이머 설정</button>
<button id="displayTimerBtn">타이머 조회</button>
</div>
<div id="timer0">
<span>Timer 0</span>
<span id="timer1Status"></span>
</div>
<div id="timer1">
<span>Timer 1</span>
<span id="timer2Status"></span>
</div>
<div id="timer2">
<span>Timer 2</span>
<span id="timer3Status"></span>
</div>
<div>
<button id="runTaskBtn">태스크 실행</button>
</div>
</body>
</html>
Lab04/lab04.pdf 0 → 100644
+ 0
− 0
View file @ 12a83c45
File added
Lab05/Lab5_201920756/index.html 0 → 100644
+ 38
− 0
View file @ 12a83c45
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lab05_201920756</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>Lab05</h1>
<form id="addTaskForm">
<input type="text" id="taskContentInput" placeholder="Task 내용" />
<select id="prioritySelect">
<option value="low">낮음</option>
<option value="medium">중간</option>
<option value="high">높음</option>
</select>
<button id="addTaskButton" type="submit">Task 추가</button>
</form>
<br />
<form id="deleteTaskForm">
<input type="text" id="deleteTaskIndexInput" placeholder="삭제할 Index" />
<button id="deleteTaskButton" type="submit">Task 삭제</button>
</form>
<form id="filterTaskForm">
<button id="completeTaskButton" type="button">Task 완료 표시</button>
<select id="filterPrioritySelect">
<option value="all">전체</option>
<option value="low">낮음</option>
<option value="medium">중간</option>
<option value="high">높음</option>
</select>
<button id="filterTaskButton" type="submit">Task 필터</button>
</form>
<ul id="taskList"></ul>
<div id="error" style="color: red; display: none"></div>
</body>
</html>
Lab05/Lab5_201920756/script.js 0 → 100644
+ 121
− 0
View file @ 12a83c45
const Validator = {
textInputErrorMessage: '빈 문자열이 아닌 Task를 입력하세요.',
indexInputErrorMessage: '빈 문자열이 아니고 유효한 Index를 입력하세요.',
isValidTextInput: (text) => {
if (text === '') {
printError(Validator.textInputErrorMessage);
return false;
}
return true;
},
isValidIndexInput: (tasks, index) => {
if (index === '' || parseInt(index) < 0 || parseInt(index) > tasks.length - 1) {
printError(Validator.indexInputErrorMessage);
return false;
}
return true;
},
};
class Task {
constructor(text, priority) {
this.text = text;
this.isComplete = false;
this.priority = ['all', priority];
}
toggleCompletion() {
this.isComplete = !this.isComplete;
}
}
class TaskManager {
constructor() {
this.tasks = [];
}
addTask(text, priority) {
const task = new Task(text, priority);
this.tasks.push(task);
}
deleteTask(index) {
this.tasks.splice(index, 1);
}
toggleTaskCompletion(index) {
this.tasks[index].toggleCompletion();
}
}
const addTaskForm = document.getElementById('addTaskForm');
const taskContentInput = document.getElementById('taskContentInput');
const prioritySelect = document.getElementById('prioritySelect');
const taskList = document.getElementById('taskList');
const deleteTaskForm = document.getElementById('deleteTaskForm');
const deleteTaskIndexInput = document.getElementById('deleteTaskIndexInput');
const completeTaskButton = document.getElementById('completeTaskButton');
const filterTaskForm = document.getElementById('filterTaskForm');
const filterPrioritySelect = document.getElementById('filterPrioritySelect');
const error = document.getElementById('error');
const manager = new TaskManager();
function updateTaskList(tasks) {
taskList.innerHTML = '';
tasks.forEach((task, index) => {
const listElem = document.createElement('li');
listElem.innerHTML = `${index}. 텍스트: ${task.text}, 완료 상태: ${task.isComplete}, 우선순위: ${task.priority[1]}`;
taskList.appendChild(listElem);
});
}
function printError(errorMessage) {
error.style.removeProperty('display');
error.innerText = errorMessage;
setTimeout(() => {
error.style.setProperty('display', 'none');
}, 1000);
}
addTaskForm.addEventListener('submit', (e) => {
e.preventDefault();
const taskContent = taskContentInput.value;
if (!Validator.isValidTextInput(taskContent)) return;
const priority = prioritySelect.value;
manager.addTask(taskContent, priority);
updateTaskList(manager.tasks);
taskContentInput.value = '';
});
deleteTaskForm.addEventListener('submit', (e) => {
e.preventDefault();
const deleteTaskIndex = deleteTaskIndexInput.value;
if (!Validator.isValidIndexInput(manager.tasks, deleteTaskIndex)) return;
manager.deleteTask(deleteTaskIndex);
updateTaskList(manager.tasks);
deleteTaskIndexInput.value = '';
});
completeTaskButton.addEventListener('click', (e) => {
e.preventDefault();
const toggleTaskCompletionIndex = deleteTaskIndexInput.value;
if (!Validator.isValidIndexInput(manager.tasks, toggleTaskCompletionIndex)) return;
manager.toggleTaskCompletion(toggleTaskCompletionIndex);
updateTaskList(manager.tasks);
deleteTaskIndexInput.value = '';
});
filterTaskForm.addEventListener('submit', (e) => {
e.preventDefault();
const filterPriority = filterPrioritySelect.value;
const filteredTasks = manager.tasks.filter((task) => task.priority.includes(filterPriority));
updateTaskList(filteredTasks);
});
Lab05/lab05.pdf 0 → 100644
+ 0
− 0
View file @ 12a83c45
File added
Lab06/lab06.pdf 0 → 100644
+ 0
− 0
View file @ 12a83c45
File added
Lab06/lab06_201920756/data/num1 0 → 100644
+ 5
− 0
View file @ 12a83c45
1 2 3 4 5
6 7 8 9 10
1 3 5 7 9
2 4 6 8 10
\ No newline at end of file
Lab06/lab06_201920756/data/num2 0 → 100644
+ 5
− 0
View file @ 12a83c45
3 4 5 1 2
2 4 1 2 3
1 5 7 9 1
3 1 2 2 1
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr