본문 바로가기

학원

 (182)
[jQuery] Event Handle this 키워드 이벤트 처리 함수에서 this 키워드는 이벤트가 발생된 태그(Element 객체)를 표현한다. [html 태그] [html] jQuery Event Handle 점심 메뉴를 선택해 주세요. 가정식 백반 짜장면 짬뽕 설렁탕 순대국 삼계탕 쌀국수 돈까스 선택한 점심 메뉴는 ???입니다. $(selector).click(callback) : 선택자로 검색된 태그에서 click 이벤트가 발생될 경우 콜백함수(이벤트 처리 함수)를 호출하는 메소드 선택자로 검색된 태그의 내용이 변경되는 동적인 페이지를 구현할 수 있다. on 메소드 [html 태그] jQuery Event Handle 마우스를 클릭하거나 이동해 보세요. 선택자로 검색된 태그에서 click 이벤트가 발생된 경우 콜백함수를 호출한다. ..
[jQuery] 태그의 추가와 삭제 / 이동 태그의 추가와 삭제 [html 태그] 태그의 추가와 삭제 태그 이동 $(tag) : jQuery 함수의 매개변수로 HTML 태그를 전달받으면 자바스크립트의 Node(Element) 객체를 생성하여 제공받아 jQuery 객체로 반환 $(selector).appendTo(targetselector) : 선택자로 태그를 검색하여 타겟 선택자로 검색된 태그의 마지막 자식 태그로 이동하는 메소드 → 기존 태그를 검색하여 이동하는 메소드이지만 태그를 생성하여 이동 처리하는 것도 가능하다. $("").appendTo("#imageList1"); $("").appendTo("#imageList1"); $(selector).prependTo(targetselector) : 선택자로 태그를 검색하여 타겟 선택자로 검색된 ..
[jQuery] 메소드 (each, css, text, html) each 메소드 $(selector).each(callback([index][, element])) each 메소드는 선택자로 검색된 태그의 갯수만큼 콜백함수를 반복적으로 호출하는 메소드이다. (명시적 반복) 콜백함수의 매개변수에는 검색된 태그의 첨자와 태그의 Node(Element) 객체가 자동으로 저장되어 사용이 가능하다. [html 태그] each 메소드 each 메소드 호출-1 each 메소드 호출-2 each 메소드 호출-3 each 메소드 호출-4 each 메소드 호출-5 선택자에 의해 다수의 태그가 검색되면 태그의 갯수만큼 jQuery 객체를 생성하여 메소드를 호출한다. → 묵시적 반복 : 검색된 태그를 모두 jQuery 객체로 생성하여 메소드를 반복적으로 호출한다. → 검색된 모든 태그에 ..
[jQuery] 선택자(Selector) 선택자(Selector) 태그 선택자 태그 선택자는 태그명으로 태그를 검색하여 제공하는 선택자이다. 검색된 태그의 Node(Element) 객체로 jQuery 객체를 생성한 후 메소드를 호출할 수 있다. 다수의 태그가 검색된 경우 묵시적 반복에 의해 다수의 jQuery 객체가 생성되어 메소드를 호출한다. 예시) [html 태그] 선택자(Selector) jQuery Selector-1 jQuery Selector-2 jQuery Selector-3 jQuery Selector-4 [script 태그] $("h2").css("background", "yellow"); 클래스 선택자 클래스 선택자는 태그의 class 속성 값으로 태그를 검색하여 제공하는 선택자이다. 클래스 선택자는 태그 선택자와 구분하기 위..
[jQuery] jQuery란? / jQuery 라이브러리 이용법 jQuery jQuery는 이벤트 처리 및 태그 조작 기능을 제공하는 자바스크립트 라이브러리이다. jQuery를 사용하기 위해서는 저 script 태그를 사용하여 jQuery 라이브러리 파일을 웹문서에 포함시켜야 한다. → https://jquery.com/ 사이트 참조 방법1) jQuery 라이브러리 파일을 다운로드 받아 현재 서버의 자원으로 저장하여 웹문서에 포함시킨다. → 1.X : IE9 이하, 2.X 또는 3.X : IE10 이상 → 미압축파일(uncompressd) : 라이브러리 파일 변경 가능, 압축파일(compressd) : 라이브러리 파일 변경 불가능 download >> Download the compressed, production jQuery 3.7.0 >> 우클릭 : 다른 이름으로..
[JavaScript] 쿠키(Cookie) 쿠키(Cookie) 쿠키(Cookie)는 웹 서버가 클라이언트의 웹 브라우저에 저장하는 작은 데이터 조각이다. 이 데이터는 클라이언트와 서버 간의 상호작용을 추적하고 클라이언트의 상태를 기억하는 데 사용된다. 쿠키는 클라이언트의 로컬 컴퓨터에 텍스트 파일 형태로 저장되며, 웹 페이지를 방문할 때 웹 서버로부터 전송되고, 웹 브라우저에 의해 관리된다. 쿠키는 일정 기간 동안 지속되며, 만료일이 지나면 자동으로 삭제될 수 있다. 쿠키 사용 목적 1) 세션 관리: 쿠키를 사용하여 사용자의 세션을 식별하고, 로그인 상태를 유지하거나 세션 데이터를 저장할 수 있다. 2) 개인화: 사용자의 선호 설정, 언어 설정 등을 저장하여 맞춤화된 사용자 경험을 제공할 수 있다. 3) 트래킹 및 분석: 쿠키를 사용하여 사용자의..
[JavaScript] form 태그 관련 이벤트 (사용자 입력값 검증) form 태그 관련 이벤트 form 태그는 사용자로부터 값을 입력받아 제출 이벤트(Submit Event)가 발생되면 웹프로그램을 요청하여 입력값을 전달하는 태그이다. form 태그의 하위태그로 사용자로부터 값을 입력받기 위한 입력태그와 제출 이벤트(Submit Event)를 발생시킬 수 있는 태그가 반드시 작성되어 있어야 정상적인 동작이 가능하다. form 태그는 사용자 입력값을 검증한 후 정상적인 경우에만 동작되도록 프로그램을 설정하고 비정상적인 입력값이 있는 경우 form 태그가 동작되지 않도록 설정해주는 것이 중요하다. ★ 따라서 form 태그는 자바스크립트를 이용해서 사용자 입력값을 검증해 주는 것을 권장한다. form 태그 사용자 입력값 검증 예시 1) 아무런 이벤트도 발생하지 않는 butto..
[JavaScript] DHTML(Dynamic HTML) DHTML(Dynamic HTML) DHTML(Dynamic HTML)는 브라우저에서 이벤트가 발생될 경우 브라우저에 출력된 태그를 변경하여 동적인 페이지를 제공하는 방법이다. DHTML은 HTML, CSS, JavaScript, DOM(Document Object Model) 등을 활용하여 웹 페이지의 동적인 요소를 조작하고 변경하는 기술이다. DHTML 예시 DHTML 아이템 추가

티스토리툴바