Sololearn 으로 JavaScript 독학하기 2

로켓 사이언스는 아니지만 소프트웨어 엔지니어가 되는 것도 어느정도의 수학적 이해력과 사고력을 필요로 합니다. 저는 아주 수학머리가 없는 것은 아니지만 그렇다고 뛰어나지도 않습니다. 다행히 머리가 나쁘지는 않은 것 같습니다. 자꾸 반복해서 연습하고 보다보면 나아질 거라는 희망을 가지고 오늘도 열심히 프로그래밍을 공부합니다. 자바스트립트 언어를 끝내고 오늘부터는 Java로 넘어갑니다. 

sololearn JavaScript

Dom & Dome Tree

• Dom 구조는 tree 구조로 설명할수 있음
• html elements는 tree의 nodes임
• 같은 레벨에 있으며 siblings 위는 parents 아래 레벨은 child
  • 아래 예시: html의 child는 head, body; head의 child는 title; title은 parent 하나, no children;

Dom JavaScript

 

The document Object

 

 

 

Working with DOM

• element.childNodes: child nodes의 array를 return
• element.firstChild: element의 첫번째 child node를 return
• element.lastChild: element의 마지막 child node를 return
• element.hasChildNodes: element가 child node가 있으면 return 없으면 false
• element.nextSibling: 같은 tree level의 다음 node를 return
• element.previousSibling: 같은 tree level의 이전 node를 return
• element.parentNode: element의 parent node를 return

DOM properties and methods

 

CSS properties

• dashes(-) property name에 사용 안됨
  • ex) background-color -> backgroundColor

css properties

 

Removing & Replacing Elements

• .removeChild(node): element를 지우기위해서(remove) 쓰는 method
• .replaceChild(newNode, oldNode): oldNode를 newNode로 대체(replace)

removing and replacing elements

 

Animations

• setInterval() : 타이머를 만들고 정의된 interval(in milliseconds)로 반복함

animations JavaScript

Event handlers

• onload: page에 들어갈때
• onunload: page에서 나갈때
• window.onload: 전체 페이지가 로드 된 후 코드를 실행
• onchange: textbox에 주로 사용됨; textbox안의 text가 변경 될 때 실행

events JavaScript

 

Event Listeners

• addEventListener(): 기존 event handler에 덮어쓰지 않고 새로운 event handler를 추가함
  • addEventListner(이벤트핸들러, function, boolean value(optional) 

event listner

 

Event Propagation

• bubbling: 가장 안쪽 element 먼저 실행하고 바깥쪽 element는 나중에 실행 (거품은 위로 올라간다)
• capturing: 가장 바깥쪽 element 먼저 실행하고 안쪽의 element를 나중에 실행
• Capturing goes down the DOM
• Bubbling goes up the DOM

bubbling and capturing

 

Image Slider

• "Next" 와 "Prev" button을 이용해서 이미지를 변경
• onclick="prev()" -> function prev() 를 실행
• onclick="next()" -> function next() 를 실행
• num variable은 현재 이미지를 보여줌
  
  • onclick 하면 array의 이미지를 function(prev or next)에 따라 보여줌

image slider

 

Form Validation

• required: input field를 필수 입력
• onsubmit: 제출하면 valildate 해서 실행 아니면 false를 return

form validation

 

for loop

• for...in loop은 array위에 반복 되면 안됨
• for...in loop은 반복되는 objects에 반복되는 loop을 생성함
• 반복되는 variable은 string이고 숫자가 아님
• variable를 더하면 string concatenation이 실행되지 덧셈이 아님
• for...of loop은 string 포함한 object 반복에 사용

for...of loop

 

ES6 =>

• => 로 function을 축약해서 입력할 수 있음

=> ES6

 

ES6 SyntaxError

• 이중 property names로 object를 생성할 때 마지막 property가 같은 이름의 이전 property를 덮어씀
• duplicate property names는 String mode 사용시 ES5에서는 SyntaxError를 발생시킴; ES6에서는 제한 없음

ES6 SyntaxError

 

ES6 .CharAt, .slice

• CharAt(n): n번째의 문자를 읽어줌 (0부터 시작하는거 알쥬?)
• slice(n): n번째를 잘라서 새로운 object를 만듬 (0부터 시작하는거 알쥬?)
  • Example3: param.slice(1) -> param 의 1번째 (0부터 셈) 여기서는 'size'의 s를 없앰

charAt slice

 

 

Object.assign() in ES6

 

ES6 Object.assign()

 

 

Class Methods in ES6

static method

 

 

Inheritance in ES6

 

Inheritance ES6

 

ES6 Map

ES6 Map

 

ES6 Set

• Set objects는 unique values에 사용 (반복 x)
• new Set([iterable])이 Set object를 생성함; [interable]은 array 또는 반복 가능한 objects
• add(value): Set에 new element를 추가
• delete(value): Set에 해당 value를 제거
• has(value): set에 해당 value가 있으면 true, 없으면 false를 return
• clear(): clear the set
• values(): set의 interator of values를 return
• Promise
  • new Promise(function(resolve, reject){....}
  • resolve for success, reject for failure
  • .then method : 두 methods를 input으로 사용

Set Promise

 

 

generator function

• function* -> generator function (or gen function)
  • 비동기 프로그래밍에 서용

gen functions

 

JavaScript Course Certificate

Sololearn의 JavaScript 코스 완강하고 수료증을 받았습니다. 마지막에 ES6가 좀 괴롭히긴 했지만 어찌어찌 끝까지 공부를 마쳤습니다.

아직도 익숙하다고는 할 수 없지만 걸음마를 뗀 기분입니다. 다음 언어는 Java를 배울겁니다. 

Sololearn JavaScript Course Certificate 수료증