Notes/JavaScript10 JavaScript chapter. 5-1 JavaScript객체 Object객체 생성 방법: 객체 리터럴 표기법 중괄호 {} 안에 속성명(key)와 속성에 대한 값(value)을 담아 생성한다.const person = { name: 'Seyoon Jeong', nationality: 'South Korea', greet: function () { console.log('Hello, world'); },};여러 key: value의 쌍을 담을 수 있으며, 각각 콤마 ,로 구분한다.value에 함수를 입력하면 해당 속성은 메소드로 구분된다.key는 중복될 수 없다.객체의 value 접근 방법정적인 속성명객체명.key객체명['key']동적인 속성명객체명[key]메소드객체명.key()스프레드 연산자(...)객체 요소를 펼친다....객체명.. 2024. 9. 25. JavaScript chapter. 4-2 JavaScript배열 Array여러 데이터를 담고 있는 객체배열 생성 방법배열 리터럴: 대괄호 [] 사이에 여러 데이터를 콤마 ,로 구분하여 만든다. const array = [1, 2, 3, 4, 5]Array의 생성자 이용 const array = new Array(1, 2, 3, 4, 5)배열의 특징배열 요소: 배열 안의 데이터인덱스: 첫 번째 요소부터 0부터 시작하여 매겨지는 번호데이터가 없는 빈 배열 생성이 가능하다.다양한 유형의 데이터를 하나의 배열에 담을 수 있다.배열 내 데이터 접근 방법배열명[인덱스]를 이용하여 값에 대한 접근 및 수정이 가능하다.배열 멤버 (메소드 및 속성)멤버기능push()배열 마지막에 요소 추가 및 배열의 길이 반환pop()배열의 마지막 요소를 제거하고 해당 요소 .. 2024. 9. 23. JavaScript chapter. 4-1 JavaScript객체 Object자바스크립트는 입력 → 처리 → 출력의 절차대로 작업이 이루어진다.이 때, 자바스크립트에서 명령을 입력하여 어떤 처리를 지시하고자 하는 대상을 객체라고 한다.객체는 속성에 대한 값과 동작을 수행하는 기능을 가지고 있는 데이터이다.객체 접근 방식객체의 속성에 접근하는 방식객체의 속성명이 동적인 경우객체[속성명]객체의 속성명이 동적이지 않은 경우객체.속성명객체.['속성명']객체의 메소드에 접근하는 방식객체.메소드()생성자 함수객체를 정의할 때 사용하는 함수로,생성자 함수 내에서 this.를 이용하여 해당 객체의 속성이나 메소드를 정의할 수 있다.생성자 함수의 첫 글자는 대문자로 작성하는 것이 일반적이다.만들어진 생성자와 new 키워드를 이용하여 객체를 생성할 수 있다.// .. 2024. 9. 20. JavaScript chapter. 3-2 JavaScript이벤트 EventDOM에서 발생하는 다양한 상호작용 동작을 일컫는 프로그래밍 인터페이스이벤트 예시마우스 이벤트click 사용자가 요소를 클릭할 때dbclick 사용자가 요소를 더블 클릭할 때mousedown마우스 버튼을 누를 때mouseup마우스 버튼을 뗄 때mousemove마우스를 움직일 때mouseover마우스가 요소 위로 올라갔을 때mouseout마우스가 요소 밖으로 나갔을 때contextmenu마우스 오른쪽 버튼을 클릭할 때키보드 이벤트keydown 키를 눌렀을 때keypress키를 누르고 있을 때 (권장되지 않음)keyup키를 뗄 때포커스 이벤트focus 입력 요소에 포커스 되었을 때blur 입력 요소에서 포커스가 빠질 때폼 이벤트submit 폼이 제출될 때change 입력 요.. 2024. 9. 13. JavaScript chapter. 3-1 JavaScript함수 function함수란?특정 작업을 실행하는 코드 블록반복되는 작업이 있는 경우, 코드를 반복해서 쓰지 않고 함수로 정의함으로써해당 코드의 재사용이 가능해지고, 코드의 가독성이 좋아진다.함수 만드는 방법함수 선언식function 함수명() { // 실행할 작업}함수 표현식const 함수명 = function () { // 실행할 작업};함수 실행하기함수를 만들기만 해서는 아무런 일도 일어나지 않는다. 만든 함수를 호출해주는 코드 작성이 반드시 필요하다.const sayHello = function () { console.log('Hello');};sayHello(); // 함수 호출위와 같이 함수명 뒤에 소괄호 ()를 붙여 호출한다.함수 선언식 vs 함수 표현식함수 선언식 호이.. 2024. 9. 12. JavaScript chapter. 2-3 JavaScriptdocument.createElement()괄호 안에 HTML요소를 적으면 해당 요소를 만들어 반환한다.만들어진 HTML 요소는 브라우저에 바로 표시되지 않고 자바스크립트 코드에만 존재한다.e.g.const div = document.createElement('div');appendChild()DOM 내의 특정 요소(노드)에 자식 요소를 추가하고자 할 때 사용한다.e.g.const div = document.createElement('div');document.body.appendChild(div);append() 와의 차이점appendChild()는 노드 객체(HTML 요소)만을 자식 요소로 추가할 수 있지만, append()는 노드 객체뿐만 아니라 문자열을 자식 요소로 추가할 수 있.. 2024. 9. 11. 이전 1 2 다음