JavaScript - 정리 중

박상원·2024년 2월 13일

메모

목록 보기

6/8

기타

오류 확인 : 오류가 있을 때는 크롬 개발자 도구의 콘솔탭에 오류 내용이 출력된다.

콘솔 : 실시간으로 자바스크립트를 실행하고 에러메시지 등을 출력해주는 기능

html파일에 자바스크립트 코드를 넣으려면 사이에 js코드를 작성한다.

키워드 : 함수, 명령어, if, for 등의 특정한 목적으로 사용하기 위해 자바스크립트에서 예약한 단어

Infinity : 양의 무한대 -Infinity : 음의 무한대

상수 : 항상 같은 값이라는 의미. 변수와 반대되는 개념이다.

NaN

NaN이란? : 숫자 자료형이지만 숫자가 아닌것을 의미한다.
산술결과가 유효하지 않은 값/ 너무커서 표현할 수 없는 값 표현

ex) 0/0, Infinity/Infinity, 산술연산에서 한쪽 오퍼랜드가 NaN 혹은 undefined일때

NaN은 무조건 적으로 다르다. -> 자기 자신과 다른 값을 비교할 수 없다.

let nan = Number("안녕");
nan == nan  

>>> false

위와 같이 자기 자신끼리 비교해도 false가 나온다.

NaN인지 확인할 때는 isNaN() 함수 사용
isNaN(nan) >>> true

null

null은 객체의 일종이며, 변수처럼 활용가능하다.
아예 값이 없는 상태를 구분할때 null을 활용한다.
ex)

console.log(null, typeof(null));  

>>>null object

ex)

let undefinedValue;
let nullValue = null;
if (undefinedValue == null){ console.log("undefined는 존재하지 않는 값이다");
if (nullValue == null){ console.log("null은 존재하지 않는 값이다");

>>>undefined는 존재하지 않는 값이다 
   null은 존재하지 않는 값이다

이런 식으로 undefined값을 null과 비교하면 같다고 나온다.
따라서 조건문에 정의되지않은 값을 조건으로 넣고 싶을 때 null을 사용할 수 있다.

식별자

변수와 함수 이름 등, 이름을 붙일 때 사용하는 단어

식별자 사용규칙

키워드 사용 안됨
문자, 숫자, _(언더 바), $로 구성
숫자로 시작하면 안됨
공백 입력하면 안됨
생성자 함수의 이름은 항상 대문자로 시작
변수, 함수, 속성, 메소드의 이름은 항상 소문자로 시작
여러 단어로 된 식별자는 캐멀케이스 사용 (캐멀케이스 : twoCoins, numberOfStudents 와 같이 첫번째 단어를 제외한 나머지 단어의 첫글자를 대문자로 표기)
변수명, 키워드, 함수명 등 모두 대소문자 구분 ex) counter와 Counter 변수는 다른 변수로 간주한다.

식별자 종류

식별자 뒤에 괄호	단독으로 사용	다른식별자와 사용
X	변수, 상수	속성
O	함수	메소드

변수, 상수 : input 등
속성 : Array.length, Math.PI 등
함수 : alert("Hello World!"), prompt(Message', Defstr) 등
메소드 : Math.abs(-273) 등

코드 작성 위치

html문서내에 JS코드가 있을경우

head 안에 코드를 포함했을경우

코드를 찾기 쉽다. 그러나 JS코드가 로드되는 동안 사용자는 웹페이지 내용을 볼 수 없다.

body의 끝부분에 포함했을 경우

웹 페이지 내용이 모두 로딩되어 보이고 난 후 JS코드를 실행한다.
사용자들이 웹 페이지를 빨리 볼 수 있다.

외부파일(*.js 형식)로 작성 & html문서에서 연결

<script src="외부 파일명.js"></script>

head 내에서 연결

유지보수성 및 재활용성 향상, 그러나 JS코드가 로드되는 동안 사용자는 웹페이지 내용을 볼 수 없다.

body의 끝 부분에서 연결

유지보수성 및 재활용성 향상
웹 페이지 내용이 모두 로딩되어 보이고 난 후 JS코드를 실행함으로써 사용자들이 웹페이지를 빨리 볼 수 있다.

객체

자바스크립트는 객체기반 언어이다.
객체 : 물리적인 특징(상태=속성)를 가지며 동적인 활동(행동=메소드)을 한다.

자동차 객체가 있다고 가정하면
속성(property) : 객체를 구성하는 물리적인 특징이나 상태
ex) make : "쉐보레" color : "빨간색" fuel : 10 selfDrive : false

메소드(method) : 객체의 동적인 행동이나 활동, 객체 안에 들어가는 함수.
ex) drive(), addFuel()

hoisting(호이스팅)

※인터넷 프로그래밍 강의 6-2 참고

자바스크립트는 특정 블록을 실행하기 전에 해당 블록에서 사용할 변수 선언을 미리 찾고 이를 블록 최상단으로 끌어올린다
ex)

a=1;
console.log(a);
var a = 2;
console.log(a);

>> 1
   2

일반적으로는 제일 윗줄에 a가 정의되지 않았으니 에러가 나야겠지만, 자바 스크립트는 호이스팅에 의해 이것이 실행된다.
호이스팅으로 인해 블록내에서 var a;라는 변수선언을 찾아 제일 상단으로 끌어올린다.
그래서 밑의 코드와 같은 순서로 실행된다. (실제로 코드가 변경되는것은 아니다)

var a;
a = 1;
console.log(a);
a = 2;
console.log(a);

let또한 호이스팅이 되는데, 위에 첫번째 예시 코드에서 var를 let으로 바꾸고 실행하면 오류가 난다.
일단 let을 끌어올려 a라는 변수를 선언하긴 했으나, 실제로 코드가 바뀌는 것이 아니라 자체적으로 그렇게 실행하는 것이기 때문이다.
그래서 변수 선언은 됐지만, a변수를 사용하기 위한 준비는 되지 않아 a에 값을 저장할 수 없는것이다.
따라서 실제로 값을 저장할 수 있는건 호이스팅 되기전의 코드에서 let a = 2;로 실제로 변수가 선언되는 부분부터이다.

이스케이프문자

\t : 수평 탭
\n : 줄바꿈
\' 작은따옴표 (문자열 안에서 표시하기 위함) ex) 'This is \'string\''
\" 큰따옴표 (문자열 안에서 표시하기 위함) ex) "This is \"string\"
\\ 역슬래시 (문자열 안에서 표시하기 위함) ex) "\\"

백쿼테이션, 쿼테이션

템플릿 문자열 : 백 쿼테이션

` ${ 표현식 } `
템플릿 문자열 : 따옴표가 아닌 `으로 감싼 문자열
문자열 안에서 수식이나 변수 메소드 등을 사용하기 위한것
` <- 따옴표가 아닌 물결(~) 버튼에 있는 문자임

문자열을 따옴표가 아닌 `(백쿼테이션)으로 감싸고 수식이나 변수를 사용할 부분을 {}중괄호로 감싼뒤 중괄호 앞에 $를 붙인다.
ex)

`52 + 273 = ${52 + 273}`
`올해는 ${new Date().getFullYear()}년입니다`

>>> 올해는 2021년 입니다.

템플릿 문자열과 문자 선택 연산자

`올해는 ${new Date().getFullYear()}년 입니다.`[5]

>>>0

쿼테이션(따옴표)

문자열 내부에 쿼테이션을 표함 할때 사용한다.
ex) "This is 'string'", 'This is "string"'
문자열 외부를 더블, 싱글 쿼테이션 중 하나로 감싸고, 문자열 내부에 다른 쿼테이션을 쓴다

html태그

태그 정리 : https://pridiot.tistory.com/6

<p> : 문단을 나타냄 <p>요소의 위쪽과 아랫쪽에 약간의 여백 추가
<br> : 줄바꿈
<h1>, <h2> ....등 : 글자 크기
<div> : 웹 사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용. 웹 페이지에서 논리적 구분을 정의한다.
<hr> : 수평선

파일경로
./ 현재폴더
../ 상위 폴더
../../ 상위폴더의 상위폴더
<img src="bridge.jpg"> 이렇게 코드파일과 같은 위치에 있으면 파일명만 적어도 된다.
images/bridge.jpg = ./images/bridge.jpg 둘다 같은 뜻이다. 현재폴더의 하위 폴더인 images폴더의 bridge.jpg를 뜻한다.

<img> 이미지태그
<img id="아이디" src="경로" alt="사진안뜰시 설명문구" width="너비값" height="높이값">
속성 생략 가능
높이나 너비 중 한가지만 설정하면 이미지 원본의 비율이 유지된다.
높이, 너비 단위는 px, % 아무것도 안쓰면 자동으로 px로 인식
경로에 외부이미지의 리소르를 넣으면 외부이미지 넣기 가능
img를 href로 감싸면 이미지 클릭하면 해당URL로 이동하는 기능 만들수 있다.

border : 해당 개체를 감싸는 테두리선을 만든다.
자바스크립트에서 설정하는 법 (ex) : name.style.border = ("1px ridge violet"); 속성값은 괄호안에 문자열로, 쉼표없이 띄어쓰기로 구분해서 입력

주석

프로그램의 진행에 영향을 주지 않는 코드
주석은 스크립트 태그 <script></script>안에서만 유효하다. HTML주석은 따로 있다.

한줄주석 : //
ex)

// console.log("가나다");

여러줄 주석 : /* */
ex)

/*
console.log("가나다");
*/

여러줄 주석 안에 한줄 주석가능, 여러줄 주석안에 여러줄 주석 불가.
※HTML 문서에 넣은 자바스크립트 주석은 소스보기를 하면 다 보인다.

변수와 자료형

변수

let 식별자;

변수선언할 땐 자료형 지정없이 그냥 let으로 한다
자바스크립트에서 변수는 저장할 공간을 마련하는 것이 아니라 문자열, 숫자값 등 이런 값들이 객체이고, 그 객체를 참조하는 것이 변수일뿐이다.

let a = 10;
a = "가나다";
a = false;

이렇게 여러개의 자료형을 넣을 수도 있다.

var a;  
var a = 3
console.log(a)

>>> 3

var a = 5
console.log(a)

>>> 5

var로 변수를 선언할 경우 이미 선언된 변수를 재선언 할 수 있다

상수

const a;

상수를 만드는 키워드로, const로 변수를 선언하면 변수의 재선언과 재할당 모두 허용하지 않는다.

const a = 1  //변수 이름 앞에 쓴다.
console.log(a)

>>> 1

a = 5
console.log(a)

>>> 에러

let : 재선언 불가, 재할당 가능, 해당 블록 내부에서만 사용가능
var : 재선언 가능, 재할당 가능, 스코프영향x
const : 재선언 불가, 재할당 불가, 해당 블록 내부에서만 사용가능

자료형

기본 자료형의 종류

숫자 - number

문자열 - string
작은 따옴표로 감싸든, 큰 따옴표로 감싸든 똑같다.
문자열 연결 연산자와 문자열 선택 연산자라는것이 있는데 자세한건 연산자 항목 참고. 또한 string은 원래 객체를 생성해 써야하는 메소드지만 많이 쓰는 기능이다 보니 줄여서 쓸수있다.
원래는 let x = new String(); x = "hello" <-이런 형식으로 써야함

불린(참, 거짓 저장) - boolean
불린값 : true(1), false(0) 비교, 논리연산자의 결과값을 저장

기타

함수 - function

객체 - object

undefined - 아무것도 참조하고 있지 않은 변수의 자료형. 변수 선언하고 초기화를 안하면 undefined가 된다.

null - null은 객체의 일종이며, 변수처럼 활용가능하다. 아예 값이 없는 상태를 구분할때 null을 활용한다.
ex) console.log(null, typeof(null)); >>>null object

스코프

스코프 : 변수를 사용할 수 있는 범위
블록 : 중괄호 {}로 둘러싸인 부분

스코프 == 블록
블록 내부에서 선언된 변수는 해당 블록 내부에서만 사용가능 (단, var는 제외) (for문이나 if문 등의 중괄호에서 선언된 변수도 마찬가지)

자료형 변환

자료형 변환과 parseInt, parseFloat은 모두 내장함수이다.

자료형이름(변환할데이터)

Number("526") -> 526 //숫자로 변환할 수 없는 것을 넣으면 NaN을 반환한다.
String(986) -> "986"
Boolean() //false로 변환되는것 : 0, NaN, ""(빈문자열), null, undefined 나머지는 모두 true로 변환됨

자동 자료형 변환

자바스크립트는 일부 자료형을 상황에 따라 자동변환한다.

숫자와 문자열 자동변환
숫자와 문자열에 '+' 연산자를 적용하면 자동으로 숫자가 문자열로 변환된다.

ex)
"52" + 273 >>> "52273"
52 + "273" >>> "52273"
52 + "a" >>> "52a" //숫자로 이루어진 문자열이 아니더라도 문자열로 변환된다
"52" + "273" >>> "52273"

숫자와 문자열에 '-' 연산자를 적용하면 자동으로 문자열이 숫자로 변환된다.

ex)
"52" - 273 >>> -221
52 - "273" >>> -221
"52" - "273" >>> -221 //숫자로 된 문자열끼리 -하면 자동으로 숫자로 변환된다.
52 - "a" >>> NaN //숫자로 변환될 때 Number함수를 써서 변환되는 것인데, 이와같이 숫자로 변환될 수 없는것이 있으면 NaN이 뜬다.

불린 자료형 자동 변환

'!' 연산자를 두 번 사용하여 Boolean() 함수를 사용하는 것과 같은 효과.

ex) !!0 >> false, !!NaN >> false, !!x >> true, !!"안녕" >> true 등등

parseInt, parseFloat

parseInt("문자열") : 문자열을 정수로 변환한다.
parseFloat("문자열") : 문자열을 실수로 변환한다.

parseInt와 parseFloat은 뒤에 숫자로 변환할 수 없는 문자열이 포함된 문자열을 숫자로 변환 가능하다.

ex)

parseInt("2021년"); 
parseFloat("1.5km"); 
Number("2021년");

>>> 2021,  1.5,  NaN

문자열의 문자가 있을경우는 해당 문자 전까지만 숫자로 변환된다.

ex)

parseInt("가123"); 
parseInt("12가34"); 
parseFloat("1.23가567"); 
parseFloat("가1.234567");

>>> NaN,  12,  1.23,  NaN

실수를 parseInt할 경우 소수점 부분은 버리고 정수로 만든다.

ex)

parseInt("1.999")

>>> 1

parseInt는 진법 변환도 가능하다. (parseFloat은 진법변환 불가)

ex)

console.log( parseInt("11", 2) );  //2진수로 변환
console.log( parseInt("11", 8) );  //8진수로 변환

>>> 3(2진수), 9(8진수)

16진수 -> 10진수로 변환하는법 : 0x로 시작하면 16진수로 변환 또는 parseInt("숫자", 16)

ex)

parseInt(0x15ac) 

>>> 5548

■■■■■■■■■■■■■■■■연산자■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
******************산술연산자*******************
+ - * / %  :  C언어와 같다

연산자의 우선순위
곱셈, 나눗셈이 덧셈과 뺄셈보다 우선순위가 높다. 우선순위 바꾸려면 괄호사용

% 나머지 연산자
-4/ 3,   4/ -3,   - 4/ -3
결과>> -1, 1, -1
나머지 연산자는 앞에 나오는 항의 기호를 따라간다.


*******************문자열 연결 연산자*******************
여러개의 문자열을 하나로 연결하는것 + 를사용

console.log("가나다" + "라마바사");
>>>가나다라마바사
+를 쓰면 문자열을 이어서 출력한것이 아니라 하나의 문자열로 만들어서 출력하는 것이다.


********************문자열 선택 연산자***********************
쓰는법  :  "문자열"[숫자] 

ex) "안녕하세요"[3]
>>>세


********************비교 연산자*************************
A>B, A<B, A >= B, A<=B, A==B, A != B (값이 같지 않은가를 비교)

유의사항
30 > 20 > 10 의 결과는 false가 나온다.
왜냐면 비교연산자가 여러개 나오면 왼쪽부터 하나씩 실행하기 때문
(30 > 20) > 10
true(1) > 10
>>>flase
따라서 (30 > 20) && (20 > 10) 이렇게 논리연산자를 같이 써야한다.

비교연산자는 문자열에도 적용가능하다.
"하마" < "가방" >>> false
"바나나" > "사과" >>> false
"가" < "나"  >>>true
문자열을 비교할 땐 사전순서(가나다라...)에서 앞에 있을 수록 값이 작다.
알파벳일땐 abcd... 순서


*********************논리 연산자***************************
! : NOT 논리부정연산자
|| : OR 논리합 연산자
&& : AND 논리곱 연산자


********************복합대입 연산자*************************
ex)
x += 20, x -= 50, x *=5, x /= 4, x %= 5


*********************증감연산자*******************************
x++ x-- ++x --x
증감연산자가 변수 앞에 있으면 전위. 증가, 감소 먼저 한 후에 문장실행
증감연산자가 변수 뒤에 있으면 후위. 문장실행 먼저 한 후에 증가, 감소


***************typeof 자료형 확인 연산자******************
괄호안에 문자열, 숫자, 변수 등을 넣으면 해당 자료의 자료형을 반환한다 (객체나 함수도 넣을 수 있다)
함수가 아니라 연산자이다. 
괄호 없이 써도 되지만 값의 범위를 명확하게 나타내기 위해 괄호를 쓴다.
typeof(273)
>>> 'number'
typeof('가나다')
>>> "string"
typeof 10.1   //이렇게 괄호없이 써도된다 함수가 아니기 때문에.
>>> 'number' 


***********************일치연산자**********************
=== 같은 자료형에 값도 일치할 경우 true
!== 자료형이 같지 않거나 값이 같지 않을경우 true
== 비교전 두 피연산자를 동일한 자료형으로 변환해서 값을 비교해 같으면true
ex) 52 == "52" >>> true
52 === "52" >>> false
0 == "" >>> true  //불린 연산자로 변환되어 둘 다 false가 된다.
0 === "" >>> false
3 !== '3' >>> true
1 != "1" >>> false  // !=는 값이 같지 않은가를 비교하는 것이다. 예제는 문자열과 숫자이지만 값은 1로 같으므로 false다


*********************삼항연산자*******************
(조건식) ? 참 : 거짓
(number % 2 == 0) ? true : false
물음표 앞쪽은 조건식 물음표 뒤쪽은 실행식이다
조건식이 참일 경우 true위치의 실행식을 실행, 거짓일 경우 false위치의 실행식 실행


삼항연산자를 이용한 초기화
let test;
test = test ? test : "초기화합니다";  //조건식이 test(변수)라는건 test 값이 undefined(초기화 되지않음)일때만 거짓을 반환한다. 나머진 전부 참이다
console.log(test)
test가 초기화 됐으면 그대로 두고, 초기화 안됐으면 "초기화합니다"를 대입해 test를 초기화한다.


************************ || (OR)연산자********************
|| (or)연산자를 Boolean이 아닌 자료에 사용할 경우
A || B 에서 A가 참이면 A값을 넘긴다.
A || B 에서 A가 거짓이면 B값을 넘긴다.


||를 이용한 초기화
test = test || "초기화합니다"  //삼항연산자를 사용한 초기화와 같은 것이다
console.log(test);




■■■■■■■■■■■■■■■■ if문 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
c언어와 동일하다

if (조건식) {실행식}
else if (조건식) {실행식}
else {실행식}

else {
	if ( ) {  }
등으로 중첩도 가능




■■■■■■■■■■■■■■■■입력■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
************************window.prompt******************************
let num = window.prompt("입력", "0"); //window는 생략가능, 팝업창을 띄워 입력받는다
괄호안 첫번째 ""부분은 입력받을 때 출력할 메시지 두번째 ""는 디폴트 값 설정  두개 다 생략가능
prompt는 입력값을 문자열로 저장하기 때문에 다른 타입으로 쓰고싶다면 타입변환을 해야한다.

prompt가 나오면 자바스크립트 실행을 멈추고, 사용자가 입력을 완료하면 다시 실행한다.

prompt("입력");  //이렇게 window 생략도 가능

입력값 변수에 저장하기
let a = prompt("입력");






■■■■■■■■■■■■■■■■출력■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
종류 - 콘솔출력, 팝업창 출력, 브라우저 윈도우 출력, 문서 객체 모델 출력

console.log("가나다", "라마바사");  >>>가나다 라마바사
, 쓰면 자동 띄어쓰기 된다.

변수나 함수등을 구분하기 위해선 반드시 , 를 붙여야한다.


**************************콘솔출력*************************
console 이라는 객체의 log메소드를 사용하는 것.

console.log("hello");  //개발자도구의 콘솔탭에 출력한다, 괄호안에 수식, 변수등 들어갈 수 있다
웹페이지를 개발하는 동안 프로그램 테스트나 디버깅하기 위해 사용한다.
사용자는 콘솔 출력 결과를 볼 수 없으므로 실제 웹 페이지에서는 사용하지 않는다.


************************window.alert 팝업창 출력************************
window라는 객체의 alert 메소드 사용.
자바스크립트 실행을 멈추고 브라우저에서 간단한 메시지 알림용 팝업창을 출력한다.
사용자가 확인 버튼을 눌러야 계속 실행한다.

window.alert("hello");  //팝업창(경고창)을 띄워 출력한다, 괄호안에 수식, 변수등 들어갈 수 있다
		       alert("hello") 이렇게 window는 생략 가능하다.


**********************window.confirm 팝업창 출력*******************************
window는 생략가능
confirm은 alert와 마찬가지로 팝업창을 띄워 메시지를 출력한다.
alert와 다른점은 confirm은 팝업창에 취소버튼이 있다는것이다.
만약 확인을 누르면 true를 반환하고, 취소를 누르면 false를 반환한다.

ex)
let input = confirm("입력을 완료 하겠습니까?");
if (input) { alert("입력완료"); }
else {input = prompt("글자를 입력해주세요", "여기에 입력하세요");
alert(input);




■■■■■■■■■■■■■■■■메소드, 함수■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
let a = new Date();  //a 변수에 new(새로운객체)생성 Date클래스타입, 입력은 없음
Date 클래스의 메소드들
a.getFullYear()  년도
a.getMonth() 월(0~11의 값 : 1~12월)
a.getDate()  일
a.getDay()  요일(0~6 값 : 일요일~토요일)
a.getHours()  시 (0~24)
a.getMinutes()  분
a.getSeconds()  초
let x = new Date();      console.log(x.getDay());  //시간값 얻기
let hours = (new Date()).getHours();  //시간값 얻는 다른방법
let x = new Date();    let hours = x.getHours();  //시간값얻는 다른방법2
console.log(new Date().getFullYear());  //시간값 출력 하는방법의 일종. 변수를 선언해 참조하지 않았으니 일회용이다.


어떤 클래스의 메소드를 쓰고 싶다면 해당 클래스의 변수를 선언해 객체를 먼저 만들어야 한다
ex) let date = new Date();
let mon = date.getMonth

리터럴(literal) : 데이터 그 자체. 변수에 넣는 변하지 않는 데이터를 의미한다.
	ex) 52, "hello", true, function() {}, () => {}, {}



----------------------------------------함수 생성방법-----------------------------------------------------------------------------------------------
자바스크립트에선 매개변수를 입력받는 함수를 호출할 때, 매개변수를 입력하지 않고 함수를 호출 할 수있다
그러면 해당 매개변수에는 undefined가 저장된다

변수를 생성해 함수를 참조하게 하는 형태의 함수(F객체생성자, 익명함수, 화살표)는
let 같은 생성자를 쓰지 않고 변수이름만 써도 함수를 선언하여 사용할 수 있다.
ex) a = function(x) {return x; };  //변수 a를 생성할 때 let과 같은 생성자를 쓰지 않았다.
그러나 이런 방식으로 선언하여 사용할 경우 함수의 생성 순서 등, 문제가 발생할 수 있으니 무조건 생성자를 붙여 생성하는 것을 권장

매개변수 설정할 때 (a, b, c) <- 이런식으로 변수명만 적어주면 된다. let이나 var이런거 안써도 됨


**************Function 객체 생성자******************
자바스크립트 함수는 자료형이므로 변수에 넣어 사용한다.
let add = new Function("x, y", "return x+y;");


******************익명 함수************************
let 변수 = function () {};
ex) let add = function(x,y) { return x+y;  }; 
     add(1,4);  //함수 호출
여기서 add는 함수의 이름이 아니다. 이름없는 function함수를 가르키는 참조 변수이다.
참고로 let을 안써도 익명함수를 사용할 수 있다.


*******************선언적 함수********************
function 함수이름 () {};
ex) function add(x,y) { return x+y;  }   //선언적 함수 정의할 땐 중괄호 바깥에 ;를 안붙인다. 나머진 다붙임
     add(5,9);  //함수호출



******화살표함수 (익명함수를 더 간단하게 생성하기 위해 지원)******
let 변수 = () => {}
ex) let add = (x,y) =>{ return x+y; };
     add(1,2);  //함수 호출

화살표 함수는 하나의 표현식을 만들 때 중괄호와 return 생략 가능
let power = (x) => x*x;  //표현식이 x*x 하나뿐 이므로 중괄호와 return 생략.  x(x*x) 나 x+(x*x) 등 이렇게 표현식이 한개가 아니면 생략 안된다.


******************함수의 기본 형태*****************
function 함수이름 (매개변수) {
	함수코드
	return 리턴값
}


*************리턴하는 함수의 기본형태****************
function (매개변수) {
	let output = 초기값
	//output 계산
	return output;
}


****************익명함수(화살표함수)와 선언적 함수의 차이점*********************
익명 함수(또는 화살표함수)와 선언적 함수는 함수의 생성 순서에서 차이가 있다.
선언적함수 : 코드 실행 전에 생성(호이스팅 때문)
익명 함수 : 코드 실행 시에 생성(a = function..... 이런식으로 변수를 생성하지 않고 함수를 선언할 경우)

함수 = function () { console.log("첫번재 함수"); };
function 함수() {console.log("두번째 함수"); };
함수();
>>>"첫번째 함수" 
선언적 함수는 호이스팅 때문에 익명함수보다 먼저 생성되고,
그 후 익명 함수가 생성되기 때문에 익명함수는 선언적 함수를 무조건적으로 덮어쓴다.

이런 현상을 방지하기 위해서는
let 함수 = function() {console.log("첫번째 함수"); };
function 함수 () {console.log("두번째 함수"); }
이렇게 let을 사용하면 이미 있는 함수이름 이라며 에러를 발생시킨다.

익명 함수와 화살표 함수, F객체 생성자는 모두 함수선언문이 호출문보다 앞에 있어야 한다. 이것들은 호이스팅이 안되기 때문에(정확히는 되긴하지만 let은 호이스팅되도 오류난다)
선언문보다 호출문이 앞에 있으면 오류가 난다. 그러나 선언적 함수는 호이스팅이 적용되어 선언문보다 호출문이 앞에 있어도 된다.


----------------------------------arguments 객체------------------------------------------------------------------------------------------
function add(x,y) { return x+y; };
console.log(add(1,2,3,4));
>>>3  //매개변수보다 많은 요소를 넘겨줄 경우 남는 요소들은 무시된다


매개변수로 넘어오는 값들은 모두 arguments 객체에 저장됨
add(1,2,3,4,5)
console.log(arguments[0]~[4])
>>1 2 3 4 5
arguments는 배열과 비슷한 개념이지만 배열 메소드 사용불가(arguments.length는 사용가능)
매개변수가 정확하게 정해지지 않은 함수나 전달된 인자의 개수에 따라 다른 처리를 해줘야 하는 함수를 생성할 때 유용
ex)
function sum() {         ///이런식으로 매개변수를 하나도 설정하지 않고 함수를 선언해도 
	let sum =0;   ///호출시에 매개변수를 입력하면 arguments 객체에 저장되어 사용할 수 있다.
	for (let i = 0; i < arguments.length; i++) {
		sum += arguments[i];
	}
	return sum;
}
console.log(sum(1,2,3));
console.log(sum(4,5,6,7,86,4));
>>6
    112



-------------------------------------------------콜백함수---------------------------------------------------------------------------------
콜백 함수란 다른 함수의 매개 변수로 전달 되는 함수를 뜻한다.
함수의 매개변수에는 변수나 값(value) 뿐만 아니라 함수도 매개변수로 사용될 수 있다.
ex)
function callfunction(call) { call(); }  //callfunction 함수를 정의한다. 매개변수로 받은 값은 변수 call에 저장한다.
	 			실행식에서 call에 저장한 함수를 실행시킨다. 이런식으로 매개변수를 함수같이 쓸 수 있는 이유는, 매개변수를 받아올때 (let call = 콜링함수) 이런식으로
				매개변수 call이 콜링함수를 참조하는 변수가 되서 그런것이다. 위에 익명, 화살표, function 객체생성자 함수선언과 같은 원리 인것이다. 라는 나의생각
function abc(){ console.log("함수 호출"); };  //호출될 abc함수를 선언한다.
callfunction(abc);  //callfunction함수를 호출하고, abc함수를 매개변수로 넣어준다. 이때, 호출문에 abc함수는 괄호를 쓰지 않고 넣어준다. 넣어도 실행은 되는데 에러메시지를 출력한다.

let a = function(call){call();};
      let b = (x, y) => {console.log(x+y);};
      a(b(1, 2));  //호출 할 때 괄호나 매개변수를 안써야 하지만 써도 실행 되긴한다. 그치만 에러메시지가 나온다.

let a = function(call){call(1, 2);};  //따라서 호출문에 쓰지 말고 이렇게 콜백함수를 실행하는, 콜링함수의 실행문 속에서 매개변수를 넘겨주는것이 좋다
      let b = (x, y) => {console.log(x+y);};
      a(b);


**************호출문 내에서 콜백함수를 정의하기*****************
위와 같이 콜링함수, 콜백함수, 함수 호출문을 각각 따로 작성하는 방법도 있지만
콜백 함수와 함수호출문을 합쳐서 작성 할 수도 있다.
ex)
function callfunction(call) { call(); }
callfunction(function () { console.log("함수 호출"); } );
이런식으로 콜링함수는 따로 선언하고 함수 호출과 동시에 콜백함수를 선언할 수도 있다.
그리고 이런 방식으로 선언된 콜백 함수는 참조변수나 함수이름이 없기 때문에 
함수를 호출할 때, 딱 한번만 사용할 수 있다.

위 방식은 화살표 함수로도 할 수 있다.
callfunction( () => {console.log("함수 호출"); } );


***************매개변수가 있는 콜백함수****************
function callfunction(call) { call(1); }  //call에 저장된 콜백함수에 매개 변수로 1을 주며 호출하는 실행식
callfunction(function (num) { console.log("number is ", num); } );  //콜백함수는 매개변수를 받아서 num에 저장한다.
실행결과 >> number is 1



--------------------------------------------표준 내장 함수------------------------------------------------------------------------------
자바스크립트에서 기본적으로 지원하는 함수이다. (ex. 자료형변환, 타이머함수)
위에 변수 카테고리의 자료형 변환 또한 내장 함수이다 


***********************타이머 함수*******************
특정시간 후에 또는 특정 시간마다 어떤 일을 할때 사용
시간단위 : 밀리초   1초 = 1000밀리초

setTimeout(함수, 시간)  :  해당 시간이 흐른 후에 함수를 실행한다.  //함수 부분엔 위에 호출문 내에서 함수정의 하기를 써도 되고, 이미 선언한 함수를 써도 된다.
setInterval(함수, 시간)  :  해당 시간마다 함수를 실행한다.		//근데 이미 선언한 함수를 쓸경우엔 (func, 1000) 이런식으로 괄호를 쓰지 않는다. 왜냐면 괄호를 쓰면 한 번만 실행된다.
clearInterval(setInterval함수) : setInterval 함수의 동작을 종료한다.	  그래서 Timeout은 원래 한번만 실행하니 괜찮지만 Interval은 반복해서 실행해야 하므로 한번만 실행되면 안된다. 괄호를 안쓰니 매개변수를 넣을 수도 없다.

ex)
setTimeout(function () { console.log("1초가 지났습니다"); }, 1000);
>> (1초 후) "1초가 지났습니다."
let id = setInterval(function () { console.log("1초마다 호출"); }, 1000);
>> (1초마다) "1초마다 호출"
setTimeout( function () { clearInterval(id); }, 3000);   //setTimeout에 clearInterval을 넣을 땐 무조건 호출문 내에서 함수생성 방법을 통해 써야한다. 안그럼 작동안함
>> (3초후) setInterval함수 종료


*********************** indexOf() 함수 **********************
indexOf는 문자열에서 특정 문자열을 찾고, 검색된 문자열이 첫번째로 나타나는 위치 index를 리턴한다.
찾는 문자열이 없으면 -1을 리턴한다.
indexOf(searchvalue, position)
searchvalue는 필수 입력값으로, 찾을 문자열이다.
position은 생략가능하며, 기본값은 0이다. 문자열에서 searchvalue를 찾기 시작할 위치를 의미한다.

ex)
String str = "hello";
console.log(str.indexOf("he"));  >>> 0
console.log(str.indexOf("el"));  >>> 1
console.log(str.indexOf("cd"));  >>> -1
console.log(str.indexOf("l", 3)  >>> 3  //3번째 index부터 찾는것으로 설정해서 첫번째 'l'은 무시하고 3으로 나온다




■■■■■■■■■■■■■■■■switch와 break■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
let date = new Date();
switch (date.getMonth() +1) {   //괄호안에 조건식입력 중괄호 안에 case와 실행식 입력, 괄호안에는 불린 표현식이 올수도 있고 변수가 올수도 있다
case 12:  //조건식의 값이 12 일경우 case12에 걸린다
case 1:  //조건식 값이 1이면 여기서 걸린다
case 2:  //조건식 값이 2면 여기서 걸린다, 조건식의 값이 맞을 때까지 case와 명령문등 은 모두 무시한다
     console.log("겨울입니다");  //그러다 case에 맞게 되면 가장 가까운 break를 만날때까지 명령문을 모두 실행한다. case문 안에 break문이 없으면 조건에 부합하는지 여부를 따지지 않고 이어지는 case문을 실행한다.
     break;  //가장 가까운 break를 만나면 실행을 멈추고 switch를 빠져나간다.
case 3:
case 4:
case 5:
      console.log("봄입니다");
      break; }
이런식으로 switch로 if같은 조건식을 만들 수 있다.





■■■■■■■■■■■■■■■■배열■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
let a = [1, "2", ture] //배열 선언
배열안에 여러개의 자료형이 있을 수 있다
요소는 쉼표로 구분
배열의 크기를 따로 정하지 않는다
let b = [];  /비어있는 배열도 생성가능
let c = new Array();  //비어있는 배열 생성 let c =[]과 똑같다
let d = new Array(1, 2, 3, 4, 5);  //인자가 두개 이상이면 인자들을 요소로 갖는 배열 생성
let e = new Array(1);  //인자가 한 개이면 해당 인자 만큼의 크기를 갖는 배열 생성

배열 요소 접근
a[0], a[1] 등

a[2] = 12345;  //배열 요소 바꾸기

배열의 범위를 벗어나는 인덱스 사용시 -> undefined

배열의 메소드
a.length  /요소의 갯수 출력
>> 3

배열중첩
let num = [1,2,3,4,[5,6,7]];  //배열안에 또 배열을 넣는것이 가능하다
let num = new Array(1, 2, 3, 4, new Array(5, 6, 7));  //이런 형식도 가능
console.log(num[4][1])  //중첩 배열의 요소에 접근하는 방법.  4번째 요소로 접근한다음, 거기서 또 첫번째 요소에 접근한다.
>>6

num[num.length-1] //num배열의 가장 마지막 요소에 접근한다


ary.push(값);  //배열의 마지막에 해당 값을 추가한다
let a = ary.pop(인덱스)  //배열의 해당 인덱스의 값을 제거하고 그 값을 반환한다




■■■■■■■■■■■■■■■■for문과 while문■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
문법은 C언어와 동일 하므로 따로 설명X

for (let i = length - 1; i >= 0; i--);{}
역 반복문의 예제


**********for in 과 for of 활용***************
let a = ["사과", "배", "바나나"];
for (let i in a) {console.log(`${i}번째 요소 : ${a[i]}`);  }
위와 같이 쓰면 a배열의 0번째 인덱스 부터 마지막 인덱스 까지 차례로 i에 대입한다.
ex) 만약 a가 10칸짜리 배열이라면 for (let i in a)를 하면 0~9를 순서대로 i에 대입한다.
>>0번째 요소 : 사과
1번째 요소 : 배
2번째 요소 : 바나나

for (let item of a) {console.log(item);   }
이렇게 쓰면 배열의 제일 처음 요소부터 마지막 요소까지 차례로 item에 대입한다
>>사과
배
바나나

for (let i in 배열) 을 하면 자동으로 0~(배열의 크기 -1)의 숫자를 차례로 집어 넣는것이고. (a가 10칸이면 변수 i에 0넣고, 1넣고, 2넣고..... 9까지 넣는다)
for (let i of 배열)을 하면 배열의 첫째 요소값부터 끝의 요소값까지 차례로 i에 집어 넣는다. (a의 요소가 {"사과", "배", "바나나", "딸기", "오렌지"} 이면 변수 i에 사과넣고, 배넣고, ... 오렌지 까지 순선대로 넣는다)


***************break*******************
조건식과 상관없이 가장 가까운 반복문 한개를 벗어나게 한다.
중첩된 반복문의 경우 현재의 반복문 하나만 벗어난다.


*****************continue*****************
반복문 내부에서 현재 반복문을 멈추고 다음 반복을 진행시킨다.
for (초기식; 조건식; 증감식;) {
~~ 생략 ~~
continue;  //continue가 실행되면 continue밑은 실행하지 않고 바로 다시 조건식으로 넘어가서 다음 반복을한다.
~~ 생략 ~~
}




■■■■■■■■■■■■■■■■객체와 생성자 함수■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
여러개의 자료형을 한번에 저장하는 자료형. 배열과 유사한 개념이다.
배열은 요소에 접근할 때 인덱스(배열[1] 등)을 사용하지만 객체는 속성명(키)를 사용한다.

존재하지 않는 속성에 접근하면 undefined를 반환한다. (단, 존재하지 않는 속성을 '선언'하면 새로운 속성이 추가된다)

*************************객체 생성*******************************
이런식으로 중괄호안에 속성과 속성값을 선언한다.
속성값에는 문자열, 숫자, 불린을 사용할 수 있으며, 각 속성은 콤마(,) 로 구분한다.
let product = {
	제품명 : "건조망고",
	유형 : "당절임",
	성분 : "망고, 설탕... 등",
	원산지 : "필리핀",
	재고 : 100
};   //괄호 바깥에 세미콜론을 붙인다.
	 //속성명(키)  속성값(키 값)
console.log(product);
>>> {제품명: "건조망고", 유형: "당절임", .....



********************객체 속성 접근*********************************
대괄호 사용
console.log(product["제품명"]);  -> "건조망고"
console.log(product['유형']);  -> "당절임"

점(.) 표기법
console.log(product.제품명);  -> "건조망고"
console.log(product.유형);  -> "당절임"

존재하지 않는 속성에 접근하면 undefined 반환
console.log(product.가나다); -> undefined


********************속성추가와 삭제*************************
객체에 선언되어 있지 않은 속성을 선언하면 속성이 추가된다.
product.가격 = 3000;

속성 삭제는 delete를 사용한다.
delete product.유형;


이런식으로 빈 객체를 먼저 생성한 후 나중에 속성을 추가할수도 있다
let student = {};
student.name = "홍길동";
student.dream = "프로그래머";


속성 재할당
student.name = "홍길동";
student.name = "박상원";  //홍길동 -> 박상원 으로 재할당 됨
메소드 속에서 재할당 할때는
func : function (){ this.name = "박상원"; }


******************객체에 for in반복문 적용**********************
let wishList = {
	name : "바나나",
	price : 1200
};
for (let p in wishList){
	console.log(p + " : " + wishList[p]);
}
이렇게 for in을 사용하면 객체의 '속성명'을 한번에 하나씩 가져와 p변수에 할당한다.
속성값이나 다른것 까지 가져오는것이 아니라 속성명만 가져오기 때문에 wishList[p]와 같은 형태로 쓴다.
참고로 for in의 실행문 안에서는 wishList.p 이런식으로 점 표기법을 쓸 수 없기 떄문에 wishList[p]로 썼다.


********************객체의 메소드**********************************
객체의 속성으로 함수가 들어가면 그것을 메소드라고 부른다.

객체의 메소드 선언 방법
let wishList = {
	name : "바나나",
	price : 1200
	print : function (){  // : 왼쪽엔 메소드 이름을 적고 오른쪽에 함수를 적는다 여기선 익명함수 형태를 사용했다.
		console.log(`${this.name}의 가격은 ${this.price}입니다`);  
	}
};
wishList.print()  //메소드 호출

this란 해당 메소드가 속한 객체를 가르키는데, 여기선 wishList객체를 가르킨다. 
현재 wishList 객체의 선언을 하고 있는데 아직 선언되지않은 wishList를 그대로 쓰면 에러가 나기 때문에 this라고 적는다


************************객체와 배열***********************************
let products = [
	{name : "바나나", price : 1200},
	{name : "사과", price : 2000}
];
이런식으로 배열안에 이름없는 객체를 생성할 수 있다.
그런데 저 객체들에 메소드를 생성하려면
{name : "바나나", price : 1200, print : function () {console.log(`${this.name}의 가격은 ${this.price}입니다.);} }
이런식으로 객체 하나당 메소드를 각각 만들어 주어야 한다. 
이렇게 하면 매우 비효율적이기 때문에 밑에 나오는 프로토타입을 이용해 메소드를 만든다.




---------------------------생성자 함수---------------------------------------------------------------------------------------------
비슷한 객체를 여러개 만들 때 하나하나 객체를 입력하기엔 비효율 적이므로 생성자 함수를 쓴다.
생성자 함수란 객체를 만드는 함수로, 식별자 사용규칙에 나와있듯이 대문자로 시작하는 이름을 사용한다.
let week = new Array("일", "월", "토" ....)
let today = new Date(); 
이렇게 위와같이 Array와 Date도 대문자로 시작하니 생성자 함수이다.


***************생성자 함수 정의*********************
function Product(name, price) {    //이런식으로 생성자함수의 식별자는 무조건 대문자로 시작한다.
	this.name = name;
	this.price = price;
           //왼쪽은 사용할 속성명, 오른쪽은 속성값을 받아올 매개변수이다
           //참고로 속성명과 매개변수명은 위와 같이 동일하게 만드는 것이 좋다
} 
참고로 위 함수의 형태는 선언적 함수이다.


****************생성자 함수 호출*********************
let product1 = new Product('바나나', 1200); 
이렇게 생성자 함수를 호출해 객체를 생성할 땐 new를 붙인다.
name : 바나나, price : 1200 이라는 속성을 가지는 Product 타입의 객체를 생성해 product1 변수가 참조하게 한다.


********************프로토타입*************************
생성자 함수로 만든 객체는 프로토타입이라는 공간에 메소드를 지정하여 모든 객체가 공유 가능하다.

생성자 함수
function Product(name, price) {
	this.name = name;
	this.price = price;
}

Product.prototype.print = function () {    // 프로토타입에 print 메소드를 선언한다.
	console.log(`${this.name}의 가격은 ${this.price}입니다.`);
};
	
let product1 = new Product("바나나", 1200);  //객체를 생성한다.
product1.print();  //print메소드를 호출한다.



*******************생성자 함수, 프로토타입을 이용한 객체 배열*******************
function Product(name, price) {
	this.name = name;
	this.price = price;
}
Product.prototype.print = function () {
	console.log(`${this.name}의 가격은 ${this.price}입니다.`);
};
let products = [
new Product("바나나", 1200),
new Product("사과", 2000),
new Product("배", 3000)
];

for (let i of products){   //for of를 이용하여 products배열에 있는 객체요소를 i에 집어넣는다
	i.print();    //위에서 정의한 프로토타입을 이용한 메소드로 print메소드를 사용한다.
}


************************** 변수에 객체 속성값 넣기**************************
let output = ' ';
output += navigator.appCodeName + '\n';
output += navigator.appName + '\n';
alert(output); 
이런식으로 변수에 객체 속성값을 넣을 수 있다.


************************** null **************************
null은 값이 아예 없는 상태를 뜻한다.

let a;  //undefined
let b = null;   //값이 없는 상태를 표현할 때 이렇게 null을 집어 넣을 수도 있다.
if( a == null){ console.log("null입니다.");
if( b == null){ console.log("null입니다.");
>>> 결과 : 둘 다 null이라고 나옴
위와 같이 undefined를 조건식에 넣으면 null값과 같다고 나온다.



◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈브라우저 객체 모델◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈
최신버젼 자바스크립트와 인터넷 익스플로러에서 사용가능한 코드에는 차이가 있다.
익스플로러에선 let이나 const를 사용하지 못한다. 따라서 var를 사용해야한다.
또한 템플릿 문자열도 사용하지 못해서 ("변수의 값은 " + variable + "입니다") 와 같이 +연산자를 사용해야 한다
그리고 화살표함수와 for of 반복문 또한 익스플로러에서 사용할 수 없다 (for in은 가능)
익스플로러에서 사용 불가능한 것들을 정리하면
let, const, 템플릿문자열, 화살표함수, for of반복문이 있다.




--------------------------------자바스크립트의 객체분류----------------------------------------------------------------------------------------------------------------
1. 네이티브객체/ 내장객체/ 자바스크립트 코어 객체 - (Object, String, Number, Boolean, Function, Array, Date, Math.. 등)
2. 호스트 객체 - (브라우저에서 제공하는 객체 : OS, 웹브라우저에 따라 제공 객체가 달라진다)
	         네이티브객체가 아닌 객체는 모두 호스트 객체이다.
	         Window, BOM(Browser Object Model), DOM(Document Object Model), Ajax, HTML 5 APls...
3. 사용자정의객체


최상위 객체는 window, 그 밑으로 DOM, BOM, javascript가 있다.





■■■■■■■■■■■■■■■■■■■BOM (Browser Object Model)■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
웹브라우저와 관련된 객체이다.



-------------------------------------------window 객체--------------------------------------------------------------------------------------
최상위 객체로, 웹페이지 자체를 나타낸다. 새로운 화면을 열거나 웹브라우저의 크기를 변경하는 등의 조작가능
원래는 window.location, window.history 이렇게 써야하지만 window는 최상위 객체라서 생략 가능하다 -> location, history

window 밑에 있는 객체
secreen, location, history, document (브라우저에 로딩된 페이지 전체를 나타냄), navigator

window 밑에있는 메소드
alert(), confirm(), prompt(), setTimeout(), clearTimeout(), setInterval(), clearInterval() 등




-------------------------------------------screen 객체--------------------------------------------------------------------------------------
화면 정보를 가져오는 객체이다. 웹 브라우저마다 속성이 다르다

웹브라우저에서 공통으로 활용할 수 있는 속성↓
************screen객체의 속성**************
width : 화면의 너비
height : 화면의 높이
availWidth : 실제 화면에서 사용 가능한 너비
availHeight : 실제 화면에서 사용가능한 높이
colorDepth : 사용 가능한 색상 수
pixelDepth : 한 픽셀당 비트 수

ex) console.log( screen.width );




------------------------------------------- location 객체--------------------------------------------------------------------------------------
주소창 관련 객체이다. 페이지 이동시에 많이 사용한다.


*********location 객체의 속성***********
href : 문서의 URL주소  
host : 호스트 이름과 포트 번호   ex) localhost:52273
hostname : 호스트 이름   ex) localhost
port : 포트 번호   ex)52273
pathname : 디렉터리 경로   ex) /folder/HTMLPage.html
hash : 앵커이름(#~)   ex) #test
search : 요청 매개 변수   ex) ?param=10
protocol : 프로토콜 종류   ex) http:


*********location 객체의 메소드***********
assign(링크) : 매개 변수로 전달한 위치로 이동한다.
reload() : 새로고침한다
replace() : 매개변수로 전달한 위치로 이동한다 (뒤로가기 불가)


************페이지이동************
페이지 이동시키는 방법들
location = 'http://www.mjc.ac.kr';
location.href = 'http://www.mjc.ac.kr';
location.assign('http://www.mjc.ac.kr');
location.replace('http://www.mjc.ac.kr');

href와 assign은 거의 비슷

href와 replace 의 차이점
href는 새로운 페이지로 이동하는 기능이고, 속성이다.
또한 주소 history를 저장한다.
그러나 replace는 기존 페이지를 새로운 페이지로 변경하는 기능이며, 메소드이다.
주소 history는 저장되지 않는다.




------------------------------------------- history객체 --------------------------------------------------------------------------------------
사용자가 검색했던 웹페이지에 대한 히스토리이다.
웹 브라우저의 앞으로가기/ 뒤로가기 관련 객체이다.

*** history 객체의 메소드***
forward() : 앞으로 이동한다.
back() : 뒤로 이동한다.




------------------------------------------- navigator 객체 --------------------------------------------------------------------------------------
웹페이지를 실행하는 웹브라우저 정보가 들어있어서 사용자의 웹브라우저, 운영체제를 구분할 수 있다.

*** navigator 객체의 속성 ***
appCodeName : 웹브라우저의 코드 이름  (익스플로러, 크롬, 파이어폭스, 사파리 : Mozilla 로 나온다)
appName : 웹브라우저의 이름  (익스플로러, 크롬, 파이어폭스, 사파리 : Netscape 로 나온다)
appVersion : 웹브라우저의 버전
platform : 사용중인 운영체제의 시스템 환경
userAgent : 웹브라우저의 전체적인 정보 (브라우저가 서버로 보낸 user-agent 헤더값 반환)

ex) navigator.appCodeName






■■■■■■■■■■■■■■■■■■DOM(Document Object Model)■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
문서객체모델(DOM) 이란 웹 문서의 각 요소를 객체로 표현한 것이다.
웹 브라우저가 HTML문서를 로딩할 때 HTML문서의 태그 등 요소들을 분석해서 객체로 만든것이다
각 HTML태그 1개당 1개씩 생성한다. HTML태그의 포함관계에 따라 DOM객체들을 트리구조로 만든다.
HTML 요소들에 동적으로 접근하여 내용, 구조, 스타일을 갱신하기 위한 W3C표준이다.

DOM의 넓은 의미 : 웹브라우저가 HTML페이지를 인식하는 방법
좁은 의미 : document 객체와 관련된 객체 집합

<body>
  <h1>안녕하세요</h1>
</body>
여기서 body, h1 같은 태그들을 요소노드 라고하며 안녕하세요 와 같은 텍스트를 텍스트노드 라고한다.




********************* 1개의 문서객체를 선택하는 메소드*********************
document.getElementById(아이디)  :  태그의 id속성이 "아이디"인 HTML요소를 찾아 반환
document.querySelector(선택자)  :  "선택자"로 가장 처음 선택되는 HTML요소를 찾아 반환

id는 unique하기 때문에 동일한 id로는 설정할 수 없다.

ex)
<body>
   <h1 id = "header"> Title </h1>  //h1태그에 header라는 id를 붙였다.
   <script>
       let header = document.getElementById("header");  //header라는 id를 갖는 문서객체를 선택하여 header변수에 참조시킨다.
       header.style.color = "red";   //h1태그의 스타일을 변경시킨다.
       header.style.border = "1px solid black";

ex)
<body>
   <h1> Header1 </h1>
   <h1> Header1 </h1>
   <script>
       let header = document.querySelector('h1');  //querySelector는 첫번째 태그만 선택하기 때문에 제일 처음나오는 h1태그만을 선택한다.
       header.style.backgroundColor = 'red';




********************* 여러개의 문서객체를 선택하는 메소드 **********************
여러개의 문서객체를 선택하기 때문에 Elements <- s를 붙인다.
또한 반환되는 값은 배열로 반환된다.
name이나 class는 동일한 식별자로 설정할 수 있다.

배열요소에 속성 적용하는법
header = headers[i];
header.style.color  이렇게 변수에 참조시켜서 해도되고

headers[i].style.color  이렇게 참조없이 바로 해도된다.


document.getElementsByName(이름)  :  태그의 name속성이 "이름"인 여러 HTML요소들을 찾아 반환
document.getElementsByTagName(태그이름)  :  "태그이름"을 갖는 여러 HTML요소들을 찾아 그 묶음을 반환
document.getElementsByClassName(클래스)  :  태그의 class속성이 "클래스"인 여러 HTML요소들을 찾아 그 묶음을 반환
document.querySelectorAll(선택자)  :  "선택자"로 선택되는 모든 HTML 요소들을 찾아 그 묶음을 반환


ex)
<h1> header1 </h1>
<h1> header1 </h1>
<script>
   let headers = document.querySelectorAll('h1');  //h1태그 전부를 선택하여 배열형태로 반환한다.
   for (let i = 0; i < headers.length; i++){  
   let header = headers[i];
   header.style.color = 'orange';
   header.innerHTML = 'from javascript';   //innerHTML은 해당 요소의 컨텐츠를 뜻하며 여기선 h1태그의 "header1"을 뜻한다
   }					header1을 from javascript라는 텍스트로 바꿨다.


let query = document.querySelectorAll("h1.imp");   //이렇게 "태그.클래스"를 쓰면 h1태그 중 imp라는 클래스를 가진 문서객체를 반환한다.
let query = document.querySelectorAll(".imp");   //이렇게 ".클래스" 로 쓰면 imp라는 클래스를 가진 문서객체를 반환한다.



ex)
<h1 name = 'hd'> header 1 </h1>
<h1 class = 'hdc'> header 2 </h1>
<h2 name = 'hd'> header 2 </h2>
<h2 class = 'hdc'> header 1 </h2>
<script>
     let headers = document.getElementsByName("hd");  //Name이 "hd"인 태그를 모두 선택하여 배열형태로 반환
     for (let i in headers) {
         headers[i].style.color = 'orange';
         }

여기서 getElementsByTagName("h1"); 을 쓰면 <h1> 태그를 전부 선택하여 배열로 반환한다.
getElementsByClassName("hdc"); 이면 Class가 "hdc"인 문서객체를 전부 가져온다. 
querySelectorAll("h1"); 이면 <h1>태그를 전부 가져온다.




■■■■■■■■■■■■■■■■■■문서객체조작■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

***************************문자/내용 조작********************************
innerHTML, innerText, textContent

innerHTML속성을 사용하면 문자/내용을 조작할 수 있다.
사용법) 문서객체.innerHTML
ex)
<head>
<script>
window.onload = function(){
	let header = document.getElementById('header');
	header.innerHTML = '<i>i 태그입니다</i><br/>';
	};
</script>
</head>
<body>
   <h1 id='header'> Header 1 </h1>
</body>

>>>결과 : i 태그입니다

이런식으로 innerHTML로 태그내의 문자/내용을 조작할 수 있다. 
그리고 innerHTML을 쓸때 <i> <br/> 같은 태그들을 넣으면 그것들도 태그로 인식되어 파싱되어 작동한다.
만약 태그로 인식되게 하고싶지 않다면 '&lt;i&gt; i 태그입니다 &lt;/i&gt;' 이런식으로 사용해야 한다.
또는 innerText, textContent 를 사용하면 태그도 단순 글자 취급된다. innerText와 textContent의 차이는 약간 있으나, 크롬에선 동일하게 작동한다.
정리하면

문서객체.innerHTMl = 문서객체 내부의 내용(태그 파싱함)을 나타냄
문서객체.innerText = 문서객체 내부의 글자를 나타냄. 태그도 단순 글자취급
문서객체.textContent = 문서객체 내부의 글자를 나타냄. 태그도 단순 글자취급


<h1> 가나다라 </h1>
<script>
let h1 = document.querySelector("h1");
let a = h1.innerHTML;
console.log(a);
결과>>> 가나다라
이렇게 innerHTML을 대입문의 오른쪽에 두면 해당 문서객체의 텍스트를 변수에 저장한다.


************************************스타일 조작(style)*************************************
css에서 사용하는 속성 이름에서 - 기호를 없애고 뒤 단어의 첫 글자를 대문자로 변경한 식별자 이용
CSS와 자바스크립트의 스타일 속성 차이
CSS			자바스크립트		사용방법
background-color		backgroundColor		문서객체.style.backgroundColor
border-radius		borderRadius		문서객체.style.borderRadius
border-bottom 		borderBottom		문서객체.style.borderBottom
ex)
header.style.backgroundColor = 'red';
header.style.height = '2px';
이처럼 속성값은 모두 문자열로 주어야 한다.



*************************************속성조작******************************************
인터넷 프로그래밍 강의 11-2를 참고

문서객체의 속성조작 메소드 (표준 HTML 속성이 아니더라도 쓸수있고, 표준 HTML속성일때도 쓸수있다.)
문서객체.setAttribute(속성이름, 속성값) - '속성이름'인 속성을 가져와 해당 속성의 값을 '속성값'으로 바꾼다. 만약 '속성이름'이 없으면 '속성이름'이란 속성에 '속성값'인 값을 가지는 속성을 새로 만든다.
문서객체.getAttribute(속성이름) - '속성이름'인 속성의 속성값을 추출한다.

웹표준 지정 HTML 속성에 대한 접근방법 (표준HTML 속성일때만 쓸수있다.)
ex)
image.src = 'rint.png'
alert(image.src)
이런식으로 . 점붙이는 표기법으로 사용가능

속성은 HTML 요소의 속성(attribute)와 객체의 속성(property)로 구분된다.
HTML의 태그를 문석해 문서객체로 만드는 과정에서 대부분의 표준 HTML속성(attribute)는 문서 객체의 속성(property)로 변환된다.
ex)
<head>
<script>
window.onload = function () {
  let image = document.getElementById('image');
  alert(image.id);   //image의 id는 HTML요소의 속성인 attribute인데 여기서 property를 쓰는 방식으로 쓰고있다. ( . 점붙여서 쓰는방식)
  };
</script>
</head>
<body>
   <img id = 'image'/>
</body>
>>> 결과 : image 출력

img id = 'image' 이 부분은 원래 HTML 요소의 속성(attribute)이다. 그런데 이를 <script>에서 document.getElementById('image')로 가져왔다.
attribute를 문서객체의 요소(property)로 가져온 것이다.
그리고 alert(image.id);에서 문서객체가 image의 id라는 attribute를 property로 사용하고 있다.
이는 image의 id가 표준 HTML속성이기 때문이다.

위에 ex에서, id 말고도 다른 기능도 쓸수있다.
image.src = 'http://placehold.it/300x200';
image.width = 300;
image.height = 200;
이런 도트 연산자는 표준속성일 경우에만 쓸수있다.

저걸 문서객체의 속성조작 메소드로 표현하면
image.setAttribute("src", "http://placehold.it/300x200");
image.setAttribute("width", "300");
image.setAttribute("height", "200");
가 된다. 
속성명과 속성값은 모두 문자열로 주어야한다.
set, get Attribute는 표준속성이 아니더라도 쓸수있다.


표준 HTML속성이 아닐때 사용방법 ex)
<head>
<script>
window.onload = function () {
  document.body.setAttribute('data-custom', 'value');  //setAttribute는 해당 속성이 없으면 그 속성을 새로 만든다.
  let dataCustom1 = document.body.getAttribute('data-custom');
  let dataCustom2 = document.body.getAttribute('data-parent');
  alert(dataCustom1 + ", " + dataCustom2);
  };
</script>
</head>
  <body data-parent='note'>
 
</body>
>>>실행 결과 : 'value, note' 출력
위와같이 지원하지 않는 속성을 사용하고 싶다면 setAttribute로 새로 속성을 만들어 사용해야한다.
<body abc="value"> 이렇게 지원하지 않는 속성이 있는데 이것을 불러오고 싶다면 
let a = document.body.getAttribute("abc"); //이렇게 getAttribute를 써야한다.
let a = document.body.abc;   //이런 도트연산자는 표준속성에서만 쓸수있기 때문에 여기선 못쓴다.


정리하면 속성에 접근, 수정하는 방법은 2가지다
첫번째는 set, get Attribute()를 사용하는것. 두번째는 img.width 처럼 도트연산자를 이용하는것
그런데 도트연산자는 표준속성일때만 사용할 수 있다.
set, get Attribute()는 표준속성이 아니어도 사용할 수 있다.



******************************************문서 객체의 동적 생성, 제거******************************************
요소 노드(<h1>, <title>등 )를 생성하는 메소드
document.createElement("태그이름") - '태그이름'을 갖는 요소 노드를 생성해서 반환

텍스트 노드(요소노드 안에 들어가는 텍스트)를 생성하는 메소드
document.createTextNode(텍스트) - '텍스트'를 갖는 텍스트 노드를 생성하는 반환 

새로운 문서 객체를 DOM트리에 삽입하는 메소드
부모문서객체.appendChild(문서객체) - 문서 객체를 부모의 마지막 자식으로 삽입

문서객체를 삭제하는 메소드
부모문서객체.removeChild(자식객체) - 자식 객체를 부모로부터 떼어 DOM 트리에서 제거

ex)
<head>
<script>
function add() {  //미리 이것들을 만들어 놓는게 아닌, 링크를 클릭하면 실행되도록 해놨다.
  let header = document.createElement("h3");
  let textNode = document.createTextNode("내 이름은 홍길동 입니다.");
  header.appendChild(textNode);  //textNode를 header에 넣는다.
  document.body.appendChild(header);  //header를 <body>에 넣는다.
  }
</script>
</head>
<body>
  <a href='#' onclick='add()'> 당신의 이름은? </a>  //"당신의 이름은?" 이라고 표시되는 하이퍼링크를 만들고, 링크를 클릭하면 add() 함수가 실행되도록 했다.
</body>





■■■■■■■■■■■■■■■■■■ 웹페이지 생성 순서 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
웹브라우저는 웹페이지 실행시 HTML코드를 위에서 아래로 실행하며 생성한다.
이때 DOM생성 전에 문서객체 사용시 오류가 발생한다.

ex)
<head>
    <script>
         let heading = document.getElementById("heading");   //이렇게하면 "heading"이라는 id를 가지는 태그가 아직 만들어지지 않았으므로 오류가 발생한다.
         heading.style.color = 'red';				아직 만들어지지 않은 상태에서 호출하면 NULL값이 반환된다.
    </script>
</head>
<body>
    <h2 id = "heading"> 문서 제목2 </h2>
</body>

이걸 해결하기 위한 방법은
<script>코드를 <body>요소의 제일 마지막으로 옮기거나 또는 window.onload이벤트 활용



*********************** window.onload *****************************
웹페이지가 완전히 로딩된 후에 실행하려는 코드를 하나의 함수로 구현하고 window.onload에 함수를 할당한다
그러면 window객체는 웹페이지가 완전히 로딩된 후에 onload속성에 할당된 함수를 호출한다.

위에 ex)에서 
<script>부분의 코드를 이렇게 바꾼다

window.onload = function () {
   let heading = document.getElementById("heading");
   heading.style.color = "red";
}
이렇게 하면 웹페이지가 완전히 로딩된 후에 onload에 할당된 함수를 실행시킨다.





■■■■■■■■■■■■■■■■■■ 이벤트 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
마우스 이벤트 정리 : https://hianna.tistory.com/492
키보드로 키를 입력하거나 마우스 클릭 등 어떤 현상이 프로그램에 영향을 미치는 것
이벤트 발생 주체 : 사용자나 어플리케이션


---------------------자바스크립트가 지원하는 이벤트---------------------
*마우스 이벤트
*키보드 이벤트
*HTML 프레임 이벤트
*HTML 입력 양식 이벤트
*사용자 인터페이스 이벤트 
*구조변화 이벤트
*터치 이벤트



---------------------이벤트 관련 용어---------------------
이벤트 속성 : onload (window.onload)
이벤트 이름/ 타입 : load
이벤트 핸들러/이벤트 리스너 : 어떤 이벤트가 발생 했을 때 해야 할 일들을 담고있는 함수. 이벤트 속성에 넣은 함수
			  이벤트가 발생하면 핸들러가 호출됨.  이벤트 발생시 호출되려면, 이벤트 핸들러를 등록해야함



---------------------자주 사용되는 이벤트 종류---------------------
onload - 웹 문서나 이미지의 로딩이 완료될 때 
onclick - 사용자가 요소 객체를 클릭할 때
ondblclick - 사용자가 요소 객체를 더블 클릭할 때
onmousemove - 마우스 커서가 요소 위에서 움직일 때
onmouseover - 마우스 커서가 요소 객체 영역 안으로 들어갈 때
onmouseout - 마우스 커서가 요소 객체 영역에서 벗어날 때
onkeydown - 사용자가 키보드의 키를 누를 때
onkeyup - 사용자가 키보드의 키를 눌렀다 뗄 때



-------------------------------------------이벤트 모델--------------------------------------------------------------------------------------------------
문서 객체에 이벤트를 연결하는 방법(이벤트 핸들러 등록 방법)

DOM Level 0 - 인라인 이벤트 모델.  고전 이벤트 모델.
	        쉬움. 이벤트를 중복해서 연결할 수 없다는 단점.

DOM Level 2 - 마이크로소프트 인터넷 익스플로러 이벤트 모델.  표준 이벤트 모델
	        이벤트를 중복해서 연결가능.  웹 브라우저 종류에 따라 연결하는 방법이 다름


***********************인라인 이벤트 모델******************************
HTML 태그의 이벤트 속성에 직접 자바스크립트 코드 작성


***HTML 태그의 이벤트 속성에 직접 자바스크립트 코드작성***
<태그요소명 이벤트속성 = "자바스크립트 명령어">
ex)
<button onclick = "alert('click')" >버튼</button>  //button(HTML)태그 내부에서 onclick속성을 사용해 자바스크립트 코드 입력 가능


***여러줄의 자바스크립트 코드 입력***
실행할 코드가 여러줄일 경우 HTML이벤트 속성에 다쓰면 코드가 너무 지저분해 지기 때문에 이벤트 핸들러 함수를 정의해 호출한다.

<태그요소명 이벤트속성 = '이벤트 핸들러 함수 호출'>
ex)
<head>
<script>
function buttonClick(){
  alert('script 태그 활용 이벤트 click');
}
</script>
</head>
<body>
   <button onclick = 'buttonClick()'>버튼</button>
</body>



***********************고전 이벤트 모델******************************
문서 객체의 이벤트 속성에 이벤트 핸들러 함수 등록
HTML코드와 자바스크립트 분리 작성/ 코드 가독성, 유지보수성 향상

문서객체.이벤트속성 = function(){..........}
ex)
<head>
<script>
window.onload = function () {
  let buttonA = document.getElementById('button');
  buttonA.onclick = function () {
     alert('고전 이벤트 모델');
    };
  };
</script>
</head>
<body>
  <button id='button'>버튼</button>
</body>


***********************인라인과 고전 이벤트 모델 차이점*********************
인라인 이벤트 모델
HTML태그의 이벤트 속성과 이벤트 핸들러를 연결하는 방식
+설정 용이함
-자바스크립트 코드와 HTML코드가 섞임
-코드 가독성이 떨어지고, 유지 보수 어려움
-이벤트 핸들러 처리개수 1개


고전 이벤트 모델
문서 객체의 이벤트 속성과 이벤트 핸들러를 연결하는  방식
+HTML과 자바스크립트 분리작성
+프로그램 유지보수성 향상
-이벤트 핸들러 처리개수 1개


***********************MS IE 이벤트 모델***********************
IE에서 제공하는 이벤트 핸들러 등록 메소드를 사용하여 이벤트와 이벤트 핸들러를 연결하는 방식

이벤트 등록 메소드 - attachEvent('Event Property', Event Handler)
이벤트 해제 메소드 - detachEvent('Evnet Property', Evnet Handler)

같은 요소의 같은 이벤트에 다중 이벤트 핸들러 등록가능
IE 11이전 버전에서 지원
IE 11버전 부터는 지원하지 않음


***********************표준(W3C) 이벤트 모델***********************
W3C에서 제공하는 웹 표준을 이용해 이벤트와 이벤트 핸들러를 연결하는 방식
같은 요소의 같은 이벤트에 다중 이벤트 핸들러 등록 가능

이벤트 등록 메소드 - 문서객체.addEventListner('Event Type', Event handler, useCapture)
이벤트 해제 메소드 - 문서객체.removeEventListner('Evnet Type', Event Handler, useCapture)

evnet type : click, load, mouseover, keydown 등
evnet handler : 이벤트 발생시 처리하는 이벤트 핸들러 이름
useCapture : 이벤트 흐름 지정. ture : 캡쳐단계,  false : 버블단계 . 사용하지 않을 경우 생략가능 (생략하면 자동으로 false로 지정)

ex)
p.addEventListner("mouseover", over);  //p문서객체 위에 마우스가 올라갔을 때 over()라는 이벤트 핸들러 호출

<head>
<script>
window.onload = function (){
  let buttonA = document.getElementById('button');
  function w3cEvent() {
    alert("w3c event");
  }
  buttonA.addEventListner('click', w3cEvent);   //buttonA를 클릭하면 w3cEvent함수 실행
};
</script>
</head>
<body>
  <button id='button'>버튼</button>
</body>

이벤트 핸들러를 따로 선언해서 addEvnetListner에 함수이름을 입력하는 방법과, addEventListner의 매개변수괄호 안에서 함수를 선언하는 방법(콜백함수)이 있다.



***********************이벤트 객체***********************
이벤트가 발생하면 이벤트 객체를 사용해 이벤트 관련 상세정보를 알아 낼 수 있다.
이벤트 발생 -> 브라우저는 이벤트 상세정보를 담은 이벤트 객체를 이벤트 핸들러의 매개 변수로 전달
이벤트 핸들러는 객체의 속성값을 통해 이벤트에 대한 정보 접근
이벤트에 대한 정보ex) - 이벤트 종류, 발생시킨 요소, 마우스 이벤트 일경우 마우스 좌표와 버튼 번호 등
이벤트가 처리되고 나면 이벤트 객체는 소멸

ex)
선언적 이벤트 핸들러
function f(e) {.......} //매개변수 e에 이벤트 객체 전달
obj.onclick = f;  //obj객체의 onclick 핸들러로 함수f등록

익명 이벤트 핸들러
obj.onclick = function(e) {...} 

HTML 태그내 이벤트 핸들러
function f(e){.......}
<button onclick='f(event)'>버튼</button>
<div onclick='alert(event.type)'>버튼</div>
HTML태그에선 f(event)와 f(e) 처럼 HTML태그안에서도 매개변수를 설정해 줘야되고, 이벤트핸들러 선언시에도 매개변수를 설정해줘야한다.


이벤트 객체의 주요 속성
type : 이벤트 종류 (load, click 등)
target : 이벤트를 발생시킨 요소
screenX, screenY : 마우스 커서 좌표 정보
button, key, shiftkey 등


모든 웹 브라우저에서 이벤트 객체 사용하기
<script>
window.onload = function (e) {
  var event = e || window.event;  //변수 e가 있으면 e를 넣고, 없으면 IE 구버전이라는 뜻이므로 window.event를 넣는다.
}



*********************** 기본 이벤트 제거***********************
HTML에서 기본적으로 제공하는 이벤트들
a태그, form태그 체크박스 등...
중에서 기본이벤트를 막아야 할 경우
ex) 비밀번호와 비밀번호 확인 입력창에서 제출 버튼을 누르면 비밀번호가 일치하는지 확인 후 제출 필요
기본 이벤트 제거는 a태그와 form태그에 주로 사용


***기본이벤트 제거 2가지 방법****
1. 이벤트 핸들러에서 false리턴
<a href="http://www.mjc.ac.kr" onclick='return false;'> </a>

이렇게도 가능
<script>
  window.onload=function () {
  let button = document.getElementById("button");
  button.onclick = function () {
    return false;
   }
  }
</script>
<body>
  <a id="button" href="http://www.mjc.ac.kr"> </a>
</body>

다른 예제로 12-3 9분 강의 확인


2. 이벤트 객체의 preventDefault()메소드 호출
<a href="http://www.mjc.ac.kr" onclick="event.preventDefault();"> </a>





-------------------------------------------이벤트의 흐름---------------------------------------------------------------------------------------------------------------------------------
body안에서 button태그를 만들었다고 치고, 여기에 클릭 이벤트를 걸어놨을 때, 버튼을 클릭하면 해당 버튼에서 이벤트가 발생하는 것이 아니다.
이벤트는 가장 상위 객체인 window객체에서 출발하여, dcument, html, body, button 순서로 도달한다.
그리고 다시 역순으로 위의 순서를 거슬러 올라가 클릭 이벤트가 소멸한다.
이때 이벤트가 window에서 출발해 해당 타겟 객체에 전달되는 과정을 캡쳐단계 라고하고,
타겟 객체에서 다시 window로 역순으로 되돌아 가는 과정을 버블단계 라고한다.
그리고 캡쳐 단계와 버블단계에서 이벤트가 거쳐가는 모든 객체(window포함)의 이벤트 핸들러를 실행하게 할 수 있다.(여기선 click이니 click에 대한 이벤트 핸들러를 실행하게 할수있다.)

ex)
document.body.addEventListner("click", capture, true);  //body에 capture단계로 인한 클릭 이벤트가 발생했을때, capture함수 실행
button.addEventListner("click", bubble, flase);  //button에 bubble단계로 인한 클릭 이벤트가 발생했을때, bubble함수 실행
document.body.addEventListner("click", bubble, false);  //body에 bubble단계로 인한 클릭 이벤트가 발생했을때, bubble함수 실행
//위에서 캡쳐단계와 버블단계를 구분짓는 것은 bubble과 capture가 아니라 true, false부분이다. capture와 bubble은 사용자 정의 함수이다.
ture : 캡쳐단계,  false : 버블단계 

function capture(e){    //e는 이벤트 객체
   let obj = e.currentTarget;    //현재 이벤트를 받은 문서 객체
   let tagName = obj.tagName;    //태그 이름
   console.log("capture단계 : " + tagName + " 태그 " + e.type + "이벤트");
}
function bubble(e){    //e는 이벤트 객체
   let obj = e.currentTarget;    //현재 이벤트를 받은 문서 객체
   let tagName = obj.tagName;    //태그 이름
   console.log("bubble단계 : " + tagName + " 태그 " + e.type + "이벤트");
}


실행결과>>
캡쳐단계에서 body에서 클릭 이벤트 발생으로 capture함수 실행
버블단계에서 button에서 클릭 이벤트 발생으로 bubble함수 실행, 이후 body에서 클릭 이벤트 발생으로 bubble함수 실행






■■■■■■■■■■■■■■■■■■ 표준 내장객체 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

---------------------------기본자료형과 객체자료형---------------------------------------------------------------------------------
기본자료형 : 숫자, 문자열, 불린
기본자료형의 생성 : 리터럴로 생성 (리터럴 : 자료값 그대로 자료형을 나타내는 것)
		  ex) let score = 90;  let name = "박상원"  let pass = true;
		      >>console.log(typeof score);  consol.log.....  해보면 number, string, boolean 으로 결과 출력

객체자료형 : 생성자 함수를 사용해 객체 자료형 생성
ex)
let scor = new Number(90);
let name = new String("박상원");
let pass = new Boolean(true);
console.log(typeof score); console.log.....
>>>결과 : 모두 object(객체)로 출력




---------------------------기본자료형과 객체자료형의 차이점---------------------------------------------------------------------------------
객체자료형 : 속성과 메소드 사용가능
기본자료형 : 속성 또는 메소드를 사용할 경우 그때만 잠시 객체로 자동변환되고, 사용후 다시 기본 자료형으로 돌아감
따라서 객체자료형과 기본자료형 모두 속성과 메소드 사용가능
ex) 
let fruit = new String("과일|3000원");
console.log(fruit.split("|"));
let snack = "과자|1500원";
console.log(snack.split("|"));
결과>> ["과일", "3000원"]  ["과자", "1500원"]

string객체의 split() 메소드 : 문자열을 일정한 구분자로 분할하여 각각의 문자열을 배열로 저장


차이점 : 기본자료형은 객체가 아니므로 속성과 메소드를 추가할 수 없다(이미 정의되어 있는 것을 사용은 가능) -> 일회용 객체
ex)
let num = 273;
num.method = function () {  //메소드 추가
  return "primitive method";
};
console.log(num.method());  //메소드실행
결과>>> 에러발생. 기본자료형에 속성과 메소를 추가할 수 없다.

let num = new Nember(273);
num.method = function () {
  return "object method";
};
console.log(num.method());
결과>>> object method 출력


그러나 기본 자료형에 프로토타입으로 메소드를 추가 할 순 있다.
(생성자 함수로 만든 객체는 프로토타입이라는 공간에 메소드를 지정하여 모든 객체가 공유가능)
ex)
let  num = 273;
Number.prototype.method = function () {
  return "primitive method";
};
console.log(num.method());
결과>>> primitive method출력.  기본자료형은 속성과 메소드를 사용할 때만 객체로 전환 되므로, 위에선 num이 잠시동안 Number객체로 전환되었기 때문에 가능한것




---------------------------Number객체---------------------------------------------------------------------------------
자바스크립트에서 숫자를 표현할 때 사용
Number객체 생성↓↓
let num = 273;
또는 let num = new Number(273);

Number객체에서 자주쓰는 메소드
toExponential() : 숫자를 지수 표시로 나타낸 "문자열"을 리턴
toFixed() : 숫자를 고정소수점 표시로 나타낸 "문자열"을 리턴
toPrecision() : 숫자를 길이에 따라 지수 표시 또는 고정소수점 표시로 나타낸 "문자열"을 리턴

ex) toFixed()
let num = 273.12345
console.log(num.toFixed(1));
console.log(num.toFixed(4));
결과>>> 273.1    273.1234

ex) toExponential()
let num = 200000;
console.log(number.toExponential(1)); 
console.log(number.toExponential(2));
console.log(number.toExponential(3));
결과>>> 2.0e+5    2.00e+5    2.000e+5




---------------------------생성자함수의 속성---------------------------------------------------------------------------------
자바스크립트에선 함수도 객체의 일종 이므로 생성자함수에 속성과 메소드 추가 가능
function Constructor() {}  //생성자 함수 생성
Constructor.property = 273;  //property라는 이름의 속성 생성
Constructor.method = function () {};  //빈 메소드 생성
console.log(Constructor.property);
console.log(Constructor.method);
결과>> 273    [Function]



***************Number생성자 함수의 속성***************
MAX_VALUE : 자바스크립트의 숫자가 나타낼수 있는 최대 숫자
MIN_VALUE : 자바스크립트의 숫자가 나타낼수 있는 최소 숫자
NaN : 자바스크립트의 숫자로 나타낼 수 없는 숫자
POSITIVE_INFINITY : 양의 무한대 숫자
NEGATIVE_INFINITY : 음의 무한대 숫자

EX)
let numA = Number.MAX_VALUE;
let numB = Number.MIN_VALUE;
let numC = Number.MAX_VALUE + 1;
console.log(numA);
console.log(numB..........생략

결과>>1.7976....     5e-324    1.7976....
최대값에 1을 추가해도 더이상 더할 수 없기 때문에 값이 같다 



***************String객체*******************
String객체 생성
let str = "안녕";
또는 let str = new String("안녕");

자주쓰이는 속성
length : 문자열의 길이를 나타낸다.

자주쓰이는 메소드
charAt(position) : position에 위치하는 문자를 리턴
charCodeAt(position) : position에 위치하는 문자의 유니코드 번호를 리턴
concat(args) : 매개변수로 입력한 문자열을 이은뒤 리턴
indexOf(searchString, position) : 앞에서부터 일치하는 문자열의 위치를 리턴
lastIndexOf(searchString, position) : 뒤에서부터 일치하는 문자열의 위치를 리턴
match(regExp) : 문자열안에 해당문자열이 있는지 확인 (여기선 regExp)
replace(regExp, replacement) : 문자열안에서 1번매개변수의 문자열(regExp)을 2번 매개변수 문자열(replacement)로 바꾼 후 리턴
search(regExp) : 해당 문자열과 일치하는 문자열의 위치를 리턴 (여기선 regExp)
slice(start, end) : 특정 위치의 문자열을 추출해 리턴
split(separator, limit) : separator로 문자열을 잘라 배열을 리턴
substr(start, count) : start부터 count만큼 문자열을 잘라서 리턴
substring(start, end) : start부터 end까지 문자열을 잘라서 리턴
toLowerCase() : 문자열을 소문자로 바꾸어 리턴
toUpperCase() : 문자열을 대문자로 바꾸어 리턴
※스트링객체는 자신의 값을 변경하는 것이 아니라 변경된 값을 리턴 하는 것이다.
 즉, String객체의 메소드는 전부 비파괴적 메소드이다.

EX) 잘못된사용
let str = "abcd";
str.toUpperCase();
console.log(str);
결과>>>abcd

이런식으로 써야된다↓
let str = "abcd";
str = str.toUpperCase();
console.log(str);
결과>>>ABCD


ex) indexOf("문자열")
let str = "안녕하세요";
console.log(str.indexOf("세"));  //indexOf는 만약 문자열이 포함되어 있지 않으면 -1 반환
결과>>> 3    

ex) indexOf("문자열", 위치);
let str = "the cat in the hat";
console.log(str.indexOf("the", 5);
결과>>> 11
indexOf는 매개변수를 2개 넣을 경우 2번째 매개변수 위치부터 검색하여 "문자열"이 처음 나타나는 위치 리턴
여기선 index 5이므로 cat에 있는a부터 검색했다

ex) split()
let str = "가,나,다";
let array = str.split(",");
console.log(array);
결과>>> ["가", "나", "다"]

ex) charAt(index)
let str = "friend";
console.log(str.charAt(2));
결과>>> i
매개변수인 index위치에 있는 문자를 문자열로 리턴
문자열 길이와 같거나 더 큰 숫자를 매개변수로 전달하면 빈 문자열 리턴

ex) substring(index1, index2)
let str = "hello|bye";
console.log(str.substring(6, 9);  //6~8번 인덱스의 문자열
결과>>> bye
index1에서 index2사이에(index2는 포함X) 있는 문자열 리턴

console.log(str.substring(6));
결과>>> bye
매개변수 하나일땐 거기부터 끝까지의 문자열 리턴 

ex) replace("str1", "str2")
let str = "apple and mango";
console.log(str.replace("and", "or");
결과>>> apple or mango
문자열에서 "str1"을 "str2"로 바꾼 문자열 리턴

ex) trim()
let str = "    hello    ";
console.log(str.trim());
결과>>> hello
문자열의 앞뒤 공백문자(빈칸, 탭, 엔터키)를 제거한 문자열 리턴



***************Date객체***************
날짜와 시간을 표시하는 객체
Date객체 생성방법
new Date() : 현재 시간으로 Date객체생성
new Date(유닉스타임) : 유닉스타임으로 Date객체 생성
new Date(시간문자열) : 해당 문자열을 기반으로 Date객체 생성
new Date(년, 월-1, 일, 시간, 분, 초, 밀리초) : 시간요소(년, 월-1, 일....)를 기반으로 Date객체 생성

ex)
let str = new Date();
console.log(str);
결과>>> 현재시간출력 (Mon Dec 09 1991 21:30:00 GMT+0900 (한국표준시) <-이런형식)

let str = new Date(692281800000);  //유닉스타임(1970년 1월 1일 0시 0분 0초 부터 매개변수 값만큼의 밀리초가 경과한 시간)
console.log(str);
결과>>> Mon Dec 09 1991 21:30:00 GMT+0900 (한국표준시)

let str = new Date("December 9, 1991 21:30:00");
console.log(str);
결과>>> Mon Dec 09 1991 21:30:00 GMT+0900 (한국표준시)

let str = new Date("Dec 9, 1991 9:30:00 pm");
console.log(str);
결과>>>Mon Dec 09 1991 21:30:00 GMT+0900 (한국표준시)

let str = new Date("Dec 9, 1991");
console.log(str);
결과>>> Mon Dec 09 1991 00:00:00 GMT+0900 (한국표준시)

let str = new Date("2021-12-2");
console.log(str);
결과>>> Thu Dec 02 2021 00:00:00 GMT+0900 (한국표준시)

let str = new Date(1991, 12-1, 9, 21, 30, 0, 0);  //12-1을 한 이유는 월은 0월 부터 시작되서이다.
console.log(str);
결과>>>Mon Dec 09 1991 21:30:00 GMT+0900 (한국표준시)

let str = new Date(2001, 9, 20);  //0월부터 시작되므로 9를 넣으면 10월이다
console.log(str);
결과>>> Sat Oct 20 2001 00:00:00 GMT+0900 (한국표준시)


get○○() 형태 메소드 (날짜 값을 얻어옴) : FullYear, Month, Date, Day, Hours, Minutes, Seconds 등 사용
set○○() 형태 메소드 (날짜 값을 설정) : FullYear, Month, Date, Day, Hours, Minutes, Seconds 등 사용

FullYear : 4자리 년도
Month : 월의 정수 (0~11 : 1월~12월)
Date : 날짜의 정수 (1~31)
Day : 요일의 정수 (0~6 : 일~토)
Hours : 시의 정수 (0~23)
Minutes : 분의 정수 (0~59)
Seconds : 초의 정수 (0~59)


ex)
let curTime = new Date();
console.log(curTime);
curTime.setFullYear(curTime.getFullYear() + 1);
curTime.setMonth(curTime.getMonth() + 11);
curTime.setDate(curTime.getDate() + 3);
console.log(curTime);
결과>>> Mon Nov 22 2021 09:51:44 GMT+0900 (한국표준시)
	Wed Oct 25 2023 09:51:44 GMT+0900 (한국표준시)


ex) 시간 간격 구하기 (getTime() 메소드 : Date객체에 저장된 시간을 유닉스타임으로 환산해준다.)
let now = new Date();
let before = new Date("December 2, 2001");
let interval = now.getTime() - before.getTime();
interval = Math.floor(interval / (1000 * 60 * 60 *24));
console.log("태어나고 " + interval + "일 지났습니다.");



***************Array (배열) 객체***************
Array객체 생성
let array1 = new Array();   //빈 배열 생성
또는 let array1 = [];  //빈 배열 생성

let array2 = new Array(1, 2, 3, 4, 5);
또는 let array2 = [1, 2, 3, 4, 5];

let array3 = new Array(3);
new Array사용시 인자가 한 개 일경우, 해당 인자 만큼의 크기를 갖는 배열 생성


Array객체의 기본 메소드
※대부분 파괴적 메소드로 자기 자신을 변경시킨다.
(*표시된 메소드는 파괴적 메소드임)
concat() : 매개변수로 입력한 배열의 요소를 모두 합쳐 배열을 만들어 리턴한다.
join() : 배열 안의 모든 요소를 하나의 문자열로 만들어 리턴한다.
slice() : 배열 요소의 지정한 부분을 배열로 리턴한다.
*pop() : 배열의 마지막 요소를 제거하고 리턴한다.
*push() : 배열의 마지막 부분에 새로운 요소를 추가한다.
*reverse() : 배열의 요소 순서를 뒤집습니다.
*sort() : 배열의 요소를 정렬한다.
*splice() : 배열 요소의 지정한 부분을 삭제하고 삭제한 요소를 배열로 리턴한다.
파괴적 함수중 리턴값 있는건 splice, pop


let a = new Array("황", "김", "이");
let b = new Array("박");
let c;
위 배열들은 밑의 예제들에서 사용된다

ex) concat(배열이름)
c = a.concat(b);
console.log(c);
결과>>> ["황", "김", "이", "박"]
매개변수로 입력한 배열의 요소를 모두 합쳐 배열을 만든 뒤 리턴한다
배열을 새로 만드므로 변수를 선언해 이를 참조하게 하는 형식으로 해야한다.

ex) join()
c = a.join();
console.log(c);
결과>>> "황, 김, 이"
배열 안의 모든 요소를 하나의 문자열로 만들어 리턴한다.

ex) slice(인덱스1, 인덱스2)
c = a.slice(1, 2);
console.log(c);
결과>>> ["김"]
배열 요소의 지정한 부분을 배열로 리턴한다. 이때, 인덱스2는 범위에 포함X

ex) reverse()
c = a.reverse();
console.log(c);
console.log(a);
결과>>> ["이", "김", "황"]       ["이", "김", "황"]
배열의 요소 순서를 뒤집습니다. ※파괴적 메소드

ex) splice(인덱스1, 인덱스2)
c = a.splice(1, 2);
console.log(c);
console.log(a);
결과>>> ["김", "이"]      ["황"]
배열 요소의 지정한 부분을 삭제하고 삭제한 요소를 배열로 리턴한다. 이때 인덱스2도 범위에 포함된다. ※파괴적 메소드

ex) push()
c = a.push("류");
console.log(c);
console.log(a);
결과>>> ["황", "김", "이", "류"]        ["황", "김", "이", "류"]
배열의 마지막 부분에 새로운 요소를 추가한다.  ※파괴적 메소드

ex) pop()
c = a.pop();
console.log(c);
console.log(a);
결과>>> ["이"]      ["황", "김"]
배열의 마지막 요소를 제거하고 리턴한다.

ex) sort()
c = a.sort();
console.log(c);
console.log(a);
결과>>> ["김", "이", "황"]       ["김", "이", "황"]
배열의 요소를 정렬한다. ※파괴적 메소드

ex) 문자열 오름차순/내림차순 정렬
a.sort();
console.log(a);
결과>>> ["김", "이", "황"]
a.reverse();
console.log(a);
결과>>> ["황", "이", "김"]
문자열로 오름차순은 sort()로 하고, 그후 reverse를 하면 내림차순 정렬된다.

let a = [52, 273, 103, 68, 32]; 
위 배열은 밑의 예제에서 쓰인다.

ex) sort의 특성
a.sort();
console.log(a);
결과>>> [103, 273, 32, 52, 68]
sort는 매개변수를 입력하지 않으면 "문자열의 오름차순"으로 정렬한다.
위에선 숫자의 크기와 상관없이 제일 앞숫자가 1이므로 103이 제일 앞으로 나왔다.
그러나 배열의 요소가 문자열로 바뀌는 것은 아니다. 그대로 숫자 형태이다.

ex) sort 문자열 내림차순
sort는 기본 설정이 문자열 오름차순 이므로 문자열 오름차순으로 정렬할 땐 매개변수 없이 쓰면 되지만, 
문자열 내림차순으로 할땐 함수를 매개변수로 넣어야 한다.
let a = ["고구마", "감자", "바나나"];
a.sort( (left, right) => {
	if (right < left) return -1;  //내림차순이면 왼쪽이 오른쪽보다 커야한다. 따라서 right < left 면 바꿀필요 없으니 -1반환
	else if (right > left) return 1;  //이경우엔 오른쪽이 더크니 바꿔야 하므로 1반환
	else return 0;  //둘다 아니면 0반환
});
console.log(a);
결과>>> ["바나나", "고구마", "감자"]


ex) sort 숫자 오름차순/내림차순 정렬
sort로 숫자를 오름차순으로 정렬하려면
a.sort( (left, right) => {
	if (left < right) { return -1; }
	else if (left > right) { return 1; }
	else return 0;
	});
이렇게 매개변수로 함수를 넘겨주어야 한다.
그리고 숫자를 내림차순으로 정렬하려면
a.sort( (left, right) => {
	if (right < left) { return -1; }
	else if (right > left) { return 1; }
	else return 0;
	});
이런 함수를 매개변수로 넘겨주어야 한다.
그러나 이렇게 하면 코드가 불필요하게 길어지므로 다음과 같이 줄일 수 있다.

숫자 오름차순 정렬 일경우
a.sort( (left, right) => {
	return left - right; } );

숫자 내림차순 일경우
a.sort( (left, right) => {
	return right - left; } );
이렇게 줄일 수 있다.


ex) 객체 내부의 숫자, 문자열로 정렬
let a = [{
        name : '고구마',
        price : 1000
      }, {
        name : '감자',
        price : 500
      }, {
        name : '바나나',
        price : 400
      }];

a.sort( (item1, item2) => {    //객체 내부의 숫자로 오름차순 정렬
        return item1.price - item2.price;
      });
console.log(a);

a.sort( (item1, item2) => {    //객체 내부의 숫자로 내림차순 정렬
        return (item2.price - item1.price);
      });
console.log(a);

a.sort( (item1, item2) => {    //객체 내부의 문자열로 오름차순 정렬
        if(item1.name < item2.name){
          return -1;
        } else if (item1.name > item2.name){
          return 1;
        } else {
          return 0;
        }
      });
console.log(a);

a.sort( (item1, item2) => {    //객체 내부의 문자열로 내림차순 정렬
        if(item2.name < item1.name){
          return -1;
        } else if (item2.name > item1.name){
          return 1;
        } else {
          return 0;
        }
      });
console.log(a);

ECMAScript5에서 추가된 메소드
forEach() : 배열의 요소를 하나씩 뽑아 반복을 돌린다.
map() : 콜백 함수에서 리턴하는 것을 기반으로 새로운 배열을 만든다.
filter() : 콜백함수에서 true를 리턴하는 것으로만 새로운 배열을 만들어 리턴한다.

let a = [52, 95, 32, 64, 72];
위 배열은 밑의 예제에서 쓰인다.

ex) forEach()
a.forEach( (item, index) => {
	console.log(index + "번째 요소는 " + item + "입니다.");
});
결과>>> 0번째 요소는 52입니다.     1번째 요소는 95입니다..........
forEach의 콜백함수에서 매개변수는 두가지 설정할 수 있는데 첫번째가 요소, 두번째가 인덱스 이다.

ex) map()
let b = a.map( (item, index) => {
	return item*item;
});
console.log(b);
결과>>> [2704, 9025, 1024, 4096, 5184]
새로운 배열을 만드는 것이기 때문에, 변수를 선언해 이를 참조하게 하는 형식으로 사용해야 한다.
매개변수는 forEach과 마찬가지로 첫번째가 요소, 두번째가 인덱스 이다

ex) filter()
let b = a.filter( (item, index) => {
	return (item % 2 == 0);  //짝수 일때만 true를 리턴
});
console.log(b);
결과>>> [52, 32, 64, 72]
콜백 함수에서 true를 리턴하는 요소로만 배열을 만들어 리턴한다.
새로운 배열을 만드므로 변수를 선언해 이를 참조하게 하는 형식으로 사용해야함
매개변수는 forEach와 마찬가지




***************Math 객체***************
수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 표준 내장 객체이다
따로 생성자함수(new Math())로 객체를 생성하지 않고 그냥 사용한다.

Math 객체 속성
PI : 3.14159265.... 
이처럼 PI는 미리 값이 설정되어 있다.

ex)
let a = Math.sqrt(4);  //sqrt는 매개변수의 제곱근을 구한다. 
let b = Math.PI*2*2;  //PI는 이미 설정되어 있는 속성이므로 원의 면적이 구해진다.
결과>>> a = 2    b = 12.56...


Math 객체의 메소드
abs(x) : x의 절대값 리턴
ceil(x) : x보다 크거나 같은 가장 작은 정수 리턴
floor(x) : x보다 작거나 같은 가장 큰 정수 리턴
round(x) : x를 소수점 첫번째 자리에서 반올림한 정수 리턴
random() : 0보다 크거나 같고 1보다 작은 임의의 수 리턴
pow(x, y) ; x의 y제곱 값 리턴
sqrt(x) : x의 제곱근 리턴
max(x, y, z, .....) : 매개변수 중 가장 큰 값 리턴.   매개변수가 없으면 -infinity를 반환.  매개변수에 문자열등 비교할 수 없는 값이 있으면 NaN반환
min(x, y, z, .....) : 매개변수 중 가장 작은 값 리턴.  매개변수가 없으면 infinity를 반환.  매개변수에 문자열등 비교할 수 없는 값이 있으면 NaN반환

ex) random()
10보다 크거나 같고 20보다 작은 수로 random하고 싶은 경우
let min = 10, max = 20;
Math.random()*(max - min) + min

ex) floor()
Math.floor(10.99);  //10   floor는 매개변수보다 작은 정수 값을 반환한다.
Math.floor(11.01);  //11
Math.floor(11);  //11  매개변수 값이 정수이면 그대로 반환한다.
Math.floor(-10.99);  //-11
Math.floor(-11.01);  //-12

ex) ceil()
Math.ceil(10.99);  //11   ceil은 매개변수보다 큰 정수 값을 반환한다.
Math.ceil(11.01);  //12
Math.ceil(11);  //11 매개변수 값이 정수이면 그대로 반환
Math.ceil(-10.99);  //-10
Math.ceil(-11.01);  //-11
  
  
 
  input 박스에 숫자만 입력하기
https://hianna.tistory.com/413

이미지 비율로 줄이기
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=hukim79&logNo=60097810323

이미지크기 구하기
https://mrjjang.tistory.com/82

원본이미지 크기 구하기
https://sometimes-n.tistory.com/21

요소의 높이, 너비와 화면 높이, 너비 구하기
https://bonggugu.tistory.com/35

화면크기, 브라우저 크기 구하기
https://lookingfor.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%99%94%EB%A9%B4-%ED%81%AC%EA%B8%B0-%EA%B5%AC%ED%95%98%EA%B8%B0

이미지크기 자동조정
https://tadream.tistory.com/9766

요소의 최소, 최대 높이, 너비 설정
https://aboooks.tistory.com/236

박상원

주니어 개발자

이전 포스트

Python - 정리 전

다음 포스트