[JavaScript] KIC campus 수강 내용 정리

JavaScript의 특징

브라우저에서 실행이 되는 언어로 html문서와 같이 사용한다.
문법에 맞게 내용을 작성하면 컴파일해서 2진수로 변환된다.
메모리에 로딩을 후 변역해서 컴퓨터가 실행한다.(화면에 결과를 보여준다.)
소스파일을 메모리에 바로 올려서 실행해서 화면에 에러표시가 안된다.
순차문으로 써진 순서대로 실행이 된다.
함수형 언어이다.
플랫폼(운영체제)에 상관없이 다 실행이 된다.
따로 파일로 만들어서 불러올 수 있다.
<script src="000.js"></script>

 

JavaScript의 문법

변수
형식) var 변수명 = 저장할값; => 함수안에서 사용. 재할당 가능. 재선언 가능
형식) let 변수명 = 저장할 값; => ES6 이상. 블록안에서만 사용, 재할당 가능, 재선언 불가능
형식) const 변수명 = 저장할 값; => ES6 이상. 상수변수로. 변하지 않을 값을 변수로 선언 할 때 사용. 블록안에서만 사용. 재할당 불가능. 재선언 불가능

자료형
콘솔창 : 'typeof 값' 입력시 자료형을 알려줌

연산자
산술연산자 : +, -, *, /, %
단항산술연산자 : ++, --
할당연산자 : =,+=,-=,*=,/=,%=
연결연산자 : "문자열" + "문자열"
비교연산자 : >, >=, <, <=, !=, == 
논리연산자 : &&, ||, !

함수
형식) function 함수명(변수){처리 할 일(계산, 저장, 출력)}
매개변수 X 반환값 X => 단순 반복
매개변수 O 반환값 X => 값을 입력 받아서 계산, 저장, 출력
매개변수 O 반환값 O => 값을 입력 받아서 계산목적으로 웹프로그래밍에서 제일 많이 사용

제어문
if(조건식) 참이면수행; else 거짓이면수행;
if(조건식) 참이면실행; else if(조건식2) 참이면실행; else 거짓이면수행;

 

JavaScript의 주석

// 한 줄 주석
/* 여러줄주석 */

 

JavaScript의 내장함수

alert("주의, 경고시 사용하는 대화상자 보여주는 함수");
prompt("사용자에게 알려주는 구문","입력하지않을시저장할기본값");
confirm("동의를 구하는 메세지");
document.write("body부분에 출력하는 문장");
console.log("콘솔창에 출력하는 문장")
window.document.폼이름.입력양식항목.하위속성명;(window는 생략)

 

JavaScript의 오류찾기

ctrl+shift+j (콘솔창 열기) : 오류개수, 오류내용, 오류발생위치 확인

JavaScript의 Event

운영체제가 인식가능한 사용자들의 모든 행동약식(키보드, 마우스, 터치 등)
사용법 : <태그 on+이벤트명종류명 = "연결시킬 함수명">
  1. 마우스 이벤트
=> click , dbclick, mousedown, mousemove, mouseover, mouseout, moseup
  2. 키보드 이벤트
=> keydown, keypress, keyup
  3. 문서 로딩 이벤트
=> abort(문서가 로딩되기 전에 불러오기를 멈췄을 때), error(문서가 정확히 로딩되지 않았을 때)
load(문서 로딩이 끝났을 때), resize(문서 화면 크기가 바뀌었을 때), 
scroll(문서 화면이 스크롤 되었을 때), unload(문서에서 벗어날 때,IE 적용O,chrome 적용X)
  4. 폼 이벤트
=> blur(폼 요소에 포커스를 잃었을 때 발생, 커서가 다음 항목으로 이동 할 때 발생), required(필수입력)
      change(목록,체크 상태 등이 변경되면 이벤크 발생), <input><select><textarea>에서 사용
      focus(폼 요소에서 포커스가 놓였을 때), <label><select><textarea><button>
      reset(폼이 리셋되었을 때 )
      submit(submit 버튼을 클릭 했을 때)

 

DOM(document object model)

html, xml 문서를 하나의 객체로 정의.
읽어들인 문서의 구조대로 트리모양으로 메모리에 태그정보를 만들어서 관리해주는 API

기본원칙
1. 모든 HTML 태그는 요소노드입니다.
2. HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트노드입니다.
3. HTML 태그에 있는 속성은 자식 노드인 속성노드입니다.
4. 주석은 주석노드입니다.

DOM 접근하기
document.getElementById("id명")
document.getElementByClassName("class명")
document.getElementByTagName("태그명")
노드.querySelector(선택자)
노드.querySelectorAll(선택자 또는 태그)
요소명.innerText = 내용(프로퍼티는 텍스트 내용을 표시)
요소명.innerHTML = 내용(프로퍼티는 HTML 태그까지 반영)
document.createElement("생성할 태그명")
getAttribute("속성명")
setAtrribute("속성명","값")
요소.addEventListener(이벤트, 함수, 캡처여부)
document.요소명.style.속성명