2023/04/04~06__Javascript_

2023/04/04~06Javascript02

HELLICAT 2023. 4. 7. 18:30

2. 다중 반복문

for (시작값, 최종값, 증감식){
	for(시작값, 최종값, 증감식){
    반복할 문장
    }
}

** 조건문 **

1. 조건의 결과에 따라 다르게 문장을 실행

2. if문

조건이 참인 경우 다음 문장을 실행

if (A 조건) {
조건이 참인 경우 실행할 코드
} else if(B조건){
A 조건 외의 조건이 참인 경우 실행할 코드
} else {
if와 else if 조건이 참이 아닐 경우 실행할 코드
}

2-1. if문의 다수 사용

- 각각의 조건이 독립적

2-2 중괄호 사용

- 여러 개의 문장을 하나의 조건문에 종속

2-3 if~else // if ~ else if ~ else

- 위 if문 참조

3. switch 문

switch(변수){
case "값1" : 변수값이 "값1"인 경우 실행할 문장
	break;
case "값2" : 변수값이 "값1"인 경우 실행할 문장
	break;
case "값3" :
case "값4" :
case "값5" :변수값이 "값1"인 경우 실행할 문장
	break;
default : 변수값이 "값1","값2","값3",이 아닌 경우 실행할 문장
}

** 함수 **

미리 약속되어 있는 명령어

1. 내장 함수 - 만들어져 있는 명령어

2. 사용자 정의 함수 - 만들어서 사용하는 명령어

** 내장 함수

1. 대화상자 함수

- alert("문자열") : 메세지 상자

- confirm("문자열") : 확인 / 취소 선택 상자

- prompt("질문메세지", "초기메세지") : 사용자 입력 상자

** 사용자 정의 함수 **

1. 사용자가 임의로 생성한 함수

2. 선언문 : function

function 함수명 (매개변수, 매개변수 ...){
실행문...
실행문...
.
.
}

3. 호출 시에만 실행

4. 사용자 정의 함수 호출방법

- 단독 실행

ex) functionName ();

- 변수에 의한 실행

ex) const i = functionName ();

- 다른 함수에 의한 실행

ex) setTimeout(functionName, 5000)

- 이벤트에 의한 실행(****)

ex) <body onload = "functionName()"

5. 함수명 규칙 : 변수명 규칙과 동일

** 이벤트 **

1. 언제

2. 이벤트 : 상황 ,~~하다

3. 이벤트 핸들러 : 이벤트 사용, ~~ 했을 때

이벤트 앞에 on 추가

이벤트	이벤트 핸들러
load	onload
unload	onunload
mouseover	onmouseover
mouseout	onmouseout
focus	onfocus
blur	onblur
click	onclick
mousedown	onmousedown
mouseup	onmouseup

** 화살표(=> ,ES6) 함수 **

1. 뚱뚜한 화살표(=>,arrow function)를 사용하여 함수 선언

2.ES5 일반함수 선언

function(매개변수){

실행할 문장

}

3. 화살표함수

(매겨변수)=>{

실행할 문장

}

4. 매개변수가 하나인 경우 () 생략 가능

매개변수 => {

실행할 문장

}

5. 매개변수가 없는 경우 빈 괄호 사용

0 => {

실행할 문장

}

6. 문법은 간단해지지만 공통된 규칙이나 일반적인 사용방법이 필요할 수 있음

** DOM(Document Object Model) 방식 **

- html 요소에 접근하는 표준화된 방식

- 기존 name 속성과 태그별 접근 방식에서 벗어나 오브젝트의 종류에 상관없이 id속성을 사용하여 요소에 접근하는 방식

* getElementById("요소") 객체의 생성

웹 페이지 개발 방식

- 분리해서 개발

1. 구조(Structure) - HTML

2.표현(Presentation) - CSS

3.동작(Behavior) - JavaScript

** 이벤트 핸들러(이벤트 리스너, 이벤트 처리기)

1. 이벤트가 발생했을 때 그 처리를 담당하는 함수

2. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹브라우저는 그 요소에 등록된 이벤트 핸들러 실행

ex) obj.addEventListener("이벤트",실행할 함수);

** 배열 **

1. 여러개의 값을 가지는 자료구조

2. 자료형의 제약 없음

3. trailing(길게 늘어지는) 쉼표

- 객체와 마찬가지로 배열의 마지막 요소에 쉼표 작성 가능

- 모든 행의 구조가 같아져 요소추가, 삭제 용이

* 객체(object)와 배열

1. 객체: 키를 사용해 식별할 수 있는 값을 담은 컬렉션

2. 배열: 순서가 있는 컬렉션을 저장할 때 쓰는 자료 구조

* 배열 선언

1. let arr = new Array();

2. let arr = new Array("사과","배","기타");

3. let arr = [ ];

4. let fruits = ["사과", "딸기", "포도" , "배"];

5. let arr = ["사과", {올리브 : "올리브 유" }, true, function() {alert("hellow")} ];

- arr[0] // 사과

- arr[1] // 올리브 : "올리브 유"

- arr[4] // fuction() {alert("hellow")}

6. 다차원 배열

let matrix = [

[ 1,2,3 ],

[ 4,5,6 ],

[ 7, 8, 9 ]

];

- matrix[1][1] ; // 5

* 배열 요소 구하기

let fruits = ["사과", "오랜지", "자두"]

let fruits[0] // "사과"

*배열 길이 구하기

1. length

let fruits = ["사과", "오랜지", "배]

fruits.length; // 3

* 배열 요소 수정

fruits[2] = '배'; // 배열이 ["사과", "오랜지", "배"]로 변경

* 배열 요소 추가

1. 다음요소에 배열 추가

fruits[3] = '레몬'; // 배열이 ["사과", "오렌지", "배","레몬"]으로 변경

fruits[fruits.length] // = '레몬';

2. 임의 위치에 배열 추가

fruits[6] = '수박'; // ["사과", "오렌지", "배", "레몬", "", "", "수박"] => 빈 배열 추가

** 메소드 **

1. push(): 맨 끝에 요소 추가(fast)

2. pop(): 맨 끝에 요소 추출(fast)

3. shift(): 제일 앞 요소를 꺼내 제거한 후 남아있는 요소들을 앞으로 이동(slow)

- 두 번째 요소가 첫 번째 요소로 변경

4. unshift(): 맨 앞에 요소 추가(slow)

* 자료구조 *

1. 큐(Queue)

- 순차적 데이터

- FIFO(선입선출) : 먼저 입력된 데이터가 먼저 삭제

shift <- [1,2,3] <- push

2. 스택 (Stack)

- 데이터의 입출력 위치 고정

- LIFO(후입선출) : 나중에 입력된 데이터가 먼저 삭제

[ 1, 2, 3 ] push <-> pop

** JavaScript 오류 **

1. JavaScript는 오류가 발생하면 일반적으로 중지되고 오류 메시지 생성

2. 기술용어 : JavaScript will throw an exception (throw an error)

3. name & message 속성을 가진 Error 객체 생성

- 이름 : 오류 이름을 설정하거나 반환

- 메시지 : 오류 메시지(문자열)를 설정하거나 반환

* 오류 유형

1. ReferenceError (잘못된 참조) : 선언되지 않은 변수를 사용(참조)하는 경우 발생

# EX)

let x =5;

try{
x = y + 1; // y cannot be used (referenced)
} catch(err) {
document.getElementById("demo").innerHTML = err.name;
}

2. SyntaxError(구문 오류) : 구문 오류가 있는 코드를 평가하려고 할 때 발생

# ex
try {
	eval("alert('hello)"; // Missing ' will produce an error
    }catch(err){
    document.getElementById("demo").innerHTML = err.name;
    }

3. TypeError(유형 오류) : 예상 유형 범위를 벗어난 값을 사용하면 발생

# EX)
let num = 1;
try {
num.toUpperCase(); // you cannot convert a number to upper case
} catch(err) {
document.getElementById("demo").innerHTML = err.name;
}

** 오류 처리 **

1. try : 실행할 코드 블록 정의

2. catch : 오류를 처리할 코드 블록 정의, try문과 사용

# 구조
try {
Block of code to try
} catch(err) {
Block of code to handle errors
}

3. throw : 사용자 정의 오류 정의

# 구조
try{
Block of code to try
if(condition)throw "Error Message";
} catch(err){
Block of code to handle errors
}

4. finally : 결과에 관계없이 실행할 코드 블록 정의

# 구조
try{
Block of code to try
} catch(err){
Block of code to handle errors
} finally {
Block of code to be executed regardless of the try / catch result
}

728x90

2023/04/04~06__Javascript__02

2023/04/04~06Javascript02