Published
Edited
Apr 30, 2020
1 fork
1 star
Insert cell
Insert cell
Insert cell
function addNum(n, m) { return n + m; }
Insert cell
// addNum(10,20)
Insert cell
addNumAnonymous = function (n,m) { return n + m; }
Insert cell
// addNumAnonymous(10,20)
Insert cell
addNumArrow = (n, m) => n + m
Insert cell
// addNumArrow(10,20)
Insert cell
// (function (n,m) { return n + m; })(10,20)
Insert cell
// ((n, m) => n + m)(10,20)
Insert cell
Insert cell
Insert cell
Insert cell
// 합성함수를 고차함수로 작성 - function 으로
function comp1(f,g) {
return function (x) { return f(g(x)) }
}
Insert cell
{
let f1 = function (x) { return x+1 }
let g1 = function (x) { return x*2 }
let h1 = comp1(f1,g1)
return h1(10) // f1(g1(10)) = f1(20) = 21
}
Insert cell
// 합성함수를 고차함수로 작성 2 => 으로
comp2 = (f,g) => x => f(g(x))
Insert cell
{
let f2 = x => x+1
let g2 = x => x*2
let h2 = comp2(f2,g2)
return h2(10) // f2(g2(10)) = f2(20) = 21
}
Insert cell
Insert cell
doc02 = html`<div>버튼을 누르면 어떻게 될까요?</div>`
Insert cell
doc03 = html`<div>버튼을 클릭하면 어떻게 될까요?</div>`
Insert cell
btn02 = html`<button>눌러봐</button>`
Insert cell
// 최대 1개의 이벤트 핸들러 활용
btn02.onclick // = () => { doc02.innerHTML += "<br>버튼을 눌렀습니다!" } // 이벤트 핸들러 함수
/*
{
btn02.onclick = handler2
btn02.onclick = handler3
}
*/
Insert cell
handler2 = () => { doc02.innerHTML += " 버튼을 눌렀습니다!" }
Insert cell
handler3 = () => { doc03.innerHTML += " 버튼을 클릭했어!" }
Insert cell
// 하나의 이벤트에 여러 개의 이벤트 핸들러 활용이 가능한 방법
/* {
btn02.addEventListener('click', handler2 )
// btn02.removeEventListener('click', handler2 )
btn02.addEventListener('click', handler3 )
// btn02.removeEventListener('click', handler3 )
} */
Insert cell
Insert cell
Insert cell
Insert cell
doc01 = {
const n1 = "n<sub>1</sub>"
const n2 = "n<sub>2</sub>"
return html`
<form action="javascript:void()" style="width: min-content">
<fieldset style="width: max-content; border-style: none none solid none;">
<label>${n1} = <input id="num1" type="number" value="0"></label>
<br>
<label>${n2} = <input id="num2" type="number" value="0"></label>
</fieldset>
<div style="margin: 0.5em">
${n1} + ${n2} = <output id="sum">0</output>
<button id="calc" style="float: right;">계산</button>
</div>
</form>`
}
Insert cell
calc = doc01.querySelector('#calc');
Insert cell
calc.onclick = sumNumbers
Insert cell
// calc.addEventListener('click', sumNumbers);
// calc.removeEventListener('click', sumNumbers);
Insert cell
// doc01.querySelector("#num1").value
Insert cell
// 버튼에 등록할 이벤트 핸들러 함수
sumNumbers = () => {
const n1 = doc01.querySelector("#num1").value // 첫번째 input 요소의 value 속성값을 읽어옴
const n2 = doc01.querySelector("#num2").value // 두번째 input 요소의 value 속성값을 읽어옴
const sum = doc01.querySelector("#sum") // output 요소를 선택
sum.value = n1 + n2 // 여기서 의도하지 않은 결과가 계산될 것이다
// 이 함수가 숫자 덧셈을 제대로 하도록 고쳐 보라
}
Insert cell
Insert cell
navigator.vendor
Insert cell
navigator.onLine
Insert cell
window
Insert cell
now = new Date()
Insert cell
now.toLocaleDateString() + " " + now.toLocaleTimeString()
Insert cell
Math.random()
Insert cell
book = (
{
title: "자바스크립트",
pages: 500,
price: 15000,
info() {
return `${this.title} 책의 분량은 ${this.pages}쪽이며 가격은 ${this.price}원입니다.`
}
}
)
Insert cell
book.info()
Insert cell
{ // Object는 일반적으로 for ( .. in obj) 형태의 반복문 가능
for (let i in book)
console.log(i)
}
Insert cell
{ // Object는 일반적으로 for ( .. of obj) 형태의 반복문 항상 가능하지는 않다
for (let i of book)
console.log(i)
}
Insert cell
book.title
Insert cell
book['title']
Insert cell
book['info']()
Insert cell
book.author = "Ko" // 기존에 객체에 없었던 속성도 추가 가능
Insert cell
book
Insert cell
// 생성자 함수 (참고로 => 하면 안됩니다)
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})`
}
Insert cell
webBook = new Book('웹 표준의 정석', 'Ko', 608, 28000)
Insert cell
webBook.info()
Insert cell
youtubeBook = new Book("유투브 영상 만들기", "Kim", 368, 16000)
Insert cell
youtubeBook.info()
Insert cell
pyBook = new Book("점프 투 파이썬", "Park", 352, 18800)
Insert cell
pyBook.info()
Insert cell
bookList = [webBook, youtubeBook, pyBook]
Insert cell
bookUL = {
let innerUL = ""
for (let b of bookList) // 배열과 같이 iterable 성질의 객체에는 for (.. of ..) 형태의 반복문 가능
innerUL += `<li>${b.info()}</li>`
return html`<ul>${innerUL}</ul>`
}
Insert cell
// bookUL.children[2].innerHTML
Insert cell
Insert cell

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