Javascript (28) 썸네일형 리스트형 [새싹 프론트엔드] 4주차 - 5 이벤트 기초 및 활용 이벤트 개요 • 이벤트 마우스 클릭, 키보드 입력 등 사용자의 입력 행위나 문서 또 는 브라우저의 상태 변화를 자바스크립트 코드에게 알리는 통지 • 이벤트 리스너 발생한 이벤트에 대처하기 위해 작성된 자바스크립트 코드 • 이벤트 종류 HTML5에서 이벤트 종류는 70여개 이벤트 리스너 이름은 이벤트 이름 앞에 ‘on’을 붙인다. 주요 이벤트 리스너 이벤트 리스너 이벤트가 발생하는 경우 onkeydown 사용자가 아무 키나 누르는 순간 onkeyup 사용자가 누른 키를 놓는 순간 onclick 사용자가 객체를 클릭할 때 ondblclick 객체에 더블 클릭할 때 onmousedown 마우스 버튼이 눌러지는 순간 onmouseover 마우스 커서가 객체 안으로 들어가는 순간 onmous.. [새싹 프론트엔드] 4주차 - 4 고차함수(Higher-order function) 고차함수 • 인자로 함수를 받거나 함수를 반환하는 함수 • 함수 안에서 다른 함수를 원하는 시점에 호출할 수 있는 권한을 가진 함수 안에 자식 함수를 원하는 시점에 부를 수 있는 함수 콜백함수 인자로 전달되는 시점에 바로 함수를 호출하는 것이 아닌 고차 함수 내부에서 필요한 순간에 (실행하라고 하는 요청하는 시점에) 호출을 하는 함수 calc라는 매개변수를 함수처럼 사용 함수의 인자로 a,b 전달 calc - 고차함수 add,sub - 콜백함수 실습) 콜백함수 자바스크립트에서 제공하는 함수 setTimeout 고차함수 : setTimeout 매개변수를 함수로 받아줌 콜백함수 : function{} 5초뒤에 저 함수를 딱 한번만 실행할 것임 이 함수는 실제.. [새싹 프론트엔드] 4주차 - 3 객체와 클래스 • 객체(Object) 실생활에 존재하는 실제적인 물건 또는 개념 • 속성(Attribute) = 변수 객체가 가지고 있는 특성 • 메서드(Method) = 함수 객체가 동작(행동)할 수 있도록 하는 함수 - 메서드 안에는 함수만 담기 클래스 (es6 버전에서 새롭게 생김) • 객체가 가져야 할 기본적인 정보를 담은 코드 • 객체를 효율적으로 생성하기 위해 만들어진 구문 ( 일종의 설계도 ) 겉모습은 똑같아도 안에 담는 재료는 다다르다 틀은 붕어빵을 만들기 위한 설계도 클래스가 있으면 붕어빵을 쉽게 만들 수 있당 중복되는 코드들을 모아가지고 갖고있음 - 생성자 함수랑 같음 생성자 함수 vs 클래스 생성자 함수 • new 키워드가 생략되면 일반 함수로 호출됨 • function 키워드로 정의.. [새싹 프론트엔드] 4주차 - 2 함수란? • 목적을 가지고 작성된 코드 블록 • 데이터를 전달받아 처리한 후, 결과를 돌려주는 코드 블록 반복적인 코드를 줄여주며 코드 재사용과 유지보수가 용이해짐 함수의 구성과 호출 자바스크립트는 타입 (문자열 숫자 등) 상관 없지만 다른 언어는 문자열은 문자열만 숫자는 숫자열만 지정해야 하는 특성이 있음 실습) 대표적인 자바스크립트 함수 • eval() 함수 식을 계산하고 결과 리턴 var res = eval("2*3+4*6"); // res는 30 • parseInt() 함수 문자열을 숫자로 바꿔주는 함수 var l = parseInt("32"); // "32"를 10진수로 변환, 정수 32 리턴 var n = parseInt("0x32"); // "0x32"를 16진수로 해석, 정수 50 리턴 •.. [새싹 프론트엔드] 4주차 - 1 객체 자바스크립트 객체 구성 • 여러 개의 프로퍼티(property)와 메소드로 구성 • 프로퍼티 : 객체의 고유한 속성 *객체는 중괄호를 열고 닫음 • 메소드(method) : 함수 배열과 객체의 차이점 • 배열은 원소에 접근 할 때, 숫자를 사용 • 객체는 원소에 접근 할 때, 문자열을 사용 • 문자열은 키(key) 또는 프로퍼티(property)라 부름 • 문자열이 가리키는 원소를 값이라 함 • 배열은 여러 개체를 표현할 때 사용 • 예) 여러 동물의 이름이 나열된 배열 • 객체는 다양한 특성이나 속성이 있는 하나의 개체를 표현 할 때 사용 • 예) 한 동물과 관련된 여러 정보를 저장 객체 생성 한 가지 동물에 관한 여러 정보를 저장 • 다리가 두 개인 고양이 ‘야옹이’에 대한 정보가 저장된 객체 .. [새싹 프론트엔드] 3주차 - 3 배열 • 데이터 값을 하나의 목록으로 생성 • 여러 개의 원소들을 연속적으로 저장하고, 전체를 하나의 단위로 다루는 데이터 구조 예) 가장 좋아하는 과일 3가지 목록 var 과일TOP3 = [“딸기”, “사과”, “바나나”] ▶ 변수 3개를 작성하지 않고, 과일TOP3라는 배열 하나만 생성 배열을 배워야 하는 이유 배열을 이용하면 변수를 이렇게 만들지 않아도 가능 배열 생성 ✔️ 대괄호([ ]) 사용 ✔️ 대괄호 안에 값을 입력. 여러 개일 경우 쉼표(콤마)로 구분 예시 1) 배열 원소 접근 • 원하는 원소 색인(index)에 대괄호 사용 • 배열의 첫 번째 원소가 0번, 두 번째 원소가 1번 딸기라는 값만 보고싶으면 딸기[0] 대괄호 안의 색인을 변경 배열의 원소를 설정 및 변경, 추가 가능 배열에 새.. [새싹 프론트엔드] 3주차 - 2 조건문 & 반복문 조건문 조건문이란? 조건을 검사하여 참인지 거짓인지에 따라 서로 다른 작업(코드)을 실행 자바스크립트의 조건문 • if-else • switch if문 조건식이 참이면 실행문을 실행한 후 if문을 벗어남 조건식이 거짓이면 바로 if문을 벗어남 true일때만 문을 열어줌 (실행) false일때는 문을 열 수 없으며 (아예 실행할 수 없음) 중괄호 바로 밑에 있는 코드를 실행 (중괄호 안에 있는 코드 실행을 못하고 다음 코드로 바로 넘어감) if-else문 조건식이 참인 경우와 거짓인 경우에 다른 코드를 실행 다중 if-else if-else를 연속 작성하여 각 조건에 맞는 코드를 실행 Prompt prompt ("질문" , 초기값) 프롬프트는 매개변수가 2개 들어갈수 있음 첫번째 매개변수는 질문 이라고 볼.. [새싹 프론트엔드] 3주차 - 1 자바스크립트 개념 / 자료형과 변수 Javascript 자바스크립트 웹 페이지에서 동작하는 프로그램을 만들 때 사용 웹 페이지가 어떻게 보일지 제어 사용자가 버튼을 클릭했을 때 페이지가 반응을 보이게 함 사용 분야 웹 어플리케이션 지도 서비스, 게임 등 다양한 분야 페이스북, 트위터 등의 사이트 이메일 전송, 댓글 달기, 웹사이트 탐색 등 서버 개발 (Node.js) 자바스크립트의 역할 사용자의 입력 및 계산 처리 • HTML은 입력 창만 제공할 뿐, 입력을 받고 계산하는 기능은 없음 • 키나 마우스의 입력과 계산은 자바스크립트로 처리 웹 페이지 내용 및 모양의 동적 제어 • 자바스크립트로 HTML 태그의 속성이나 컨텐츠의 값을 변경 브라우저 제어 • 브라우저 크기나 모양 변경, 새 윈도우나 탭 열기 • 다른 웹 사이트 접속 등 웹 서버와.. 이전 1 2 3 다음
