전체 글 (132) 썸네일형 리스트형 DOM 기초(3) - DOMContentLoaded, Form 태그 이벤트, Element 생성 1) Event 1-1) DOMContentLoaded 1-2) Form 태그 이벤트 예제 1-3) Element 생성 1-4) 정리 2) 코드 실습 - Lotto 번호 뽑기(중복값, 정렬 이슈 해결) 1) Event +) // JS version1 function submitHandler() { alert("!!!"); } function init() { const form = document.querySelector("#loginForm"); // console.log(form); // 코드 동작 확인용 form.addEventListener("submit", submitHandler); // "submit" 이벤트는 form element에서만 이벤트 등록 가능. } document.addEvent.. DOM 기초(2) - Event, 코드 실습(Lotto) 1) Event 1-1) Element에 직접 넣기 1-2) DOM 속성으로 넣는 방법이 있음 1-3) addEventListener 2) 코드 실습 - Lotto 번호 뽑기 1) Event 1-1) Element에 직접 넣기 브라우저(웹 페이지 상 render가 되는 영역) 기준으로 배울 예정! 다양한 이벤트('click', 'mouseover', 'mouseout')에 대해 그 중 필요한 이벤트가 발동하여야 특정함수가 호출되도록 할 수 있음!! ...js function a() { console.log('hello world'); } ... 버튼 on[Event 이름] onClick onMouseout onMouseover 1-2) DOM 속성으로 넣는 방법이 있음 .. DOM 기초 - DOM, Window, Array 1) DOM / BOM 1-1) 정의 및 구분 1-2) Window(전역객체) 1-3) window.document 내의 메서드 2) Javascript 배열 2-1) push / pop 2-2) splice / slice 2-3) 선형검색(완전탐색) 2-4) 코드 예시 - Lotto 1) DOM / BOM 1-1) 정의 및 구분 DOM(Document Object Model) - 여기서 문서는 html을 의미함!! - DOM 또한 Javascript로 조작하지만 대부분의 사람들은 이 둘을 구분하여 배우려 함!! - DOM: Javascript로 HTML을 조작하는 기능을 '브라우저'로 구현한 것 - 브라우저는 HTML, CSS, Javascript를 해석해줌! BOM(Browser Object Mode.. Javascript 기초(6) - 상속 및 메서드 1) Javascript 상속 1-1) 객체지향 1-2) Prototype +) 호이스팅 / this 2) Javascript 메서드 및 생성자 함수 2-1) Date() 2-2) indexOf() +) 삼항 연산자 1) Javascript 상속 1-1) 객체지향 // 객체지향 프로그래밍 // 객체지향은 서양의 세계관을 가지고 있는데 // 이는 일종의 이분법적 사고(추상적 / 구체적)라고 볼 수 있다!! // 예를 들어 마우스라는 이미지(유선 마우스, 무선 마우스, 게이밍 마우스 등)를 그리면 // 각각 다르지만 마우스라는 특정 기능, 속성은 모두 다 같을 것이다!! // 추상적인 것(class)을 만든 후 그것을 통해 구체적인 것(instance)을 만든다!! /* class Chair { this.s.. Javascript 기초(5) - 객체 및 메서드 1) Javascript 함수 1-1) 함수 복습 - fibonacci 수열 2) Javascript 객체 2-1) 메서드 및 this 예약어 2-2) setter와 getter 2-3) 생성자 함수 2-4) class 1) Javascript 함수 1-1) 함수 복습 - fibonacci 수열 // 피보나치 수열을 구하는 함수 : 메모이제이션 기법을 사용한 함수 let memo = {}; function fibo(n) { let result; if (n in memo) { // memo는 객체이고, n은 매개변수임 result = memo[n]; } else { if (n == 1 || n == 2) { result = 1; } else { result = fibo(n - 1) + fibo(n - 2).. Javascript 기초(4) - 함수 및 객체 1) Javascript 함수 1-1) 함수 복습 1-2) 함수 표현식 1-3) 화살표 함수(arrow function) 1-4) 콜백 함수(callback function) 1-5) 콜스택 / 콜백 함수 활용 예시 2) Javascript 객체 2-1) 객체 생성 방법 2-2) 점 표기법 / 응용 방법 2-3) in 연산자 / for in 문 2-4) Spread Operator(스프레드 연산자) 2-5) 참조형 데이터 타입 활용 예시 1) Javascript 함수 1-1) 함수 복습 // 복습 // 함수 선언 /* 함수 호이스팅 : 함수 호출 구문이 함수 선언문보다 위에 있어도 코드가 정상 실행됨 (함수 선언문이 최상단으로 끌어올려저서 코드 형태 상에서는 호출 구문이 상단에 있는 것처럼 보여도 내부에.. Javascript 기초(3) - 함수 1) Javascript 함수 1-1) 함수 사용 이유 1-2) 함수 선언 및 호출 1-3) 매개변수 / 인자 1-4) return 1-5) 콜스택 / 힙 1) Javascript 함수 1-1) 함수 사용 이유 /* 함수 중복코드를 피하기 위해서 함수를 사용함!! */ // example : 동일한 결과를 출력하는 코드 간에도 함수를 사용하지 않을 시 아래와 같이 코드 양이 많아지고, 자연스레 코드 효율성 또한 떨어짐!! function showMessage() { console.log("hello world! I am developer."); } showMessage(); showMessage(); showMessage(); showMessage(); showMessage(); console.log(".. Javascript 기초(2) - 기본 문법 및 예시 코드 정리 1) Javascript 기본 문법 1-1) 변수 1-2) 데이터 타입 1-3) 연산자 1-4) prompt - I/O 1-5) 조건문 - if문 1-6) 반복문 - for문 2) 코드 실습 1) Javascript 기본 문법 1-1) 변수 // Javascript 변수 /* 예약어 var - hoisting let const */ var num = 1; let num2 = 2; num2 = 4; // let: 재선언 불가능, 재할당 가능 // 재선언하고 나서 에러 메시지 확인하기 const num3 = 3; // const: 재선언 불가능, 재할당 불가능 // 재선언과 재할당 시 에러 메시지 각각 확인하기 /* 예약어로 변수명을 만들 수 없음!!(ex. const로 변수명을 할 수 없음) */ 1-2).. 이전 1 ··· 12 13 14 15 16 17 다음
