07 주차 드디어 자바스크립트 복습의 시간 / Choiyk-dev

Choiyk-dev

Workspace

Published

Edited

Jun 23, 2020

md`# 07 주차 드디어 자바스크립트 복습의 시간

사실 제겐 다른 것보다 JavaScript가 가장 어렵고 난해하다는 말입니다`

document01 = html`

<div>

</div>

{//오 이제 html과 들여쓰기를 직접 쓰지 않아도 됩니다!!

let heading = document01.querySelector('#heading')

//let은 변할 수 있는 변수 id=heading인 것을 모두 선택

heading.onclick = () => { //heing을 클릭하면 함수를 실행할건데,

heading.style.color = "red" //heading의 -> style에서 -> color의 값을 red로 할거야

}

} // 실행 잘 됩니다 :D

document02 = html`

<h2>JavaScript의 행복한 세상 =v= </h2>

<input>

<div>결과값을 출력할 부분입디댜</div>

h2 제목태그, input으로 텍스트창 하나 만들었습니다.<br>

button 태그로 입력이라는 이름의 버튼 하나 생성했습니다.,!

{

let button = document02.querySelector('button') //id=button을 선택하여 button으로

let input = document02.querySelector('input') //위 원리와 동일

let output = document02.querySelector('div')

button.onclick = () => { // button을 클릭하면 함수를 실행하는데,

let name = input.value // input의 값을 name에 담아서

output.innerHTML = "</b>" + name + "</b>님 JavaScript와 싸워서 꼭 이겨주세요!!!"

//name의 값을 output(div)의 값으로 출력합니다.

}

} // 잘 실행됩니다!

document03 = html`

<h2>어서와, observerableHQ는 처음이지?</h2>

<input>

{ //바람직한 이벤트 등록을 구현할 겁니다.

const button = document03.querySelector('button') //query로 선택자 지정

const input = document03.querySelector('input')

const output = document03.querySelector('div')

button.addEventListener('click', () => { //button은 이벤트 'click'을 기다리고 있어

const name = input.value //click되면 input에 들어온 값을 name에 담고

output.innerHTML = "<b>" + name + "</b>님 들어오는건 마음대로지만 나가는건 아닙니다^^"

//output의 값에 대입해서 코멘트를 출력할거야

}

)

} // 완벽하게 실행되도다!!! ><

timeString = { //강의 영상에서 교수님께서 새벽까지 강의자료 만들고 계셨음에 존경합니다..

const now = new Date() //새로운 Date 객체를 now 변수에 등록해주어요

const display = now.toLocaleTimeString() //now의 toLocaleTimeString함수를 display로

return "현재 시각은 " + display // 값 반환은 문자열과 합쳐서 보내버리기-

}

md`<hr> 이거 코드 숨기는거 어떻게 하는거지..

---

input04 = html`<input>` //input 텍스트창을 만들어서 등록합디댜

button04 = html`<button id="btn04">입력창</button>` //버튼을 만들자

output04 = html`<div>_ _ _</div>`//결과 보낼 div도 생성했어야요

comment = html`<p>아하, 위에서 만든 게 객체래요. 왜 html을 변수에 옮기나 했습니다</p>`

md`---

#이제 다시 HTML 예제를 활용할 겁니다.<br> 물론, JS 객체로 옯겨서..!!

---

//HTML에 이름을 부여하면 DOM 객체 참조와 같슙니다

document05 = html`

<div>

방 안에 모기가 있어요

</ul>

</div>

{

// return document05; //문서 돌려보내버리기

//위의 텍스트에 스타일을 입혀보아요. li요소만 검바탕에 흰 글씨로 바꿉시다

let all = document05.querySelectorAll('li'); //여러개면 querySelectorAll사용하기!

all.forEach( e => {

e.style.color = 'white';

e.style.backgroundColor = 'black';

} );

// return document05; // 적용이 왜 안되죠. 외 않됀데..? 왜지 진짜. -> 해결 :D

let e = document05.querySelector('.Where'); //여러개지만 querySelector쓰면 하나만

e.style.color = 'red';

e.style.backgroundColor = 'yellow'

// return document05;

let es = document05.querySelectorAll('.Why');

es.forEach(e => {

e.style.color = 'red';

e.style.backgroundColor = 'orange';

});

return document05;

} // 다 실행하고 나니까 해괴한 결과물이 나왔네요 '^'a

md` ---

# 변수와 함수!

무슨 패트와 매트도 아니구.. :p

---

doc00 = html`

<p>

변수는 const, var, let을 중심으로 설명할수 있겠네요.<br><br>

const는 선언하고 값이 변하지 않을 때<br>

let은 다른 값으로 재할당할 상황이 발생할 것 같을 때<br>

var은 기존의 레거시 코드를 남겨야 할 때 사용한다고 하는데,<br>

지금은 잘 사용하지 않아서 이전 코드의 실행을 위해서 사용하는 걸로 알고있는난..(?)

</p>

//함수를 이해해보자요. :d

now = new Date()

// 새로운 Date 객체를 만들어 함수를 실행하는 것이라고 해야 할까나요

// 기능적으로 현재 시각을 나타내어 줍니다.

function calcKoreanAge(birthyear) {

const now = new Date();

const currentYear = now.getFullYear() //현재 시각 데이터에서 전체 년도를 가져와유

const age = currentYear - birthyear + 1 // 만 나이니까 1살 더 먹어줘야죠

return age //결과야요

}

//함수를 다른 셀에서 실행시켜 봅니다.

calcKoreanAge(1999) // -> 정답 !

calcKrAge = birthYear => new Date().getFullYear() - birthYear + 1

// 이해가 필요하다. birthYear이 함수인데 Date함수에서 getFullYear을 실행하고

// 거기에 birthYear을 빼고 1을 더한값이 birthYear에 반환되어 calcKrAge로 들어온다는것.

calcKrAge(1999) //스스로 만들라고 하면 못 만들것 같다.

html`

변수 중에서 const는 초기화 안 해주면 에러를 띄우고<br>

let은 초기화 해주지 않으면 undefined로 실행은 됩니다<br>

{

let second = 100

// -> second는 100의 값으로 잘 사용되고 있습니다.

second += 1 // 1을 더해주어야요.

// second를 모두 사용해서 더이상 사용하지 않아도 되네요

second = null; // 값을 null으로 비워주면 관리가 쉬워질 것입니다.

return second

}

md`

# 형 이제 배열한다. 힘들다. 눈이 침침해,.,

---

// 배열 만들자

Fruits = ["나는 사과", "나는 딸기", "나는 귤", "나는 포도", "아이엠그라운드.."]

typeof Fruits //배열에 어떤 값이 들어가든 배열 자체는 object 자료형이 나타나네요

// 객체 만들자

Choi = ( { givenName : "Heawon", familyName : "Choi", studentId : "20201010"} )

// 이름 정하고 소괄호 안에 중괄호 열어서 속성 입력하면 되디둉

`${Choi.givenName} ${Choi.familyName}` // 문자열로 바꾸어 줍니다. 형식이 어렵네여

md`

---

# # 안댸걨네- 연산자 알고 넘어가자!

게임을 조금 하고 싶지만 하면은 지금까지 한거 지워질 것 같애

---

html`

<div>

적어가면서 개념 이해에 중점을 두자! <br><br>

number은 number끼리 더할 수 있고, string과 string도 더할 수 있다. <br>

근데 number와 string을 더하면 string이 자기주장이 강해서<br>

number가 string화 되어 연결된다.

</div>

html`

연산자를 비교할 때 교수님이 주의하라고 하셨다!! 생각하자!!!<br><br>

핵심은 ==와 ===의 비교에 있다.

<div>

<pre>

Object에서는 ==나 ===나 별반 다를 게 없대요ㅡ!!

==는 값을 비교하는거라 자료형이 달라도 값이 값으면 true를 나타내는데 말입니다.

===는 자료 자체를 비교하기 때문에 값이 같더라도 자료형이 다르면 false랍니다.

즉, 같은 내용의 배열이더라도 객체가 가리키는게 다르다면

===연산의 결과는 false가 된다고 하더랍니다. 기억합시다!!

</pre>

</div>

html`

<h2> 이제 제어문을 구현하는 방법에 대해 알아보아요 </h2>

{ // if else를 구현해볼까?

let userNumber = 140

if (userNumber % 3 == 0) {

return "3의 배수지!"

} else {

return "3의 배수가 아닌걸.."

}

document06 = html`<div>___</div><p>결과를 출력할 부분입니댜</p>`

{ // switch를 구현해볼까?

let num = 2

switch(num) {

case 1: document06.innerHTML = "너는 내 맘속의 1등:)"

break;

case 2: document06.innerHTML = "2등하면 홍진호 2등하면 홍진호"

break;

case 3: document06.innerHTML = "3번은 별로 생각나는 게 없다요.."

break;

case 4: document06.innerHTML = "4 사랑해 널 사랑해"

break;

default: document06.innerHTML = "대체 무얼 입력한겁니까"

}

{ //다 아는 내용이라 내용만 한 번 훓고 넘어가는게 시간 절약에 좋겠어요.

// 반복문 입니다.

let sum = 0

for (let i = 1; i <= 100; ++i) {

sum += i

}

return sum

let result = 0

let j = 1

while (j <= 100) {

result += j

++j

}

return result

//이건 while문입니다. 값이 두 개가 한 꺼번에 출력되지 않는군요!(?!)

}

md`---

## # 08 주차. 사실 여기서부터가 고난도.. 살려쥬

이벤트 다루는게 가장 어려워요. 물론, 이것도 시험문제로 나오겠죠. S.O.S

---

//같은 함수를 표현하는 방법은 정말 다양합니다.

function addNum(n, m) { return n + m; } // 가장 익숙할 매개변수와 구현부 함수

//위 함수를 다른 셀에서 실행합니다.

addNum(10, 20)

// -> 근데 셀이 많으면 코드 관리도 괜히 복잡하고 그러잖아요. 그래서

// 비교적 간단하게 표현하기 위해 다른 형식으로도 함수를 구현할 수도 있습니다.

(function (n,m) {return n+m;}) (10,20) // 같은 셀에서 함수를 정의하고 실행할 수 있어요

((n,m) => n+m) (10,20) //이건 함수의 트레이드인 function을 없애버렸어요. 참 간단하죠?

// 수학에 약했던 본인인지라 고차함수도 조금 어렵게 다가오더랍니다.

function comp(f, g) { //매개변수 두 개를 받아서

return function (x) { return f(g(x)) } // 새 함수로 보내는데, 이 함수의 매개변수는

// g함수의 매개변수로 들어가고, 그 결과값이 f함수의 매개변수가 되어 최종값을 리턴합니다

} // 어려워요,,

{

let f1 = function (x) { return x+1 } // x+1을 f1에 담아요

let g1 = function (x) { return x*2 } // x*2를 g2에 담아요

let h1 = comp(f1, g1) //x+1식과 x*2식을 comp 함수에 넘겨주어요.

// (f1(x*2))

return h1(10) // -> 10이 들어와서 10*2=20이 f1(20)으로 20+1=21이에요.

}

//이건 또 식이 복잡해지면 머릿속에서 계산이 안 되더라구요.

comp2 = (f, g) => x => f(g(x)) // 위의 함수를 간소화한 형태에요. 확실히 보기 죠습니다.

{

let f2 = x => x+1

let g2 = x => x*2

let h2 = comp2(f2, g2)

return h2(10) //원리는 위의 셀에서와 같습니다. =21

}

md`

사실, 강의 영상 보면서도 이해하기에 지식적 역량이 부족한 탓에... <strong>지금부터라도 해보자!</strong> <br>

btn = html`<button>클릭좀</button>`

document11 = html`<div>클릭해서 다른 결과를 출력할 부분이에요</div>`

btn.onclick = () => {

// document11.innerHTML += "<br>진짜 누를줄이야.. 굉장한걸!"

btn.onclick = handler01

btn.onclick = handler02 //핸들러의 다중 등록도 가능합디댜..는 마지막거만 실행돼요.

} // 버튼을 누르면 코멘트가 추가됩니다. innerHTML을 사용하여 값 변경한거죠.

// 이벤트 핸들러를 더 등록해보는거에요!!!

handler01 = () => {

document11.innerHTML += "<br>사실 핸들러 사용 잘 모르겠지?"

}

handler02 = () => {

document11.innerHTML += "<br>그래도 전보단 이해가 되네"

}

//이벤트 핸들러의 다중사용을 가능케 하는 방법!

{

btn.addEventListener('click', handler01)

btn.addEventListener('click', handler02)

} // => 바로 EventListener를 사용한다! 두개를 한꺼번에 실행시킬 수 있습니다.

document12 = {

const n1 = "n<sub>1</sub>"

const n2 = "n<sub>2</sub>"

return html`

<br>

</fieldset>

${n1} + ${n2} = <output id="sum">0</output>

</div>

</form>`

}

// 아무리 생각해도 이 코드를 구현하신 교수님께 경의를 바칩니다.. 대단합니다.

calc = document12.querySelector('#calc'); //id=calc를 모두 잡아요

calc.onclick = sumNumbers // 클릭하면 실행할 동작인데, 구현해야 합니다.

sumNumbers = () => {

const n1 = document12.querySelector("#num1").value //num1 값 가져와요

const n2 = document12.querySelector("#num2").value //num2 값 가져와요

const sum = document12.querySelector("#sum") //sum 변수를 output 요소로 선택해요

sum.value = Number(n1) + Number(n2)

} // 안 보고 코드 작성하지 못 할 것 같다,,

html`

<hr>

<h4>

원리를 파악하고 자신이 응용할 수 있도록 발전시키는 것을<br>

목표로 하는게 가장중요한 것 같네요.

</blockquote>

</h4>

다음에 할 내용은 객체에요.

//이건 이전에도 했어요. 새로운 객체로 날짜 나타내기

now2 = new Date()

now2.toLocaleDateString() + " " + now.toLocaleTimeString()

// date string은 날짜를 나타내고 time string은 시간을 나타내고 있는 걸요

book.info() //생성자 함수와 같은 역할 :)

{ // object 형태응 in이 가능하고 of는 불가능한 경우가 있으니 사용 시 주의하기

for (let i in book)

console.log(i)

}

//객체의 속성도 따로 추가할 수 있슈니다

book.author = "kim"

function Book(title, author, pages, price) {

this.title = title;

this.author = author;

this.pages = pages;

this.price = price;

this.info = () =>`${this.title} (${this.author} 지음, ${this.pages}쪽, ₩${this.price})`

} // 위에껀 아니었고 이게 생성자 함수이었습니다-.

//객체를 등록해봅시다.

webBook = new Book('JavaScript 박살내기','han',200,29800) // 생성자 함수 등록 성공!

webBook.info()

youtubeBook = new Book("유투브 영상 만들기", "Kim", 368, 16000)

pyBook = new Book("점프 투 파이썬", "Park", 352, 18800) // 강의 자료에 나와있는 객체

//객체로 배열을 구성할겁니다.

bookList = [webBook, youtubeBook, pyBook]

bookUL = {

let innerUL = "" //내용없이 변수만 만들어둡니다.

for (let b of bookList) // 배열은 of 형태의 반복문을 사용할 수 있습니다.

innerUL += `<li>${b.info()}</li>` // 배열의 정보를 innerUL에 담아요. 모든 내용을요

return html`<ul>${innerUL}</ul>` // html으로 출력합니다.

}

md`

지금 해보니까 배열이 제일 어려운것 같습니다. <br>

<b>내용이 많이 길어져서 새 노트북에 이어서 학습해야겠습니다.</b>

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more