초보 개발자의 일기

classList 우리가 class들의 목록으로 작업할 수 있게끔 허용해준다. className은 이전calss를 상관하지 않고 모든 걸 교체해 버린다. classList를 이용하는건 JS에서 건드리는 건 HTML element가 가지고 있는 또 하나의 요소 사용하는 것이다. = element의 class내용물을 조작하는 것을 허용한다는 뜻 위에 코드와 아래 코드는 같은 내용을 똑같이 실행하는 코드이다. toggle은 class name이 존재하면 toggle은 class name을 제거하고, class name이 존재하지 않으면 toggle은 class name을 추가한다.

브라우저에서 제공하는 object 중 'document'라는 object를 배웠다! document는 js에서 html와 상호작용을 할 수 있게 도와준다. document의 함수 중에는 getElementById라는 함수가 있는데, 이 함수가 HTML에서 id를 통해 element를 찾아준다. element를 찾고 나면, JS로 해당 HTML의 무엇이든 바꿀 수 있다. js코드 const title = document.getElementById("title"); html 코드 Grab me! 주의해야 할 점은 찾는 id가 일치하게 입력해야 js로 html과 상호작용 할 수 있다. ex) element의 innerText 바꾸기 title.innerText="hihihihihih"; id, classNam..

prompt();라는 함수는 사용자에게 창을 띄어 값을 입력받는다. prompt();를 사용하면 답을 할 때까지 코드의 실행을 멈춘다. 어떤 css도 적용이 불가능하고 굉장히 오래된 방법이다. const age = prompt("how old are you?"); console.log(typeof age); 이렇게 코드를 작성하면 창에 how old are you? 가 나오게 되고 값을 입력할 수 있다. 값을 입력하면 string 형태로 값이 입력되는데 그 이유는 prompt가 string이 default 값이기 때문이다. typeof를 쓰면 변수의 타입을 볼 수 있다. 한 type로 받아서 다른 type로 바꾸는 작업을 해야 한다. "15"-->15 string--> number로 변환해주는 함수 pa..

return을 쓸 때의 주의사항 한번 return을 하면 해당 함수는 끝난다! 그렇기 때문에 return뒤에 작업을 한다면 출력되지 않는다! 이렇게 return 앞에 있는 console.log("hello");는 실행이 되고 return 후 console.log("bye bye");는 실행이 되지 않는다. return은 말 자체로 다시 돌려준다라는 의미로 해당 함수의 변숫값을 지정해주면 해당 code를 안에서 실행해서 그 결과값을 해당 함수의 변숫값을 선언한 변수한테 돌려주는 것이다

js에서도 배열을 만들 수 있다. 배열을 만들기 위해서 변수를 하나 설정하고 []로 묶어 , (콤마)로 데이터를 나열해서 저장한다. 변수도 쓰일 수 있고, boolean, text, 숫자 등 데이터 정렬이 가능하다. ex) const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"]; 만약, 위의 변수에서 5번째 element 값을 알려줘라고 하면 ex) console.log(daysOfWeek[4]) 라고 해야 5번째 값을 출력할 수 있다. 컴퓨터는 숫자를 0부터 세기 때문에, “mon”은 0번째라고 생각하면 된다. 위의 상태에서 daysOfWeek이란 변수에 하나의 값을 더 넣고 싶다면 다음과 같이한다. ex) daysOfWeek.push..

java script는 혼자서 작동되지 못한다. html이 사이트를 열고 js를 불러와서 js가 실행이 된다. css를 링크하기 위해서 link:를 쓰면 작성한 css를 불러올 수 있다. js는 css와는 다르게 앞쪽에서 불러오지 않고 후반부에 불러온다. 이렇게 입력 후 ~~~.js 을 끌어오면 입력한 js가 정상적으로 작동을 한다. js에는 크게 두가지의 타입이 있다. 첫 번째 데이터 타입: 숫자 integer, float 두 번째 데이터 타입:문자 (text) 콘솔창에 그냥 hello라고 치면 인식을 하지 못한다. 하지만 "hello"라고 치면 인식을 할 수 있다. 이런것을 string 이라 부른다. js에서는 변수 선언할때 3가지 방법이 있다. 첫 번째 const==바뀌지 않는 console.log..