From 45a1fd230cb02c12fb4b3204ffaad3081b6dc038 Mon Sep 17 00:00:00 2001 From: chuheeseung Date: Wed, 6 Apr 2022 23:36:58 +0900 Subject: [PATCH 1/8] 22.04.06 --- README.md | 2 - .../index.html" | 16 +++ .../index.js" | 75 ++++++++++++++ .../02_\353\260\260\354\227\264/index.html" | 16 +++ "week03/02_\353\260\260\354\227\264/index.js" | 45 +++++++++ .../03_\352\260\235\354\262\264/index.html" | 16 +++ "week03/03_\352\260\235\354\262\264/index.js" | 90 +++++++++++++++++ .../04_\355\225\250\354\210\230/index.html" | 16 +++ "week03/04_\355\225\250\354\210\230/index.js" | 17 ++++ .../index.html" | 16 +++ .../index.js" | 97 +++++++++++++++++++ .../index.html" | 0 .../index.js" | 67 +++++++++++++ week04/codepen/index.html | 37 +++++++ week04/codepen/index.js | 71 ++++++++++++++ week04/codepen/style.css | 40 ++++++++ 16 files changed, 619 insertions(+), 2 deletions(-) create mode 100644 "week03/01_\353\263\200\354\210\230,\354\236\220\353\243\214\355\230\225,\354\227\260\354\202\260\354\236\220/index.html" create mode 100644 "week03/01_\353\263\200\354\210\230,\354\236\220\353\243\214\355\230\225,\354\227\260\354\202\260\354\236\220/index.js" create mode 100644 "week03/02_\353\260\260\354\227\264/index.html" create mode 100644 "week03/02_\353\260\260\354\227\264/index.js" create mode 100644 "week03/03_\352\260\235\354\262\264/index.html" create mode 100644 "week03/03_\352\260\235\354\262\264/index.js" create mode 100644 "week03/04_\355\225\250\354\210\230/index.html" create mode 100644 "week03/04_\355\225\250\354\210\230/index.js" create mode 100644 "week03/05_\354\241\260\352\261\264\353\254\270/index.html" create mode 100644 "week03/05_\354\241\260\352\261\264\353\254\270/index.js" create mode 100644 "week03/06_\353\260\230\353\263\265\353\254\270/index.html" create mode 100644 "week03/06_\353\260\230\353\263\265\353\254\270/index.js" create mode 100644 week04/codepen/index.html create mode 100644 week04/codepen/index.js create mode 100644 week04/codepen/style.css diff --git a/README.md b/README.md index b41d320..e69de29 100644 --- a/README.md +++ b/README.md @@ -1,2 +0,0 @@ -# Web -๐Ÿ•ธ UMC 2๊ธฐ Web ์Šคํ„ฐ๋”” diff --git "a/week03/01_\353\263\200\354\210\230,\354\236\220\353\243\214\355\230\225,\354\227\260\354\202\260\354\236\220/index.html" "b/week03/01_\353\263\200\354\210\230,\354\236\220\353\243\214\355\230\225,\354\227\260\354\202\260\354\236\220/index.html" new file mode 100644 index 0000000..e25d708 --- /dev/null +++ "b/week03/01_\353\263\200\354\210\230,\354\236\220\353\243\214\355\230\225,\354\227\260\354\202\260\354\236\220/index.html" @@ -0,0 +1,16 @@ + + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git "a/week03/01_\353\263\200\354\210\230,\354\236\220\353\243\214\355\230\225,\354\227\260\354\202\260\354\236\220/index.js" "b/week03/01_\353\263\200\354\210\230,\354\236\220\353\243\214\355\230\225,\354\227\260\354\202\260\354\236\220/index.js" new file mode 100644 index 0000000..777074f --- /dev/null +++ "b/week03/01_\353\263\200\354\210\230,\354\236\220\353\243\214\355\230\225,\354\227\260\354\202\260\354\236\220/index.js" @@ -0,0 +1,75 @@ +// ๋ณ€์ˆ˜ : ์„ ์–ธ. ์ดˆ๊ธฐํ™”. ์žฌํ• ๋‹น + +const ๋ณ€์ˆ˜1 = "์ฝ”๋”ฉ"; +let ๋ณ€์ˆ˜2 = "์ž๋ฐ”์Šค๋ฆฝํŠธ"; + +// ๋ณ€์ˆ˜1 = '์ฝ”๋”ฉ์€ ์–ด๋ ค์›Œ'; +๋ณ€์ˆ˜2 = "html"; + +// ==================================== + +// ๋ฐ์ดํ„ฐ ํƒ€์ž…, ์ž๋ฃŒํ˜• : +// 1. string : ๋ฌธ์ž์—ด + +const str = "์•ˆ๋…•"; +const str2 = "hi"; +const num = "2!!"; + +// 2.number : ์ˆซ์ž +const number = 2; + +// 3. bigInt : ํฐ๊ฐ’์ด ์ˆซ์ž + +// 4. boolean : true, false +const bool = true; +const bool1 = false; + +// 5. symbol : ์ค‘๋ณต๋˜์ง€ ์•Š๋Š” ๊ณ ์œ ๊ฐ’ + +// 6-7. null / undefined + +const a = undefined; +const b = null; + +let variable; +console.log(variable); + +// 8. object : ๊ฐ์ฒด - ํ•จ์ˆ˜, ๋ฐฐ์—ด, ๊ฐ์ฒด + +// ==================================== + +// 1. ์‚ฐ์ˆ ์—ฐ์‚ฐ์ž : +, - , /, *, %, **, ++, -- + +const aa = 10 % 3; +console.log(aa); + +const bb = 10 ** 2; +console.log(bb); + +let cc = 5; +cc += 10; // cc = cc + 10 +console.log(cc); + +cc -= 8; // cc = cc - 8; +console.log(cc); + +// 2. ํ• ๋‹น ์—ฐ์‚ฐ์ž : = + +// 3. ๋ฌธ์ž์—ด ์—ฐ์‚ฐ์ž : + , += +let data = "happy" + " " + "2022"; +console.log(data); + +data += "!!"; //data = data + '!!' +console.log(data); + +// ๋น„๊ต ์—ฐ์‚ฐ์ž : +// 1. == : ๋Œ€์ถฉ ๋น„๊ต +// 2. === : ์—„๊ฒฉํ•˜๊ฒŒ ๋น„๊ต +// 3. != : ๋Œ€์ถฉ ๋น„๊ต +// 4. !== : ์—„๊ฒฉํ•˜๊ฒŒ ๋น„๊ต +// 5. ๋ถ€๋“ฑํ˜ธ : > , <, >= , <= + +//๋…ผ๋ฆฌ์—ฐ์‚ฐ์ž : &&, ||, ! +// && : ์กฐ๊ฑด ์ค‘ ํ•˜๋‚˜๋ผ๋„ false๊ฐ€ ๋˜๋ฉด => false +// || : ๋‘๊ฐœ์˜ ์กฐ๊ฑด์ด ๋ชจ๋‘ false์—ฌ์•ผ์ง€ => false +// ! : ๋ฐ˜๋Œ€ \ No newline at end of file diff --git "a/week03/02_\353\260\260\354\227\264/index.html" "b/week03/02_\353\260\260\354\227\264/index.html" new file mode 100644 index 0000000..e25d708 --- /dev/null +++ "b/week03/02_\353\260\260\354\227\264/index.html" @@ -0,0 +1,16 @@ + + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git "a/week03/02_\353\260\260\354\227\264/index.js" "b/week03/02_\353\260\260\354\227\264/index.js" new file mode 100644 index 0000000..f17c100 --- /dev/null +++ "b/week03/02_\353\260\260\354\227\264/index.js" @@ -0,0 +1,45 @@ +// ๋ฐฐ์—ด +// 1. ์„ ์–ธ : [], new Array(), ๋นˆ๋ฐฐ์–„์— index ์ด์šฉํ•ด์„œ ํ•˜๋‚˜์”ฉ ์ถ”๊ฐ€ +// const travel_spot = ['๋ฐฉ์ฝ•', '๋‰ด์š•', 'ํŒŒ๋ฆฌ']; +// const travel_spot = new Array('๋ฐฉ์ฝ•', '๋‰ด์š•', 'ํŒŒ๋ฆฌ'); +// console.log(travel_spot); +const travel_spot = new Array(); +travel_spot[0] = "๋ฐฉ์ฝ•"; +travel_spot[1] = "๋‰ด์š•"; +travel_spot[2] = "ํŒŒ๋ฆฌ"; + +// 2. ์ ‘๊ทผ : index +const paris = travel_spot[2]; +console.log(paris); + +// 3. ์ถ”๊ฐ€ ๋ฐ ์‚ญ์ œ + +// travel_spot = ['ํ† ๋ก ํ† ', '๋ฉœ๋ฒ„๋ฅธ', '๋ฐ”๋ฅด์…€๋กœ๋‚˜', '์•„ํ…Œ๋„ค']; //์žฌํ• ๋‹น ๋ถˆ๊ฐ€ + +// push : ๋’ค์— ์›์†Œ ์ถ”๊ฐ€ +travel_spot.push("ํ† ๋ก ํ† ", "ํ€˜๋ฐฑ"); +console.log(travel_spot); + +// unshift : ์•ž์— ์›์†Œ ์ถ”๊ฐ€ +travel_spot.unshift("๋ฐ”๋ฅด์…€๋กœ๋‚˜"); +console.log(travel_spot); + +// splice : ์›ํ•˜๋Š” ์ง€์ ์— ์ถ”๊ฐ€ ๋ฐ ์‚ญ์ œ +// -> splice(์‹œ์ž‘ index, ์‚ญ์ œํ•˜๊ณ  ์‹ถ์€ ์›์†Œ์˜ ๊ฐœ์ˆ˜, ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์€ ์›์†Œ๋“ค) +travel_spot.splice(4, 0, "๋ฉœ๋ฒ„๋ฅธ", "์•„ํ…Œ๋„ค"); +console.log(travel_spot); + +// pop : ๋’ค์—์„œ ์›์†Œ ์‚ญ์ œ +const result = travel_spot.pop(); +console.log(travel_spot, result); + +// shift : ์•ž์—์„œ ์›์†Œ ์‚ญ์ œ +const result1 = travel_spot.shift(); +console.log(travel_spot, result1); + +// splice +const result2 = travel_spot.splice(3, 3); +console.log(travel_spot, result2); + +travel_spot.splice(1, 1, "์ด์Šคํƒ„๋ถˆ", "ํ•˜๋…ธ์ด"); +console.log(travel_spot); \ No newline at end of file diff --git "a/week03/03_\352\260\235\354\262\264/index.html" "b/week03/03_\352\260\235\354\262\264/index.html" new file mode 100644 index 0000000..e25d708 --- /dev/null +++ "b/week03/03_\352\260\235\354\262\264/index.html" @@ -0,0 +1,16 @@ + + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git "a/week03/03_\352\260\235\354\262\264/index.js" "b/week03/03_\352\260\235\354\262\264/index.js" new file mode 100644 index 0000000..b06c129 --- /dev/null +++ "b/week03/03_\352\260\235\354\262\264/index.js" @@ -0,0 +1,90 @@ +// const pooh = ['pooh', 'bear', 'disney character', 'boy']; +// 1. ๊ฐ์ฒด ์„ ์–ธ +const pooh = { + name: "pooh", + species: "bear", + job: "disney character", + gender: "boy", + "say-Hi": function () { + console.log("I'm winnie the pooh, What's your name?"); + }, +}; + +// 2. ๊ฐ์ฒด ์ ‘๊ทผ : ., [] + +// console.log(pooh['species']); +// console.log(pooh['say-Hi']()); + +// 3. ๊ฐ์ฒด์— ์ถ”๊ฐ€ ๋ฐ ์‚ญ์ œ + +pooh["say-Bye"] = function () { + console.log("I'm winnie the pooh, See you later"); +}; + +// console.log(pooh); + +pooh.favorites = ["honey", "friends", "cake"]; + +// console.log(pooh); + +delete pooh.favorites; + +// console.log(pooh); + +// ์ƒ์„ฑ์ž ํ•จ์ˆ˜ : ํ‹€ + +function Character(name, species, job, gender) { + this.name = name; + this.species = species; + this.job = job; + this.gender = gender; + this["say-Hi"] = function () { + console.log(`I'm ${this.name}, What's your name?`); + }; + this["say-Bye"] = function () { + console.log(`I'm ${this.name}, See you later`); + }; +} + +const winnie_the_pooh = new Character( + "winnie the pooh", + "bear", + "disney character", + "boy" +); + +console.log(winnie_the_pooh); + +console.log(winnie_the_pooh["say-Hi"]()); + +const snoopy = new Character("snoopy", "dog", "comic book character", "boy"); + +const pikachu = new Character( + "pikachu", + "squirrel", + "pokemon character", + "boy" +); + +console.log(snoopy, pikachu); +console.log(snoopy["say-Bye"](), pikachu["say-Bye"]()); + +winnie_the_pooh.favorites = ["honey", "friends", "cake"]; +console.log(winnie_the_pooh); + +// const obj = new Object(); +// console.log(obj) +// obj.name = 'dwell'; +// obj.greeting = function(){ +// console.log('hi') +// } + +const arr = new Array(); +const obj = new Object({ + name: "dwell", + greeting: function () { + console.log("hi"); + }, +}); + +console.log(obj, arr); \ No newline at end of file diff --git "a/week03/04_\355\225\250\354\210\230/index.html" "b/week03/04_\355\225\250\354\210\230/index.html" new file mode 100644 index 0000000..2fa5b25 --- /dev/null +++ "b/week03/04_\355\225\250\354\210\230/index.html" @@ -0,0 +1,16 @@ + + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git "a/week03/04_\355\225\250\354\210\230/index.js" "b/week03/04_\355\225\250\354\210\230/index.js" new file mode 100644 index 0000000..07a0f2f --- /dev/null +++ "b/week03/04_\355\225\250\354\210\230/index.js" @@ -0,0 +1,17 @@ +// function multiply10 (num) { +// const result = num * 10; +// return result; +// } + +// const data = multiply10(10); +// console.log(data); + +// const result = multiply10(10); + +// ======================================= +// arrow function : + +const multiply10 = (num) => num * 10; + +const data = multiply10(100); +console.log(data); \ No newline at end of file diff --git "a/week03/05_\354\241\260\352\261\264\353\254\270/index.html" "b/week03/05_\354\241\260\352\261\264\353\254\270/index.html" new file mode 100644 index 0000000..e25d708 --- /dev/null +++ "b/week03/05_\354\241\260\352\261\264\353\254\270/index.html" @@ -0,0 +1,16 @@ + + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git "a/week03/05_\354\241\260\352\261\264\353\254\270/index.js" "b/week03/05_\354\241\260\352\261\264\353\254\270/index.js" new file mode 100644 index 0000000..46edf25 --- /dev/null +++ "b/week03/05_\354\241\260\352\261\264\353\254\270/index.js" @@ -0,0 +1,97 @@ +// if๋ฌธ +// false : 0, -0, null, false, NaN, undefined, '' + +let age = 15; + +// if ( age > 19 ) { +// console.log('์ˆ ์„ ๋งˆ์‹ค ์ˆ˜ ์žˆ๋‹ค'); +// } + +// console.log('๋ฏธ์„ฑ๋…„์ž'); + +// ============================================== +// if, else๋ฌธ + +// if ( age > 19 ) { +// console.log('์ˆ ์„ ๋งˆ์‹ค ์ˆ˜ ์žˆ๋‹ค'); +// } else { +// console.log('๋ฏธ์„ฑ๋…„์ž'); +// } + +// ============================================== +// ์‚ผํ•ญ์—ฐ์‚ฐ์ž : ์กฐ๊ฑด ? ์ฐธ์ผ๋•Œ ์‹คํ–‰๋  ์ฝ”๋“œ : ๊ธฐ์ง“์ผ๋•Œ ์‹คํ–‰๋  ์ฝ”๋“œ + +// const result = age > 19 ? '์ˆ ์„ ๋งˆ์‹ค ์ˆ˜ ์žˆ๋‹ค': '๋ฏธ์„ฑ๋…„์ž'; +// console.log(result); + +// ============================================== +// if, else if, else๋ฌธ + +// if (age < 10) { +// console.log('์• ๊ธฐ'); +// } else if (age >= 10 && age < 20) { +// console.log('10๋Œ€'); +// } else if (age >= 20 && age < 30) { +// console.log('20๋Œ€'); +// } else if (age >= 30 && age < 40) { +// console.log('30๋Œ€'); +// } else if (age >= 40 && age < 50) { +// console.log('40๋Œ€'); +// } else if (age >= 50 && age < 60) { +// console.log('50๋Œ€'); +// } else if (age >= 60 && age < 70) { +// console.log('60๋Œ€'); +// } else { +// console.log('๋…ธ์ธ'); +// } + +// age = 63; + +// if (age >= 70) { +// console.log('๋…ธ์ธ'); +// } else if (age >= 60) { +// console.log('60๋Œ€'); +// } else if (age >= 50) { +// console.log('50๋Œ€'); +// } else if (age >= 40) { +// console.log('40๋Œ€'); +// } else if (age >= 30) { +// console.log('30๋Œ€'); +// } else if (age >= 20) { +// console.log('20๋Œ€'); +// } else if (age >= 10) { +// console.log('10๋Œ€'); +// } else { +// console.log('์• ๊ธฐ'); +// } + +// ============================================== +// switch๋ฌธ + +age = 30; + +switch (age) { + case 70: + console.log("70๋Œ€"); + break; + case 60: + console.log("60๋Œ€"); + break; + case 50: + console.log("50๋Œ€"); + break; + case 40: + console.log("40๋Œ€"); + break; + case 30: + console.log("30๋Œ€"); + break; + case 20: + console.log("20๋Œ€"); + break; + case 10: + console.log("10๋Œ€"); + break; + default: + console.log("์• ๊ธฐ"); +} \ No newline at end of file diff --git "a/week03/06_\353\260\230\353\263\265\353\254\270/index.html" "b/week03/06_\353\260\230\353\263\265\353\254\270/index.html" new file mode 100644 index 0000000..e69de29 diff --git "a/week03/06_\353\260\230\353\263\265\353\254\270/index.js" "b/week03/06_\353\260\230\353\263\265\353\254\270/index.js" new file mode 100644 index 0000000..b79667b --- /dev/null +++ "b/week03/06_\353\260\230\353\263\265\353\254\270/index.js" @@ -0,0 +1,67 @@ +// 1. For๋ฌธ + +// for (์ดˆ๊ธฐ๊ฐ’ ; ์ข…๋ฃŒ์กฐ๊ฑด ; ์ฆ๊ฐ) { +// ์‹คํ–‰ํ•  ์ฝ”๋“œ +// } + +// for (let i = 1 ; i < 11 ; i++) { +// console.log(i); +// } + +// const numArr = [45, 32, 11, 98, 22]; + +// for (let i = 0; i < numArr.length ; i++) { +// console.log(numArr[i]); +// numArr[i] += 10; +// } + +// console.log(numArr); + +// =============================================== +// 2. while๋ฌธ + +// ์‹œ์ž‘์  +// while (์กฐ๊ฑด) { +// ์ฝ”๋“œ +// ์ฆ๊ฐ +// } + +// let i = 12; +// while (i < 11) { +// console.log(i); +// i++; +// } + +// let i = 1; +// while (true) { +// if (i > 10) { +// break; +// } + +// i++; +// if (i%2 !== 0) { +// continue; +// } + +// console.log(i); +// } + +// const numArr = [45,32,11,98,22]; + +// let i = 12; +// while (i < numArr.length) { +// // console.log(numArr[i]); +// numArr[i] += 10; +// i ++; +// } + +// console.log(numArr); + +// ===================================== +// 3. do while๋ฌธ + +let i = 12; +do { + console.log(i); + i++; +} while (i < 11); \ No newline at end of file diff --git a/week04/codepen/index.html b/week04/codepen/index.html new file mode 100644 index 0000000..10a1aef --- /dev/null +++ b/week04/codepen/index.html @@ -0,0 +1,37 @@ + + + + + + + + Document + + + + +
+

Bucket List

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique modi eius sed nesciunt veritatis deleniti aperiam. Vero veritatis fugiat eos, deserunt, neque repudiandae impedit eius odio ex, voluptatem harum magni! +

+

+ +
+

+ +

+
    +
  • Bangkok
    • +
  • London
    • +
  • New York
    • +
  • Paris
    • +
  • Toronto
    • +
  • Barcelona
    • +
+
+
+ + + + \ No newline at end of file diff --git a/week04/codepen/index.js b/week04/codepen/index.js new file mode 100644 index 0000000..2333f79 --- /dev/null +++ b/week04/codepen/index.js @@ -0,0 +1,71 @@ +// DOM +// document = html +const $body = document.getElementsByTagName("body"); +const $container = document.getElementsByClassName("container"); +const $title = document.getElementById("title"); +const $cityList = document.getElementById("cityList"); +const $cities = $cityList.getElementsByTagName("li"); +const $cityDiv = document.querySelector(".city"); +// const $cities = $cityList.querySelectorAll('li'); + +console.log($body[0].innerText); +console.log($container[0].innerText); +console.log($title); + +console.log($cityList); +console.log($cities); + +// $cities.forEach(city => console.log(city.inneSrText)); + +// spread operator , Array.from +// 1. spread operator + +// const newCities = [...$cities] +// newCities.map(city => console.log(city.innerText)) + +// 2.Array.from + +const newCities = Array.from($cities); +newCities.map((city) => console.log(city.innerText)); + +$body[0].style.backgroundColor = "teal"; +$cityDiv.style.color = "grey"; + +// 3. element ์ถ”๊ฐ€ +const worstCity = document.createElement("ul"); +const worstCityDiv = document.createElement("div"); +const worstCitySubTitle = document.createElement("h2"); +const worstCityArr = ["Cairo", "London", "Risbon", "Sydney"]; + +worstCitySubTitle.innerText = "< Worst 5 >"; +worstCityDiv.appendChild(worstCitySubTitle); + +worstCityArr.map((city) => { + const worstCityItem = document.createElement("li"); + worstCityItem.innerText = city; + console.log(worstCityItem); + worstCity.appendChild(worstCityItem); +}); + +worstCityDiv.appendChild(worstCity); +$container[0].appendChild(worstCityDiv); + +// const worstCityList = ` +//