21.08.30

하소희·2021년 8월 30일

개발일지

목록 보기

51/56

자바 스크립트 강의를 처음부터 다시 들었다. 조금 반복될 수도 있지만 이전 내용을 이해하기 쉽게, 까먹거나 놓친 설명을 추가로 적는다.

자바 스크립트 소개, 변수와 데이터 타입, 버튼을 클릭하면 색이 바뀌는 실습을 복습했다.

자바스크립트 코어는 한글이 자음, 모음, 초성, 중성 등 여러 언어 규칙이 있듯이 개발 언어도 마찬가지다. 자바스크립트의 문법을 공부하는 것
개발자 도구에서 어느 파일 몇 번째 줄을 클릭하면 바로 Source탭으로 이동하는 거 놓치고 있었다. 파일을 일일이 열었는데... 어떻게 이걸 잊었지?

var d = 10, e = 20, f = 30;

혹은

var d = 10, 
    e = 20, 
    f = 30;

var str1 = "20";
var str2 = "10";

console.log(str1 + str2);

출력 결과 2010

자바 스크립트는 공백 하나하나를 다 문자 데이터로 인식한다.
문자열과 숫자를 더해주면 최종 결과값은 문자열 데이터 타입
등호 데이터 해석법
var num10 = 10인 상태
++와 --를 변수 앞에 적을 때와 뒤에 적을 때는 선 차감, 후 차감 차이가 있다.(8월 5일 일지 참고) ++ --의 위치에 따라 값이 달라질 수 있다.
%= 등호가 약간 이해가 안돼서 찾아봤다.

var a = 10;

console.log(a %= 3);
결과는 1

a는 a를 3으로 나눈 값

!=, !== 는 두 개의 값이 다른지 비교하는 연산자
안전한 코딩을 위해서는 ===, !==
불리언 데이터 타입은 직접적인 트루, 펄스 말고도 비교 연산자나 논리 연산자도 포함한다. 비교/논리 연산자는 결과값이 불리언 데이터 타입으로 나타나기 때문이다.

console.log(true);
console.log(false);
console.log(1 === 2);
console.log(10 < 20);
console.log(10 === 20 || 20 === 30);

함수 호출 : 함수 기능을 켜는 행위
특정 데이터에 접근할 수 있다면 그 데이터를 변경할 수도 있다.
배열을 만들 때 공통된 데이터 타입, 공통된 성격으로 만들자.
객체 안의 데이터에 접근하는 방법 2가지
console.log(변수명.접근하고자 하는 데이터의 key);,
console.log(변수명['접근하고자 하는 데이터 key'])
2번째 방법 기억하기
원시 타입과 참조 타입의 차이점
(예시는 8월 11일 일지 참고)
원시 타입 : 원본과 복사본 개념이 있는게 원시 타입, 어느 쪽을 수정하든 서로의 데이터에 영향을 주지 않는다.
참조 타입 : 뭔가를 바꾸더라도 주소는 바뀌지 않았기 때문에 obj1과 2가 동시에 변화한다. 둘 중 하나라도 수정하면 주소의 안에 들어가있는 값이 바뀌는 것이기 때문에 양쪽 모두가 바뀐다.

클릭하면 버튼 바뀌는 실습을 다시 해보는 중이 버튼이 튀어나와있는 윈도우 95 효과를 내보고 싶어서 찾아보고 있다. 그리고 색 바뀌는게 멈추는 버튼도 추가하고 싶다. 일단 시간이 다 됐기 때문에 js 적용 부분은 저녁에 쭉 만들어볼 예정이다.

변수와 데이터 타입을 쭉 듣다가 많이 혼란이 왔던 참조타입은 한 번 듣고 또다시 들었다. 저번에 여러번 들어서 조금 이해했는데 지금 다시 들으니까 다른 범위까지 한층 더 이해가 된다. return부분부터 메서드까지는 계속 다시 들어야할 것 같다.
객체에서 쉼표를 자꾸 까먹어서 문법 에러가 난다.
원시 타입과 참조 타입 차이점 다른 설명도 궁금하다
버튼 클릭하면 색 바뀌는 실습을 혼자서 다시 만드는 중인데 생각만큼 술술 써지지가 않는다... 강의를 계속 참고하며 구글링 중이다.