21. 07. 01
함수의 문법 function function_name(){ }
출력 시에는 함수의 이름(사진에서는 sea();)을 입력
a(56);을 입력한다면, 56이라는 값은 a(input)의 input 자리에 들어가게 됨 = 입력값
56이라는 값을 가지는 a가 input에 들어가 "return 56;"이 됨
return을 만나면 함수는 종료가 되고, return 뒤의 값이 함수의 반환값이 됨 = 출력값
alert(" "); 경고창
사용자가 입력한 정보를 가져오기 위해 먼저 id를 설정
이후 getElementById(Id값을 바탕으로 태그를 가져옴) 함수 사용
21. 07. 02
< div> 태그와 태그를 묶어줌 < /div>
버튼을 클릭했을 때 페이지의 색상을 바꾸고자 함
버튼 클릭 시 onclick의 속성값을 실행시켜줌
className으로 전달된 어떠한 값이 Id값이 target인 태그의 class값이 됨
/
21. 07. 03
Momentum 클론코딩
JS에서 variable(변수)를 만들기 위해서는 const(constant=상수)를 사용
사진 속에서 변수의 이름은 a이며, 그 값은 5와 같음
변수를 설정하면 값을 변경하고 싶은 경우 a의 값만 바꾸면 되기 때문에 더욱 편리하게 그 값을 변경할 수 있음
JS에서 변수를 만드는 방법은 두 가지인데, 하나는 const를 사용하는 것이고 다른 하나는 let을 사용하는 것임
둘의 차이는 const의 값은 바뀔 수 없지만(상수), let은 내용을 업데이트할 수 있다는 것에 있음
8번째 줄에 let을 사용하지 않은 이유는 let은 새로운 것을 생성할 때 사용하는 것이기 때문
따라서 내용을 업데이트할 때에는 let을 사용하지 않음
그러나 const로 지정된 b의 경우 새로운 값을 준다면 에러가 생김
즉, const로 변수를 만들었다면 값을 업데이트할 수 없음을 의미함
사용자의 이름처럼 바뀌면 안 되는 값을 const로 지정한다면 도움이 될 것임
boolean은 true 혹은 false를 나타냄
true/false에는 따옴표를 붙이지 않음 (따옴표를 붙이는 것은 string(text)을 표현하기 위해서임)
null은 그 변수에 '아무것도 없음'을 의미함
사진 속에서 catIsCute라는 변수는 비어있는 것이 아니라, 아무것도 없는 상태로 채워져있는 것임
catIsCute는 null로 정의되어 있음(defined)
반면 a라는 변수에 어떠한 값을 지정하지 않는다면 이러한 상태는 undefined type이 됨
array(배열)의 목적은 하나의 변수 안에 list를 넣는 것이며, 이것을 위해서는 "[ ]"를 사용 & 각각의 항목은 쉼표로 구분
변수.push는 항목 하나를 배열 안에 추가하도록 만듦
object를 만들기 위해서는 중괄호 사용
중괄호 안에는 property(특성)를 작성
중괄호 내에서는 "=" 대신 ":" 사용
특성 뒤에는 다음 특성이 올 것을 대비하여 콤마 사용
object 내의 특성은 수정이 가능한데, const를 직접적으로 수정하는 것이 아니라 object 안의 무언가를 수정하는 것이기 때문임
사진처럼 player.points를 업데이트 하는 것은 문제가 없지만, player 자체를 수정하려고 하면 에러가 발생하게 됨
새로운 특성을 추가하는 것도 물론 가능
function은 코드를 캡슐화해서 여러 번 실행할 수 있도록 함
function을 만들기 위해서는 function ..(){ .. }를 작성
중괄호 속 내용이 function을 실행할 때마다 실행될 것임
argument(인수)는 function을 실행하는 동안 function에게 정보를 제공함
21. 07. 04
function을 이용한 계산기 만들기 😎
console에서의 결과가 아닌 function으로부터의 결과를 얻고자 할 때는 return 사용
calculator 속 console.log를 return으로 전환 후 새로고침 하면 콘솔에는 요청하지 않았기 때문에 아무것도 뜨지 않음
결과값을 보여주어야 하는데 calculator 내부에는 console.log를 사용하지 않았다는 것이 return의 포인트
function에서 return을 하면 이후의 코드는 작동하지 않음
return하는 순간 function은 종료됨
/
conditional(조건문)은 boolean 값을 알려줌
prompt를 통해 사용자에게 메세지를 보여주고, 사용자로부터 정보를 받을 수 있음
사용자가 어떠한 것을 입력하더라도 그것을 number로 바꾸고자 한다면, parseInt function을 사용
string을 number로 변환할 수는 없으며, 이 경우 NaN(Not a Number) 문구가 뜨게 됨
21. 07. 05
NaN인지 판별하기 위한 function으로 boolean을 알려주는 isNaN을 사용할 수 있음
조건문의 문법은
if (condition) { 조건이 참일 때 실행할 코드 } else { 조건이 거짓일 때 실행할 코드 }
이때 조건은 boolean으로 판별이 가능한 내용이어야 함
사용자가 string을 입력하면 그것은 number로 바뀌지 못해 NaN을 도출함
이 경우 isNaN(age)라는 function은 true이기 때문에 조건문이 작동하여 "숫자를 써달라"는 문구가 나오게 됨
그러나 number을 제대로 입력하면 NaN이 아니기 때문에 false가 나올 것이고, 그렇다면 else 이후의 console.log가 작동할 것임
else if는 if가 false일 때 하나의 condition을 더 사용할 수 있도록 함
즉, if가 false라면 else if의 조건을 한 번 더 따져 true or false 값을 도출하게 됨
"&&(and)"는 전조건과 후조건이 모두 true여야 함을 알려줌
age가 54일 경우 20 이상이므로 전조건에 대해서는 true이지만, 50보다 작지 않으니 결론적으로 false가 도출될 것임
"||(or)" 연산자는 둘 중 하나만 true인지 확인
하나라도 true라면 결과는 true가 됨
title이라는 html element가 있을 때 addEventListner을 호출한 후 listen하고 싶은 event 이름을 알려줌 (사진 상에서는 click)
이후 event가 발생하면 호출할 function을 설정 (handleClick)
기본적 상태에서는 실행을 원하지 않으므로 function에 괄호를 넣지 않음
console.dir(변수); 입력시 여러 event를 찾을 수 있음
사진 속의 title.addEventListener("click", handClick);을 title.onclick = handClick;으로 바꿀 수도 있음
window의 사이즈를 변경하면 바탕의 색이 바뀌게끔 설정된 event
조건문을 사용해 누를 때마다 색이 바뀌는 구조 만들기
h1.style.color이 계속 반복되니 더 간결하게 하기 위해 현재의 색상을 currentColor 변수로 지정하고, 클릭했을 때의 색을 newColor라는 빈 변수로 선언
조건문을 거치며 newColor는 tomato 혹은 black의 값을 할당받게 됨
그 값을 h1에 넣어주는 것이기 때문에 h1.style.color = newColor;
/
js에서 style을 다루지 않기 위해 js와 css를 구분했다
그런데 분명 클릭하면 색상이 바뀌게끔 코드를 작성했는데 아무런 변화가 일어나지 않는 것이다...😥
내가 click 철자를 못쓰나..? 싶어서 계속해서 잘못된 부분을 찾으려고 노력했으나 실패하고 일단 넘어갔다😭
그런데 그 이후 부분을 다루면서 무엇이 문제인지 찾았다
기존의 class를 없애지 않고 새로운 class를 추가하기 위해 classList를 사용하였는데(그냥 className을 사용할 경우 기존의 class가 사라짐), h1에 추가되어야 할 class가 div에 추가되는 것이었다
색도 안바뀌는데 class까지 이상한 부분에 추가되어서 부들대고 있었는데 문득 js파일의 첫 번째 줄이 눈에 들어왔다
div.hello를 h1으로 바꾸니 해결이 되었다..
진작 시도해볼걸 괜히 오타만 얼마나 찾은 건지😣
그래도 해결해서 기분이 좋은 건 어쩔 수가 없다😙
(열받아서 class 이름 설정한 게 웃겨서 그대로 둠..ㅎㅎ)
toogle function으로 class name이 존재하는지 확인할 수 있으며, class name(사진에서는 "clicked")이 존재하지 않을 경우 class name을 추가할 수 있음
toogle을 사용함으로써 위 사진의 긴 코드를 한 줄로 줄일 수 있음!
