JavaScript 5

241212 JavaScript 05 - HTML 요소 찾는 법, 이벤트 종류, 이벤트 리스너

1. HTML 요소 찾는 법  1) document.querySelector()(1) 아규먼트는 항상 문자열 타입.(2) CSS의 selector 형식(태그, 클래스, 아이디)을 아규먼트로 사용할 수 있음. 2) document.getElementById()(1) 아규먼트는 아이디 이름을 입력(#은 생략) 3) document.getElementsByClassName()(1) 아규먼트는 클래스 이름을 입력( .은 생략) 4) document.getElementsByTagName()(1) 아규먼트는 태그 이름을 입력 5) document.querySelector()와 document.getElementById() 메서드는 코드 제일 처음부터 순서대로 아이디를 찾기 시작해서 제일 먼저 발견되는 아이디의 요소..

JavaScript 2024.12.12

241211 JavaScript 04 - 객체

1. 객체(Object)1) JSON 2) 객체 프로퍼티 접근/변경 3) 메서드를 갖는 객체 4) 생성자 함수만약에 똑같은 형태의 객체를 여러개 만들어야한다면, 객체의 메서드를 일일이 다시 작성하는 번거로움이 있을 수 있다.그래서 JS에서는 똑같은 프로퍼티와 메서드들을 갖는 객체를 생성하는 방법을 여러가지 제공하는데, 그 중 하나가 생성자 함수이다.  * 생성자 함수에서 필드를 선언할 때는 반드시 앞에 this를 붙여야 함.  * 메서드를 선언할 때도 반드시 앞에 this를 붙어야 함.  (1) 파라미터가 있는 생성자 함수를 아규먼트 없이 호출할 경우 파라미터값에는 undefined가 할당된다. (2) default parameter를 활용하면 파라미터에 undefined가 들어가는 것을 방지할 수 있다..

JavaScript 2024.12.11

241210 JavaScript 03 - 분해 할당, 함수 기초, 배열 함수

1. Destructuring Assignment(분해 할당)1) 배열을 분해해서 변수에 할당하는 방법2) 배열의 원소 개수보다 변수의 개수가 적을 경우, 순서대로 변수에 값을 할당하고 남은 원소들의 값은 할당되지 않는다.3) 배열의 원소 개수보다 변수의 개수가 많을 경우, 순서대로 변수에 값을 할당하고 할당할 값이 없는 변수는 undefined값을 가지게 된다.4) rest 연산자(...)를 사용한 destructuring assignment(1) rest연산자 우측에 입력된 변수에 할당하고 남은 모든 원소들의 값이 할당된다.(2) 할당하고 남은 원소들이 2개 이상일 경우 남은 원소들을 저장하는 배열이 변수에 할당된다.   2. Function(함수)1) Java와 다른 점들을 주의해야 한다.   2)..

JavaScript 2024.12.10

241206 JavaScript 01 - HTML 파일에 JS 작성/로드하기, const 키워드, let 키워드

1. HTML 파일 안에서 JS 작성하는 방법   2. 별도로 작성된 JS 파일을 HTML에 포함시키는 방법 + const, let 키워드1) JS 파일을 작성한다. 2) body의 클로징 태그 위에 script 태그를 입력하여 JS 파일을 불러온다.  * body 요소의 끝부분에 입력하는 이유 : JS를 중간 부분에 넣으면,  JS를 해석(interpretation)하는데 걸리는 시간동안 화면 출력이 늦어진다. 3) 브라우저에서 실행시켰을 때 콘솔에 출력되는 결과   ※ 컴파일 언어와 스크립트 언어(1) 컴파일 언어  - 작성된 코드를 컴파일한 뒤 컴파일된 파일로 프로그램을 실행한다.    * 예: Java  - 코드에 에러가 있을 경우 컴파일 과정에서 에러가 확인된다. (2) 스크립트 언어  - 작성..

JavaScript 2024.12.06