이클립스 설치 사이트

https://www.eclipse.org/downloads/packages/release

directory의 약자

현재 있는 directory에 대해 알려줌

/

옵션

dir/w

directory의 옵션

cd

change directory의 약자

원하는 폴더를 지정할때 사용

ipconfig

ip주소 등 내컴퓨터의 네트워크 환경을 알 수 있음

exit

cmd 종료

./

상대경로에서 현재를 나타내는 기호

../

현재보다 한단계 상위폴더를 의미

eclipse실행 > window > preferences > general > appearance > colors and fonts > basic > text font 누르고 edit

크기 16 맞춰주기

eclipse실행 > window > preferences > general > appearance > web browser > use external web browser 체크

eclipse실행 > window > preferences > general > appearance > workspace > text file encoding에 other : utf-8 설정

eclipse실행 > window > preferences > web > css file, html files, JSP files에서 encoding 전부 utf-8로 변경

eclipse 첫 화면에서 오른쪽 위 기호들 중 open perspective 클릭 > java open

file > new > java project

프로젝트 이름 : 대문자로 시작(ex. Test)

jre > javase-1.8로 변경

Test 폴더 우클릭 > properties

Test 폴더 > src 우클릭 > new > package(폴더라고 생각하면됨)(package name은 다 소문자로 작성(ex. hello)

Test 폴더 > src > hello 우클릭 > new > class(단어끼리 만날때 첫 단어는 대문자

=객체지향적 언어(OOP)

=객체지향메서드

장점

1. 코드 재사용 용이

2. 유지보수 관리가 쉬움

https://chancoding.tistory.com/14

https://chancoding.tistory.com/14

객체

=비슷한 기능들을 모아둔 폴더

=속성 + 행동

ex) 객체 = 자동차

>>자동차 객체 속성(메소드) = 색상, 크기, 의자 갯수

>>자동차 객체 행동 = 시동걸기, 후진하기 등등

예시)

document.write("안녕하세요");
객체명.객체에소속된메서드(속성);

JavaScript 하는 일

=동적데이터(아이디, 전화번호 등 언제든지 바뀔 수 있는 것) 처리

CSS에서의 style = JavaScript의 script

script의 주석 = //

자바스크립트는 카멜표기법(두 단어가 만날 때 첫 글자를 대문자로 표시) 사용

자바스크립트 데이터 3종류

1. "문자"

   +번외 "숫자" = 숫자를 띈 문자형

2. 숫자

3. true, false 논리형

변수

=데이터를 저장할 수 있는 메모리 공간

=변할 수 있는 데이터

순서

1. 선언

2. 초기값할당

3. 값할당

4. 사용

변수명은 중복 허용 불가

=html의 아이디(#)와 비슷하다고 봐도 될까?

기본 변수 데이터는 한 개만 올 수 있다

사진과 같이 입력하면 var로 변수 box를 선언했으며, 변수명 box에 데이터 100을 줬으나 후에 같은 변수명에 데이터 200을 주어 덮어씌우기 하듯 200만 적용되며, 이를 변수 재설정이라고 한다

문자열이 <꺽쇠>를 만나면 html이 해독할 수 있는 상태가 되어 자바스크립트와 연동이 가능하다

특히, document.write()를 통해 html의 태그들도 사용이 가능하다

예시) document.write("두 합의 결괏값은 : <strong>"+ result +"</strong>입니다.!! <br><br>");

용어정리

window

=자바스크립트의 최상위 객체(html의 html같이)

=생략가능

alert();

=경고창

var

='여러가지의' 뜻을 가지고 있음

=변수선언

null

=데이터가 비어있으면 안되기 때문에 만들어짐

=밥 없는 밥공기같이 무언가 형태는 있는 것 같지만 그 안에 아무것도 없는 상태

typeof()

괄호 안에 들어가는 값의 데이터 타입을 알려주는 기능을 가지고 있으며, 이때 들어가는 값이 문자형이면 string, 숫자형이면 number로 뜬다

Number()

괄호 안에 들어간 숫자를 띈 문자형을 숫자형으로 바꾸어준다

단축키

clg

console.log(object);

변수를 선언하고, 값을 할당하고 그 값을 콘솔창에 출력할때 사용

기본 원리 :

기존 데이터에 변수값을 추가

데이터를 누적하여 사용해 변수명 하나로 가능하게끔 하는 원리

처음 num1 += num2 의 경우 num1에 num2를 더한 값이 돌아와 num1(=num1+num2)는 그때부터 누적된 값이 된다

이후 num1 -= num2에서 먼저 누적된 값인 13으로 계산해 num1에 다시 num1(10) = num1(13)-num2(3)의 원리를 갖게 된다

그 뒤 *=, /=, %= 등도 같은 원리를 갖게 되어 계속 누적된 값을 num1로 삼게 된다

%=

등호 중 %=가 조금 생소한데 핵심 개념은 '나머지'다

위 사진 속 상황을 대입해보면 num1은 지속적으로 누적되어 값이 변해 10이 된 것을 볼 수 있다

num1(10) %= num2(3)

10%3은 분수 10/3으로 볼 수 있는데 이때 3개가 떨어지고 1이 남게 된다

%= 등호는 이 나머지 1을 구하는 등호며, 그로인해 마지막으로 num1은 값이 1로 변하게 된다

사진 속 문자열을 결합해 <h1>을 만든 모습이고, "<큰 따옴표 안에 이렇게 써도 적용이되지만>" 이렇게 결합된 문자열 또한, html의 <태그>에 있던 기능을 그대로 가져올 수 있다

헷갈렸던 점

모든 변수명 앞에 var를 붙이지 않은 모습

=동일 변수명 선언 불가

그냥 변수명 하나 쓰고 복합연산자 여러개 쓸 필요없이 거기에 table 디자인한 것을 한번에 붙이면 되는 것 아닌가?

=가독성을 위해 한 줄씩 나눠 쓴 듯

=한 줄씩 나눠썼을때 복합연산자 +=로 써야 데이터가 누적되어 모든 줄이 다 나올 수 있음

=그냥 =부호로만 쭉 쓰게되면 마지막 table = '</table>';만 적용되어 아무것도 안나옴

주의할 점

문자열 안에 문자열이 있는 경우에는 바깥 따옴표를 외따옴표를 써줘야한다

ex)img += '<img src="./images/img08.png" alt="이미지">'; 

||

=or

=논리식 중 하나라도 true면 true

result = b > a || b >= c || a > c;

예시) b가 a보다 크거나 / b가 c 이상이거나 / a가 c보다 클때의 true, false

&&

=and

=논리식 중 모두가 true여야 true

=하나라도 false면 false

result = b > a && b <= c && a > c;

예시) b가 a보다 크고, c이하여야하며, a는 c보다 커야한다는 이 논리식은 b가 c이하이지 못하여 false로 결과가 나온다

!

=not

=결과의 반대, 부정

result = !(a > b);

예시) a는 b보다 크지'않다' 라는 뜻으로 이 경우 값은 true로 나온다

해당 수식에서 !를 빼면 a>b만 남게 되는데 a는 b보다 작으므로 값은 false가 나온다

조건식이 true라면 : 앞에 써둔 문구가, false라면 : 뒤에 써둔 문구가 나올 것

==

데이터 형이 숫자형이든 문자형이든 값만 일치하는 경우

해당 예시 사진에서는 b와 d가 각각 숫자형, 문자형 20으로 일치하기에 true로 결괏값이 나왔다

===

==이 값만 일치하면 됐다면 ===은 데이터형도 같아야한다

b와 d가 서로 다른 데이터형의 20이라 false값이 나왔다

!=

==의 논리부정형 ver.

예시 사진에서라면 b와 d는 같지 않다! 라는 뜻이지만 b와 d의 데이터형과는 별개로 값이 같기에 같지 않다!는 논리부정은 false로 나온다

!==

===의 논리부정형 ver.

데이터형까지 일치해야하기 때문에 값만 같고, 데이터형은 일치하지 않는 b와 d는 b와 d는 같지 않다!라는 ===의 논리부정형 ver.의 수식이 true임을 알 수 있다

= 1개, =2개, =3개의 차이

= : 출력값 (말그대로 a = 1, b = 2일때, a + b = 3이라는 것을 출력), 변수를 지정할때 사용

=2개 : 비교값(다른 데이터형이더라도 값만 같으면 평등하게 취급)

=3개 : 동등비교값(모든 조건이 동등해야함)

증감연산자는 변수값을 1 증가시키며, 감소연산자는 변수값을 1 감소시킨다

전위, 후위의 차이점은 아직 이해가 잘 안된다

=if(만약 ~한다면){~하겠다}

var age = prompt("당신의 나이는?");

document.write(age + "세입니다.");

위와 같은 동적데이터가 입력되었을때

if(age >= 19){

alert("투표가능");

}

if(만일 age가 19이상이라면){경고창에 ("투표가능")이라고 뜨게 하겠다} 와 같이 사용 후 해석할 수 있다

if ~ else문

=형식과 해석은 if와 비슷

=if(만일 ~한다면){~하겠다}else{그 외의 경우에는 ~하겠다}

var num = Number(prompt('숫자입력',0));
        if(num % 2 === 0){
            alert('짝수입니다.');
        }else{
            alert('홀수입니다.');
        };

if(만일 numdmf 2로 나눴을때 나머지가 0이라면 {경고창에('짝수입니다.'}라고 뜨고 else{경고창에('홀수입니다.'}라고 해석이 가능하다

=기본적 구조

case n

=n번째 조건이 이러하다면

실행문

=~하게 실행하겠다

break;

=n번째 조건에 대한 내용값이 웹에서 적용됐다면 여기서 switch 중괄호를 닫아 아래 다른 case들까지의 정보를 차단

default + 실행문

=이 외의 경우 ~하게 실행하겠다

함께 첨부한 예문 사진에서 구글, 네이버, 다음 중 하나를 입력하게 되면 해당 사이트로 이동할 수 있도록 location을 활용해 url을 걸어놓았다

location.reload();

=새로고침

location.href = 이동할 주소

=해당 주소로 이동

기본 형식은 일반 if문과 같음

괄호 색깔이 달라진다고 당황하지 않기

avg라는 변수를 따로 지정해주었을때에는 result값이 나왔지만 if 괄호 안에 (kor+eng+math)/3 && 각 항목 점수를 넣었을때 평균값이 적용되지 않았음

while or for(괄호 안에 제시된 조건이 true인 경우에만 반복적으로){실행};

while문

기본 형식은 if문과 비슷해보임

var i = 1; <<<<<<<< 1. 초깃값 설정while(ex) i<=5 <<<<<<< 2. 조건식){           
            실행문
         ex)i++ <<<<<<< 3. 증감식}

= 변수 i의 값이 1일때 조건식에 따라 5이하만큼 반복적으로 실행문에 적힌 내용을 반복

예시 증감식 i++에 따라 실행문 5번 반복

for문

1. ~하는 동안으로 해석

2. while문과 달리 for문 안에서 변수값 설정 가능

3. 초깃값부터 연속된 숫자를 얻어 활용하기 위해 사용

기본적인 형식

=for(초깃값;조건식;증감식){실행문;}

예시 사진으로 올린 for문에서 헷갈렸던 점

Q. 실행문만 적을 수 있는 줄 알았던 {중괄호}안에 계산식을 적어도 되는가?

A. document로 출력하는 것이 아닌이상 보이지 않는 부분이기에 계산식 적용해도 웹 상 보여지는 부분에 별 문제 없어 가능

이중 for문

일반 for문과 형식은 같되 for문 안에 for문에 중첩으로 있는 경우

var i,j;
for(i=2;i<=9;i++){
    document.write("<h1>" + i + "단</h1>");
    for(j=1;j<=9;j++){
        document.write(i + "X" + j + "=" + i*j + "<br>");
    }
}

익명함수

[형식]

var 참조변수명 = function(){실행문;}

익명함수는 변수명에 담아서 사용한다

기능 예시)

var count = 0;
var noName = function(){
count++;
document.write("익명함수 : " + count + "<br>");}

호출 예시)

console.log(noName);

호출

익명함수의 호출은 Top-Down 방식으로 진행되어 반드시 기능 있는 익명함수 밑에 쓴다

선언적함수

[형식]

function 함수명(){실행문;}

기능 예시)

        function print(){
            alert("자바스크립트 선언적함수 호출");
        }

호출 예시)

        print();

호출

선언적함수의 호출은 hoisting 방식(갈고리로 끌어내듯 어느 위치에 있던지 짚어낸다)을 거쳐 호출 위치가 무관하다

선언적함수를 활용한 매개변수

[형식]

function 함수명(데이터가 담길 변수명){실행문;}

기능 function 함수명(안에 데이터가 담길 변수명 name과 area가 들어갔다){실행문;}이 적용된 것을 사진을 통해 알 수 있는데 아래 body에 적어둔 button에 호출이 적용되었다

onclick="함수명(변수 데이터);"

배열의 시작은 0

이벤트리스너

=이벤트와 연동된 함수

=위 사진에서는 button과 연동되어 있기에 해당 chColor function이 이벤트리스너가 된다

이하생략

기능 설명

1. 배열을 위해 배열 기호 [안에 문자열 값을 입력했다. 배열 기호 안에는 항상 문자열만 올 수 있다.] 작성

2. 배열의 시작은 항상 0부터 시작이기 때문에 변수 i에 초깃값 0 세팅

3. function 폼을 만들어 주고 해당 function이 적용될 DOM 객체 지정

   1. selectId라는 변수명 지정해 준 후 거기에 document객체의 getElementById(영문처럼 괄호 안에 본인이 지정하고자 하는 ID 지정)메소드를 통해 적용될 DOM객체 지정

4. 객체 지정된 selectId 변수에 적용되어 있는 스타일을 css방식으로 지정

   1. selectId.style.background-color(스타일로 입력할 배경색상) = 변수명 color[변수명 i]

5. 이후 클릭할때마다 색상이 변하게 할 것이니 배열 순서를 바꾸기 위해 변수명 i에 증가값 적용

6. 변수명 i가 이벤트 호출 횟수대로 계속 그 수가 늘어나면 0부터 5까지 있는 변수명 color의 배열 length 범위를 넘어서기 때문에 마지막에 if문을 활용해 그 수를 조절했다

   1. if(변수명 i가 변수명 color.length 보다 값이 커지면){변수명 i는 0이 된다} 이로인해 i가 6이상으로 커지지 않게 조절하는 기능을 한다

=호출하는 곳에 결과값을 던져줌

1번 예문.

1. 변수명 num에 0 값을 지정

2. function plusNum(매개변수명 num){return num+10}은 호출했을때 매개변수 num 값에 어떤 수를 입력해도 +10을 해서 돌려주겠다는 뜻이 된다

   
   

2번 예문.

1. int, sum, mul이라는 변수명에 각각 다른 값을 입력

2. function cal(매개변수명 int1){그 안에 sum = int + int1이고, mul은 int + int1이라는 수식을 넣었다}

3. 후에 document 출력 형식으로 매개변수값 100을 호출했을때 Top-down 방식으로 내려오다 먼저 쓰인 return mul;에 막혀 sum값은 나오지 않고 mul = int * int1 값만 출력되었다

4. 만일, return값을 쓰지 않았다면 document에서 출력하고자 하는 값이 sum 값인지 mul 값인지 알지 못해 undefined로 출력된다

수업하며 들었던 개인적 의문점

Q. return과 break의 차이점은 무엇일까?

A. break는 말그대로 Top-down으로 내려오다 중단시키고 중괄호 밖으로 나가버리는 것이기에 '멈춤'에 의의를 둔다면, return은 내려오다 다시 '되돌려준다'에 의의를 둔다.

2번째 예문으로 해설해보자면, document가 어떤 값을 출력하려 하는지 모르고 undefined로 출력되어야 하지만, return을 통해 mul에만 매개변수값을 계속 돌려줘 mul값이 출력된 것이다.

이는 해당 예문에서 mul 수식과 sum 수식의 위치가 반대였어도 성립된다.

break가 멈추고자 하는 곳 바로 뒤에 썼어야 적용이 된다면, return은 되돌려주고 싶은 곳의 변수명만 따로 지정해준다면 어느 위치에 있어도 상관이 없는 것이다.

Array = 배열 생성

Number = Number(숫자형)객체 생성

-생성을 위해 만들어둔 함수

-생성할때 꼭 앞에 new 사용

-기본적으로 대문자로 시작

-개인적으로는 보통 VSCode에서 초록색으로 뜨는 단어들은 다 이 생성자함수로 보면 되는건가 싶다

-배열 데이터가 추가되어도 상관없기 때문

1. 배열의 초깃값은 항상 0이기에 for문 변수명 i에 0을 지정해준 모습

2. 문자열의 갯수가 총 7개지만 배열 초깃값은 0 으로 시작하기에 변수명 i는 문자열 갯수보다 < 작다로 표시해야 0~6까지 설정 가능

3. 이후 document로 0~6까지의 배열 값들을 for문을 활용해 반복나열하여 출력했다

about 6가지 속성

(괄호 안 수나 매개변수에 적용된 값들의 속성 결정)

1. Math.min()

-최솟값

2. Math.max()

- 최댓값

3. Math.random()

-랜덤값

4. Math.round()

-반올림

5. Math.floor()

-내림

6. Math.ceil()

-올림

for은 반복문이기에 sum += 1;이라고 적으면 sum에 지정된 초깃값 0에 1을 더한 값이 계속 누적되어 1+2+3+...+i<=10이이게 10까지의 합 결과가 나왔을텐데 sum = i+=1 이런식으로 +=를 대입 연산자로 인지못하고 일반 +나 -처럼 인지함

수학객체 이미지 랜덤 수학적 수식

해당 사진의 var today = new Date();는 today라는 변수에 새로운 Date()라는 객체 속성을 부여한다는 뜻이다

1초 = 1000밀리세컨
1분 = 60초 * 1000 = 60000밀리세컨
1시간 = 60 * 60000 = 3600000밀리세컨
1일 = 24 * 3600000 = 86400000밀리세컨

.getMonth()

=월(0~11)

.getDate()

=날짜

.getDay()

=요일(일(0)~토(6))

.getHours()

=시(시간)

.getMinutes()

=분

.getSeconds()

=초

.getMilliseconds()

=밀리세컨드

=밀리초

=1970년대 1월 1일부터 밀리초로 경과한 시간

.getFullYear()

=해당년도

.getTime()

=

날짜객체 이용 남은 날짜 구하기

1. var now = new Date();

   now 참조변수에 Date 날짜객체 할당, 이때 Date는 생성자 함수이며, 생성자 함수를 생성할때는 앞에 new를 붙여야한다

2. .getFullYear로 변수명 nowYear에 올해 년도를 설정해준다

3. dDay라는 변수명에 nowYear를 활용해 var dDay = new Date(nowYear,9,25)로 올해,9월,25일을 dDay로 설정했다

4. 이후 .getTime을 활용하여 1970년 1월 1일부터 dDay까지의 밀리초를 구하고, 1970년 1월 1일부터 현재까지의 밀리초를 구해 dDay - 현재까지의 밀리초로 현재부터 dDay까지의 밀리초를 구했다

5. 이렇게 구해진 밀리초를 우리가 익히 아는 초, 분, 시간, 일로 나눠입력했다

   var result = theDay/86400000;
           result = Math.ceil(result);
           console.log("남은날짜 밀리세컨 : ", result);

괄호 안 숫자의 문자 반환

.charAt(인덱스번호)

=괄호 안 인덱스번호에 해당하는 문자를 반환

.slice(추출하고자 하는 시작 인덱스번호, 마무리 인덱스번호)

=문자열에서 문자를 자른후, 괄호 안 추출하고자 하는 시작 인덱스 번호부터 ~까지 추출하고자 하는 문자의 마지막 인덱스 번호를 입력하면 해당 인덱스 번호의 문자 추출

.substr(시작 인덱스번호, 그 후 추출하고자 하는 문자까지의 글자수)

=괄호 안 시작 인덱스번호로부터 원하는 문자까지의 인덱스번호 입력하면, 해당 문자 추출

=.slice와 기능상으로 거의 비슷해보인다 아직까진 무슨 차이인지 모르겠다

괄호 안 문자의 번호 반환

.indexOf("문자")

=괄호 안 문자와 왼쪽부터 제일 먼저 일치하는 문자의 인덱스번호를 반환

=같은 문자가 여러개일 경우 가장 앞 문자의 번호를 반환한다는 뜻

.lastIndexOf("문자")

=괄호 안 문자의 제일 오른쪽, 끝부터 먼저 일치하는 문자의 인덱스번호 반환

.search("문자")

=왼쪽부터 찾을 문자와 일치하는 가장 먼저 찾은 문자의 인덱스번호 반환

괄호 안 문자의 문자 반환

.match("문자")

=오른쪽부터 찾을 문자와 일치하는 가장 먼저 일치하는 문자 반환

.replace("바꾸려는 문자","새 문자")

=왼쪽부터 바꾸려는 문자와 일치하는 가장 먼저 찾은 문자를 새 문자로 치환

.length

=문자열 갯수(괄호없음)

.trim()

=문자열의 맨 앞과 맨 뒤 공백 삭제

영문대소문자

.toLowerCase()

=괄호 안 값 영문 대문자를 전부 소문자로 치환

.toUpperCase()

=괄호 안 값 영문 소문자를 전부 대문자로 치환

replace()와 substr () 중첩 사용에 혼란이 옴

a. replace(), substr () 사용

var result = phone.replace(phone.substr(7,4),"****");
document.write("전화번호는 " + result + "입니다.");

1. phone.substr(phone에 입력된 문자열 8번째부터(0부터 시작으로 치기에 입력은 7로 입력), 이후 4개의 문자열까지 추출한다)

2. phone.replace로(phone.substr(7,4)을 바꾸고자 하는 문자열로 내포하여, "****"로 치환했다

b. substring (시작인덱스, 끝인덱스) 사용

var result2 = phone.substring (0,phone.length-4)+"****";
document.write(result2);

1. phone에 입력된 인덱스 번호 0번부터 그 총 길이에서 -4를 한 길이 추출

2. 그 추출한 문자열 귀에 **** 붙여서 완성

브라우저 주소창

location.href

=브라우저 주소

location.protocol

=프로토콜

location.host

=포트번호

사용 브라우저 정보

navigator.appCodeName

=브라우저 코드명

navigator.appName

=브라우저 이름

navigator.appVersion

=브라우저 버전

navigator.language

=브라우저 사용언어

navigator.product

=브라우저 엔진이름

navigator.platform

=브라우저 환경

핵심

navigator.userAgent

=운영체제 종합정보(코드명 + 버전)

=UI 영역을 제외한 너비

screen.availHeight

=UI 영역을 제외한 높이

screen.width

=UI 영역을 포함한 너비

screen.height

=UI 영역을 포함한 높이

window.onload

=DOM 객체들이 로드된 후 작동하겠다

html, style, script 중 우선순위는 html > style > script가 된다

html 위에 작성된 script가 Top-down 방식에 의해서 순서대로 잘 작동하기 위해 사용하는 기본 폼

EventListener 작동 순서

1. DOM 객체 변수 할당

2. EventListener 작성

3. Event DOM에 EventListener 연결

풀이

1. window.onload에 function 익명함수를 할당하여 DOM 객체들이 로드 된 후 기능 부여

2. 변수명 btn과 contents에 #button과 #heading 각각 할당

3. 선언적 함수를 사용해 EventListener 작성

   1. 첨부된 사진에서는 contents의 글자색을 변경하고자 contents.style.color(변경하고자 하는 매개체.속성.속성값) = '원하는 글자색'을 입력했다

   2. 텍스트노드의 내용 또한 변경하였는데, innerHTML을 활용했으며, 단순히 텍스트만 변경하는 것이라면 innerText도 적용이 가능하다

4. Event DOM에 EventListener 연결

   1. addEventListener를 활용해 버튼과 연결된 btn에 EventListener 추가

이벤트리스너 추가 및 삭제

addEventListener(이벤트 방식, 이벤트 호출)

=이벤트리스너 추가

removeEventListener(이벤트 방식, 제거할 이벤트 호출)

=이벤트리스너 제거

innerText 와 innerHTML 차이점

둘다 기능은 비슷하지만 큰 차이로는 텍스트를 입력했을때 innerText는 text만 가져온다는 것이고, innerHTML은 html적 요소까지 가져온다는 사실이다

contents.innerText = "<h1>A</h1>";

결괏값 : <h1>A</H1>

contents.innerHTML = "<h1>A</h1>";

결괏값 : (h1 태그가 적용된)A

onclick이란?

=이벤트는 버튼을 클릭했을 때 특정 기능을 수행

=html에서 ex) <button onclick="선언적함수명('매개변수 내용');"> 형식으로 사용가능

=위 사진처럼 메서드로도 사용가능

onclick을 활용한 이벤트리스너

1. btn.onclick = 연결할 이벤트;

   1. #button과 연동된 변수 btn에 메서드 onclick 할당

2. btn.onclick과 연결할 이벤트(리스너) 작성

   1. 작성 위치는 window.onload 기능 안에 넣어도 되고, 사진처럼 외부로 빼내도 기능 정상 작동함

=괄호 안 선택자와 일치하는 첫번째 요소 반납

=id의 #이나 class 선택자인 . 등 선택자 명을 확실하게 적어줘야함

위 사진과 같은 경우는 복합대입연산자로 문자열을 누적시켜 html 같은 효과를 준 경우다

1. querySelector로 변수명 inner에 body의 #inner와 연동

2. #inner와 연동된 inner에 복합대입연산자로 누적된 문자열의 변수명인 out을 innerHTML을 통해 적용

결과 : #inner > 누적된 문자열

위 사진 속에서는 증감연산자(++,--)로 각각 3초마다 숫자가 1씩 늘고, 2초마다 1씩 줄어들게 설정했다

clearInterval(setInterval이 적용된 변수)

=setInterval 지우기 기능

사진에서는 clearInterval을 통해 setInterval로 설정해둔대로 밀리초마다 변하던 변수값을 clearInterval을 버튼에 입력해 버튼을 누르면 setInterval을 초기화 시켜버릴 수 있게했다

setTimeout(기능, 밀리초)

기본원리는 setInterval과 같이 정해진 밀리초 후에 기능이 작동하는 것이지만 setInterval과 달리 딱 한번만 작동한다는 차이점이 있다

=스타일 우선순위 실질적 1등

=동적인 것이 정적인 것보다 우선시 되기에

setAttribute(속성명, 속성값)

=값을 바꿔주는 메서드

=return 반환 타입이 딱히 정해져 있지 않음

=HTML 요소에 속성 값 할당

=ex) html에 적힌 #abc의 폰트 색상 변경

getAttribute

=return 반환 타입이 그때그때마다 정해져있음

getElymentById

=문서내에 동일명 ID 중복이 불가능 하기에 단일형인 Elyment

=ID 연동할때 사용

getElymentsByName

=문서내에 같은 name으로 중복이 가능하기에 복수형인 Elyments

=주어진 name 값 활용해서 연동

1. 자바스크립트 대부분 다 잊어버림

2. querySelector 이해도 부족

3. 자바스크립트 내 css 속성 부여하는 법 몰랐음

4. 각종 처음 보는듯한 메서드들

해결과정:

자바스크립트 기본 폼

window.onload = function(){}

.querySelector('CSS 선택자')

querySelector는 제공된 CSS 선택자 중 '첫번째 요소'를 가져온다

그렇기에 사진 속 .open, .close 클래스는 각각 같은 이름으로 딱 한개씩밖에 없어 .querySelector() 메서드가 적용되었다

.querySelectorAll('CSS 선택자')

.open과 .close 클래스가 한개씩이었던 반면 .opens와 .closes 클래스는 각각 여러군데에 적용되어 있는 클래스라 이 모두에게 이벤트를 적용하기 위해 .querySelectorAll이 사용되었다

display: none과 display: block

display: none이 육안으로 해당 구조를 안보이게 하는 기능이고, display: block은 단순히 요소를 블록 요소로 만드는 기능으로만 판단했으나 display는 정확히는 화면에 어떤식으로 보일지 표시 방법이고, display: none으로 숨겨진 요소를 화면에 보여 조정할 수 있는 레이아웃으로 만들기 위해 display: block이 적용되었다

간단히 display: block은 블록 구조도 부여하고, 화면에 보이도록 한다에 초점을 맞추면 될 것 같다

이벤트 리스너

사진에서는 for구문을 활용해 이벤트 리스너를 만들었다

.open 클래스가 연동된 변수 open에 .addEventListener('click',allOpen)을 지정해 .open클래스로 만들어진 구조를 클릭시 allOpen으로 선언된 이벤트 함수가 작동하도록 만들었다

function allOpen(){
        for(var i=0; i<content.length; i++){
            content[i].style.display = "block";
        }
    }

위와 같은 코드에서 .style을 통해 css의 style 속성을 가져와 display: block 속성을 추가했다

이때 사용된 for 구문의 i는 content의 갯수보다 작다고 표시되어 있다

그 이유로는 배열이 index 번호 0번부터 시작하기 때문인데 배열에 3개에 요소가 있다면 content.length는 '3'이 된다

그러나 해당 for구분에서 i가 사용된 위치를 보면 [i] 즉, 배열 번호로써 사용되었기 때문에 3번째 배열을 지정하려면 -1해서 i가 2번이 와야하기에 i의 최대 증가 숫자를 < 미만 꺽쇠로 2로 한계치를 정해둔 것이다

개별 열기 / 닫기 할때 사용된 처음 보는 메서드

.parentElement

=제이쿼리에서의 .parent()와 같은 역할을 하는 것 같다

.nextElementSibling

=제이쿼리에서의 .next()와 같은 역할을 하는 것 같다

=Sibling이 붙는 이유는 html문서의 요소 간 관계를 정확하게 반영하기 위해 붙었는데 해당 속성이 현재 요소의 다음 형제 요소를 나타내기 때문이다 parentElement때문에 이름 헷갈리지 말자

• 태그 내에 직접 자바스크립트 명령어 작성

• ex) onclick

var snake_case;

• 언더바(_)가 들어있는 표현 방식

파스칼 케이스

var PascalCase;

• 두가지 이상의 단어들로 이뤄진 합성어일때 첫글자들이 대문자인 경우

카멜 케이스

var camelCase;

• 두가지 이상의 단어들로 이뤄진 합성어일때 첫글자만 소문자고, 이후 글자들의 첫글자가 대문자인 경우