MY_STUDY

먼저 HTML에 div를 하나 만들고 class에 'a'를 설정한다. 그리고 자바스크립트로 div의 클래스들을 가져온다.

div의 class에 'a'가 포함되어있는지 확인 결과 true가 출력되었다.

div의 class에 b와 c를 추가하고 a를 삭제하였다. 만약 add로 중복되는 값을 넣었다면, 더이상 추가되지 않는다.

toggle : 값이 있으면 삭제를하고, 없으면 추가를 한다. d와 c를 넣었더니, 이미 값이 있는 c는 삭제되고 값이 없는 d는 추가되었다. 자바스크립트에서 유용하게 많이 사용된다.

먼저 HTML로 이미지삽입 버튼과 삭제 버튼을 만든다. 그리고 h3으로 이미지가 나타나는 곳을 표시한다.

버튼의 onclick속성에 자바스크립트에서 불러올 함수 이름들을 넣는다.

JavaScript를 열고, querySelector로 html에 있는 유일한 div 태그를 불러와서 div 변수에 집어넣는다.

그리고 html에서 버튼의 onclick 속성에 집어넣었던 이름들로 함수를 만든다.

먼저 addImage()는 이미지 태그를 추가하는 역할을 하고, rmImage() 만들었던 이미지 태그를 삭제하는 역할을 한다.

먼저 만들고 싶은 이미지 태그를 작은 따옴표 안에 적고, imgTag 변수 안에 집어넣는다.

그리고 innerHTML을 이용하여 div의 HTML을 가져오고, 그 속에 만들었던 이미지태그를 집어넣는다.

버튼을 누를때마다 이미지를 하나씩 추가하는 방식을 원한다면 += 로 집어넣는것이 좋다.

rmImage() 함수는 이미지를 삭제하는 함수인데, 그냥... div의 HTML을 가져온 뒤, 공백을 집어넣으면 끝이다.

'이미지삽입' 버튼을 누를 때 마다 이미지가 하나씩 추가되어 나타나고, 이미지 삭제를 누르면 만들어졌던 모든 이미지들이 삭제된다.

용어

.getElementsByTagName : 태그 이름으로 가져오기

.getElementById : ID로 정확하게 하나의 요소만 가져오기

.getElementsByClassName : Class 이름으로 가져오기

.getElementsByName : name으로 가져오기

.queryselector : 요소의 CSS 문법으로 하나의 요소 특정해서 가져오기

.queryselectorAll : CSS 문법에 맞는 요소 전부 가져오기

.innerHTML : HTML 을 그대로 가져옴

.innerTEXT : 텍스트만 가져옴 (공백을 한 라인에)

.innerContent : 텍스트와 공백 가져옴

예시

'|' 는 a 혹은 b가 포함된다면 true를 반환한다. 첫번째 타겟 "df"에는 a 혹은 b가 포함되어있지 않아

false를 반환한다. 하지만 두번째 타겟에는 a가 포함되어있어 true를 반환한다.

[]에 원하는 문자를 넣어, 표현식에 부합하는지 확인한다. "abc"를 넣었을 때, a 혹은 b 혹은 c가 포함 될 경우

true를 반환하고 그렇지 않을 경우 false를 반환한다. 위에서 언급했던 '|' 와 같은 역할을 한다.

()는 원하는 문자를 그룹핑하는 역할을 하고, {}에는 반복할 횟수를 정한다. 

ab가 2번 이상 반복하는 경우를 찾으려면 {2,}를, 2번 이상 3번 이하 반복하는 경우를 찾으려면 {2,3}

기타 여러 정규식 기호

정규 표현식(Regular Expression)

문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용된다. 예를들어 이메일, 휴대폰 번호를 입력하라고 할 시, 옳지 않은 값을 입력하면 정규 표현식에 의해 걸러지게 된다. 자바스크립트는 Perl(펄) 정규식을 따른다.

예시

생성자 함수 방식과 리터럴 함수 방식이 있다. 형식은 '/찾고자하는값/플래그'

regExp.test(target); => target이 정규식에 부합하는지 검사한다. 부합하면 true 아니면 false

플래그

정규식을 생성할 때 고급 검색을 위한 전역 옵션을 설정할 수 있도록 지원한다.

 i : 대소문자 구분없이 검색

g : 문자열 내의 모든 패턴 검색

m : 행이 바뀌더라도 검색을 계속

s : 개행문자도 포함

u : 유니코드 전체 지원

y : 특정 위치에서 검색을 진행하는 'sticky'모드 활성화

exec : 정규식 패턴에 부합하는 요소를 배열로 반환, 패턴에 부합하는 요소를 하나만 찾아줌

매칭 결과가 없을 시 null 반환

match : exec와 달리 패턴에 부합하는 모든 요소들을 반환함. 매칭 결과가 다 나온다.

출처 : https://leeseong010.tistory.com/142

reduce 함수

배열의 각 요소를 순회하며 callback 함수의 실행 값을 누적하여 하나의 결과값을 반환 한다.

다음 4가지의 인수를 가진다.

accumulator : callback함수 반환값 누적, 현재 배열요소, 배열의 현재 요소의 인덱스(선택), 호출한 배열(선택)

그리고 initialValue(선택)을 가진다. InitialValue란 최초 callback 함수 실행 시, accmulator 인수에 제공되는 값,

만약 초기값을 제공하지 않을 경우 배열의 첫 번재 요소를 사용하고, 빈 배열에서 초기값이 없을 경우 에러 발생

1부터 5까지 더하기, sum은 callback 함수의 반환값을 누적하고, current는 현재 요소

initialValue를 1로 설정한다면, 초기값이 1이므로 1(초기값) + 1 + 2 + 3 + 4 + 5 이런식으로 함수가 진행된다. 그래서 값은 16이다.

intro 함수를 만들고, 입력한 파라미터를 출력하도록 한다.

그리고 리터럴 객체를 만들어 intro 함수 내에 this.name에 들어갈 이름들을 설정

apply는 배열, call은 전달

bind는 함수와 어떤 객체를 연결지어준다 (묶음)

introduce는 person1과 intro가 bind된 새로운 함수가 된다.

리터럴 방식으로 생성

먼저 리터럴 방식으로 객체를 생성하는 방법이다. 간단하다. 먼저 함수이름을 만들지 않고 함수를 만든 후

그것을 리터럴 변수에 집어넣는다.

그리고 변수(파라미터) 이런 식으로 호출하면 된다.

생성자 함수로 생성

먼저 생성자 함수를 생성한다. this는 Circle 객체에 있는 radius의 값을 의미한다.

그리고 생성자 함수 안에 getRadius 함수를 생성하여, 이걸 불러왔을 시, radius값을 출력하도록 한다.

new를 이용하여 생성자 함수를 통한 객체를 생성하고 숫자 5를 집어넣는다.

만약 new가 없다면 생성자가 아닌 일반 함수로 동작된다.

객체 내, getRadius함수를 호출하면 아래의 결과가 뜬다.

이것이 생성자 함수에 의한 객체 생성 방식이다.

원시값은 (문자열, 숫자, 불린값)은 그대로 저장, 할당되고 복사되는 반면에 객체는 참조에 의해 저장되고 복사된다.

예시

일반 원시값인 'one'에 1을 저장하고, 'two'에 one의 값을 할당하였다.

그리고 two의 값을 2로 변경하였고, 이 두 원시값을 출력해보니 1, 2 서로 다른 값이 나왔다.

하지만 객체는 원시값과 다르게 참조에 의해 저장되고 복사된다.

일종의 주소같은 것이다. arr2에게 arr의 주소값을 할당하였고, arr2의 0번째 인덱스값을 변경해보니

arr의 0번째 인덱스값도 똑같이 변경되었다.