Javascript repl summary

01 Introduction to Javascript

01-1 intro

01-2 alert()

• 알림창 박스, 디자인 변경 불가.

01-3 console.log()

• 개발자가 확인하고 싶은 내용을 출력하는 함수.
• alert 와 같이 js 에서 이미 정의된, reserved words 이다. (meaning variable name such as let alert = ~ is not to be made)

02. Commenting(주석)

-주석의 형태

• (//) : 한줄 주석
• ( /* */ ) : 여러줄 주석

03. Variables (변수)

-naming convention

• 이름 중복 불가, 대소문자 구분, 첫문자는 무조건 글자나 _, $ 로 시작
• snake_case 는 잘 사용하지 않지만 개인적으로 선호!!!!
• 변수명을 잘 지으면 가독성 증가, 커뮤니케이션의 원활함 증가를 통해 개발 효율 증가.

-let, const

• let : 변수 값 수정 가능
• const : 변수값 수정 불가
• 변수를 선언하고 값을 할당하지 않으면 undefined 의 값을 가진다.(not NULL)

04. Function

- 함수의 정의와 실행 (define & execute)

05. Function return

• 함수의 반환 값 확인을 위해,
  let result = noParameter(); 와 같이 함수의 호출을 변수에 저장해서
  console.log(result) 와 같이 결과값을 출력해 볼수도 있고,
  바로 console.log(noParameter()); 도 가능.
  *** not all functions have a return keyword, however, functions without return keyword still returns "undefined" value.

05.1 Parameter(매개변수), Argument(인자)

-Parameter: 외부로부터 들어오는 값을 담아 함수 내부에서 사용하도록 하는 변수의 역할(이름)

• Argument: parameter 자리에 들어가는 구체적인 값.

06. Math Expressions

• ++num 과 num++ 의 차이.

07. 텍스트 문자열의 연결

07-3 텍스트 + 숫자 조합

• console.log("2" + "2"); --> 22
• console.log(2 + 2); --> 4
  -alert("2 더하기 2는 " + 2 + 2); --> "2 더하기 2는 22 라고 출력
  *** string + number 은 항상 string 이 된다. (다른 language 에서는 string + num 이 안됨)

08. if statement

09. 비교 연산자

09-2. 일치연산자(===)

• ===: 엄격(일치) 비교 vs == 추상(동등) 비교

10. 논리연산자

11. Function-데이터 받기

12. Function - parameter, argument

13. Function- 여러 인자

14. Function - 데이터 반환(2)

15. Array

16. for statement

17. Array(배열) 조작

17-2. push / unshift method

• let cities = []; //빈배열 생성
• cities.push("경주","전주");
• cities.unshift("인천");
  ** push 는 배열의 마지막에 요소 추가.
  unshift 는 배열의 맨 앞부분에 요소 추가.

17-3. pop method

• arrayname.pop() 으로 사용
• 마지막 요소 제거 및 그 값을 반환

18. Data types

• string, number, boolean, undefined, null, symbol, object

18-2. typeof operator

• typeof 를 통해 값, 변수가 무슨 데이터 타입인지 알 수 있음.
  
• typeof null -> object : 빈 객채를 참조 하고 있어서 그럽디다.
• typeof array -> object

19. String

19-2. 대소문자 바꾸기

20. String <-> Number 변환

• string + number 을 하면 string 이 되고, +는 string 을 더하는데 사용이 가능하지만
• (-) 연산자는 오로지 숫자에만 사용이 되므로, string 에 - 연산자를 사용하면 NaN(Not a Number) 가 반환됨.
• number() 함수를 통해 string 에서 number 로 변환 가능
  ex)
• numbers.toString() 을 통해 number 에서 string 으로 변환 가능
• (-) 연산을 통해 string 을 number 로도 변환 가능 string - 0 등,,

21. Date & Time

21-1. date & time with Date()

--> 2021-09-02T09:23:21.766Z 출력

• new Date() 값을 그대로 사용하지 않고, 아래와 같이 변수로 받아 알맞게 formatting 할수 있다.
  
  *** getMonth method 은 현재 달보다 1작은 값을 반환하므로 +1 을 해주어야 한다.

21-2. getTime

• .getTime() method 을 통해 날짜의 밀리초 표현을 반환 할 수 있음.
  1970년 1월1일을 기준으로 하여 몇 밀리초가 지났는지 반환해주므로 이 숫자를 비교하여 어느 시간 변수가 더 과거의 값을 가지고 있는지 비교가 가능함.

21-3. Specific Date

• 특정 날짜를 parameter 로 넘겨주면 해당 날짜의 Date을 반환 받을 수 있다.
  

22. Number

22-1. Math object

• Math.PI 등의 형태로 씀 --> pi 값 반환(Math properties (constant) )

22-2. round, ceil, floor

• round 는 말그대로 숫자를 round 해줌
  console.log(Math.round(2.5)); // 3
  console.log(Math.round(2.49)); // 2
  console.log(Math.round(2)); // 2
  console.log(Math.round(2.82)); // 3

• Math.ceil() 올림 method
  console.log(Math.ceil(2.5)); // 3
  console.log(Math.ceil(2.49)); // 3
  console.log(Math.ceil(2)); // 2
  console.log(Math.ceil(2.82)); // 3

• Math.floor() 내림 method
  console.log(Math.floor(2.5)); // 2
  console.log(Math.floor(2.49)); // 2
  console.log(Math.floor(2)); // 2
  console.log(Math.floor(2.82)); // 2

23-3. random function

• Math.random()
  
• 0.0000000000000000에서 0.9999999999999999 사이의 값중 랜덤한 숫자를 리턴해줌.

• 위와같이 곱하기 10 등을 통해 1의 자리수로 만들 수 있음

25. Class

• ex) of a class
  
• 프로퍼티 값에 함수가 들어가있음.
• getPrice() 라는 함수를 호출 하기 위한 두가지 방법.
  

25-2. Constructor (생성자)

• Object created by class is called an instance.
• class 는 새로운 instance 를 생성할때마다
  constructor() method 를 호출함
  

25-3. Instance

• instance 는 class를 통해 생성된 객체
• class 의 property name 과 method을 갖는 객체
• instance 마다 property value 가 다름.
  
• class name 에 new 를 붙여 declare.
• constructor 에 필요한 정보를 argument 로 전달.

25-4. Methods

• object 가 property value 로 가지고 있는 것을 method 라고 부름.
  

26. Object - revisit

• 빈 객체 할당
  

28. template literals, string method

29. Array methods

• arrow function 은 callback function 으로 제일 많이 사용한다.

29-1. Array.map()

• 배열을 반복해주며, 수정된 값으로 다시 생성된 배열을 return 해준다.
  

29-2. Array.forEach()

-for 대신 사용하는 반복문.

• returns nothing
  

30

31. JavaScript 위치

31-1. Script tag/ html 파일에서 js 파일 호출

32. DOM

32-1. DOM(Document Object Model)

• document 라는 global object 를 통해 javascript 와 html 을 연결 해준다.
• JS 의 document object 는 DOM 구조를 접근하는 관문이며, document object 는 html 문서를 나타낸다.
• document object alows us t o access the root node of DOM tree.
• document object 로 요소의 attribute(속성)에도 접근 가능. --> 이를 통해 class, id 추가, style 수정 등이 가능.
• innerHTML 을 통해 요소의 content 에 접근 및 수정 가능.
  
  --> body 태그 내부에 모든 content를 "내용 다 바꿈" 이라는 텍스트로 수정한것.
• 특정 element에 접근하기 위해서는 tag,class,id와 같은 css selector로 접근 가능.
  
  *** 주의: hypen 사용 불가. CamelCase로 사용해야함.

document.querySelector()

• returns the FIRST element within the document that matches the specified selector, or group of selectors. If no matches are found, NULL is returned.
• Syntax :

EX)

• Finding the first element mattching a class.
  
• A more complex selector.
  

.creatElement(tagName)

• 이 함수를 통해 element 를 생성할 수 있음. 생성만 하고 html 의 어디에 들어갈지 위치를 정해준 것이 아니므로 어딘가에 append 해줘야 함.
• 내용을 전부 대체 시키는 innerHTML 과 다르게 .appendChild 는 element 의 후미에 요소를 붙여줌.

.getElementsByClassName()

• 해당 코드에서 cofee 라는 list 의 example class 의 [0] index 에 위치한 content 가
  var list = document.getElementsByClassName("example")[0]; 를 통해 엑세스 되었고,
  list.getElementsByClassName("Child")[0].innerHTML = "Milk"; 를 통해 coffee 에서 milk 로 수정됨.

element.className

• 위의 코드를 통해 title 이라는 변수에 h1 태그의 [0] 번째 인덱스인 span 태그에 접근하고, title.className = name 을 통해 span tag 에 "title" 이라는 이름의 class 를 추가해준다. index.css 파일에 title 태그에 대한 스타일이 있고, 이에 따라 span 태그내부의 content 가 변경된다.

.createElement()

• it creates an Element Node with the specified name.
• 사용 이후에는 element.appendChild() 을 통해 html 파일 안에 어디위치로 갈지 정해줘야 한다.
  EX) <\button> element 를 생성하는 경우.
  
  
• var btn = document.createElement("BUTTON"); // "button" 도 가능
  을 통해 버튼 element node 를 생성하고,
  docuemnt.body.appendChild(btn) 을 통해 이 element 를 body 에 삽입해줌.
• 상단 두 코드의 사이에 btn.innerHTML = "CLICK ME" 라는 코드를 추가해 주면,
  "CLICK ME" 라는 텍스트를 가지고 있는 버튼이 생성된다.

Adding a whole new element.

listWrap, list, listContent 로 각각 ul, li, span 태그를 생성한 후,
listContent.innerHTML = "목록이다" 로 span 태그에 내용을 삽입,
이후 appendChild() 를 통해 span 태그를 li 에, 다시 이 li 를 ul 에 위치.

33. Event

33-1. event

• 특정 요소에 interactive 한 반응을 할 수 있게 하는것

33-2. addEventListener

• 이벤트를 달때 사용하는 함수

Syntax

33-3. 이벤트 종류

EX)

상단 코드에서 'myBtn' 이라는 id 를 가진 버튼태그가 존재하고, 'demo' 아이디를 가진 내용이 빈 p 태그는 추후에 버튼 클릭시 여기 출력을 해주기 위함이다.

script 태그 내부에 getElementByID("myBtn") 을 통해 해당 root node 에 접근하고, addEventListener("click", displayDate); 을 통해 클릭이라는 이벤트 발생시, displayDate 라는 function 을 콜해주라고 하고있다.
displayDate() function은 getElementById("demo") 를 통해 "demo" id 를 가진 p 태그에 해당 내용을 출력한다는 것을 알 수 있고, .innerHTML = Date() 을 통해 Date() 함수의 리턴 값을 해당 p 에 입력해준다.

33-4. CLICK event

EX)

33-5. KEY(키보드) event

• keydown : 키보드를 눌렀을때 발생
• keyup : 키보드를 누르고 떼는 순간 발생
• keypress: 키보드를 눌러 어떤 텍스트가 작성되는 순간 발생
  EX) of a keydown Event
  
• getElementsByClassName 과 다르게 아이디는 하나밖에 없으므로 getElementById 를 사용하면 후미에 [0] 과 같은 인덱스 값을 지정해 줄 필요가 없다. getElementsByClassName 은 class 가 여러번 쓰일 수 있으므로 return 값이 해당 요소들로 이루어진 array 가 return 되는데 반해, getElemntsById 는 요소 그 자체가 return 된다.

DOM 강의

링크 --------------------