script.js

Download
javascript 371 lines 10.9 KB 
  1/*
  2 * DOM ์กฐ์ž‘๊ณผ ์ด๋ฒคํŠธ ์˜ˆ์ œ
  3 */
  4
  5// ============================================
  6// 1. ์š”์†Œ ์„ ํƒ
  7// ============================================
  8function demoSelection() {
  9    const output = document.getElementById('selectOutput');
 10    let result = '';
 11
 12    // getElementById
 13    const byId = document.getElementById('uniqueId');
 14    result += `getElementById: "${byId.textContent}"\n`;
 15
 16    // getElementsByClassName
 17    const byClass = document.getElementsByClassName('myClass');
 18    result += `getElementsByClassName: ${byClass.length}๊ฐœ ์š”์†Œ\n`;
 19
 20    // querySelector (์ฒซ ๋ฒˆ์งธ ์ผ์น˜)
 21    const byQuery = document.querySelector('.myClass');
 22    result += `querySelector('.myClass'): "${byQuery.textContent}"\n`;
 23
 24    // querySelectorAll (๋ชจ๋“  ์ผ์น˜)
 25    const byQueryAll = document.querySelectorAll('.myClass');
 26    result += `querySelectorAll('.myClass'): ${byQueryAll.length}๊ฐœ ์š”์†Œ\n`;
 27
 28    // ์†์„ฑ ์„ ํƒ์ž
 29    const byData = document.querySelector('[data-info="test"]');
 30    result += `[data-info="test"]: "${byData.textContent}"\n`;
 31
 32    // ๋ณตํ•ฉ ์„ ํƒ์ž
 33    const complex = document.querySelector('#selectDemo .container span');
 34    result += `๋ณตํ•ฉ ์„ ํƒ์ž: "${complex.textContent}"`;
 35
 36    output.textContent = result;
 37}
 38
 39// ============================================
 40// 2. ์š”์†Œ ์ƒ์„ฑ ๋ฐ ์ถ”๊ฐ€
 41// ============================================
 42function addItem() {
 43    const input = document.getElementById('newItemInput');
 44    const list = document.getElementById('itemList');
 45    const text = input.value.trim();
 46
 47    if (!text) return;
 48
 49    // ์š”์†Œ ์ƒ์„ฑ
 50    const li = document.createElement('li');
 51    li.textContent = text;
 52
 53    // ์‚ญ์ œ ๋ฒ„ํŠผ ์ถ”๊ฐ€
 54    const deleteBtn = document.createElement('button');
 55    deleteBtn.textContent = 'ร—';
 56    deleteBtn.style.cssText = 'margin-left: 10px; padding: 2px 8px; background: #e74c3c;';
 57    deleteBtn.onclick = () => li.remove();
 58
 59    li.appendChild(deleteBtn);
 60    list.appendChild(li);  // ๋์— ์ถ”๊ฐ€
 61
 62    input.value = '';
 63    input.focus();
 64}
 65
 66function addItemBefore() {
 67    const input = document.getElementById('newItemInput');
 68    const list = document.getElementById('itemList');
 69    const text = input.value.trim();
 70
 71    if (!text) return;
 72
 73    const li = document.createElement('li');
 74    li.textContent = text;
 75
 76    const deleteBtn = document.createElement('button');
 77    deleteBtn.textContent = 'ร—';
 78    deleteBtn.style.cssText = 'margin-left: 10px; padding: 2px 8px; background: #e74c3c;';
 79    deleteBtn.onclick = () => li.remove();
 80
 81    li.appendChild(deleteBtn);
 82
 83    // ๋งจ ์•ž์— ์ถ”๊ฐ€
 84    list.insertBefore(li, list.firstChild);
 85
 86    input.value = '';
 87}
 88
 89function clearItems() {
 90    const list = document.getElementById('itemList');
 91    // ๋ชจ๋“  ์ž์‹ ์ œ๊ฑฐ
 92    list.innerHTML = '';
 93    // ๋˜๋Š”: while (list.firstChild) list.removeChild(list.firstChild);
 94}
 95
 96// Enter ํ‚ค๋กœ ์ถ”๊ฐ€
 97document.getElementById('newItemInput').addEventListener('keypress', (e) => {
 98    if (e.key === 'Enter') addItem();
 99});
100
101// ============================================
102// 3. ์Šคํƒ€์ผ ๋ฐ ํด๋ž˜์Šค ์กฐ์ž‘
103// ============================================
104function changeColor() {
105    const box = document.getElementById('styleBox');
106    const colors = ['#3498db', '#e74c3c', '#2ecc71', '#9b59b6', '#f39c12'];
107    const randomColor = colors[Math.floor(Math.random() * colors.length)];
108    box.style.backgroundColor = randomColor;
109    box.style.color = 'white';
110}
111
112function toggleHighlight() {
113    const box = document.getElementById('styleBox');
114    box.classList.toggle('highlight');
115}
116
117function addBorder() {
118    const box = document.getElementById('styleBox');
119    box.style.border = '3px solid #2c3e50';
120    box.style.borderRadius = '15px';
121}
122
123function resetStyle() {
124    const box = document.getElementById('styleBox');
125    box.style.cssText = 'transition: all 0.3s;';
126    box.classList.remove('highlight');
127}
128
129// ============================================
130// 4. ์†์„ฑ ์กฐ์ž‘
131// ============================================
132function changeImage(num) {
133    const img = document.getElementById('demoImage');
134    img.src = `https://via.placeholder.com/200x100?text=Image+${num}`;
135    img.alt = `๋ฐ๋ชจ ์ด๋ฏธ์ง€ ${num}`;
136    updateAltDisplay();
137}
138
139function changeAlt() {
140    const img = document.getElementById('demoImage');
141    const altInput = document.getElementById('altInput');
142    img.setAttribute('alt', altInput.value);
143    updateAltDisplay();
144    altInput.value = '';
145}
146
147function updateAltDisplay() {
148    const img = document.getElementById('demoImage');
149    document.getElementById('currentAlt').textContent = img.getAttribute('alt');
150}
151
152// ์ดˆ๊ธฐ alt ํ‘œ์‹œ
153updateAltDisplay();
154
155// ============================================
156// 5. ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ
157// ============================================
158const eventBox = document.getElementById('eventBox');
159const eventLog = document.getElementById('eventLog');
160
161function logEvent(message) {
162    const time = new Date().toLocaleTimeString();
163    eventLog.innerHTML = `[${time}] ${message}<br>` + eventLog.innerHTML;
164}
165
166function clearEventLog() {
167    eventLog.innerHTML = '';
168}
169
170// ํด๋ฆญ ์ด๋ฒคํŠธ
171eventBox.addEventListener('click', (e) => {
172    logEvent(`ํด๋ฆญ! ์ขŒํ‘œ: (${e.offsetX}, ${e.offsetY})`);
173});
174
175// ๋”๋ธ”ํด๋ฆญ
176eventBox.addEventListener('dblclick', () => {
177    logEvent('๋”๋ธ”ํด๋ฆญ!');
178});
179
180// ๋งˆ์šฐ์Šค ์ง„์ž…/์ดํƒˆ
181eventBox.addEventListener('mouseenter', () => {
182    logEvent('๋งˆ์šฐ์Šค ์ง„์ž…');
183    eventBox.style.backgroundColor = '#ecf0f1';
184});
185
186eventBox.addEventListener('mouseleave', () => {
187    logEvent('๋งˆ์šฐ์Šค ์ดํƒˆ');
188    eventBox.style.backgroundColor = '';
189});
190
191// ๋งˆ์šฐ์Šค ์ด๋™ (throttle ์ ์šฉ)
192let lastMoveLog = 0;
193eventBox.addEventListener('mousemove', (e) => {
194    const now = Date.now();
195    if (now - lastMoveLog > 500) {  // 500ms๋งˆ๋‹ค ๋กœ๊น…
196        logEvent(`๋งˆ์šฐ์Šค ์ด๋™: (${e.offsetX}, ${e.offsetY})`);
197        lastMoveLog = now;
198    }
199});
200
201// ์ปจํ…์ŠคํŠธ ๋ฉ”๋‰ด (์šฐํด๋ฆญ)
202eventBox.addEventListener('contextmenu', (e) => {
203    e.preventDefault();
204    logEvent('์šฐํด๋ฆญ (๊ธฐ๋ณธ ๋™์ž‘ ๋ฐฉ์ง€๋จ)');
205});
206
207// ============================================
208// 6. ์ด๋ฒคํŠธ ์œ„์ž„
209// ============================================
210const cardContainer = document.getElementById('cardContainer');
211let cardCount = 5;
212
213cardContainer.addEventListener('click', (e) => {
214    const card = e.target.closest('.card');
215    if (!card) return;
216
217    // ๋ชจ๋“  ์นด๋“œ์—์„œ selected ์ œ๊ฑฐ
218    cardContainer.querySelectorAll('.card').forEach(c => c.classList.remove('selected'));
219
220    // ํด๋ฆญ๋œ ์นด๋“œ์— selected ์ถ”๊ฐ€
221    card.classList.add('selected');
222
223    document.getElementById('selectedCard').textContent = `์นด๋“œ ${card.dataset.id}`;
224});
225
226function addCard() {
227    cardCount++;
228    const card = document.createElement('div');
229    card.className = 'card';
230    card.dataset.id = cardCount;
231    card.textContent = cardCount;
232    cardContainer.appendChild(card);
233}
234
235// ============================================
236// 7. ํผ ์ด๋ฒคํŠธ
237// ============================================
238const demoForm = document.getElementById('demoForm');
239const formOutput = document.getElementById('formOutput');
240
241// input ์ด๋ฒคํŠธ (์‹ค์‹œ๊ฐ„)
242document.getElementById('nameInput').addEventListener('input', (e) => {
243    console.log('์ž…๋ ฅ ์ค‘:', e.target.value);
244});
245
246// change ์ด๋ฒคํŠธ (ํฌ์ปค์Šค ์ดํƒˆ ์‹œ)
247document.getElementById('countrySelect').addEventListener('change', (e) => {
248    formOutput.textContent = `๊ตญ๊ฐ€ ๋ณ€๊ฒฝ: ${e.target.value || '์„ ํƒ ์•ˆํ•จ'}`;
249});
250
251// focus/blur ์ด๋ฒคํŠธ
252document.getElementById('emailInput').addEventListener('focus', (e) => {
253    e.target.style.borderColor = '#3498db';
254});
255
256document.getElementById('emailInput').addEventListener('blur', (e) => {
257    e.target.style.borderColor = '';
258});
259
260// submit ์ด๋ฒคํŠธ
261demoForm.addEventListener('submit', (e) => {
262    e.preventDefault();  // ๊ธฐ๋ณธ ๋™์ž‘ ๋ฐฉ์ง€
263
264    const formData = new FormData(demoForm);
265    const name = document.getElementById('nameInput').value;
266    const email = document.getElementById('emailInput').value;
267    const country = document.getElementById('countrySelect').value;
268
269    formOutput.innerHTML = `
270        <strong>์ œ์ถœ๋œ ๋ฐ์ดํ„ฐ:</strong><br>
271        ์ด๋ฆ„: ${name}<br>
272        ์ด๋ฉ”์ผ: ${email}<br>
273        ๊ตญ๊ฐ€: ${country || '๋ฏธ์„ ํƒ'}
274    `;
275});
276
277// ============================================
278// 8. ํ‚ค๋ณด๋“œ ์ด๋ฒคํŠธ
279// ============================================
280const keyInput = document.getElementById('keyInput');
281const keyOutput = document.getElementById('keyOutput');
282
283keyInput.addEventListener('keydown', (e) => {
284    keyOutput.innerHTML = `
285        <strong>keydown</strong><br>
286        key: "${e.key}"<br>
287        code: "${e.code}"<br>
288        keyCode: ${e.keyCode} (deprecated)<br>
289        ctrlKey: ${e.ctrlKey}, shiftKey: ${e.shiftKey}, altKey: ${e.altKey}
290    `;
291
292    // ํŠน์ˆ˜ ํ‚ค ์ฒ˜๋ฆฌ
293    if (e.key === 'Escape') {
294        keyInput.value = '';
295        keyOutput.innerHTML += '<br><em>Escape๋กœ ์ž…๋ ฅ ์ดˆ๊ธฐํ™”</em>';
296    }
297
298    if (e.ctrlKey && e.key === 'Enter') {
299        keyOutput.innerHTML += '<br><em>Ctrl+Enter ๊ฐ์ง€!</em>';
300    }
301});
302
303// ============================================
304// 9. ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ
305// ============================================
306let draggedElement = null;
307
308// ๋“œ๋ž˜๊ทธ ๊ฐ€๋Šฅํ•œ ์š”์†Œ๋“ค
309document.querySelectorAll('.draggable').forEach(elem => {
310    elem.addEventListener('dragstart', (e) => {
311        draggedElement = e.target;
312        e.target.style.opacity = '0.5';
313    });
314
315    elem.addEventListener('dragend', (e) => {
316        e.target.style.opacity = '';
317        draggedElement = null;
318    });
319});
320
321// ๋“œ๋กญ ์กด
322document.querySelectorAll('.drop-zone').forEach(zone => {
323    zone.addEventListener('dragover', (e) => {
324        e.preventDefault();  // ๋“œ๋กญ ํ—ˆ์šฉ
325        zone.classList.add('drag-over');
326    });
327
328    zone.addEventListener('dragleave', () => {
329        zone.classList.remove('drag-over');
330    });
331
332    zone.addEventListener('drop', (e) => {
333        e.preventDefault();
334        zone.classList.remove('drag-over');
335
336        if (draggedElement) {
337            zone.appendChild(draggedElement);
338        }
339    });
340});
341
342// ============================================
343// 10. ์Šคํฌ๋กค ์ด๋ฒคํŠธ
344// ============================================
345const scrollBox = document.getElementById('scrollBox');
346const scrollPosition = document.getElementById('scrollPosition');
347
348scrollBox.addEventListener('scroll', () => {
349    scrollPosition.textContent = Math.round(scrollBox.scrollTop);
350});
351
352// ์Šคํฌ๋กค ๋ฐฉํ–ฅ ๊ฐ์ง€ (๋ณด๋„ˆ์Šค)
353let lastScrollTop = 0;
354scrollBox.addEventListener('scroll', () => {
355    const st = scrollBox.scrollTop;
356    const direction = st > lastScrollTop ? '์•„๋ž˜' : '์œ„';
357    // console.log(`์Šคํฌ๋กค ๋ฐฉํ–ฅ: ${direction}`);
358    lastScrollTop = st;
359});
360
361// ============================================
362// ํŽ˜์ด์ง€ ๋กœ๋“œ ์™„๋ฃŒ
363// ============================================
364document.addEventListener('DOMContentLoaded', () => {
365    console.log('DOM ๋กœ๋“œ ์™„๋ฃŒ!');
366});
367
368window.addEventListener('load', () => {
369    console.log('๋ชจ๋“  ๋ฆฌ์†Œ์Šค ๋กœ๋“œ ์™„๋ฃŒ!');
370});