본문 바로가기

JavaScript

 (94)
자바스크립트 문서 객체 조작하기 자바스크립트 문서 객체 조작하기 📌 문서객체(document object) HTML 페이지에 있는 html, head, body, title, h1, div, span 등의 html 요소(element)를 자바스크립트에서는 문서객체라고 부릅니다. 📌 DOM 문서객체모델(Document Objects Model) 문서 객체를 조합해서 만든 전체적인 형태 문서객체를 조작하는 방법은 복잡하나 요즘에는 jQuery(라이브러리)와 React(프레임워크)를 사용해 문서 조작이 예전보다는 상대적으로 쉬워졌습니다. 📌 DOMContentLoaded 이벤트 HTML 페이지는 코드를 위에서 아래로 차례대로 실행합니다. body태그가 생성되기 전에 head태그에서 body태그에 무언가를 출력하고자 할 때, 문제가 발생합니다..
자바스크립트 객체와 배열 고급 자바스크립트 객체와 배열 고급 📌 속성 존재 여부 확인 객제 내부에 어떤 속성이 있는지 확인하는 것을 의미합니다. 객체에 속성이 접근하면 undefined 자료형이 나옵니다. 따라서 조건문으로 undefined인지 아닌지 확인하면서 속성 존재 여부를 확인할 수 있습니다. 📌 속성 존재여부 확인1 📌 속성 존재여부 확인2 if(object.name){ console.log('name 속성이 있습니다.') } else { console.log('name 속성이 없습니다.') } if(object.author){ console.log('author 속성이 있습니다.') } else { console.log('author 속성이 없습니다.') } 📌 속성 존재여부 확인3 object.name || console..
자바스크립트 객체의 속성과 메소드 사용하기 자바스크립트 객체의 속성과 메소드 사용하기 📌 기본자료형 숫자 문자열 불 📌 객체자료형 함수 배열 이외 전부 ... 자바스크립트는 유연하므로 기본 자료형이 객체 자료형이 될 수도 있습니다. 객체 자료형 📌 배열 > const a =[] undefined > a.sample = 10 10 > a.sample 10 > a [sample: 10] > typeof(a) 'object' > Array.isArray(a) true 속성과 메소드를 가질 수 있는 모든 것이 객체입니다. 그러므로 배열도 객체입니다. 📌 함수 > function b() {} undefined > b.sample = 10 10 > b.sample 10 > b ƒ b() {} > typeof(b) 'function' 함수는 '실행 가능한 객..
자바스크립트 객체의 기본 자바스크립트 객체의 기본 📌 객체(object) 추상적 의미로, 실제로 존재하는 사물을 의미한다. 이름(name)과 값(value)으로 구성된 속성(property)을 가지는 자바스크립트의 데이터 타입 배열도 객체입니다. 배열은 요소에 접근할 때 인덱스로 접근합니다. 인덱스 키 요소 속성 키 : 값 하지만, 객체는 키(key)를 사용해 속성에 접근합니다. 📌 속성과 메소드 구분하기 📌 메소드(method) 객체의 속성 중 함수 자료형인 속성 📌 this 메소드 내에 자기 자신이 가진 속성을 출력하고 싶을 때, 자신이 가진 속성임을 분명하게 표시하는 키워드 객체 생성 이후에 속성을 추가하거나 제거할 수 있습니다. 📌 동적으로 객체 속성 추가하기 stringify() 메소드를 사용하는데, 추후 자세히 살펴보..
자바스크립트 함수 고급 자바스크립트 함수 고급 자바스크립은 함수도 '하나의 자료'라는 개념을 가지고 있어서 중간에 만들 수 있다. 자바스크립트의 익명 함수는 문법적 가치를 크게 인정받아 다른 프로그램으로 전파. 람다 또는 익명 함수라는 이름으로 기본 문법에 포함되었다. 크롬 웹 브라우저(비동기 프로그래밍)가 생기면서 자바스크립트는 급속도로 빨라졌고 문법적 가치를 인정받아 지금까지 사용되고 있다. 📌 콜백함수 callback 매개변수를 전달하는 함수 익명함수 이용한 callback 📌 콜백함수를 사용하는 함수:forEach() 배열의 내부요소를 사용해서 콜백 함수를 호출해줌. 📌 콜백함수를 활용하는 함수:map() 콜백함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수 📌 콜백함수를 활용하는 함수:filter() 콜백함수..
자바스크립트 함수의 기본 형태 자바스크립트 함수의 기본 형태 📌 함수 코드의 집합 {}내부에 코드를 넣기 때문 📌 함수 호출 함수를 사용하는 것 📌 매개변수 함수를 호출할 때 괄호 내부에 여러 가지 자료를 넣는데, 이 자료를 매개변수라고 한다. 📌 리턴값 함수를 호출해서 최종적으로 나오는 결과 📌 함수를 사용하면 좋은점 반복되는 코드를 한번 정의해놓고 필요할 때마다 호출하므로 반복 작업을 피할 수 있다. 긴 프로그램을 기능별로 나눠 모듈화해두면, 전체 코드의 가독성이 좋아진다. 기능별(함수별)로 수정이 가능하므로 유지보수가 쉽다. 📌 익명함수 function() { } 📌 선언적 함수 function 함수() { } let 함수 = function() { }; 📌 매개변수와 리턴값 function 함수(매개변수, 매개변수, 매개변수)..
자바스크립트 반복문 자바스크립트 반복문 📌 for in 반복문 for (const 반복 변수 in 배열 또는 객체) { 문장 } 가장 초창기에 만들어진 반복문 형태로 코드를 추가해서 사용해야 안정적으로 쓸 수 있는 조금 위험한 반복문. for of 반복문이나 for 반복문을 활용하는 것이 좋다. 📌 for of 반복문 for (const 반복 변수 of 배열 또는 객체) { 문장 } 📌 for 반복문 횟수를 중심으로 또는 배열을 중심으로 반복할 때 사용 for(let i=0; i
자바스크립트 배열 자바스크립트 배열 📌 배열 자료를 묶어서 활용할 수 있는 특수한 자료 📌 배열 요소에 접근하기 배열[인덱스] 📌 배열 요소의 갯수 배열.length 📌 배열 요소 추가 배열.push(요소) 📌 특정 위치에 요소 추가 배열.splice(인덱스, 0, 요소) 두번째 매개변수에 0을 입력하면, 배열에 아무것도 제거하지 않는다는 뜻으로 3번째 매개변수를 추가하고 싶다는 의미가 된다. 즉, 인덱스 위치에 아무것도 제거하지 않고 요소를 추가하고 싶다. >const itemsD = ['사과', '귤', '바나나', '오렌지'] undefined >itemsD.splice(1,0,'양파') [] >itemsD (5) ['사과', '양파', '귤', '바나나', '오렌지'] 📌 배열 요소 제거 배열.splice(인덱스,..
자바스크립트 조건문 자바스크립트 조건문 📌 조건 분기 조건에 따라 코드가 실행할 수 도 있고 실행하지 않을 수도 있다. 코드가 실행되는 흐름을 변경하는 것 📌 if 조건문 if(불 값이 나오는 표현식){ 불 값이 참일 때 실행할 문장 } 📌 현재 시간을 구하는 코드 > const date = new Date() undefined > date.getFullYear() 2022 > date.getMonth() + 1 11 > date.getDate() 2 > date.getHours() 11 > date.getSeconds() 6 📌 오전과 오후 비교하기 if 조건문과 마찬가지로 문장이 하나일때는 중괄호{}를 생략할 수 있으나, 여러 문장일 때는 중괄호로 감싸야 한다. 📌 사용자로 부터 숫자 2개 입력받아 비교하기 prompt..
자바스크립트 자료형 변환 자바스크립트 자료형 변환 어떤 자료형의 값을 다른 자료형으로 변경하는 것 📌 문자열 입력 사용자로 부터 글자를 입력 받을 때 사용하는 함수 📌 불 입력 불 입력을 받는 함수 📌 숫자 자료형으로 변환하기 Number(자료) 예시 > "273" '273' > typeof("273") 'string' > typeof(Number("273")) 'number' > Number(true) 1 > Number(false) 0 > "52"-1 51 > typeof("52"-0) 'number' > typeof(true - 1) 'number' > true - 1 0 📌 문자열 자료형으로 변환하기 String(자료) 예시 > typeof(52.273) 'number' > typeof(String(52.273)) 'st..

티스토리툴바