๐จ JavaScript/๋ฌธ์ ํ๊ธฐ (ํ๋ก๊ทธ๋๋จธ์ค, ์ฝ๋ฉ์ ํ)
Level 3 : 9 ์ฅ๋ฐ๊ตฌ๋๋ฒํผ ๊ตฌํํ๊ธฐ(localStorage, array, forEach, JSON)
9. ์ฅ๋ฐ๊ตฌ๋ ๊ธฐ๋ฅ ๋ง๋ค๊ธฐ ์กฐ๊ฑด ์ฅ๋ฐ๊ตฌ๋ ๋ฒํผ์ ๋๋ฅด๋ฉด localStorage์ ๋ฐฐ์ด ํํ๋ก ์ํ์ด๋ฆ์ด ๋ด๊ธฐ๊ณ , cart.html์ ๋ฐ๋ก ๋ง๋ค์ด ํด๋น html์ ์ํ์ด ๋ฟ๋ ค์ง๋๋ก ๋ง๋ค๊ธฐ ํ์ด ์ํ๋ฆฌ์คํธ // ์ฌ๋ฌ๊ฐ์ ์ฅ๋ฐ๊ตฌ๋ ๋ฒํผ๋ค์ buttonCarts ๋ณ์๋ก ์ ์ธ let buttonCarts = document.querySelectorAll('.btn-cart'); // buttonCarts ์์ ๊ฐ๊ฐ์ buttonCart elements๋ค์๊ฒ ํจ์๋ฅผ ์คํ buttonCarts.forEach(function(buttonCart){ // buttonCart๋ฅผ ํด๋ฆญํ๋ฉด.. buttonCart.addEventListener('click', function(){ // localStorage์ cart๋ฅผ ke..
Level 3 : 5~8 (ajax, json, array, sort)
5. ์นด๋๋ ์ด์์์ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ ์นด๋ 3๊ฐ ์์ฑํ๊ธฐ ์์์๋ฐ์คํฌ๋ฆฝํธ๋ฒ์ let cardWrap = document.querySelector('.row'); let products = [ { id : 0, price : 70000, title : 'Blossom Dress' }, { id : 1, price : 50000, title : 'Springfield Shirt' }, { id : 2, price : 60000, title : 'Black Monastery' } ]; products.forEach(function(a, i){ let card = ` ${products[i]['title']} ${products[i]['price']} ` cardWrap.insertAdjacentHTML('bef..
Level 3 : 4 (array, object, forEach)
4. ๋ฐ์ง ์ ํํ๋ฉด array์ ์ ์ฅํ ๋ฐ์ง์ฌ์ด์ฆ ์ ๋ ๋ฐ์ค ๋ง๋ค๊ธฐ ์กฐ๊ฑด ๋ฐ์ง๋ฅผ ์ ํํ๋ฉด array์ ์ ๋ ฅํ ๋ฐ์ดํฐ๊ฐ ์ฌ์ด์ฆ ์ ๋ ๋ฐ์ค์ ์๋์ผ๋ก ์ถ๊ฐ๋์ด์ผ ํ๋ค. ํ๋ฆฐ ํ์ด ์ํ ์ ํ ๋ชจ์ ์ ์ธ ๋ฐ์ง 100 let pants = [28, 30, 32]; let selectBox = document.querySelector('.form-select'); let selectSize = document.querySelector('.form-popup'); function pantsSize() { if (selectBox.value == '๋ฐ์ง') { selectSize.classList.remove('form-hide'); for (i = 0; selectSize.length = pants.length; i++..
Level 3 : 1~3 (array, object)
1. object ์๋ฃํ์ ๋ฃ์ ๋ฐ์ดํฐ๋ฅผ html์ ๋ฐ์ดํฐ๋ฐ์ธ๋ฉํ๊ธฐ var car2 = {name: '์๋ํ', price: 50000} document.querySelector('.card > span:first-child').innerHTML = `${car2.name}`; document.querySelector('.card > span:last-child').innerHTML = `${car2.price}`; 2. object ์๋ฃํ์ ๋ฃ์ 'array ๋ฐ์ดํฐ'๋ฅผ html์ ๋ฐ์ดํฐ๋ฐ์ธ๋ฉํ๊ธฐ var car2 = {name: '์๋ํ', price : [50000, 3000, 4000]} document.querySelector('.car-price').innerHTML = `${car2.price[..
[์ค์] Level 2 : 14,15(์์ ๋ฐ ๊นจ๋ฌ์ ์ )_for, ๋ฒ๋ธ๋งํ์ฉ์ถ์ฝ๋ฒ์
14. ํญ ๋ง๋ค๊ธฐ let kcnt = 0; for (let i = 0; i < $('.tab-button').length; i++) { alert(kcnt++); $('.tab-button').eq(i).on('click', function () { $('.tab-button').removeClass('orange'); $('.tab-button').eq(i).addClass('orange'); $('.tab-content').removeClass('show'); $('.tab-content').eq(i).addClass('show'); }) } ๊นจ๋ฌ์ ์ for๋ฌธ์ ์๋ ์๋ฆฌ์ ๋ํด์ ์ดํด๊ฐ ์ ๊ฐ์ง ์์๋ค. i๊ฐ 0์ด๊ณ , 3๊น์ง i++๋ก ๋์๊ฐ๋ ๊ฑฐ๋ฉด i์๋ ์์๋๋ก 0,1,2 ๋ฐฐ์ ๋๋ ๊ฒ ์๋๊ฐ? ..
Level 2 : 6~13(์์ ๋ฐ ๊นจ๋ฌ์ ์ )_scroll
6. Carousel slider ๋ง๋ค๊ธฐ ์กฐ๊ฑด ๋ฒํธ๋ฅผ ๋๋ฅด๋ฉด ํด๋น ์ด๋ฏธ์ง๋ก ์ด๋ํ ์ ์๋ค. $('.slide-1').on('click', function(){ $('.slide-container').css('transform', 'translateX(0)'); }) $('.slide-2').on('click', function(){ $('.slide-container').css('transform', 'translateX(-100vw)'); }) $('.slide-3').on('click', function(){ $('.slide-container').css('transform', 'translateX(-200vw)'); }) 7. Carousel slider ๋ง๋ค๊ธฐ 2 ์กฐ๊ฑด ์ด์ /๋ค์๋ฒํผ ๋ง๋ค๊ธฐ. ์ฒซ..