JavaScript
-
jQuery 제이쿼리 이벤트, Ajax 비동기 처리JavaScript 2020. 9. 25. 23:58
🎯 자바스크립트 라이브러리 jQuery 이벤트 처리와 Ajax 비동기 처리 방법을 알아본다. jQuery 기본 Event .ready(function) HTML문서의 모든 DOM요소들이 완벽하게 사용할 준비가 되면 호출되어 function함수가 실행된다. 파라미터 안에 이벤트 핸들러나 jQuery 코드를 추가한다. 외부 리소스나 이미지와 상관없이 모든 돔 요소들이 준비되면 바로 호출되기 때문에 window.onload보다 빠르다. .on(events[,selector][,data],function) .on() 메서드는 .bind() 메서드와 마찬가지로 이벤트 핸들러를 등록하기 위하여 사용되는 메서드이다. .on() 메서드는 동적으로 생성될 요소에 대해서도 이벤트 처리가 가능하다. new $(functio..
-
jQeury 제이쿼리 기본문법, 선택자, 필터JavaScript 2020. 9. 24. 15:55
🎯 자바스크립트 라이브러리 제이쿼리를 알아본다. 제이쿼리(jQuery) 모든 브라우저에서 동작하는(크로스 브라우징) 자바스크립트 라이브러리 무료로 사용 가능한 오픈소스 라이브러리 돔 접근, 이벤트 연결, Ajax 애플리케이션 쉽게 구현 가능 css 선택자를 그대로 사용해서 동적 화면처리 가능 세팅방법 홈페이지에서 라이브러리를 다운받거나 cdn을 사용한다. CDN 사용방법 html에 제이쿼리 cdn 스크립트를 삽입한다. 제이쿼리 다운로드 후 이클립스 ee 다이내믹 프로젝트에서 사용방법 제이쿼리 홈페이지 접속 : https://jquery.com/ compressed는 압축버전이고 uncompressed는 비압축 버전이다. slim은 비동기통신이 빠진거라 안쓸거다. 용량이 다섯 배 이상 차이난다. 원하는 파..
-
자바스크립트 이벤트 핸들링 연습2JavaScript 2020. 9. 13. 23:11
🎯 자바스크립트의 다양한 이벤트 핸들링 문제를 연습해본다. 이벤트 처리 문제 연습 1. 증감 버튼 +버튼을 클릭하면 값이 1씩 증가하고 –버튼을 클릭하면 값이 1씩 감소하 도록 구현. 만약 값이 1인 상태에서 –버튼을 클릭하면 값이 감소되지 않고 1인 상태로 유지. 갯수 + - 2. 체크박스 선택 결과 출력 취미에 해당하는 체크박스를 선택하고 [결과보기]버튼을 클릭하면 선택 된 값들을 출력하는 예제이다. 취미 야구 농구 게임 결과보기 결과값: 3. 글자수 세기 textarea에 입력한 글자의 개수를 출력하는 예제이다. 글자를 입력할 때 마다 동시에 입력 문자수에 입력한 글자 개수가 출력된다. 글자수 세기 입력문자수: 4. 전체선택 체크박스 전체선택을체크하면모든체크박스가선택이되고,전체선택을해제 하면 모든 ..
-
자바스크립트 이벤트 핸들링 연습1JavaScript 2020. 9. 11. 21:14
🎯 자바스크립트 DOM level0 이벤트 핸들링 문제를 연습해본다. 이벤트 핸들링 문제연습 1. 사용중인 웹 브라우저 정보 출력하기 [보기]버튼을 클릭하면 브라우저 이름,브라우저 버전, 브라우저 온라인 여부를 출력한다. 사용중인 웹 브라우저 정보 보기 보기 브라우저 이름: 브라우저 버전: 브라우저 온라인 여부: 보기 버튼은 클릭이벤트로 info()함수를 호출한다. 자바스크립트의 info 함수는 span영역과 input 값을 셀렉해서 브라우저 정보를 입력한다. 브라우저 정보는 브라우저 관련 Navigator 객체를 사용하면 된다. 2. 특정 URL 접속하기 태그를 사용하지 않고 자바스크립트 코드를 사용하여 특정 URL로 접속해야 한다. [구글 사이트로 가기]버튼을 클릭하면 구글 홈페이지로 접속되고 사이트..
-
자바스크립트 form 객체, 이벤트 핸들링JavaScript 2020. 9. 10. 21:29
🎯 자바스크립트 폼 객체, 이벤트 핸들링, 이벤트 버블링을알아본다. Form 객체 폼은 클라이언트에서 서버에 입력 데이터를 전송하는 역할을 담당한다. 자바스크립트에서는 HTML폼에 form객체가 상호작용할 수 있도록 지원되며 document 객체의 속성으로 설정된다. 접근은 document.forms[] 배열을 통해 접근할 수 있다. 폼 이벤트 핸들러 onSubmit() : 사용자가 데이터를 전송했을 때 발생하는 이벤트 핸들러 onReset() : 리셋 버튼을 클릭했을 때 발생하는 이벤트 핸들러 action과 onSubmit 전송 버튼이 폼 태그 내에 위치하고 있다. 브라우저에서 전송 버튼을 누르면 폼 태그의 onsubmit 이벤트 핸들러가 자바스크립트의 test() 함수를 호출한다. 폼 태그의 액션은 ..
-
자바스크립트 DOM 객체 제어JavaScript 2020. 9. 9. 07:48
🎯 자바스크립트 DOM 구조, 노드 객체 접근방법을 알아본다. DOM( Document Object Model ) 웹페이지의 HTML문서 구조를 객체로 표현하기 위한 계층구조이며 문서를 나타내는 최상위 객체는 document 객체이다. 자바스크립트를 사용하여 html 태그에 접근할 수 있다. 웹페이지가 로드될 때, 웹브라우저는 페이지의 DOM을 생성하고 트리구조로 관리한다. 각 객체를 노드라고 한다. 엘리먼트 노드, 텍스트 노드, 속성 노드가 있다. 노드 속성과 메소드 자바스크립트를 이용해 페에지의 모든 태그, 속성, CSS스타일을 변경할 수 있고 이벤트 처리가 가능하다. 부모와 자식노드 관계 DOM 객체에 직접 접근하기 getElementById() - id 값으로 접근한다. document.getEl..
-
자바스크립트 Built-In 내장객체JavaScript 2020. 9. 8. 18:31
🎯 자바스크립트 빌트인 객체를 알아본다. 객체의 프로퍼티와 메소드 객체는 프로퍼티와 메소드를 사용해서 표현한다. 프로퍼티는 객체의 상태를 저장하는 변수를 뜻하며 메소드는 객체의 동작을 지정하는 함수를 의미한다. 자바스크립트는 객체 생성시 생성자 함수를 사용하며 런타임시 객체에 멤버를 동적으로 추가할 수 있다. 내장객체란? 내장(built-in)객체는 자바스크립트 시스템에서 정의된 객체로 그냥 불러서 사용할 수 있다. 데이터 관련 객체와 브라우저 관련 객체, HTML 관련 객체(DOM)가 있다. 데이터 관련 객체 String 객체 문자열과 관련된 데이터를 관리하는 객체로 new를 이용해 객체를 생성하거나 var str = new String(“hello”); 리터럴을 이용해 객체생성을 할 수 있다. var..
-
자바스크립트 함수 선언, 콜백, 호출 스케줄링JavaScript 2020. 9. 7. 21:12
🎯 자바스크립트 함수선언 방법, 고급함수, 유틸리티 함수를 알아본다. 함수의 정의 방법 3가지 선언적 정의 방법(이름있는 함수) 함수 선언식은 코드 안에 독자적인 구문 형태로 존재하며 함수명을 반드시 정의해야 한다. 매개 변수가 없는 경우 function func1() { alert("javascript") } 매개 변수가 있는 경우 function func2(name) { document.write(name + "님 안녕하세요."); } 리턴 값이 있는 경우 function func3(value) { var ans; ans = value + 200; return ans; } 함수 생성 시점 func4(); function func4(){ ... } 선언식 함수는 프로그램 컴파일 단계에서 생성되기 때문에..