오늘은 테이브 과제? 로 리액트 강의를 듣기 전 js 기억이 희미해져버린 관계로,, js 선수 강의를 먼저 들어보려고 한다.. (그렇게 나는 오늘도 밤을 새고.. 또르륵..)
js에서 문자열이란, 처음부터 끝까지 문자로 이루어진 따옴표 안의 열!
+)"abc"+"def" 의 결과는 "abcdef" 가 된다!
js 변수 선언 방법
(c와 다르게 int float 등 타입 지정자를 따로 쓰지 않는다!)
const a = 10;
변수 이름이 띄어쓰기 포함할 때
->veryLongLongString 이런식으로 대문자화하기로 약속!
const(상수 선언) let (변수 선언) var도 있지만 오래된 변수 선언 방식.(업데이트 가능한 변수 선언)
따라서 기본적으로는 const 가끔 let var은 거의 쓰지 말자!!
boolean 의 값으로는 true와 false, null, undefined가 있다. 이때 따옴표 쓰지 않도록 주의! null 은 아무것도 없다는 뜻 false 는 값이 있음. 따라서 서로 다르다는 것 이해하기! undefined는 예를들어 변수 선언만 하고, let a; 변수에 값을 지정하지 않은 경우 a 를 log 하면 나오는 값이다.
*null 은 자연적으로는 절대 발생하지 않고, 개발자가 어떤 variable 안에 값이 없다는 것을 확실히 하기 위해 쓰는 것
ex) const amIFat = null;
*undefined 는 메모리는 있는데 값이 없는 것.
array (배열)
c 와는 다르게 하나의 배열에 다양한 데이터 타입이 들어갈 수 있음. const 인지 let 인지는 써주어야 함.
ex) const nonsense = [1,2,"hello", false, null];
배열이 맨 뒤에 요소를 하나 더 추가하고 싶다면?? push 메소드를 사용하자 배열명.push(추가하고 싶은 값);
ex) daysOfWeek.push("sun");
객체 (Object)
자바와 달리 const ObjectName = { } 이렇게 간단하게 표현하고, property 를 표현할 때 = 이 아닌 : 를 사용하며 ; 대신 , 를 쓴다.
ex) const player = {name: "nico", gender: "male"};
console.log 의 console도 객체임!!
property 에 접근하려면 . 을 사용한다. ex) player.name (또는 player["name"])
분명 const 는 수정하면 에러가 난다고 했는데..? 라는 의문이 든다면, 여기서 const 는 객체! 따라서 객체의 속성값을 바꾸는 것은 상관이 없기 때문에 객체 밖에 player.name = "hy"; 를 해도 에러가 나지 않음.
객체 바깥에서 객체의 새로운 속성을 추가하는 것은 얼마든지 가능함. ex) player.lastName = "potato";
객체는 배열이 가지지 못하는 의미를 각각의 값에 property로 줄 수 있음.
함수 function
반복해서 쓸 수 있는 코드 조각
js에서 함수 정의 function funtionName(argument1, argument2) { ~~~~~; } 함수 호출 functionName(argument1, argument2);
인수 = argument = 매개변수 이때 매개변수는 함수 중괄호 블록 내에서만 쓸 수 있음에 주의~~(c에서도 그렇긴 해)
객체 안에서 property의 값으로 함수를 정의할 때!
property: function () {}, 와 같이 해준다! 객체 바깥에서의 함수정의와 다르다는 점 주의
event 를 추가하고 싶을 때는 element.addEventListener("event", function); 주의할 점은 function() 괄호를 쓰면 안된다는 것. click 했을 때 addEventListener가 실행시키는 것이기에. function의 () 는 실행을 뜻한다.
mdn headingelement - element - event에서 event 찾을 수 있음. 또는 console.dir(element) 를 통해 찾을 수 있음. 이때
on 접두사는 event listener 를 뜻하는 것으로 실제 사용 시에는 on을 제외해야 함. ex) onabort: null -> abort
event 사용 방법 두 가지
1. .addEventListener("click", );
2. title.onclick = handleTitleClick;
document. 에서 를 사용하지 않고 불러올 수 있는 것: body, title, head 나머지 element 는 querySelector 나 getElementbyId 등으로 찾아와야 함.
.classList 를 이용하면 과거의 class 내용을 까먹지 않고 class를 업데이트 할 수 있다.
.classList.toggle("clicked") 를 이용하면 해당 클래스가 있으면 리무브 하고 없으면 add 하는 작업을 수행한다.
댓글