영최의 개발켈로그

1.클래스란? 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. 왜 필요한가? 실무에선 사용자나 물건같이 동일한 종류의 객체를 여러 개 생성해야 하는 경우가 잦다. 예를 들면 아래 코드와 같이 동일한 형식의 객체를 계속 생성했어야한다. 만약 객체 안에 실수로 키값을 정의하지 않으면 다음처럼 price 값이 undefined가 된다. let tv1 = { name: "aaa tv", price: 2000, size: "56inch", }; let tv2 = { name: "bbb tv", price: 3000, size: "27inch", }; let tv3 = { name: "ccc tv..

1.구조 분해 할당이란? 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법이다. 풀어 설명하면, 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 왜 필요한가? 개발을 하다보면 배열이나 객체의 전체가 아닌, 일부만 필요한 경우가 있다. 이럴 때 구조 분해 할당이 유용하게 사용된다고 한다. 또한 함수에서 매개변수가 너무 많거나 매개변수의 기본 값이 필요할 경우에도 유용하게 사용된다고 한다. 가.[배열]의 구조 분해 할당 1)배열 분해 할당 기존 배열 요소 확인 방법 const lists = ["apple", "grape"]; console.log(lists[0]); //기존 배열 요소 확인 방법 1. 배열 구조 분해 할당 - 요소마다..

1. addEventListener란? DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다. * 사용방법: 요소.addEventListener(이벤트, 명령) 선택 요소에 지정한 이벤트가 발생하면, 약속된 명령어를 실행 2. addEventListener 이벤트의 종류 1) Click 클릭 2) Mouse 계열 - Mouseover: 요소에 커서를 올렸을 때 - Mouseout: 마우스가 요소를 벗어날 떄 - Mousedown: 마우스 버튼을 누르고 있는 상태 - Mouseup: 마우스 버튼을 떼는 순간 3) Focus: 포커스가 갔을 떄 4) Blur: 포커스가 벗어나는 순간 5) Key 계열 - Keypress: 키를 누르는 순간 + 누르고 있는 동안 계속 발..

1. DOM이란? 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스 * 인터페이스란? 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 접점이나 경계면 * : 태그의 defer 속성은 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행됨을 명시합니다. 2. DOM을 통한 요소 선택 - 요소 선택자를 사용해서 가져옴 1) document.querySelector('요소 선택자') - 태그 중 맨 처음 요소를 가져옴 console.log(document.querySelector(".others")); console.log(document.querySelector("#green")); console.log(d..

1. Javascript 내장 메소드를 알아보자 ~! 1) 문자열관련 메소드 -> 기존 str 안바뀜 - length - 문자열 길이를 반환(공백 포함)// 속성이라 () 안씀 - toUpperCase()&toLowerCase() - 문자열 전제 대문자, 소문자 변경 - indexOf{''} - 문자열을 받아서 몇번째 인덱스인지 반환 - slice(startrldx,endldx)-시작~끝까지 슬라이싱, 음수값도 가능함 - replace(str1,str2) - 처음만 찾아서 변경 - replaceAll(str1,str2) - 모두 찾아서 변경 - repeat(n) - n번 반복 - trim() - 양끝 공백 없앰 - split() - 문자열을 배열로 바꿔주는 함수인데 '기준' 이 필요 if ''-> 전체 ..

1. 반복문이란? : 특정 조건을 만족할 때 같은 동작을 반복하여 수행하도록 만든 제어하는 명령문이다. 2. 반복문의 종류 1) for문 for (초기화식; 조건식; 증감식) { 실행문장;} 2) while문 - for문과 달리 조건을 변경하는 구문이 기본적으로 포함되어 있지 않기때문에 무한루프가 가능하다. - 무한 루프에 걸리지 않도록 주의하여 사용이 필요하다 while (조건문) {실행할 코드(명령문);} //1. 조건문을 사용하는 방법 let num = 0; while (num < 10) { console.log(`$(num+1)번째`); num++; } //2. if + break사용 let num2 = 0; while(true) { conole.log(`${num2+1}번째`); num2++ i..

1. 조건문이란? : 어떤 조건이 주어질 때 어떤 동작을 수행하도록 하는, 즉 조건에 따라 실행이 달라지게 할 때 사용되는 문장이다. 2. JavaScript 조건문의 종류 1) if a. if/else: if(조건) { //조건이 참이라면 실행 } else { //조건이 거짓이라면 실행 } b. if/elif/else - if-if 문과의 차이점은 if-if 문의 경우 두가지 조건을 모두 체크하는 반면, if-elif의 경우 위의 if 문이 만족되면 뒤의 elif문으로 넘어가지 않고 마치 채에 걸러지듯 if문이 아닌 것들만 elif문으로 넘어가서 조건을 판별하게 된다. 그래서 else-if => elif 이다. if(조건1) { //조건 1이 참이라면 실행 } elif(조건2) { //조건1이 거짓이고..

1. 함수란? : 특정 동작(기능)을 수행하는 일부 코드의 집합(부분)이다. 2. JavaScript의 함수 작성법 1) 함수 선언문 - 함수 선언문은 선언을 하면 마치 구조상 맨 꼭대기에서 선언한 것과 동일하게 동작하므로, 어디서든 호출 가능하다. -*호이스팅: 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 function 함수명(인자) {실행동작;} 2) 함수 표현식 - 함수 표현식은 함수 작성 이후에만 호출이 가능하다. let 함수 명 = function(인자){ 실행동작;} 3) 화살표 함수 - 함수 표현식과 동일하며, 축약된 형태이다. let 함수명 = (인자) => {실행동작;} 3. onclick이란? : 각각의 HTML요소에 속성 값으로 Js 함수를 연결하는 ..