Published
Edited
Apr 29, 2020
1 fork
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// change-1
doc01 = html`
<div>
<h2 id="heading01">자바스크립트</h2>
<p id="text">위 텍스트를 클릭해 보세요</p>
</div>
`
Insert cell
{
let heading = doc01.querySelector('#heading01')
heading.onclick = () => {
heading.style.color = "red"
}
}
Insert cell
// 참고로 ObservableHQ 노트북에서는 다른 셀에 정의된 지역변수를 참조할 수는 없다
mycell = heading
Insert cell
doc02 = html`
<h2>환영합니다</h2>
<input>
<button>입력</button>
<div>...<div>
`
Insert cell
{ // 주교재 2장에 소개된 구식 이벤트 등록 방식
let button = doc02.querySelector('button')
let input = doc02.querySelector('input')
let output = doc02.querySelector('div')

button.onclick = () => {
let name = input.value
output.innerHTML = "<b>" + name + "</b>님 잘오셨습니다!"
}
}
Insert cell
doc03 = html`
<h2>환영합니다</h2>
<input>
<button>입력</button>
<div>...</div>
`
Insert cell
{ // 요즘의 바람직한 방식의 이벤트 등록 (주교재 08-4의 p. 250)
const button = doc03.querySelector('button')
const input = doc03.querySelector('input')
const output = doc03.querySelector('div')
button.addEventListener(
'click',
() => {
const name = input.value
output.innerHTML = "<b>" + name + "</b>님 잘오셨습니다!"
}
)
}
Insert cell
timeString = { // js-time
const now = new Date()
const display = now.toLocaleTimeString()
return "현재 시각은 " + display
}
Insert cell
Insert cell
input04 = html`<input>`
Insert cell
button04 = html`<button id="btn04">입력</button>`
Insert cell
output04 = html`<div>...</div>`
Insert cell
input04
Insert cell
button04
Insert cell
Insert cell
// html로 나타나는 셀에 이름을 붙이면 그것은 DOM객체를 참조하게 된다.
doc05 = html`
<div>
HTML 예제
<ul style="background-color: LightGray">
<li id="zero" class="even">0</li>
<li id="one" class="odd" >1</li>
<li id="two" class="even">2</li>
<li id="three" class="odd" >3</li>
<li id="four" class="even">4</li>
<li id="five" class="odd" >5</li>
</ul>
</div>
`
Insert cell
{
return doc05;

// 위 HTML 예제 안의 모든 li 요소를 검은 바탕에 흰글씨로
let all = doc05.querySelectorAll('li');
all.forEach( e => {
e.style.color = 'white';
e.style.backgroundColor = 'black';
} );

return doc05;
// DOM API를 이용해 선택자로 골라낸 요소(element) 하나의 글자색과 배경색 변경
let e = doc05.querySelector('.even'); // 다른 선택자로도 해보라
// 하나의 element 스타일 변경
e.style.color = 'red';
e.style.backgroundColor = 'yellow'

return doc05;
// DOM API를 이용해 선택자로 골라낸 요소(element) 여러개의 글자색과 배경색 변경
let es = doc05.querySelectorAll('.even'); // 다른 선택자로도 해보라
// element 여러개 스타일 변경
for (let i = 0; i < es.length; ++i) {
es[i].style.color = 'red';
es[i].style.backgroundColor = 'yellow';
}

return doc05;
}
Insert cell
Insert cell
now = new Date()
Insert cell
// ObservableHQ에서도 vscode 정도까진 아니라도 어느 정도의 인텔리센스(자동완성) 기능 지원됨
// now. 입력하고 탭을 눌러보라
Insert cell
function calcKoreanAge(birthYear) {
const now = new Date()
const currentYear = now.getFullYear()
const age = currentYear - birthYear + 1
return age
}
Insert cell
calcKoreanAge(1990)
Insert cell
calcKoAge = function (birthYear) {
const now = new Date()
const currentYear = now.getFullYear()
const age = currentYear - birthYear + 1
return age
}
Insert cell
calcKoAge(1990)
Insert cell
calcKorAge = birthYear => new Date().getFullYear() - birthYear + 1
Insert cell
calcKorAge(1990)
Insert cell
{
const x = 10
// ...
x = x + 2
return x
}
Insert cell
{
let x = 10
// ...
x = x + 2
return x
}
Insert cell
Insert cell
// typeof 1990
Insert cell
// typeof 3.141592
Insert cell
// typeof "hello"
Insert cell
// typeof 'hello'
Insert cell
// typeof 'h'
Insert cell
// typeof true
Insert cell
// typeof false
Insert cell
// typeof (1 < 2)
Insert cell
// typeof calcKorAge
Insert cell
Insert cell
{
const first // 초기화 안해주면 에러
}
Insert cell
{
let first // 초기화 안해주면 undefined
return first
}
Insert cell
{
let second = 100
// .. 뭔가 열심히 second를 사용하다
second += 1
// 더 이상 second를 사용하지 않겠다 또는 정상적인 값이 지정되어 있지 않다는 것을 명확히 해 주고 싶을 때
second = null
return second
}
Insert cell
Insert cell
seasons = ["봄", "여름", "가을", "겨울"]
Insert cell
// typeof seasons
Insert cell
// seasons instanceof Object
Insert cell
// seasons instanceof Array
Insert cell
// seasons instanceof Node
Insert cell
// seasons. 하고 탭을 쳐서 어떤 메소드들이 있나 보자
Insert cell
Insert cell
kim = ( { givenName: "John", familyName: "Kim", birthYear: 1985, address: "Daejeon" } )
Insert cell
kim.address
Insert cell
kim.givenName + " " + kim.familyName + " (" + kim.birthYear + ")" + " lives in " + kim.address + "."
Insert cell
`${kim.givenName} ${kim.familyName} (${kim.birthYear}) lives in ${kim.address}` // 템플릿 리터럴
Insert cell
Insert cell
Insert cell
Insert cell
10 + 10 // number 끼리 덧셈
Insert cell
"Hello" + "World" // string 끼리 연결
Insert cell
10 + "World" // number와 string를 +하는 경우는 number를 string으로 바꿔서 연결
Insert cell
"Hello" + 10 // string과 number를 +하는 경우는 number를 string으로 바꿔서 연결
Insert cell
Insert cell
10 == "10"
Insert cell
10 === "10"
Insert cell
["봄", "여름"] == ["봄", "여름"] // Object 끼리는 == 연산이 === 연산과 같이 동작
Insert cell
["봄", "여름"] === ["봄", "여름"]
Insert cell
{
const arr1 = ["봄", "여름"]
const arr2 = arr1 // 같은 객체로 초기화
return arr1 === arr2
}
Insert cell
{
const arr1 = ["봄", "여름"]
const arr2 = ["봄", "여름"] // 같은 내용의 배열이지만 별도의 객체로 초기화
return arr1 === arr2
}
Insert cell
Insert cell
{ // if else 예제
let userNumber = 123
if (userNumber % 3 == 0) {
return "3의 배수입니다."
} else {
return "3의 배수가 아닙니다."
}
}
Insert cell
doc06 = html`<div>...</div>`
Insert cell
{ // switch 예제 1-마케팅, 2-개발, 3-디자인
let session = 5
switch(session) {
case 1: doc06.innerHTML = "마케팅 세션은 201호에서 진행됩니다."
break;
case 2: doc06.innerHTML = "개발 세션은 202호에서 진행됩니다."
break;
case 3: doc06.innerHTML = "디자인 세션은 203호에서 진행됩니다."
break;
default: doc06.innerHTML = "잘못 입력했습니다."
}
}
Insert cell
Insert cell
{ // 1에서 100까지 덧셈
let sum = 0
for (let i = 1; i <= 100; ++i) {
sum += i
}
return sum
}
Insert cell
{ // 1에서 100까지 덧셈
let sum = 0
let i = 1
while (i <= 100) {
sum += i
++i
}
return sum
}
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