💻 <!-- dev -->/JavaScript | jQuery

[jQuery] 04_필터링 선택자

더보기 jQuery의 필터링 선택자에 대해 알아보자 잠깐! 들어가기 전에 파일이 바뀔 때마다 반드시 라이브러리 연결해 주기 필터링 관련 선택자 및 메소드 필터 관련 선택자 👉🏻 선택자:first => 첫 번째 👉🏻 선택자:last => 마지막 👉🏻 선택자:even => 짝수 번째 (기준은 0번부터 시작점이 잡힌다!) 👉🏻 선택자:odd => 홀수 번째 이름 혈액형 거주지 홍길동 A형 서울 김영희 B형 경기도 이순신 O형 부산 총인원 3명 필터링과 관련된 메소드 기준이 되는 요소 중에서 특정요소들만 걸러서 선택해 주는 메소드 👉🏻 태그명:first() : 태그 요소 중 첫 번째 것을 선택 👉🏻 태그명:last() : 태그 요소 중 마지막 것을 선택 👉🏻 태그명:filter() : 태그명일 뿐만 아니라 괄호..

[jQuery] 03_추가적인 선택자

더보기 jQuery의 추가적인 선택자에 대해 알아보자 잠깐! 들어가기 전에 파일이 바뀔 때마다 반드시 라이브러리 연결해 주기 자손 선택자(>)와 후손선택자( ) 👉🏻 a>b: 자손선택자 => a의 자손들 중에서 b에 해당하는 요소를 선택 👉🏻 a b: 후손선택자 => a의 후손들(자손 포함) 중에서 b에 해당하는 요소를 선택 자손1 div의 후손이면서 ul의 자손1 div의 후손이면서 ul의 자손2 div의 후손이면서 ul의 자손3 div의 후손이면서 ul의 자손4 div / ul의 후손이면서 li의 자손 자손2 자손3 속성 선택자 👉🏻 선택자[속성]: 특정 속성을 가지고 있는 모든 요소 선택 👉🏻 선택자[속성=속성값]: 속성값이 특정값과 "일치"하는 모든 요소 선택 👉🏻 선택자[속성~=속성값]: 속성값..

[jQuery] 02_기본 선택자

더보기 jQuery의 기본 선택자에 대해 알아보자 기본 선택자 잠깐! 들어가기 전에 파일이 바뀔 때마다 반드시 라이브러리 연결해 주기 ✔️ .css(): 요소 객체에 스타일과 관련된 기능을 수행 ✔️ .html(): 선택된 요소의 innerHTML과 관련된 기능들을 수행하는 메소드 ✔️ .click() : 클릭 이벤트와 관련된 기능을 수행하는 메소드 ✔️ .val() : value 속성과 관련된 기능을 수행하는 메소드 ✔️ .attr() : 그 이외의 속성들과 관련된 기능을 수행 ✔️ .addClass() : 선택된 요소에 클래스를 추가해 주는 메소드 ✔️ .removeClass() : 선택된 요소에 클래스를 제거해 주는 메소드 *아이디 선택자: $("#아이디명") 👉🏻 특정 고유한 아이디값을 가진 요소..

[jQuery] 01_jQuery의 개요

더보기 jQuery의 개요에 대해 알아보자 jQuery란? ✔️ 기존에 자바스크립트 언어만으로 구현하기에 복잡했던 구문 작성들을 "간소화"하기 위해 "존 레식"에 의해 개발 JavaScript 기반의 라이브러리 (유용한 기능들의 모음집) 즉, JavaScript 언어로 유용한 함수나 내용들이 이미 만들어져 있는 (정의되어 있는) 모음집 (=> 바로 쓸 수 있는 건 아니며, .js 파일로 라이브러리 연결해서 가지고 와야 함) ✔️ 복잡한 자바스크립트 구문을 보다 짧고 쉽게 개발 가능 ✔️ 적은 양의 코드로 빠르고, 풍부한 제공 가능 jQuery 장점 👉🏻 DOM 요소(html 태그들)와 관련된 스크립트들보다 쉽게 구현할 수 있음 👉🏻 AJAX (비동기식 통신 - 화면이 깜빡거리지 않고 페이지 이동 가능),..

[JavaScript] 13_정규 표현식을 활용한 회원가입 폼

* 아이디 : 첫 글자는 만드시 영문자로, 그리고 영문자, 숫자를 포함하여 총 4~12자로 입력하시오. * 비밀번호 : 영문자, 숫자, 특수문자로 총 8~15자로 입력하시오. * 비밀번호 확인 : 위의 비밀번호와 일치하게 입력하시오. * 이름 : 한글로만 이루어져야 하며 2글자 이상으로 입력하시오. * 이메일 : 이메일 형식에 맞춰서 입력하시오. * 취미 : 축구 농구 야구 독서 * 거주지 : 서울 인천 부산

[JavaScript] 12_정규 표현식

더보기 JavaScript의 정규표현식에 대해 알아보자 정규표현식 ✔️ *정규 표현식(REGEX / REGEXP : Regular Expression)이란? 특정 패턴을 가진 문자열을 찾거나 또는 찾아서 변경(치환)할 때 사용하는 형식 언어 정규 표현식을 이용하면 문자열에 대해 특정 패던 조건 검사 시 또는 치환 시 복잡한 조건을 제시할 필요가 없어 간단하게 처리 가능 자바스크립트 뿐만 아니라 자바나 오라클 등 다른 언어에서도 사용 가능 정규 표현식 객체 생성 및 정규 표현식과 관련한 메소드들 👉🏻 정규 표현식 객체 생성 == 정규식 변수를 선언 정규 표현식을 제시하려면 우선적으로 정규 표현식 객체를 생성해 줘야 함 - 방법 1: 기본 내장 클래스 RegExp의 객체를 생성하고 그 안에 문자열 제시 - ..

[JavaScript] 11_이벤트

더보기 JavaScript의 이벤트에 대해 알아보자 이벤트(event) ✔️ 이벤트 관련 용어 1. event target : 이벤트를 당하는 요소 객체 2. event type : 이벤트 종류 3. event handler : 해당 이벤트가 발생했을 때 동작하는 코드 1. 이벤트 모델 종류 👉🏻 고전 이벤트 모델 (== 기본 이벤트 모델) 👉🏻 인라인 이벤트 모델 (우리가 그동안 자주 사용한 방식 - button 태그에 onclick 바로 설정) 👉🏻 표준 이벤트 모델 (표준을 지키지 않는 브라우저에서는 동작 안 함) *고전 이벤트 모델 (기본 이벤트 모델) 👉🏻 요소 객체를 코드상으로 끌고 와서 해당 요소 객체의 이벤트 속성에 접근한 후 이벤트 핸들러를 연결하는 방식 이벤트를 추가할 수도 있지만 이벤..

[JavaScript] 10_window용 객체

더보기 JavaScript의 window용 객체에 대해 알아보자 window용 객체 ✔️ window 객체는 자바스크립트의 최상위 객체이며 크게 BOM과 DOM으로 나뉨 - BOM(Browser Object Model): 브라우저창을 핸들링 가능 종류: window, location, screen, navigator, history - DOM(Document Object Model): 요소들을 핸들링 가능 종류: document - window.open("url", "창의이름", "창의특성"); 👉🏻 window.open("url", "창의이름", "창의특성"); 첫 번째 매개변수: 새 창에서 열고자 하는 url 주소 두 번째 매개변수: 창의 이름, 창의 이름이 이미 같은 게 열려 있을 경우 새로이 열리..

[JavaScript] 09_객체 2

더보기 JavaScript의 객체에 대해 알아보자 객체 배열을 이용한 다량의 데이터 관리 실행확인 생성자 함수 👉🏻 new 키워드를 사용해서 객체를 생성할 수 있는 함수를 의미(함수명 제시 시 첫 글자를 대문자로) => 자바로 따지면 클래스와 동일한 역할 (내가 만들고자 하는 객체의 틀을 정의) 실행확인 Date 내장 객체 👉🏻 Date() : 현재 날짜 및 시간 👉🏻 getFullYear() : 년도만 알아내고 싶을 때 👉🏻 getMonth() : 월만 알아내고 싶을 때 👉🏻 getDay() : 요일만 알아내고 싶을 때 👉🏻 getHours() : 시간만 알아내고 싶을 때 👉🏻 getMinutes() : 분만 알아내고 싶을 때 👉🏻 getSeconds() : 초만 알아내고 싶을 때 실행확인

[JavaScript] 08_객체 1

더보기 JavaScript의 객체에 대해 알아보자 객체 ✔️ 객체는 중괄호 {}를 사용해서 생성하고, 중괄호 안에 이 객체에 필요로 하는 속성들을 정의함 이 속성들은 속성:속성값 형태로 정의함 ('키:밸류' 형태와 같음) 속성값으로는 모든 자료형의 값을 담을 수 있음 (문자열, 숫자, 논리값, 배열, 객체, 함수, ...) [ 표현법 ] var 변수명 = { 속성명 : 속성값, 속성명 : 속성값, 속성명 : 속성값, ... }; *속성명이 키값, 속성값이 밸류값이 됨 해당 객체 내부의 각 속성에 접근하는 방법 👉🏻 객체명['속성명'] // 홑따옴표, 쌍따옴표 모두 가능 👉🏻 객체명.속성명 실행확인 객체 생성 특이케이스 (속성명 제시 시 반드시 문자열 형태로 제시해야 하는 케이스) 👉🏻 기존의 자바에서의 ..