JavaScript19 [JavaScript] 프로토타입 기반의 자바스크립트와 상속 프로토타입 기반 프로그래밍 객체 지향 프로그래밍과 달리 어떠한 객체를 생성할 때, 처음 그 객체의 클래스를 정의하지 않는 것을 허용 → 클래스 기반 언어에서 상속을 사용하는 것과 다르게 객체를 원형(프로토타입)으로 하여 복제의 과정을 통해 객체의 동작 방식을 다시 사용 function Person(name){ this.name = name; this.getName = function(){ return this.name; } this.setName = function(name){ this.name = name; } } Person이라는 함수를 만들어, 함수 내부에 this 키워드를 이용해 변수를 만들고 함수를 대입하면 클래스처럼 사용가능 const me = new Person("jaein"); me.set.. 2021. 9. 5. [JavaScript] Document Object JavaScript는 HTML 요소에 접근하고 읽을 수 있게 설정됨 HTML에 접근할 수 있을 뿐 아니라, HTML을 변경하는 것도 가능 → JavaScript를 통해 console에서 변경한 내용으로 HTML 문서 내용은 변하지 않음, 새로고침 하면 다시 원래 title로 변경됨 브라우저는 HTML 정보가 들어있는 Document 라는 객체(Object)를 전달 이러한 객체의 전달로 사용자가 연결하는 작업 없이도 JavaScript는 이미 HTML에 연결되어있다는 것을 알 수 있음 함수를 이용해 element 찾는 방법 1 HTML 문서 body 태그 내부에 h1#title 태그 작성 Grab me! 아래 document의 내장 객체를 이용해 #title 요소를 가져와서 변수에 저장 const titl.. 2021. 9. 4. [JavaScript] 스코프(Scope)와 변수 var, let, const 스코프(Scope) 유효범위를 의미하는 것으로, 자바스크립트에서는 전역 스코프(Global scope), 지역 스코프 혹은 함수 레벨 스코프(Local scope or Function-level scope)로 나눔 전역 스코프 전역 변수가 가지는 스코프로, 코드 어디에서든지 참조 가능 지역 스코프 지역(함수)내에서 선언된 변수가 가지는 스코프이며 함수 코드 블록이 만든 스코프로, 함수 자신과 하위 함수에서만 참조 가능 → 이렇게 변수는 선언 위치에 따른 스코프를 갖게됨 JavaScript 는 블록 레벨 스코프(Block-level Scope)를 따르는 다른 언어들과 달리, 함수 레벨 스코프(Function-level scope) 를 따름 블록 레벨 스코프 모든 코드 블록(함수를 비롯한 if문, for문,.. 2021. 9. 3. [JavaScript] click event 실행 body 태그 내부에 h1.title 작성 Click me! 클래스이름으로 요소를 찾아 변수에 저장 const title = document.getElementsByClassName("title")[0]; 클릭 이벤트가 일어나면 실행될 코드를 함수 내부에 작성 function handleTitleClick(){ alert("title was clicked!"); } 클릭 이벤트를 실행하는 첫 번째 방법 HTML element 를 가져와 addEventListener() 를 실행 // HTML요소.addEventListener(type, 실행할 함수); title.addEventListener("click", handleTitleClick); addEventListener(): 말그대로 사용자가 type .. 2021. 9. 2. [JavaScript] 문서 객체 모델 DOM(Document Object Model) DOM(문서 객체 모델) HTML 문서에 접근하기 위한 일종의 인터페이스로 HTML 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법 제공 이러한 객체 모델을 이용하는 이유 새로운 HTML 요소나 속성 추가 가능 존재하는 HTML 요소나 속성 제거 가능 HTML 문서의 모든 HTML 요소 변경 가능 HTML 문서의 모든 HTML 속성 변경 가능 HTML 문서의 모든 CSS 스타일 변경 가능 HTML 문서에 새로운 HTML 이벤트 추가 가능 HTML 문서의 모든 HTML 이벤트에 반응 가능 요소의 선택 This is title detail 1 detail 2 detail 3 메서드 // document.getElementById //해당 아이디의 요소 선택 const contents = docu.. 2021. 8. 31. [JavaScript] 브라우저 객체모델 BOM(Browser Object Model) BOM(브라우저 객체모델) 브라우저에 포함된 모든 요소를 의미하며 브라우저 정보에 접근하거나 여러 기능들을 제어 - DOM(문서 객체모델)과 달리 W3C 표준객체모델은 아님 Window 웹 브라우저의 창을 나타냄 → JavaScript 의 모든 객체, 전역함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 됨, 최상위 객체 * 해당 객체의 가장 중요한 프로퍼티 중 하나가 document 객체 - 브라우저에 표시되는 내용에 해당하는 문서를 나타내는 객체 // 페이지가 전부 로드된 후 코드가 실행 onload // 새 브라우저를 생성 open("경로", "브라우저명", "옵션") // 브라우저를 닫음 close() // 경고창 alert("텍스트") // 사용자 입력창 prompt("질문", "기본.. 2021. 8. 30. 이전 1 2 3 4 다음
