The document discusses HTML, CSS, and JavaScript concepts including: - Using HTML and CSS for static and interactive user interfaces. - Code examples for CSS prefixes, accordion components, promises, async functions and error handling, sliding animations and image loading. - Variable declarations and scope, constant variables, type checking, for loops, and array mapping in JavaScript. - Debugging with breakpoints and examining the call stack. - Selecting elements, creating elements, and adding event listeners in the DOM.

16. HTML,CSS
===
STATIC UI

17. INTERACTIVE
===
GOOD UX

18. html, css code?

19. <div class="accordion__item">
<h3 class="accordion__title js-title">A random title</h3>
<p class="accordion__copy js-copy">By not having the imagination tis</p>
</div>

20. .foo {
@include prefix(transform, rotate(90deg), ('webkit', 'ms'));
}

21. .foo {
@include prefix(transform, rotate(90deg), ('webkit', 'ms'));
}

47. “ 첨에 들어가면 이미지가 겁나 늦게 떠..
리액튼가 그거때문에 그런거아냐?”
- 사랑하는 우리 사장님,

48. “ API 변경됐다네요, 이참에
promise쓴거 async 기반으로 좀 개선해보고요.
가끔 데이터 못가져올때가 있다는데,
실패한 경우 메시지 처리도 같이 고려해봐야할 거 같아요.
아참, 슬라이딩 애니메이션 좀 느리다는데, image 로딩과 겹친 렌더링 문
제 같아요.. 원인찾아서 DOM조작 좀 다시 해보죠.”
“ 우리 사이트 리액트인가 그거에요? 왜이렇게 느려요?”

78. var foo = 1;

79. var foo = 1;
var var = foo + 1;
Uncaught SyntaxError: Unexpected token var

80. var foo = 1;
var bar = foo + 1;

81. var foo = 1;
var bar = foo + 1;
plusOne() //2

82. function plusOne() {
var foo = 1;
var bar = foo + 1;
return bar;
}
plusOne() //2

83. function plusOne(base) {
var bar = base + 1;
return bar;
}
var foo = 1;
plusOne(foo) //2

84. function plusOne(base) {
const bar = base + 1;
return bar;
}
var foo = 1;
plusOne(foo) //2

85. function plusOne(base) {
const bar = base + 1;
bar = bar + 0;
return bar;
}
var foo = 1;
plusOne(foo);
VM1887:3 Uncaught TypeError: Assignment to
constant variable.

87. function plusOne(base) {
const bar = base + 1;
debugger;
bar = bar + 0;
return bar;
}
var foo = 1;
plusOne(foo);

89. function plusOne(base) {
const bar = base + 1;
return bar;
}
var foo = 1;
plusOne(foo); //2

90. function plusOne(base) {
const bar = base + 1;
return bar;
}
var foo = '1';
plusOne(foo); //11

91. function plusOne(base) {
console.log(typeof base);
let bar = base + 1;
return bar;
}
var foo = '1';
plusOne(foo); //string, ’11'

92. function plusOne(base) {
base = (typeof base === 'number') ? base : +base;
let bar = base + 1;
return bar;
}
var foo = '1';
plusOne(foo); //string, ’2’

93. function plusOne(base) {
base = (typeof base === 'number') ? base : +base;
let bar = base + 1;
return bar;
}
var foo = [‘1’,1,-1,NaN, null];
plusOne(foo); //NaN

94. function plusOne(base) {
base = (typeof base === 'number') ? base : +base;
let bar = base + 1;
return bar;
}
var foo = [‘1’,1,-1,NaN, null];
plusOne(foo[2]); //0
plusOne(foo[3]); //NaN

95. function plusOne(base) {
base = (typeof base === 'number') ? base : +base;
let bar = base + 1;
return bar;
}
var foo = ['1',1,-1,NaN,null];
var plusFoo = [];
for(var i=0; i<foo.length; i++) {
plusFoo.push(plusOne(foo[i]));
};
console.log(plusFoo); //[2, 2, 0, NaN, 1]

96. function plusOne(base) {
base = (typeof base === 'number') ? base : +base;
let bar = base + 1;
return bar;
}
function makePlusArray() {
// ,
}
var foo = ['1',1,-1,NaN,null];
makePlusArray(foo); //[2,2,0,NaN,1]

97. function plusOne(base) {
base = (typeof base === 'number') ? base : +base;
let bar = base + 1;
return bar;
}
function makePlusArray(foo) {
var plusFoo = [];
for(var i=0; i<foo.length; i++) {
plusFoo.push(plusOne(foo[i]));
};
return plusFoo;
}
var foo = ['1',1,-1,NaN,null];
makePlusArray(foo); //[2,2,0,NaN,1]

98. function plusOne(base) {
base = (typeof base === 'number') ? base : +base;
let bar = base + 1;
return bar;
}
function makePlusArray(foo) {
var plusFoo = [];
debugger;
for(var i=0; i<foo.length; i++) {
plusFoo.push(plusOne(foo[i]));
};
return plusFoo;
}
var foo = ['1',1,-1,NaN,null];
makePlusArray(foo); //[2,2,0,NaN,1]

99. .
step into, step over, step out.
call stack

100. var foo = ['1',1,-1,NaN,null];
makePlusArray(foo); //[2,0]
//hints
- typeof
- isNaN()
- for continue

101. function plusOne(base) {
let bar = base + 1;
return bar;
}
function makePlusArray(foo) {
var plusFoo = [];
for(var i=0; i<foo.length; i++) {
if(typeof foo[i] !== 'number' || isNaN(foo[i])) continue;
plusFoo.push(plusOne(foo[i]));
};
return plusFoo;
}
var foo = ['1',1,-1,NaN,null];
makePlusArray(foo); //[2,0]

102. ['1',1,-1,NaN,null].filter((v) => typeof v === "number" && !isNaN(v))
.map(v => v+1);
JavaScript .

106. var heading = document.createElement("h1");
var heading_text = document.createTextNode(“hello codesquad!”);
heading.appendChild(heading_text);
document.body.appendChild(heading);

110. Element.addEventListener()

111. const el = document.querySelector(‘section’);
el.addEventListener(‘click’, (evt) => {
evt.target.style.color = ‘#555’;
}

112. .