※ 자바스크립트란? ※

* 웹에서 자바스크립트 사용하기

ㄴ 내부스크립트 사용하기 - 위치는 자유롭지만 body 내부 제일 밑에 많이 사용 // 기계가 문서 읽는 순서 때문에
ㄴ 외부스크립트 사용하기 - <script src="./js/button_click.js"></script>
ex)

* script - 자바스크립트 선언

ㄴ 자바스크립트를 사용하기 위해
ex)

* = - 앞에 값에 대입

ㄴ 변수명 = 값
ex)
heading = document.querySelector('#heading') // #heading을 heading으로 대입

* var - 변수선언

ㄴ 선언한 변수를 사용한땐 큰따옴표(" ")나 작은 따옴표(' ') 사용하면 안됨. 텍스트로 인식해버림.
ex)
var heading = document.querySelector('#heading'); // #heading을 heading이라는 변수로 정의

* 식(expression)

ㄴ 값을 만들어 낼 수 있다면 모두 식이 될 수 있다
ㄴ 식은 변수에 저장된다

* 문(statement)

ㄴ 문의 끝에는 반드시 세미콜론(;)을 붙여서 구분하는게 좋다
ㄴ 넓은 의미에서 식이나 값을 포함할 수 있다
ㄴ 프로그램이 실행하는 단위
ex)
int a = 10;

* alert - 알림 창 출력

ㄴ alert("메시지");

ex) alert("Hello, World!");

* confirm - 확인 창 출력

ㄴ confirm("메시지");

ex) var reply = confirm("정말 배경 이미지를 바꾸겠습니까?");

* prompt - 프롬프트 창에서 입력받기

ㄴ prompt("내용.", "기본값");

ex) var name=prompt("이름을 입력하세요.", "아무개");

* document - 웹 문서

* write - 간단한 입출력 할 때 사용

ㄴ document.write("내용")
ㄴ 웹 문서(document)에서 괄호 안의 내용을 표시(write)하는 명령문
ㄴ 괄호 안에서 큰따옴표(" ")나 작은 따옴표(' ') 사이에 입력한 내용은 웹 브라우저 화면에 그대로 표시됨
ㄴ 따옴표 안에는 HTML 태그도 함께 사용할 수 있음
ㄴ 변수명이 오면 큰따옴표(" ")나 작은 따옴표(' ') 사용하면 안됨

* + - 변수 태그 같이 사용할때 구분 기호

ㄴ 변수, 태그 등을 구분하지 않으면 오류가 난다 ㄴ document.write("<b><big>" + name + "</b></big>" +"님 환영합니다!");

* console.log( )

ㄴ 괄호 안의 내용을 콘솔 창에 표시
ㄴ 콘솔 창 : 웹 브라우저 개발자 도구 창에 포함되어 있는 창
ㄴ 괄호 안에 변수가 들어갈 수도 있고, 따옴표 안에 텍스트를 넣을 수도 있음
ㄴ 따옴표 안에 태그는 사용할 수 없음
ㄴ 웹 브라우저에서 콘솔 창을 열려면 웹 브라우저 화면에서 [Ctrl] + [Shift] + [J] 를 누르세요
ㄴ 콘솔창에서 오류 확인도 가능하다 - 오류가 발생한 파일명과 행 번호로 오류 발생 위치를 표시해 준다.

* new Date()

ㄴ new 키워드를 사용한 new Date() 는 Date 타입인 새로운 객체를 생성합니다. 인수를 생략하면, 현재 날짜 및 시간을 나타내는 Date 객체가 생성됩니다.
ex)

* toLocaleTimeString()

ㄴ Date 객체의 날짜의 시간 부분을 지역에 맞는 언어 포맷으로 반환한다.
ex)

* 스타일 가이드란

ㄴ 코딩 규칙을 ‘스타일 가이드’, ‘코딩 컨벤션‘, ‘코딩 스타일‘, ‘표준 스타일‘ 등으로 부름
ㄴ 코딩 규칙이 왜 필요할까?
ㄴ자바스크립트는 다른 프로그래밍 언어에 비해 데이터 유형이 유연해서 오류 발생이 잦다
ㄴ 오픈 소스에 기여하거나 누군가와 공유할 소스라면 더욱 깔끔한 소스가 중요하다
ㄴ 팀 프로젝트를 진행한다면 통일된 코딩 규칙이 필요하다
ㄴ 코딩 규칙에 따라 작성된 웹 사이트는 유지 보수도 수월하고 그만큼 비용도 줄어든다


ㄴ자바스크립트 스타일 가이드
ㄴ 구글 자바스크립트 스타일 가이드 (google.github.io/styleguide/jsguide.html) 또는
ㄴ 에어비앤비 자바스크립트 스타일 가이드(github.com/airbnb/javascript) 참고
ㄴ 회사 프로젝트의 경우 팀 내에서 상의해서 결정

* // - 자바스크립에서 주석처리

ㄴ // 뒤부터 한줄이 주석처리 됨.
ㄴ 주석안에 주석은 처리하지 않는다. 되지도 않는다.
ex)

* 식별자는 정해진 규칙을 지켜 작성한다

ㄴ 첫 글자는 반드시 영문자나 언더스코어(_), 달러 기호($)로 시작해야 한다
ㄴ 두 단어 이상이 하나의 식별자를 만들 때 단어 사이에 공백을 둘 수 없다
ㄴ 예약어는 식별자로 사용할 수 없다
ㄴ -, + 등의 특수기호는 기능이 있어서 쓰면 안된다
ㄴ 대소문자 구분
ex)

*

ㄴ
ex)

*

ㄴ
ex)

*

ㄴ
ex)

*

ㄴ
ex)

※ 자바스크립트 기본 문법 ※

* 변수란?

ㄴ 변수(variable) : 값이 여러 번 달라질 수 있는 데이터
ㄴ 상수(constant) : 값을 한번 지정하면 바뀌지 않는 데이터 ex) π
ㄴ 반드시 구분하기.
ㄴ " ", ' ' 를 넣으면 문자로 인식

* 변수 선언의 규칙

- 변수 이름
ㄴ 영어 문자, 언더스코어(_), 숫자를 사용한다
ㄴ 첫 글자는 영문자, _기호, $기호를 사용한다
ㄴ 띄어쓰기나 기호는 허용하지 않는다
예) now, _now, now25 (사용할 수 있음)
예) 25now, now 25, *now (사용할 수 없음)

ㄴ 영어 대소문자를 구별하며 예약어는 변수 이름으로 사용할 수 없다

ㄴ 여러 단어를 연결할 때는 하이픈이나 언더스코어를 사용할 수 있고 중간에 대문자를 섞어 쓸 수도 있다. 하지만 하이픈 잘 안쓴다
예) total-area, total_area, totalArea 등

ㄴ 변수 이름은 의미있게 작성한다

* 변수 선언하기

ㄴ var 변수명; // 반드시 먼저 선언. 그릇부터 만드는 것이다.
ㄴ 변수명 = 값;
ㄴ var 변수명 = 값 // 한줄로 선언할 수도 있다. but 잘 안쓴다

* 변수에 값 할당

ㄴ ‘=‘ 기호 다음에 값을 저장
ㄴ 값넣으면 초기화 했다 말할 수 있다.

* 변수도 계산식도 순서(위치)가 매우 매우 매우 중요하다

ㄴ 위치가 바뀌면 안먹힌다
ㄴ 변수를 사용하려면 변수가 저장된 아래 위치에 써야 변수가 들어간다.

ex) 예시에서 age = currentYear - birthYear + 1; 가 birthYear = prompt("태어난 연도를 입력하세요. (YYYY)",""); 위에 있다고 한다면 변수를 받지 못해 작동하지 않는다.

var age; // 나이
var currentYear = 2022; // 올해 년도
var birthYear; // 태어난 년도

birthYear = prompt("태어난 연도를 입력하세요. (YYYY)","");
document.write("올해 년도는 " + currentYear + "년 입니다.<br>");
age = currentYear - birthYear + 1;
document.write(birthYear + "년도에 태어난 당신의 나이는 " + age + "세 입니다.");
ex)

* 자바스크립트 코드에 CSS 넣으면 느려진다

ㄴ 잘 사용 안함
ex)

* 자료형 이해하기

ㄴ 컴퓨터가 처리할 수 있는 자료의 형태
ㄴ 콘솔창에서 typeof 를 입력하고 내용을 넣으면 타입을 알려준다
ㄴ 콘솔창열기 - ctrl + shift + J

* 숫자형(number)

ㄴ 정수 : 소수점이 없는 숫자
ㄴ 실수 : 소수점이 있는 숫자
ㄴ 자바스크립트는 실수를 정밀하게 계산하지 못함

* 문자열(string)

ㄴ 작은따옴표(' ')나 큰따옴표(" ")로 묶은 데이터 - 숫자도 안에 넣으면 문자로 인식
ㄴ 하나 이상의 문자로 이루어진
ㄴ 자바스크립트는 문자, 문자열 모두 문자열로 인식

* 문자 - character

ㄴ 한문자 - A
ex)

* 작은따옴표(' ')나 큰따옴표(" ") 표기법

ㄴ 큰따옴표를 사용하면 큰따옴표 안에는 작은따옴표로 구분한다. // 기계가 읽다가 오류날수도 있다.
ex)

docment.write("<span style='color: red;'>" ,"do it", "</span>")

* 논리형(boolean)

ㄴ 참true이나 거짓false의 값을 표현하는 자료형. 불린 유형이라고도 함.
ㄴ 조건을 확인해서 조건이 맞으면 true, 맞지 않으면 false라는 결괏값 출력

* undefined 유형

ㄴ 자료형이 정의되지 않았을 때의 데이터 상태
ㄴ 변수 선언만 하고 값이 할당되지 않은 자료형
ex)

* null 유형

ㄴ 데이터 값이 유효하지 않은 상태
ㄴ 변수에 할당된 값이 유효하지 않다는 의미
ex)

* 배열(array)

ㄴ 하나의 변수에 여러 값을 저장할 수 있는 복합 유형
ㄴ 배열명["값1", "값2", "값3" ,"값4"]
ㄴ 기계는 카운터를 1부터 아니라 0부터 시작한다
ㄴ 배열명["값1", "값2", "값3" ,"값4"] // 길이는 4이지만 값1은 0번방에 있다.
ex)

* 자바스크립트의 데이터 유형 자동 변환

ㄴ 자바스크립트의 편리한 점이면서도 약점인 부분이 데이터 유형이 유연하다는 것입니다. 다시 말해 변수의 데 이터 유형이 중간에 바뀔 수 있다는 것이죠. 책에 있는 ‘나이 계산 프로그램’에서는 프롬프트 창을 통해 사용자의 태어난 해를 입력받는데, 이때 프롬프트 창에서 입력받은 값은 문자열이지만 사칙연 산에 사용된 문자열은 자동으로 숫자형으로 변환되어 계산됩니다
ex)

* 객체 유형은 자바배울때 다시 알려준다.

※ 연산자 ※

* 산술 연산자

ㄴ 수학 계산을 할 때 사용하는 연산자



ㄴ 나누기 연산자(/) : 나눈 값 자체
ㄴ 나머지 연산자(%) : 나눈 후에 남은 나머지 값


ex)
var a =10 ;
var b = 2 ;

c = a + b // c = 12
c = a - b // c = 8
c = a * b // c = 20
c = a/b // c = 5
c = a%b // c = 0

* % - 나머지 구하기

ㄴ 7%3 = 1
ex)

* 증감연산자

ㄴ 전처리 후처리 이해하기
ㄴ a++ : 먼저 계산이 이루어지고 난 뒤에 값이 증감 연산이 이루어진다.
ㄴ --a : 증감 연산이 먼저 이루어지고 그 뒤에 계산이 이루어진다
ㄴ 특정수치를 넣어 그만큼 증감을 설정할 수도 있다
ex)

++ : 값이 증가
-- : 값이 감소

var a = 10

c = a++; // c : 11 a:11
c = a--; // c : 9 a: 9


c = ++a // c : 11 a: 10
c = --a // c : 9 a: 10

* 할당 연산자(대입 연산자)

ㄴ 연산자 오른쪽의 실행 결과를 왼쪽 변수에 할당하는 연산자


ex)
= : 오른쪽 값을 왼쪽 변수에 할당
+= : b += a; b = b+a;
-= : b -= a; b = b-a;
*= : b *= a; b = b*a;
/= : b /= a; b = b/a;
%= : b % a; b = b%a;

* 연결 연산자

ㄴ 문자열에서 사용. 문자와 문자를 연결(+)
ㄴ 둘 이상의 문자열을 합쳐서 하나의 문자열로 만드는 연산자
ㄴ ‘+’ 기호 사용
ㄴ DB : SQL 쿼리문에 자주 사용
ex)

* 비교 연산자

ㄴ 피연산자 2개의 값을 비교해서 true나 false로 결과값 반환
ㄴ true 1
ㄴ false 0

** 자바스크립트와 다른 일반적 언어에서 ==, === 의미 구분하기

*** 자바스크립트에서의 == 의미

ㄴ 자바스크립트는 피연산자의 자료형변환을 자동으로 해주는 특성이 있음을 항상 생각한다
ㄴ 자바스크립트는 이러한 특성 때문에 자동으로 변환해주는 경우와 변환하지 않는 두가지 문법이 존재한다.
ㄴ == : 자료형을 자동으로 변환하여 둘을 비교함
ㄴ === : 자료형을 변환하지 않고 둘을 비교함
ㄴ 자바스크립트 == // 일반적으로 사용 잘 안한다
ㄴ 자바스크립트 === // 일반적으로 많이 사용

*** 일반적 언어에서의 == 의미

ㄴ 일반적 언어에선 자동으로 자료형을 변화하지 않기에 문법도 하나이다
ㄴ == : 자료형을 변환하지 않고 둘을 비교함


▷ 결론 : 자바스크립트의 ===와 일반적 언어에서의 == 의 의미가 같다.


ex)

** 자바스크립트에서 작동 할때

3 == "3" : true // 앞 숫자형 이라서 뒤에도 숫자형으로 자동으로 변환해서 비교
3 === "3" : false // 피연산자의 자료형을 변환하지 않음

** 일반적인 프로그램에서 작동할때

==
3 == "3" : false

** 부정문

위와 같은 이유로 부정문에도 자바스크립트에선 2가지로 나뉜다.

!= : 다른가?
!=
3 != "3" // false

!==
3 !== "3" // true

* 아스키 코드

ㄴ 컴퓨터가 이해하는 문자
ㄴ alt + 숫자 누르면 문자로 표현해줌

* 논리 연산자

ㄴ 조건을 2개 이상 체크할 경우에는 조건 연산자를 사용해 조건을 만듦
ㄴ 두 조건이 true일 경우, 조건 1개만 true일 경우처럼 여러 경우를 따질 때 논리 연산자 사용
ㄴ true와 false가 피연산자인 연산자 조건을 처리할 때 사용
ㄴ or : 적어도 하나가 참이면 참
ㄴ XOR도 있다. 보안에서 많이 사용한다.


-------------------
true 1
false 0
or 더하기 = 1
and 곱하기 = 1
not
XOR
-------------------

1. && : and
앞   뒤   결과
 T    T     T
 T    F     F
 F    T     F
 F    F     F

2. || : or
앞   뒤   결과
 T    T     T
 T    F     T
 F    T     T
 F    F     F

3. XOR
앞   뒤   결과
 T    T     F
 T    F     T
 F    T     T
 F    F     F

4. ! : not
a != b // a 가 b가 아니라면 True
a != b // a 가 b라면 False
-------------------

** AND 연산자 (&&)

ㄴ 피연산자 2개 중에서 false가 하나라도 있으면 결괏값은 false

** OR 연산자 (||)

ㄴ 피연산자 2개 중에서 true가 하나라도 있으면 결괏값은 true

** NOT 연산자 (!)

ㄴ 피연산자를 반대로 뒤집음

* 순서도(flowchart)

ㄴ

* if 조건문

ㄴ 피연산자 2개의 값을 비교해서 true나 false로 결괏값 반환
ㄴ 하나의 if ~ else 문 안에 다른 if ~ else 문을 넣을 수 있다
ㄴ 중첩해서 사용할 수도 있다.
ㄴ if(조건){} // 조건이 참일때만 실행
ㄴ else{} // 거짓일 경우 else문 실행
ㄴ else if // 조건이 여러가지인 경우에 if - else if - else if ....... - else 사용
ex)

** if문 간단하게 표현하기

ㄴ (조건) ? 참일때 명령어들 : 거짓일때 명령어들;

---------------------------
ex)
var userNumber = prompt("숫자를 입력하세요.");

(userNumber % 3 === 0)
? alert("3의 배수입니다.") : alert("3의 배수가 아닙니다.");

-------------------------------

** if문 조건이 여러가지 일때

ㄴ if 조건문 예제보기
var kor = parseInt(prompt("국어점수 입력하세요", ""));
var eng = parseInt(prompt("영어점수 입력하세요", ""));
var mat = parseInt(prompt("수학점수 입력하세요", ""));

avg = (kor + eng + mat) / 3;
cl_avg = avg.toFixed(avg);


if (cl_avg >= 90) {
document.write(">p<학점 A>/p<");
} else if (cl_avg >= 80) {
document.write(">p<학점 B>/p<");
} else if (cl_avg >= 70) {
document.write(">p<학점 C>/p<");
} else if (cl_avg >= 60) {
document.write(">p<학점 D>/p<");
} else {
document.write(">p<학점 F>/p<");
};

* 삼항연산자

ㄴ if~else 문 간단하게 사용가능
ㄴ (조건) ? 참일때 : 거짓일때
ㄴ {(조건) ? 참일때 : 거짓일때}
ㄴ 블럭에 넣어도 되고 안넣어도 작동한다.

* null

ㄴ 데이터 값이 없는것
ㄴ 스페이스바, 0 등은 데이터가 있는 거. 아스키코드에도 있다.
ex)

* parseInt()

ㄴ 문자열을 숫자형(int)로 변환
ㄴ 이걸로 감싸면 됨.
ㄴ 자바스크립트는 자동변환을 하기 때문에 계산이 이상하게 되는 경우가 생기므로 형에 맞게 변환해주는게 좋다.

ex) var 철수 = parseInt(prompt("철수는 점수를 입력하세요",""));

* avg.toFixed()

ㄴ 소수점 자리수 지정
ex)ex) avg.toFixed(2) // 소수점 두자리까지 표시

* switch

ㄴ switch01 예제보기
ㄴ switch02 예제보기
ㄴ switch03 예제보기
ㄴ 커피고르기 예제보기
ㄴ 커피 고르기 예제보기- 교수님 풀이
ㄴ 처리할 명령이 많을 경우 switch 문이 편리
ㄴ 조건은 case 문의 값과 일대일로 일치해야 함
ㄴ case 문의 명령 실행 후 switch 문 빠져나옴
ㄴ 조건과 일치하는 case 문이 없다면default 문 실행
ㄴ case문엔 반드시 break 문이 있어야 함
ㄴ 같은 출력값을 나타낼땐 case문을 나열해서 표현 가능 // 예제3 참조
ㄴ default 문에는 break 문이 없음
ㄴ 숫자, 문자 다 사용 가능
ㄴ 자료형 반드시 확인 할 것
ㄴ 변수 지정 제대로 할 것
ㄴ ; 기호 제대로 쓸 것
ㄴ 값이 딱 떨어져야 한다




- switch 형태

  switch(식:값){
       case 값1: 실행문1;
                    break;
       case 값2: 실행문2;
                    break;
       default : 실행문3;
   };







ex)

** 숫자로

var session = parseInt(prompt("관심 세션을 선택해 주세요. 1-마켓팅, 2-개발, 3-디자인"));

switch (session) {
case 1:
{
document.write("<p>마켓팅 세션은 <strong>201호</strong>에서 진행합니다</p>");
break
}
case 2:
{
document.write("<p>개발 세션은 <strong>203호</strong>에서 진행합니다</p>");
break
}
case 3:
{
document.write("<p>마켓팅 세션은 <strong>205호</strong>에서 진행합니다</p>");
break
}
default:
{
"잘못 입력했습니다."
}
};

** 문자로

var session = prompt("관심 세션을 선택해 주세요. kor, eng, mat");

switch (session) {
case "kor":
{
document.write("<p>kor 세션은 <strong>201호</strong>에서 진행합니다</p>");
break
}
case "eng":
{
document.write("<p>eng 세션은 <strong>203호</strong>에서 진행합니다</p>");
break
}
case "mat":
{
document.write("<p>mat 세션은 <strong>205호</strong>에서 진행합니다</p>");
break
}
default:
{
"잘못 입력했습니다."
}

};

* round()

ㄴ 반올림
ㄴ avgup = Math.round();
ex)

* toFixed();

ㄴ 소숫점 밑 몇번째까지 버리기
ㄴ 변수명 =변수명.toFixed(0);
ex)

* * floor()

ㄴ 소숫점 버리기
ㄴ 변수명 = Math.floor(변수명)
ex)

* 자료형 확인하기

ㄴ 이름에 마우스 올리면 자료형 표시해준다
ex)

* 반복문

ㄴ
ex)

* for

ㄴ for01 예제보기
ㄴ for02 예제보기
ㄴ 연속 더하기 예제보기
ㄴ 두 수 사이 나열하기
ㄴ 두 수를 입력받아 나열하기 예제보기
ㄴ 조건문을 주고 반복해서 작동
ㄴ for(초기값; 조건; 증감식){반복 실행되는 명령어;}
ㄴ 초기값 → 조건 → 실행 → 증감식→ 조건 → 실행→→→→→→
ㄴ for (i = 1; i <= 10; i = i + 1){;}

* 중첩된 for문

ㄴ 구구단 예제보기
ㄴ

* 팩토리얼

3! = 1 X 2 X 3
10! = 1 X 2 X 3 X 4 X 5 X 6 X 7 X 8 X 9 X 10
ㄴ while 사용해서 구현해봄


// 내 풀이


// 선생님 풀이

* 변수는 계속 내려오면서 값을 넣고 빼고 변형하며 상속시킬 수 있다.

ㄴ
ex)

* 자리교환

ㄴ 값자리 교환 예제보기
ㄴ 두수를 입력받아 짝수만 나열하기 예제보기
ㄴ 임시로 변수를 하나 만들어 준뒤에 값을 바꿔준다.
ㄴ i 와 j 두 변수가 존재한다면 tn 이라는 변수를 만든뒤 tn = i ; i = j; j = tn;이라고 정의하면 i와 j의 값이 바뀐다.
ex)

* while 문

ㄴ while 예제보기
ㄴ while로 구구단 만들기
ㄴ 조건이 맞을때까지 계속 반복
ㄴ 조건을 체크하고 true라면 { }안의 명령 실행
 조건이 false라면 명령은 한 번도 실행하지 않을 수 있음

초기값;
while (조건식){
실행문;
증감식;}
ex)

* do ~ while 문

ㄴ 반드시 1번은 실행됨
ㄴ 일단 명령을 한번 실행한 후 조건 체크.
true라면 { } 안의 명령 실행, false라면 { }을 빠져나옴
 조건이 false라도 명령은 최소한 한 번은 실행
ex)

* break

ㄴ break 예제보기
ㄴ for 구구단에 break적용 만들기
ㄴ while break적용 만들기
ㄴ 종료 조건이 되기 전에 반복문을 빠져 나와야 할 때 사용
ㄴ break를 만나면 조건식을 빠져나가서 출력해버린다.
ex)

* continue

ㄴ continue 예제보기
ㄴ for 구구단에 continue적용 만들기
ㄴ while에 continue적용 만들기
ㄴ 조건에 해당되는 값을 만나면 반복문의 맨 앞으로 이동
-> 결과적으로 반복 과정을 한 차례 건너 뜀
ㄴ continue를 만나면 증감식으로 가버림
ㄴ while 문에 넣으면 무한 루핑이 되버릴수 있다.
ㄴ 증감식을 한번 더 적어 줘야 한다.

ex)

* 작동여부를 계속 확인해 주는 것이 좋다.

ㄴ ㄴ 14장 총정리 예제보기 p.489

ex)

*

ㄴ
ex)

*

ㄴ
ex)

※ 함수와 이벤트 ※

* 함수란?

** 함수의 선언 및 호출

*** 함수 선언 : 어떤 명령을 처리할지 미리 알려주는 것

*** 함수 호출 : 선언한 함수를 사용하는 것

* 함수

ㄴ function 함수명 (파라미터1, 파라미터2){실행문;}
ㄴ 호출을 해야한다.
ㄴ 파라미터(수치)
ㄴ 함수는 위치 상관 없이 먼저 호출해도 된다. 어디든 정의만 되있으면 호출해서 사용할 수 있다.
ex)

* 스코프

ㄴ 변수가 적용되는 범위
ㄴ 스코프에 따라 지역 변수(로컬 변수)와 전역 변수(글로벌 변수)로 나뉨
ㄴ 지역변수 / 전역변수
ㄴ 변수위치에 따라 지역변수 전역변수로 나뉜다.
ㄴ css처럼 위계 관계에 따라 생각해야 한다.
ㄴ 외부에서도 사용하려면 var 안쓰고 정의하면 쓸 수 있다.
ㄴ 전역변수로 선언해주면 변수를 전체에서 사용할 수 있다.
ㄴ 메모리에 대한 이해이다. 변수는 사용하면 메모리에서 삭제된다.
ㄴ 변수 할당을 잘해야 한다. (메모리 점유율)
ㄴ 모두 전역 변수로 선언하면 메모리가 부족해진다.
ㄴ 필요할때 불러 오는 방법이 있다. // return 함수사용
ex)

* 전역 변수

ㄴ 스크립트 소스 전체에서 사용함
ㄴ 함수 밖에서 선언하거나 함수 안에서 var 없이 선언

* 지역 변수

ㄴ 함수 안에서 선언하고 함수 안에서만 사용함
ㄴ var과 함께 변수 이름 지정

* var 변수와 호이스팅

** 호이스팅

ㄴ 변수를 뒤에서 선언하지만, 마치 앞에서 미리 앞에서 선언한 것처럼 인식함
ㄴ 함수 실행문을 앞에 두고 선언 부분을 뒤에 두더라도 앞으로 끌어올려 인식함
ㄴ let은 호이스팅이 없다
ex)

** 재선언과 재할당이 가능하다

ㄴ 자바스크립트는 지원한다.
ㄴ 재선언 : 이미 선언한 변수를 다시 선언할 수 있음
ㄴ 재할당 : 같은 변수에 다른 값을 할당할 수 있음
->재선언과 재할당이 가능하면 실수로 변수를 잘못 조작할 확률이 높아짐
ex)

** var : 스크립트에서 변수 선언

함수에서 var 예약어를 생략하면 의도하지 않게 전역 변수가 될 수 있다
프로그램이 길어지다 보면 실수로 사용하는 변수를 재선언하거나 값을 재할당 해버리는 경우가 생길수 있다.

ES6 : let, const - 버전에 따라. 요즘은 거의 다 쓸 수 있다.
let : 블럭 안에서만 쓸 수 있는 변수 : (지역 변수 비슷)
const : 상수 선언 : 변수를 상수로 선언해서 값이 변하지 않게 만든다.
const PI = 3.13;
PT = 3.1415; >- 에러 발생

** 자바스크립트 변수, 이렇게 사용하자

ㄴ 전역 변수는 최소한으로 사용합니다. // 메모리를 적게 사용하자.
ㄴ var 변수는 함수의 시작 부분에서 선언합니다. // 변수가 먼저 선언이 되어야지
ㄴ for 문에서 카운터 변수는 var보다 let 변수로 선언

ㄴ for문에서 카운터 변수를 사용할 때는 var 예약어를 사용하지 않습니다.
ㄴ ES6를 사용한다면 예약어 var보다 let를 사용하는 것이 좋습니다.
ㄴ ES : ECMAScript의 약자
ㄴ 6:버전 6
ㄴ ES : 프로그래밍 언어가 아닌 스크립트 언어들에 대한 표준, 규격
ex)

* {} // 블럭생성

ㄴ 블럭생성 안해도 인식은 하지만 구분 하기 위해서라도 블럭생성하는게 낫다
ex)

* 메모리

ㄴ 변수는 메모리에 저장된다.
ㄴ 메모리는 메인 메모리, 임시 메모리로 나뉜다
ㄴ 메인메모리는 상위 메모리, 하위메모리가 있다. // 삭제, 변경, 재설정이 자유롭다. 전역변수 등이 저장된다.
ㄴ 임시 메모리는 자동 삭제된다. // 수동적으로 재선언 불가하다. let 등이 저장된다.
ex)

* let

ㄴ 블록 변수 - 블록({ }) 안에서만 사용할 수 있다
-> 전역 변수는 변수 이름과 초깃값만 할당하면 됨
ㄴ 지역변수 처럼 쓴다
ㄴ let 변수는 재할당 가능
ㄴ 재할당은 가능하지만 재선언은 할 수 없다
ㄴ 재선언 시 에러 // 임시 메모리에 할당이 되었기 때문에 자동삭제가 된다. 때문에 임의로 삭제 안된다.
ㄴ let으로 선언한것을 다시 let으로 선언 불가. 메모리 구조상.
ㄴ 호이스팅이 없다

** let 사용해보기 1

** let 사용해보기 2

* const

ㄴ 상수 선언 : 값 변경 불가, 재선언 불가
ㄴ 상수 - 변하지 않는 값을 선언할 때 사용
ㄴ 재선언, 재할당할 수 없음

* * 매개 변수와 인수, return 문

ㄴ 매개 변수 : 하나의 함수를 여러 번 실행할 수 있도록 실행할 때마다 바뀌는 값을 변수로 처리한 것
ㄴ 인수 : 함수를 실행할 때 매개 변수 자리에 넘겨주는 값
ㄴ 함수 호출할 인수와 함수의 매개 변수 개수가 같아야 된다.
ㄴ 함수에서 처리되고 return 되는 값은 1개만 존재한다.

* return 함수사용

ㄴ 변수 선언안하고도 값을 밖에서 받을 수 있게 하는 함수
ㄴ 1개의 값만 반환할 수 있다

ex)
function addNumber(num1, num2) { // 두개의 값을 더하는 함수
                 return num1 + num2;
            };
            var sum = addNumber(10, 20); // sum 변수 선언, 함수 호출
            console.log(sum);
            sum = 50; // 변수 재할당
            console.log(sum);
            var sum = 100; // 변수 재선언
            console.log(sum);

* 익명 함수 - 잘 사용안함

ㄴ 함수 이름이 없는 함수
ㄴ 함수 자체가 식이므로 함수를 변수에 할당할 수도 있고
ㄴ 다른 함수의 매개변수로 사용할 수도 있음


ex)

* 즉시 실행 함수 - 잘 사용안함

ㄴ 함수를 실행하는 순간 자바스크립트 해석기에서 함수를 해석함
ㄴ 식 형태로 선언하기 때문에 함수 선언 끝에 세미콜론(;) 붙임

* 화살표 함수

ㄴ ES6 이후 사용하는 => 표기법
ㄴ 익명 함수에서만 사용할 수 있음
ㄴ 매개변수 하나일땐 ()생략 가능
       let hi = (user) => document.write(user + "님, 안녕하세요?");
       let hi = user => document.write(user + "님, 안녕하세요?");


ㄴ =>화살표 함수 : 이름 없는(익명) 함수에서 간단하게 표기
ㄴ (매개변수) => {함수내용}

       const hi = () => "안녕하세요?";

       const hi = () => {
       return "안녕하세요?"
       };

       const hi = () => "안녕하세요?";

       alert(hi());

* 이벤트

ㄴ 웹 브라우저나 사용자가 행하는 동작
ㄴ 웹 문서 영역안에서 이루어지는 동작만 가리킴
ㄴ 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생
ex)

* 이벤트 처리기

ㄴ 이벤트가 발생했을 때 처리하는 함수
ㄴ 이벤트 핸들러(event handler)라고도 함




ㄴ 이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결

* href #

ㄴ 자기자신을 의미
ex)

* 따옴표 표기

ㄴ 쌍따옴표 안에 사용할땐 홀따옴표 사용해야 오류 안생긴다.
// <a> href="#" onclick="alert('버튼을 클릭했습니다.')">Green</a>
ex)

* DOM을 이용한 이벤트 처리기

ㄴ DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결
ㄴ 마지막에 가서 자세하게 다룰 예정
ex)

* DOM구조를 다뤄서 html을 다룰수 있댜.

ㄴ html은 텍스트이다.
ㄴ html파일을 document라고 한다.
ㄴ document.querySelector('#a').innerHTML = sum;로 경로를 지정하면 텍스트 노드를 만들 수 있다.
ex)

* document.write

ㄴ write는 document의 메소드다. 다른곳에선 못쓴다.
ㄴ write는 body에 쓰는 거라서 기존에 있던 내용이 다 초기화 되버린다.
ex)

*

ㄴ
ex)

*

ㄴ
ex)

*

ㄴ
ex)

※ 자바스크립트와 객체 ※

* 객체(object)란?

* 자바스크립트 객체

ㄴ 자바스크립트 안에 미리 객체로 정의해 놓은 것
ㄴ 문서 객체 모델(DOM) : 문서 뿐만 아니라 웹 문서 안에 포함된 이미지·링크·텍스트 필드 등을 모두 별도의 객체로 관리
ㄴ 브라우저 관련 객체 : 웹 브라우저 정보를 객체로 관리
ㄴ 내장 객체 : 웹 프로그래밍에서 자주 사용하는 요소를 객체로 정의해 놓음.
ex)

* 사용자 정의 객체

ㄴ 필요할 때마다 사용자가 직접 만드는 객체
ex)

* 필요할 때마다 사용자가 직접 만드는 객체

ㄴ 객체는 객체 자체가 아니라 인스턴스 형태로 만들어서 사용
ㄴ 인스턴스 : 객체를 틀처럼 사용해서 같은 모양으로 찍어낸 것.
ex)

* 객체의 인스턴스 만들기

ㄴ 객체는 객체 자체가 아니라 인스턴스 형태로 만들어서 사용
ㄴ 인스턴스 : 객체를 틀처럼 사용해서 같은 모양으로 찍어낸 것.



ex) Date 객체의 인스턴스를 만들어서 날짜와 시간 표시하기

* 프로퍼티(property)와 메서드(method)

ㄴ 프로퍼티 : 객체의 특징이나 속성 // 보통 한번 선언하면 여기선 많이 변하진 않음
ㄴ 메서드 : 객체에서 할 수 있는 동작

* .을 찍으면 기능이 나오고 끝에는 괄호를 사용해줘야 한다. // function 정의할때 그렇게 하니

ㄴ
ex)

* 내장 객체

ㄴ 자바스크립트에서 기본으로 제공하는 객체
ㄴ Array, Date, Math 등등

* Array 객체

ㄴ 배열 만들기
ㄴ 내장 객체 배열

** 초기값이 없는 경우

- 자바 배열생성
ㄴ int[] arr = new int[3];

- 자바스크립트 배열 생성
ㄴ var arr = new Array(3);

** 초기값이 있는 경우

- 배열선언
ㄴ var numbers = ["one", "two", "three", "four"];

- Array객체를 사용한 배열 선언
ㄴ var numbers = Array("one", "two", "three", "four");

** 배열의 크기 - Array 객체의 length 프로퍼티

- 디지털 김C



- 프로그래머

* Array 객체의 메서드

ㄴ

* concat() 메서드

ㄴ 서로 다른 배열 2개를 합쳐서 새로운 배열을 만듦
ㄴ 기존 배열에 영향을 주지 않음

* 배열 요소끼리 합치는 join( ) 메서드

ㄴ 배열 요소를 연결해서 하나의 문자열로 만듦
ㄴ 요소 사시에 원하는 구분자를 넣을 수 있음.
ㄴ 구분자를 지정하지 않으면 쉼표(,)로 구분
ㄴ 데이터 다룰때 많이 사용한다. 구분해줘야 하니깐.
ex)

* 새로운 요소를 추가하는 push( ), unshift( ) 메서드

ㄴ push( ) 메서드 : 배열 맨 끝에 요소 추가
ㄴ unshift( ) 메서드 : 배열 맨 앞에 요소 추가
ㄴ 배열의 길잇값 반환, 기존 배열이 바뀜
ex)

* 배열에서 요소를 꺼내는 pop( ), shift( ) 메서드

ㄴ pop( ) 메서드 : 배열 뒤쪽에서 요소를 꺼냄
ㄴ shift( ) 메서드 : 배열 앞쪽에서 요소를 꺼냄
ㄴ 꺼낸 요소를 반환, 기존 배열을 꺼낸 요소가 빠진 상태로 변경됨

* splice( ) 메서드

ㄴ 중간에 요소를 추가하거나 삭제하는 splice( ) 메서드
ㄴ 배열 중간에 2개 이상의 요소를 추가하거나 삭제할 수 있음
ㄴ 새로운 배열이 결괏값으로 반환됨

1) 괄호 안에 인수가 1개일 경우

ㄴ 인수가 지정한 인덱스의 요소부터 배열의 맨 끝 요소까지 삭제

2) 괄호 안에 인수가 2개일 경우

ㄴ 첫 번째 인수는 인덱스값이고 두 번째 인수는 삭제할 요소의 개수
ㄴ 메서드를 실행한 후에는 삭제한 요소를 반환하고, 기존 배열은 나머지 요소만 남음

3) 괄호 안에 인수가 3개 이상일 경우

ㄴ 첫 번째 인수는 배열에서 삭제할 시작 위치, 두 번째 인수는 삭제할 개수, 세 번째 인수부터는 삭제한 위치에 새로 추가할 요소를 지정

* slice( ) 메서드

ㄴ 기존 배열을 바꾸지 않으면서 삭제하는 slice( ) 메서드
ㄴ 요소를 여러 개 꺼낼 수 있음
ㄴ 요소를 삭제한 후에도 기존 배열이 바뀌지 않음

1) 괄호 안에 인수가 1개일 경우

ㄴ 인수가 지정한 인덱스의 요소부터 마지막 요소까지 꺼내서 반환

2) 괄호 안에 인수가 2개일 경우

ㄴ 첫 번째 인수는 시작 인덱스, 두 번째 인수는 끝 인덱스의 직전 인덱스

** slice() 메서드는 기존 배열에 영향을 주지 않지만, splice() 메서드는 요소를 추가·삭제하면 기존 배열 자체가 수정됨

-> 기존 배열에서 꺼낸 요소로 새로운 배열을 만들어 사용하려면 slice() 메서드를 사용하고, 기존 배열의 일부 요소만 삭제하려면 splice() 메서드를 선택하는 것이 좋다

* reverse()

ㄴ 배열의 배치 순서를 역순으로 바꿉니다.

* sort(배열조건함수)

ㄴ 정렬 순서를 정의하는 함수.
ㄴ 배열 요소를 지정한 조건에 따라 정렬합니다.
ㄴ sort는 배열에 요소들을 두개씩 모든 경우를 비교해서 최종 정렬한다.
ㄴ 배열일때만 사용한다.
ㄴ function이 반환값이 0이 될때까지 값두개를 알아서 비교 반환을 반복한다.
----------------------------------------------------------------------------------
ㄴ 내부로직을 알수는 없지만 sort는 배열의 모든 요소들을 두개씩 비교해서 관계를 정해둔 함수에 따라 (음수, 0, 양수)의 이름표를 붙인다.
ㄴ 음수, 0, 양수가 논리 스위치에서 작동한다고 생각하면 된다.
ㄴ 이것을 가지고 한번에 정렬한다.
----------------------------------------------------------------------------------
ㄴ 오름차순, 내림차순, 문자열, 객체
ㄴ 배열명.sort(배열조건함수)
ㄴ 배열의 element들은 문자열로 취급되어, 유니코드 값 순서대로 정렬된다
ㄴ 유니코드로 받기때문에 함수로 정의 해줘야 의도한대로 출력됨
ex)

** 오름차순

ㄴ 아무것도 정의하지 않았을 경우 들어가는 기본 값이다

** 내림차순

** 문자열

** 객체

* Date 객체

ㄴ
ex)

* Date 객체 인스턴스 만들기

** 현재 날짜로 설정할 경우

** 특정 날짜로 설정할 경우 - 괄호 안에 날짜 또는 날짜와 시간 입력

* 자바스크립트의 날짜와 시간 입력 방식

1) YYYY-MM-DD 형식

2) YYYY-MM-DDTHH 형식

3) MM/DD/YYYY 형식

4) 이름 형식

ex)

* Date 객체의 메서드

ㄴ 날짜/시간 정보를 가져오는 메서드,      // get
ㄴ 날짜/시간 정보를 설정하는 메서드,     // set
ㄴ 날짜/시간 형식을 바꿔주는 메서드로 구분됨     // toString, toLocaleString

* innerText

ㄴ 자바스크립트로 html query안에 텍스트 입력 // innerHTML도 그럼. 차이알아둘것
ㄴ document.querySelector('#result').innerText = passedTime;
ex)

* 많은 것들을 데이터 베이스에서 해결하는 편이다.

ㄴ
ex)

* Math 객체

ㄴ
ex)

* Math 객체의 특징

ㄴ 수학 계산과 관련된 메서드가 많이 포함되어 있지만 수학식에서만 사용하는 것은 아님.
ㄴ 무작위 수가 필요하거나 반올림이 필요한 프로그램 등에서도 Math 객체의 메서드 사용함
ㄴ Math 객체는 인스턴스를 만들지 않고 프로퍼티와 메서드 사용
ex)

* Math 객체의 프로퍼티

* Math 객체의 메서드

* Math.random()

ㄴ 0~1 사이 숫자를 무작위 반환
ㄴ Math.floor(Math.random() * 100 + 1)

* 브라우저 관련 객체

ㄴ
ex)

* 브라우저 관련 객체의 계층 구조

ㄴ 브라우저를 다룰때 사용

* window 객체

* window 객체의 프로퍼티

ㄴ 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용

* window 객체의 메서드

ㄴ window 객체는 기본 객체이므로 'window.’를 생략하고 메서드 이름만 사용해도 됨

* cache 캐쉬 : 사용자의 컴퓨터에 브라우저의 내용 용량 파일 등을 임시 저장

ㄴ 주로 많이 사용한다.
ㄴ '브라우저 -> 서버' 접속을 매번 수행하면 서버에도 부하가 걸리고 속도도 느려진다.
ㄴ 공통되는건 사용자 컴퓨터에 캐쉬파일 형태로 임시로 저장해두는 것이다.
ex)

* 로컬 스토리지(localStorage)

ㄴ 캐쉬같이 사용한다.
ㄴ 영구적으로 사용 가능하다.
ex)

* 세션 스토리지(sessionStorage)

ㄴ 임시저장공간
ㄴ 캐쉬같이 사용한다.
ㄴ 세션이 끝나면 사라진다.
ex)

* open()

ㄴ 새로운 브라우저 창으르 여는 메서드
ㄴ 링크를 클릭하거나 웹 문서를 열때 새 창이 자동(팝업창)으로 뜨게 하려면 window.open() 메서드를 사용

** 새 브라우저에서 창열기

ㄴ window.open(경로(문서이름), 창 이름, 창 옵션)
ㄴ 경로 : 팝업 창에 표시할 문서나 사이트의 경로(주소) 나타낸다.
ㄴ 창 이름 : 팝업 차의 이름을 지정하면 이 창에 팝업 내용이 나타나도록 할 수 있다.
ㄴ 이름을 지정하지 않으면 팝업창이 게속 새로 나타난다.
ㄴ 창 옵션 : left, top 속성을 사용해 위치를 정하거나 width, height 속성을 사용해 크기를 지정할 수 있다.
ㄴ 위치를 지정하지 않으면 팝업 창은 화면의 맨 왼쪽 위에 나타난다.

// window.open("notice.html", "popup", "width=300, height=400, left=100, top=200");

// <button onclick="javascript:window.close();">닫기</button>

* navigator 객체

ㄴ 사용하는 브라우저가 많아지고, 웹 애플리케이션이 등장하면서 navigator 객체에 여러 프로퍼티가 등장하고 있음.
ㄴ 일부 브라우저에서만 지원하는 프로퍼티도 있음

** 주요 프로퍼티

* history 객체

ㄴ 방문한 사이트 주소가 배열(read only// 보안상 조작 불가) 형태로 저장됨

** 프로퍼티와 메서드

* location 객체

ㄴ 현재 문서의 URL 주소 정보(주소 표시줄)가 담겨 있음
ㄴ 이 정보를 편집해서 브라우저 창에 열 사이트/문서 지정

ㄴ http:// 보통 80번 포트
ㄴ https:// 보통 443번 포트
ㄴ s(security) : 보안

* screen 객체

ㄴ 사용자의 화면 크기, 정보
ex)

* screen.availWidth

ㄴ

--------------------------------------
나중에 DOM배울때 구분한다.

* getElementById
* querySelector


* innerHTML
* innerText
--------------------------------------

*

ㄴ
ex)

*

ㄴ
ex)

*

ㄴ
ex)

*

ㄴ
ex)

*

ㄴ
ex)

※ 문서 객체 모델(DOM) ※

// DOM 구조를 잘 이해해야 HTMl 구조에 접근해서 다룰수 있다. //

* 문서 객체 모델이란?

* DOM 트리

ㄴ 웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것
ㄴ 나무 형태가 되기 때문에 “DOM 트리“라고 함.
ㄴ 노드(node) : DOM 트리에서 가지가 갈라져 나간 항목
ㄴ 루트 노트(root node) : DOM 트리의 시작 부분(html)

* DOM 을 구성하는 원칙

ㄴ 모든 HTML 태그는 요소(element) 노드
ㄴ 웹 문서의 텍스트 내용은 요소 노드의 자식 노드인 텍스트(text) 노드
ㄴ 태그의 속성은 요소 노드의 자식 노드인 속성(attribute) 노드
ㄴ 주석은 주석(comment) 노드
ㄴ 속성과 텍스트 구분 할것

* DOM 요소에 접근하기

ㄴ 웹 문서에서 원하는 요소를 찾아가는 것을 “접근한다(access)”고 함
ex)

* getElementById( ) 메서드

ex)

* getElementsByClassName( ) 메서드

ㄴ 반환 값이 2개 이상일 수 있음
ㄴ HTMLCollection 객체에 저장됨

* getElementsByTagName( ) 메서드

ㄴ 반환 값이 2개 이상일 수 있음
ㄴ HTMLCollection 객체에 저장됨

* querySelector( ) 메서드, querySelectorAll( ) 메서드

ㄴ querySelecotor( ) 메서드는 한 개의 값만 반환
ㄴ querySelecotorAll( ) 메서드는 반환 값이 여러 개일 때 모두 반환 -> 노드 리스트로 저장됨
ㄴ id 이름 앞에는 해시 기호(#), class 이름 앞에는 마침표(.), 태그는 기호 없이 태그명 사용

* innerText, innerHTML 프로퍼티

ㄴ 웹 요소의 내용을 수정하는 프로퍼티

** innerText

ㄴ 텍스트 내용 지정

** innerHTML

ㄴ HTML 태그까지 포함해서 텍스트 내용 지정

** Array_innerHTML 사용

ㄴ 배열 사용>

** 3가지 방법으로 구현한 구구단

* getAttribute()

ㄴ getAttribute( ) 메서드 : 속성 노드의 값을 가져옴

** 큰 그림 클릭시 속성 값 정보 알림창 구현

* setAttribute()

ㄴ setAttribute() 메서드 : 속성 노드의 값을 바꿈

** 작은 그림 클릭시 큰그림 src변경

* DOM에서 이벤트 처리하기

** DOM 요소에 함수 직접 연결하기

ㄴ DOM 요소에 이벤트 처리기 함수를 직접 연결

** 함수 이름을 사용해 연결하기

ㄴ 함수를 따로 정의해 놓았다면 DOM 요소에 함수 이름을 사용해 연결
ㄴ 이 때 함수 이름 다음에 괄호를 추가하지 않음

* DOM의 event 객체

ㄴ 웹 문서에서 이벤트 발생한 요소가 무엇인지,
ㄴ 어떤 이벤트가 발생했는지 등의 정보가 담긴 객체

* timeStamp

ㄴ 머문 시간 밀리초로 나타냄

* this

ㄴ 이벤트가 발생한 대상에 접근할 때 사용하는 예약어

* addEventListener

ㄴ 이벤트 객체를 사용해 이벤트 처리기 연결
ㄴ 이벤트 추가
ㄴ 변수명.addEventListener("이벤트옵션", 작동함수)
ㄴ 이벤트 옵션 : mouseover, click 등
// smallPics[i].addEventListener("mouseover", changePic);

** CSS 변경 이벤트

* CSS 속성에 접근하기

ㄴ 자바스크립트를 사용해 각 요소의 스타일을 자유롭게 수정할 수 있음



ㄴ id가 desc인 요소의 글자를 파란색으로 변경하려면



ㄴ color처럼 한 단어인 속성명은 그대로 사용

ㄴ background-color, borderradius처럼 중간에 하이픈(-)이 있는 속성은 backgroundColor나 borderRadius처럼 두 단어를 합쳐서 사용

ㄴ 이때 두 번째 단어의 첫 글자는 Color와 Radius처럼 대문자로 표시

** 모형 클릭시 색상 모양 CSS 변경

** 타이틀 클릭시 CSS 변경

* DOM에서 노드 추가, 삭제하기

ㄴ
ex)

* 노드 리스트란?

ㄴ querySelectorAll( ) 메서드를 사용해 가져온 여러 개의 노드를 저장한 것
ㄴ 노드를 여러개 저장한 데이터 형태
ㄴ 배열과 비슷한 형태
ㄴ 인덱스 값으로 접근

* insertBefore()

ㄴ 입력순으로 노드 만들기

* this.onclick=''

ㄴ 한번만 실행한다.
ㄴ a href="#" onclick="addP(); this.onclick='';"

* 텍스트 노드를 사용하는 새로운 요소 추가하기

ㄴ ‘더 보기‘ 링크를 클릭하면 텍스트 표시하기

1. 요소 노드 만들기 - createElement( ) 메서드







2. 텍스트 노드 만들기 - createTextNode( ) 메서드







3. 자식 노드 연결하기 - appendChild( ) 메서드

* 속성 값이 있는 새로운 요소 추가하기

ㄴ ‘더 보기‘ 링크를 클릭하면 텍스트와 함께 이미지 표시하기

1. 요소 노드 만들기 – createElement( ) 메서드



2. 속성 노드 만들기 – createAttribute( ) 메서드



3. 속성 노드 연결하기 – setAttributeNode( ) 메서드



4. 자식 노드 연결하기 - appendChild( ) 메서드

* 노드 삭제하기

ㄴ 노드를 삭제할 때는 부모 노드에서 자식 노드를 삭제해야 한다
-> 노드를 삭제하려면 부모 노드부터 찾아야 함

* parentNode 프로퍼티

ㄴ 현재 노드의 부모 노드에 접근해서 부모 노드의 요소 노드를 반환

* removeChild( ) 메서드

ㄴ 자식 노드 삭제
ㄴ 노드를 없애면 하위 노드들도 같이 사라진다.

* true면 알아서 if에 들어간다.

ㄴ
ex)

* ""

ㄴ "" 을 해주면 기본값이 된다.
ex)

* shift + tab

ㄴ 뒤로 탭
ex)

* return false

<button onclick="newRegister(); return false;">추가</button>

* form은 버튼을 누르면 자동 summit된다. 그래서 return false를 해줘야 한다.

ㄴ
ex)

* 지역변수로 사용하면 같은 변수명으로 생성 계속해도 문제 없다.

ㄴ
ex)

* DOM 총정리 예제

** 변수 사용

** 속성 사용

** 테이블 만들기

ex)

*

ㄴ
ex)

*

ㄴ
ex)

*

ㄴ
ex)

*

ㄴ
ex)

*

ㄴ
ex)