웹/JavaScript11

• 

  [JavaScript] 프로토타입 프로토타입(prototype) 모든 객체는 프로토타입이라는 객체를 가지고 있음 모든 객체는 프로토타입으로부터 프로퍼티와 프로퍼티 메소드를 상속받음 프로토타입은 객체의 부모 객체 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며 상속되는 정보를 제공하는 객체를 프로토타입이라고 함 모든 객체는 Object.prototype을 기본으로 가진다. 모든 객체는 Object.prototype의 메서드와 프로퍼티를 상속받는다. 객체에 프로퍼티와 메서드 추가 function Dog(color, name, age){ this.color = color; this.name = name; this.age = age; } const Kuma = new Dog('brown', '쿠마', 10); console.log.. 웹/JavaScript 2023. 10. 30.

• 

  [JavaScript] 객체 객체(Object) 하나의 주제를 가지고 관련있는 프로퍼티(property)를 가지고 있는 집합 프로퍼티(property) 이름과 값으로 구성된 정렬되지 않은 집합 프로퍼티는 함수도 지정할 수 있음 -> 프로퍼티 메서디 객체를 생성하는 방법 리터럴 표기법 const 객체명 = { 프로퍼티명1:값1, 프로퍼티명2:값2 ... 프로퍼티명n:function(){ 프로퍼티가 호출되면 실행할 문장; ... } } ✓ obj.property const obj = { name:'kim', age:20, address:'동대문구', dis:function(){ console.log(`name: ${this.name}, age: ${this.age}, address: ${this.address}`); } } consol.. 웹/JavaScript 2023. 10. 30.

• 

  [JavaScript] 호이스팅 호이스팅 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것 var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않음 일반적으로 변수 선언은 상단에 명시적으로 위치시키는 것이 좋음 https://developer.mozilla.org/ko/docs/Glossary/Hoisting 호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 이동시키는 과정을 말합니다. developer.mozilla.org 웹/JavaScript 2023. 10. 29.

• 

  [JavaScript] 함수 사용자 정의 함수 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록 필요할 때마다 호출하여 해당 작업을 반복하여 수행할 수 있음 코드 재활용 자바스크립트에서는 함수도 하나의 타입이다. 함수를 정의하는 2가지 방법 1. 함수 선언식 함수 선언식은 선언하기 전에도 사용할 수 있다(호이스팅) 함수 이름 재정의 불가능 function 함수명(매개변수1, 매개변수2 ..){ 함수가 호출되었을 때 실행할 문장 .. return 값; } 변수 = 함수명(값1, 값2, ..); 2. 함수 표현식 함수 표현식은 변수에 함수를 할당하기 전까지는 사용할 수 없다. 함수 표현식은 주로 다른 함수의 인수로 전달되는 콜백 함수로 사용된다. ex) forEach ✓ 익명함수 const 상수명 = function(매개변수.. 웹/JavaScript 2023. 10. 29.

• 

  [JavaScript] 배열 배열 이름과 인덱스로 참조되는 정렬된 값의 집합(자료구조) 배열을 구성하는 각각의 값을 배열요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 함 let 배열명; 배열명 = [요소1, 요소2, 요소3, 요소4, ...]; const 배열명 = Array(요소1, 요소2, 요소3, ...); let arr; arr = [100, 200 ,300]; const Arr = Array(100, 200, 300); 자바스크립트의 배열은 요소의 타입이 같지 않아도 된다. let arr = [1, 1.4, 'hello', true]; 자바스크립트의 배열은 인덱스가 연속적이지 않아도 된다. // let arr; // 배열을 정의하지 않고 접근하면 에러 let arr = []; arr[0] = 10; arr[3.. 웹/JavaScript 2023. 10. 29.

• 

  [JavaScript] 제어문(조건문, 반복문) 조건문 if문 if(조건식){ 조건식의 결과가 true일 때 실행할 문장; ... } if-else문 if(조건식){ 조건식의 결과가 true일 때 실행할 문장; } else{ 조건식의 결과가 false일 때 실행할 문장; } if - else if - else 문 if(조건식1){ 조건식1의 결과가 true일 때 실행할 문장; ... } else if(조건식2){ 조건식2의 결과가 true일 때 실행할 문장; ... } else{ 모든 조건식의 결과가 false일 때 실행할 문장; ... } if문 예시 const age = Number(prompt('나이를 입력하세요')) if(num > 19){ console.log("성인입니다."); } else if(num > 14){ console.log("청.. 웹/JavaScript 2023. 10. 29.

• 

  [JavaScript] 대화상자 Web API 브라우저에서 제공하는 API(Application Programming Interface) alert() 사용자에게 메세지를 보여주고 확인을 기다림 alert('Hello!'); // window.alert('Hello!'); confirm() 사용자에게 메세지를 보여주고 확인이나 취소를 누르면 그 결과를 불린값으로 반환 const result = confirm('Yes or No'); console.log(result); prompt() 사용자에게 메세지를 보여주고 사용자가 입력한 문자열을 반환 const num1 = prompt('첫번째 숫자를 입력하세요'); const num2 = prompt('두번재 숫자를 입력하세요.'); console.log(Number(num1) + Numbe.. 웹/JavaScript 2023. 10. 28.

• 

  [JavaScript] 자동 타입 변환 자동 타입 변환 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환 number + string const num = 10; const str = '문자열'; console.log(`typeof(num): ${typeof(num)}`); console.log(`typeof(str): ${typeof(str)}`); console.log(`num + str: ${num + str}`); console.log(`typeof(num + str): ${typeof(num + str)}`); string * string const str1 = '3'; const str2 = '5'; console.log(`typeof(num): ${typeof(str1)}`); console.log(`t.. 웹/JavaScript 2023. 10. 28.

• 

  [JavaScript] 데이터 타입 데이터 타입(Data Type) 프로그램에서 다룰 수 있는 값의 종류 자바스크립트는 선언시 타입을 정하지 않기 때문에 문제가 발생할 수 있음 자바스크립트의 타입 유연성을 해결하기 위해 MS의 타입스크립트가 탄생 숫자형(number) 정수와 실수를 구분하지 않는다. 모든 수를 실수 하나로만 표현 ✓ 숫자형 let num; num = 10; console.log(num); ✓ 여러가지 number const num1 = 10; const num2 = 11.2; const num3 = 10e6; console.log(num1); console.log(num2); console.log(num3); console.log(typeof(num1)); console.log(typeof(num2)); console.lo.. 웹/JavaScript 2023. 10. 28.

• 

  [JavaScript] 변수 변수 데이터를 저장할 수 있는 메모리 공간 값이 변경될 수 있음 자바스크립트의 변수는 타입이 없음 let키워드를 사용하여 변수를 선언 var var name = "김사과"; console.log(num); var num = 10; { console.log(num); // 전역변수 num = 10 var num = 20; } console.log(num) // 전역변수 num = 20 var 키워드는 지역변수와 전역변수의 구별이 없다. 선언도 중복하여 할 수 있다. 변수 선언이 유연하지만 복잡하고 긴 코드에서 사용하는 경우 이미 선언한 변수인지 모르고 재선언하는 경우가 생길 수도 있기 때문에 차라리 let을 사용하는 것이 좋다. let let 변수명 = 값; let 변수명; 변수명 = 값; let은 지역변.. 웹/JavaScript 2023. 10. 25.

• 

  [JavaScript] JavaScript JavaScript란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있는 스크립팅 또는 프로그래밍 언어이다. JavaScript 특징 객체 기반의 스크립트 언어이다. 대소문자를 구별한다. 원래는 문장 끝에 ;(세미콜론)을 사용한다. 지금은 세미콜론을 생략해도 된다. JavaScript 출력 브라우저에서 바로 출력 브라우저에서 F12 -> 콘솔 사용한 브라우저는 크롬이다. 콘솔창 내에서 명령을 입력하면 동작을 바로바로 확인할 수 있다. 해당 콘솔창은 브라우저마다 지원하는 형식이나 정도가 다를 수 있다. HTML문서에서 출력 HTML 문서 작성을 위해 VScode를 실행한다. 2023.10.08 - [개발/웹] - [HTML] HTML이란 [HTML] HTML이란 HTML HTML은 Hype.. 웹/JavaScript 2023. 10. 20.