Frontend/Javascript (15) 썸네일형 리스트형 CSS in Javascript 처음에 newColor라는 빈 let변수를 선언했고 if, else를 거치면서 초기화 값을 할당받게 된다. 즉, newColor = "tomato"; 이런식으로 된다. 그리고 그 값을 h1에 넣어주는 것이기 때문에 h1.style.color = newColor;가 됨. css를 이용하기. html에 js와 css가 import되어있어야함. "clicked"와 같은 raw string이 반복되면 상수로 만들어 줄 것(→clickedClass) 다른 className을 만들더라도 classList를 사용하면 추가한 className을 유지한 채로 clicked를 실행할 수 있음 결과적으로 "toggle"이라는 function이 위의 모든 함수를 한줄로 대신해준다! Events listening title.addEventListener( "click", handleTitleClick ); : click하면 handleTitleClick이라는 function이 동작 handleTitleClick 함수에 ()를 넣을 필요 없음. handleTitleClick() : 직접 실행 즉, javascript function이 대신 실행할 수 있도록 함. **event property보기 : console.dir(title); HTML in Javascript javascript는 document.function을 이용해서 html의 element를 object로 1. 보여주고, 2. 변경할 수 있음. querySelector : css선택자처럼 사용가능, 첫번째 class의 h1(element)만 반환함. querySelectorAll : 모든 class의 h1(element)를 array로 반환 querySelector("#hello"); : 하위항목 선택가능 ex)#hello. h1 = getElementById("hello"); : 하위항목 선택불가 Conditionals const age = parseInt( prompt("How old are you?") ); // parseInt : string -> number , string is not a number -> "NaN" if(isNaN(age) || age "Please write a number" } else if(age "You are too young." } else if(age >=18 && age=age "You can drink" } else { console.log("You shouldn't drink for health"); // age>50 -> "You shouldn't drink for health" } parseInt : string -> number , string is not a numbe.. Function ( ) 안에 argument가 들어가야 출력됨 funtion 바깥에서 출력하는 것은 의미가 없음.(not defined) object 안에서 function을 사용할 경우 작성순서가 다름 function 안에 console 대신 return을 사용하고 그 값을 불러올 수 있음. console.log() 또는 alert() 는 우리가 작성한 코드의 결과를 시각적으로 볼 수 있게 하지만, 그 결과값을 JavaScript 내에서 이용하지 못한다. 우리는 앞으로 JavaScript로 더 다양한 기능을 구현할 것이기 때문에 함수의 결과값을 이용하고 싶다. 외부로 값을 표출하고 싶은 우리는 return을 이용하여 함수의 작동 종료를 알리고 그 결과값을 기억하게 한다.(댓글발췌) Array / object Array : [ ] - 같은 종류의 property Object : { } - 다른 종류의 연관성 있는 property, object안의 값은 변경할 수 있음 variables Data type integer : 정수 float : 실수 string : 문자 Boolean : true/false null/undefined const : 상수 let : 바뀔 수 있음(업데이트 할 수 있음) / const : 바뀌지 않음 variable로 정하면 값을 효율적으로 변환할 수 있음. variable 문자열 작성법 : my name(X) myname(X) myName(O) 띄어쓰기가 필요할 때 대문자로 작성 const를 기본적으로 사용하고 필요 시 let을 사용 : 코드의 의미를 미리 알 수 있음. (초기에는 모두 var로 사용했었음, 지금은 사용 X) 이전 1 2 다음
