JAVASCRIPT 정리

• img 관련

onmouseover : 마우스가 요소 위에 위치할 때

onmouseout : 마우스가 요소를 벗어났을 때

 

 

document.write() : 동적으로 HTML 파일의 콘텐츠를 생성하는 메소드

               (페이지가 완전히 로드된 후 호출하면 기존의 HTML 문서의 내용을 모두 지우고 다시씀 -> 기존의 내용이 사라짐)

document.getElementById("x").value : id가 x 인 요소의 값을 가져옴

parseInt() : 문자열인 요소를 정수로 변환함 

Date().getHours() : Date 객체를 생성하고 getHours()를 호출하여 현재 시각을 얻음 (현재시각 반환)

Date().getDay() : Date 객체 생성 및 getDay()를 호출하여 일주(0-6), 하루수 반환 / 일요일은 0, 월요일은 1

HTML 요소에 접근하기 위해서 : document.getElementById() 사용

접근하여 HTML 요소를 바꾸기 위해서 : document.getElementById() . innerHTML 사용

 

• 이벤트 속성

onclick = "alert()" : onclick 이벤트가 발생하면 alert()를 호출

 

• 블록

{ } : 여러 개의 문장들을 묶어서 함께 실행할 때 사용

 

• 주석문

단일 문장 주석 : // content

다중 문장 주석 : /*  content  */

 

• 변수 선언

1. var

2. let

3. const : 상수(변하지 않는 변수)를 선언하기 위해 도입

 

- 변수 이름에는 문자, 숫자, 밑줄(_), $가 포함될 수 있음

- 변수 이름은 문자로 시작하여야 함(숫자 X)

- 변수 이름은 $나 _로 시작할 수 있음

- 변수 이름은 대소문자를 구별함

+ 자바에서는 종종 변수 이름을 표시할 때 낙타체 사용

(낙타체 : 식별자가 한 단어 이상일 때 첫 번째 단어는 소문자로, 나머지는 대문자로 표기하는 표기법)

 

• 데이터타입

<기본 자료형>

- 수치형 : 정수 & 실수 / e로 지수형 표기 ex) e3 : 10의 3승

- 문자열

- 부울형 : true 나 false 값만을 가질 수 있음 / 일반적으로 조건문에서 실행 조건 검사에 사용

- 객체형 : 객체를 나타내는 타입

- undefined : 변수가 선언되었지만 아직 값이 정해지지 않은 상태

 

+ typeof 변수 : 변수의 데이터타입 확인 연산자

+ 변수 . length : 문자열 변수의 길이

+ 변수 . charAt(x) : 문자열 변수의 x 번째 문자

+ 변수 . toUpperCase() : 대문자로 변경

+ 변수 . replace ("x", "A") : 문자열 변수에서  x를 A로 변경

+ 템플릿 리터럴 : 문자열 안에 변수값을 넣는 것

   형태 : ' # { expression } '

ex) let x = 10 ;

      console.log('Hello ${x} 번') ; //  "Hello 10번"이 된다.

+console.log() : 수식의 값을 웹 브라우저의 콘솔에 출력하는 함수 (디버깅 시 변수나 수식의 값을 출력해볼 수 있음)

 

• 조건문

- if...else 문 : 조건이 참이면 어떤 코드를 실행하고 조건이 거짓이면 다른 코드를 실행하고 싶은 경우에 사용

- switch 문 : 많은 코드 중에서 하나를 선택하여 실행하고 싶은 경우에 사용 (가능한 경로가 다양할 때 사용)

 

• 반복문

- while 문 : 지정된 조건이 참이면 반복 실행 

- for 문 : 정해진 횟수 동안 코드를 반복 실행

- 중첩 반복문 : 외부 반복문과 내부 반복문으로 나눠짐 (2개이상의 반복문이 중첩되어있음)

- do/while문 : while 문과 비슷하지만 반복조건이 앞이 아니라 끝에 있음 (while()의 끝에 ; 빼먹으면 안됨)

- break문 : 반복루프를 벗어나기 위해 사용

- continue문 : 현재 실행하고 있는 반복 과정의 나머지를 생략하고 다음 반복을 시작하게 만듬

 

• 함수

입력을 받아서 특정한 작업을 수행하여 결과를 반환하는 것 / 함수 안의 코드들은 외부에서 호출했을 때만 실행 / 객체 취급

형태 : function 함수이름 ( )

                     { 함수 몸체

                      }

인수(인자) : 함수로 전달 받는 값 (argument)

인수를 받을 변수 : 매개 변수 (parameter)

-> 인수와 매개 변수는 선언된 순서대로 매칭됨

화살표 함수 (arrow function) : 하나의 문장이라면 return 과 { } 생략가능 / 여러개의 문장이라면 return과 { } 필수 

return : 지정한 값을 호출한 곳으로 반환하여 함수를 종