본문 바로가기

JavaScript5

DOM(Document Object Model) DOM(Document Object Model) DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작할 수 있는 Model이다. 즉, JavaScript를 사용할 수 있다면, DOM을 이용하여 HTML을 조작할 수 있는 것이다. DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있으며, 소셜미디어 등에서 새롭게 생성되는 게시물을 저장하고 분류하는 작업을 구현할 수 있다. CRUD(Create, Read, Update and Delete) 앞으로 어떤 종류의 개발이나 컴퓨터 언어를 배우더라도, 당장 모든 속성과 메서드를 바로 외울 수는 없다. 그러므로 가장 중요한 CRUD를 먼저 이해하는 것이 새로운 언어.. 2023. 4. 26.
JavaScript - 다양한 메서드들 Math 내장 객체 메서드 Math.floor( ) : 괄호 안의 숫자를 내림하여 반환 Math.ceil( ) : 괄호 안의 숫자를 올림하여 반환 Math.round( ) : 괄호 안의 숫자를 반올림하여 반환 Math.abs( ) : 괄호 안의 숫자의 절대값을 반환 Math.sqrt( ) : 괄호 안의 숫자의 루트값을 반환 Math.pow(2, 5) : 2의 5승인 32를 반환 문자열 주요 메서드 .toLowerCase( ) : 문자열을 소문자로 변경 .toUpperCase( ) : 문자열을 대문자로 변경 .concat( ) : 문자열 연결 연산자 +처럼 문자열을 이어 붙임 .indexOf( ) : 문자열 내에 특정 문자가 몇 번째에 위치하는지 확인. 찾는 문자가 2개 이상일 경우 가장 앞에 있는 문자의.. 2023. 4. 18.
JavaScript - 클래스와 인스턴스 클래스(Class) 객체를 만들어 내기 위한 설계도 혹은 청사진이다. 일반적인 함수와 구분하기 위해 클래스는 보통 대문자로 시작하며 일반명사로 만든다. 참고로 일반적인 함수는 적절한 동사를 포함하며, 소문자로 시작한다. 인스턴스(Instance) 클래스를 바탕으로 한 객체를 인스턴스 객체, 줄여서 인스턴스라고 한다. New 키워드 new키워드를 사용하여 클래스의 인스턴스를 만들어낸다. 생성자(Constructor) 함수 객체를 만들고 기존 객체의 속성에 대한 값을 설정하는 특수함수. 인스턴스가 초기화될 때 실행된다. 실습 ES5) 클래스는 함수로 정의할 수 있다. function Car(brand, name, color){ // 인스턴스가 만들어질 때 실행되는 코드 } ES6) class라는 키워드를 이.. 2023. 3. 15.
JavaScript - 배열 , 객체 배열 다량의 데이터를 다룰 수 있는 배열 배열을 잘 다루기 위해서는 배열의 요소를 추가하거나 변경, 삭제하는 방법을 확실하게 학습해야한다. 배열의 기초 let myNumber = [73, 98, 86, 61, 96] 인덱스(index) [0] [1] [2] [3] [4] 요소(element) [73] [98] [86] [61] [96] myNumber[3]; // 61 myNumber[3] = 200; // 3번째 요소를 200으로 변경 배열의 반복 for(let n = 0; n < myNumber.length; n++) 배열의 메서드 console.table(myNumber) // 배열의 표로 보여줌 Array.isArray(myNumber) // true, 어떠한 데이터가 배열인지 아닌지 판별 myN.. 2023. 3. 4.
JavaScript - 데이터의 여러가지 타입들 Number 타입 정수(integer)와 실수(float) 모두 표현 할 수 있으며, typeof 연산자로 타입을 확인 할 수 있다. typeof 100; // 'number' typeof -100; // 'number' typeof 100.123 // 'number' 간단한 사칙연산보다 더 복잡한 계산을 위해서는 Math 내장 객체를 사용한다. Math.floor(100.4); // 100, 내림 Math.ceil(100.4); // 101, 올림 Math.round(100.6); // 101, 반올림 Math.abs(-100); // 100, 절대값 Math.sqrt(2); // 1.4142..., 루트값 Math.pow(2,5) // 32 , 2의 5승 String 타입 따옴표('), 쌍따옴표(").. 2023. 3. 4.