Javascript

1. 자바스크립트 기초

---

자바스크립트 변수 규칙

• 식별자 규칙
  • 문자, 밑줄, 달러기호($)로 시작해야한다.
• 변수 선언 규칙
  • 여러 단어를 연결한 변수 이름을 camelCase 법으로 작성한다.

ES6 버전부터 변수를 선언할 때 var 예약어 외 let, const를 사용할 수 있다.

• var
  • 변수 범위
    • 함수 외부 선언 ⇒ 전역 범위
    • 함수 내부 선언 ⇒ 함수 범위
  • 특징
    • 재선언과 업데이트 O
      • 재선언이 가능하여 다른 곳에서 이미 정의된 것을 재선언할 경우 취약점이 발생할 수 있다
• let
  • 변수 범위
    • 해당 블록 내에서만 사용가능하다.
  • 특징
    • 업데이트 O , 재선언 X
      • 동일한 변수가 다른 범위에서 정의되는 것은 가능하다. 서로 다른 범위를 가지고 있어 서로 다른 변수로 취급된다.
• const
  • 변수 범위
    • 선언된 블록 범위 내에서만 접근 가능
  • 특징
    • 업데이트, 재선언 X
    • 즉 선언과 동시에 정의가 되어야한다.

자바스크립트 연산자

• 연결 연산자 : + / 상수 연산자 : -
  • 숫자형 자료와 문자형 자료를 +를 이용해 더하면 숫자형 자료가 문자형 자료로 변환된다.
  • 숫자형 자료와 문자형 자료를 - 를 이용해 더하면 문자형 자료가 숫자형 자료로 변환된다.
• 탬플릿 문자열
  • 문자열 ${변수명} 문자열
• 비교 연산자
  • == : 자료형이 다를 경우 자료형을 변환해서 비교
  • === : 자료형 변환 X

2. 제어문

---

조건문

반복문 : for

반복문 : while

3. 함수와 이벤트

---

함수 정의와 실행

함수를 선언한 순서에 상관없이 함수 실행은 어디서나 가능하다.

익명함수

• 함수 자체가 식 ⇒ 변수에 할당 가능 ⇒ 다른 함수의 매개변수로 활용 가능

  var add = function(a,b){
  	return a + b;
  }

• 화살표 표기법 ⇒ 화살표 표기법을 통해 익명 함수의 함수 선언을 좀 더 간단하게 작성할 수 있다.

  // 매개변수 X
  let hi = () => "안녕하세요?";
  hi();
  
  //매개변수 1개
  let greet = name => `${name}님, 안녕하세요?"`;
  greet("경희");
  
  //매개변수 2개 이
  let add = (a,b) => a + b;
  add(1,2);
  

즉시 실행 함수

함수를 정의함과 동시에 실행되는 함수

(function() {
				...
})();

또는

(function() {
				...
}());

이벤트 다루기

• 이벤트 : 사용자나 웹 브라우저가 행하는 어떤 동작
  1. 마우스 이벤트
  2. 키보드 이벤트
  3. 문서 로딩 이벤트
  4. 폼 이벤트
• 이벤트 처리기
  • 이벤트가 발생했을 때 어떤 함수를 실행시킬 지 알려주기 위해 이벤트와 이벤트 처리 함수를 연결해주는 것
  • on + 이벤트
  • 연결 방식
    • 태그에 함수 연결
    • 태그에 미리 만들어둔 함수를 연결

4. 객체

---

자바스크립트의 객체

• 내장객체
• 문서 객체 모델
• 브라우저 객체 모델
• 사용자 정의 객체

객체란?

• 속성과 메서드로 이루어져 있다.
• 인스턴스
  • 프로토타입을 이용해서 만든 객체
  • new 예약어() 로 생성할 수 있다.

사용자 정의 객체

원하는 프로그램을 만들기위해서는 미리 만들어저 있는 내장객체 외에도 사용자가 직접 객체를 만들어서 프로그래밍에 사용해야한다.

• 사용자 정의 객체 생성하는 방법
  • 객체 리터럴 표기법
  • 생성자 함수

Array객체

• Array 객체의 인스턴스 생성

  var arr = new Array();
  var otherArr = [1,2,3,4];

• 주요함수
  • concat()
  • join()
  • push(), unshift()
  • pop(), shift()
  • splice()
  • slice()

5. Document Object Model : DOM

---

웹 문서의 모든 요소를 자바스크립트를 이용해서 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법

DOM의 구조

• DOM 트리 형태
• body(root element) → tag element → text / 속성 element

DOM 요소에 접근하는 방법

1. getElementById(), getElementsByClassName(), getElementByTagName()
2. querySelector(), querySelectorAll()
   • → getAttribute()
   • → setAttribute()

⇒ 1,2 : 요소까지만 접근 3 : 해당 요소의 텍스트, 속성 요소까지 접근 가능

이벤트 처리 방법

• 태그 안에 직접 이벤트 처리기 추가
• 여러 이벤트 발생 시 → addEventListener(이벤트유형, 함수, 캡처 여부) 사용

새로운 노드 추가하기

1. 요소 노드 생성 : createElement()
2. 텍스트 요소 노드 생성 : createTextNode()
3. 자식 노드로 추가하기 : appendChild()
4. 속성 추가하기
   1. createAttribute() → setAttributeNode()
   2. setAttribute()

원하는 위치에 노드 추가하기 / 삭제하기

• insertBefore()
• removeChild()

폼 요소에 접근하기

1. querySelector()로 요소를 가져옴
2. 해당 요소에서 value 속성이나 배열을 이용해서 폼의 필드에 접근

폼 요소 검증에 유용한 함수

자바스크립트 내장 함수 기존 입력한 값을 선택하거나 입력한 값이 지워진 자리에 커서를 가져다 놓는 역할을 한다.

• select()
• focus()

선택 목록 및 옵션 항목에 접근하기

• formName.selectName.options**[index]**
• formName.selectName.**selectedIndex**

라디오 버튼과 체크 상자에 접근하기

• 라디오 버튼 요소나 체크 상자의 요소의 checked 속성 이용

5. Browser Object Model : BOM

---

Window 객체의 함수

• alert()
• prompt()
• open()

Navigator 객체

랜더링 엔진을 통해 웹 브라우저 종류를 구별할 수 있다.

코드리뷰

이벤트 전파 원리를 공부 -> receipe for문처럼 다 돌리지말고 부모에게 이벤트를 넣고 전파되는 방식을 공부해볼 것

로그인을 제외하고 입력받을때 잘못 입력받을때 focus 이용

로그인 실패시 실패 이유를 정확히 알려주지말

this → 이벤트가 발생한 객체

익명함수를 썼을때는 상위객체가 잡히기에 유의해서 사용할 것

익명함수에서 상위 객체를 못 가져올 수 있으니 매개변수로 받아와야함.

참고 서적
Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편