본문 바로가기

자바스크립트(JavaScript)55

[JavaScirpt] 객체 생성자 함수(Object Contructor Function), 프로토타입(prototype) 모든 객체는 프로토타입(prototype)으로부터 생성자 속성을 상속받는다. 1. 객체의 생성자바스크립트에서는 다음과 같은 방법으로 객체를 생성한다. 1. 리터럴 표기(literal notation)를 이용한 방법리터럴 표기 법은 프로퍼티의 이름과 값을 콜론(:)으로 연결하고, 쉼표(,)를 사용해 다른 프로퍼티와 구분하는 방식이다.var 객체이름 = { 프로퍼티1이름 : 프로퍼티1의값, 프로퍼티2이름 : 프로퍼티2의값, ...};​2. 생성자 함수(constructor function)를 이용한 방법new 연산자를 사용하면 객체를 생성하고 초기화 할 수 있다.이때 사용되는 메소드를 생성자(constructor)라고 하며, 이 메소드는 새롭게 생성되는 객체를 초기화하는 역할을 한다.자바스크.. 2024. 8. 5.
[JavaScript] 함수의 호이스팅, 스코프, 전역함수, 지역함수 함수의 호이스팅 일반 함수 정의문(=이름이 있는 함수)의 경우 호이스팅 기능을 지원한다. 함수의 호이스팅은 함수 정의문보다 함수 호출문이 등장하더라도 해당 함수를 정상적으로 실행하는 것을 말한다.일반 함수가 정의되면 자바스크립트 엔진 메모리 공간 안에 함수의 이름을 이용하여 미리 저장해둔다.저장된 일반 함수는 해당 함수보다 호출문이 먼저 등장하더라도 정상적으로 호이스팅에 의해 실행된다.하지만 익명함수(=이름이 없는 함수)의 경우 호이스팅 기능이 적용되지 않는다.그렇기 때문에 함수 정의가 먼저 이루어진 다음 그 후에 함수 호출문이 등장해야 함수가 실행된다.// 1. 일반 함수 정의문// 함수호출문이 먼저 등장해도 호이스팅에 의해 정상 실행된다. 함수명(); function.. 2024. 7. 30.
[Java Script] 문서 객체 모델(DOM)과 DOM TREE, 노드 추가방법 문서 객체 모델Document Object Model (DOM)자바스크립트를 사용하는 이유는 특정 조건이 충족될 때 웹 문서 전체 또는 일부분을 제어하기 위해서이다.동적으로 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야한다.이러한 경우 문서객체모델을 사용하면 요소를 제어할 수있다.텍스트와 이미지가 들어있는 웹문서를 예로 들어보겠다.웹 브라우저는 마크업 정보를 보면서 단락의 개수나 내용을 확인하며 텍스트 내용을 분석하고 저장한다.또한 이미지 파일의 개수와 경로, 대체 텍스트등을 파악하여 이미지별로 정리 후 인식한다.이러한 텍스트나 이미지 요소를 브라우저가 제어하려면 두 요소를 따로 구별하여 인식하여야한다. 이러한 모든 정보 요소를 자바스크립트로 가져와서 프로그래밍할 때 DOM을 이용한다.D.. 2024. 7. 30.
[JavaScript] 문자열을 숫자로 반환하는 메서드 Number(), parseInt() 문자열 숫자를 숫자로 만드는이유자바스크립트에서는 "문자열 숫자"가 존재한다.문자열 숫자란 1,2,3,4와 같이 숫자의 모양이지만 숫자로서의 기능은 하지 못하고 문자로서 존재하는 숫자,즉 "문자형 데이터"를 말한다.예를들어 prompt와 같은 메서드를 사용할 경우 사용자가 숫자를 입력해도 문자형 데이터로 값을 반환 받는다.이렇게 받은 문자형 데이터는 숫자임에도 불구하고 문자형이기 때문에 산술연산이 불가능하다.이를 가능하게 만들기 위해 Number()와 parseInt() 메서드를 사용하는 것이다.  Number() Number 메서드는 말 그대로 숫자로 반환해주는 메서드이다.Number("123"); // 123Number("1.23") === 1.23 // trueNumber("12.3"); // 12... 2024. 7. 29.
[JavaScript] 매개변수(parameter)와 전달인자(arguments) 매개변수(parameter)가 있는 함수 정의문기본 함수 정의문은 함수 안에 있는 코드를 실행할 때 단순히 함수명으로 호출해서 함수를 실행했다.함수를 호출할 때 값을 전달할 수 없었던 것이다.하지만 매게 변수가 있는 함수 정의문은 함수를 호출하고자 할 때 전달하려는 값을 인수로 넣어 전달할 수 있다.매개변수의 키워드에는 let, var, const와 같은 예약어는 생략하여 입력한다.  매개변수는 함수호출문에 있는 인수가 순서대로 할당된다. 그렇기 때문에 매개변수와 인수의 개수가 같아야 오류가 발생하지 않는다.하지만, 만약 둘의 갯수를 다르게 사용하고 싶을 때는 어떻게 해야 할까?이때 매개변수에 초기값을 설정하면 값을 입력하지 않아도 그 부분은 초기값으로 설정되어 오류가 발생하지 않는다.1. 매개변수와 인.. 2024. 7. 29.
[JavaScript] 함수의 값을 반환하는 return 문 return return문은 함수에서 결과값을 반환할 때 사용한다.그리고 return문이 실행되면 반복문의 break문처럼 코드가 강제 종료된다.즉, return문의 아래에 코드가 더 있더라도 return문을 만나면 아랫줄의 코드는 무시하고 값을 반환한 후 함수를 종료한다.  반환된 값은 함수를 호출한 자리에 남는다.그렇기 때문에 함수 호출문이 변수 안에 담겨 있어야한다.// 기본형 1 function 함수명(){ 자바스크립트 코드1; return 반환할 값; // 값을 반환하고 종료한다. 자바스크립트 코드2; //return문 다음에 등장하는 자바스크립트 코드는 무시한다. } let 변수 = 함수명(); /.. 2024. 7. 29.

티스토리툴바