jQuery 02. 기타선택자
2022. 12. 23. 19:42
Front/jQuery
1. 자손선택자(>)와 후손선택자() 자손1 div의 후손이면서 ul의자손1 div의 후손이면서 ul의자손2 div의 후손이면서 ul의자손3 div의 후손이면서 ul의자손4 div, ul의 후손이면서 li의 자손 자손2 자손3 HTML 삽입 미리보기할 수 없는 소스 2. 속성선택자 선택자[속성] : 특정속성을 가지고 있는 모든 요소 선택 선택자[속성=특정값] : 속성값이 특정값과 "일치"하는 요소들 선택 선택자[속성~=특정값] : 속성값에 특정값을 "단어로써 포함"하는 요소들 선택 선택자[속성^=특정값] : 속성값이 특정값으로 "시작"하는 요소들 선택 선택자[속성$=특정값] : 속성값이 특정값으로 "끝"나는 요소들 선택 선택자[속성*=특정값] : 속성값에 특정값을 "포함"하는 요소들 선택 HTML 삽입 ..
jQuery 01. 개요 및 기본 선택자
2022. 12. 23. 19:15
Front/jQuery
jQuery란 ? 기존에 자바스크립트 언어만으로 구현하기에 복잡했던 구문 작성을 간소화하기 위해 "존레식" 에 의해 만들어짐 JavaScript기반의 라이브러리 ( 유용한 기능 모음집) 즉, JavaScript 코드로 유용한 함수나 내용들이 이미 정의되어있는 모음집 jQuery 의 장점 1) 복잡한 자바스크립트 구문을 보다 짧고 쉽게 개발가능 (적은양의 코드로 빠르고 풍부한 기능 제공) 2) DOM요소와 관련된 스크립트를 보다 쉽게 구현할 수 있음 3) AJAX(비동기식 통신), 이벤트 처리 등등 폭넓게 지원 4) jQuery와 관련된 확장형 플러그인, 오픈 api등을 지원 (차트, 슬라이드, 애니매이션등 ) jQuery 라이브러리 연결 방법 - head태그 내에 script로 외부 jQuery관련 .j..
JavaScript 11. 정규표현식
2022. 12. 22. 16:58
Front/JavaScript
정규표현식 (REGEX | REGEP : Regular Expression) 특정 패턴을 가진 문자열을 찾거나 또는 찾아서 변경(치환) 할때 사용하는 형식 언어 정규 표현식을 이용하면 문자열에 대한 특정 패턴 조건 검사시 복잡한 조건을 제시할 필요없이 간단해짐 -> 주로 회원가입 페이지 등에서 이용 정규표현식 객체 생성 및 정규표현식과 관련된 메소드 1. 정규표현식 객체생성 = 정규식 변수를 선언 : 검색조건으로 삼고자하는 문자열 또는 특정패턴 만들어두기 방법1) const regExp = new RegExp("문자열"); 방법2) const regExp2 = /문자열/; 2. 정규표현식 관련 메소드 * RegExp 객체에서 제공하는 메소드 (정규식.xxx(문자열)) - 정규식.test(문자열) : 문자..
JavaScript 10. 이벤트
2022. 12. 21. 16:52
Front/JavaScript
이벤트 모델 종류 고전이벤트 모델(기본 이벤트 모델) : 특정 요소 객체를 가지고와서 해당 요소의 이벤트 속성에 접근한 후 이벤트 핸들러를 연결하는 방식 이벤트 제거시에는 null 대입 실행확인 실행확인 HTML 삽입 미리보기할 수 없는 소스 인라인 이벤트모델 : 요소 내부에 직접적으로 이벤트 속성 제시해서 실행할 내용을 정의하는 방식 실행확인 실행확인 HTML 삽입 미리보기할 수 없는 소스 표준 이벤트모델 (addEventListener) : w3c에서 공식적으로 지정한 이벤트 모델 . IE는 9버전부터 지원 이벤트 제거시에는 null 대입 이벤트 걸고자하는 요소객체.addEventListener("이벤트명",이벤트핸들러); 실행확인 HTML 삽입 미리보기할 수 없는 소스 📌이벤트가 발생한 해당요소객체..
JavaScript 09. Window 객체
2022. 12. 21. 15:34
Front/JavaScript
Window객체는 자바스크립트에서의 최상위 객체이며 크게 BOM과 DOM으로 나뉨 - BOM (Browser Object Model) loacation객체, screen객체, navigator객체, history객체 - DOM (Document Object Model) document 객체 - window.onload : 페이지가 로딩됨과 동시에 실행 - window.open("url", "창이름", "창의특성"); url : 새창에서 열고자하는 url주소 target(창이름) : 창이름이 같은것이 열려있을 경우 새로이 열리지 않고 이미 열려있는 창에 새로고침됨 창의 특성 : 새 창의 너비, 높이, 주소창여부, 툴바 여부, 스크롤바 여부 등 새로운 창의 특성지정(브라우저마다 적용범위다름) width :창..
JavaScript 배열 실습 문제 3
2022. 12. 20. 19:15
Front/JavaScript 실습문제
문자열을 여러개 입력받아 출력버튼 클릭시 입력했던 모든 문자열이 출력되도록 만들기 입력 입력 이 부분에 정답이 출력 될 수 있도록 하세요 출력 >> 두개의 함수에서 모두 배열을 사용할 수 있도록 전역변수로 선언, 입력버튼 클릭시 입력한 값들이 배열에 담기도록 push메소드 사용 출력버튼 클릭시 배열에 담긴 값들을 출력 HTML 삽입 미리보기할 수 없는 소스
JavaScript 배열 실습 문제 2
2022. 12. 20. 19:11
Front/JavaScript 실습문제
보기의 값을 "brlove" 로 출력하기 보기 r b e v o l 이 부분에 정답이 출력될 수 있도록 하세요 처리 >> label안의 문자열을 split (" ") (공백) 으로 나눈후 reverse()를 사용해 배열의 값 뒤집기 배열에 담아 두개의 배열을 concat()으로 합침 join('")을 사용해 하나의 문자열로 출력 HTML 삽입 미리보기할 수 없는 소스
JavaScript 배열 실습 문제 1
2022. 12. 20. 19:02
Front/JavaScript 실습문제
보기의 데이터를 배열로 받고 하나의 배열로 합친후, 찾을 문자열을 입력 한 후 버튼을 누르면 alert를 통해 배열의 위치를 알려주고, 없으면 존재하지 않습니다를 출력하기 보기 사과,바나나,당근 김밥,치즈,떡볶이,햄버거 환타,사이다,콜라 고양이,강아지 전송 및 처리 >> label안의 문자열을 split메소드로 문자열을 나눈 후 배열안에 담기 concat()을 이용해 배열을 하나로 합치고, indexOf()를 통해 입력한 값의 인덱스를 찾음 >>indext == -1 경우 : 입력한 값이 배열안에 존재하지 않음 -> 존재하지 않는다는 경고창 띄우기 HTML 삽입 미리보기할 수 없는 소스
JavaScript 실습문제 4. 간이 계산기 만들기
2022. 12. 20. 18:52
Front/JavaScript 실습문제
위의 형태대로 값을 입력받아 간이 계산기 만들기 첫번째 값 : 두번째 값 : 계산결과 : HTML 삽입 미리보기할 수 없는 소스
JavaScript 08. 객체_ 2
2022. 12. 20. 16:40
Front/JavaScript
HTML 삽입 미리보기할 수 없는 소스 객체의 배열을 사용한 다량의 데이터 관리 객체를 배열에 담으면 반복문을 통해 객체에 접근할 수 있음 실행확인 HTML 삽입 미리보기할 수 없는 소스 생성자 함수 생성자 함수 생성 후 new 키워드를 이용해서 객체를 생성할 수 있는 함수를 의미 (함수명 제시시 첫글자를 대문자로) 실행확인 HTML 삽입 미리보기할 수 없는 소스 Date 내장 객체 new Date() : 현재 시스템 날짜, 시간에 대한 정보 new Date(년, 월(인덱스) , 일,시, 분, 초, ms ) : 입력한 날짜를 출력 1s == 1000ms 1m == 60s == 60*1000ms/ 1h == 60m == 60*60s == 60*60*100ms 1d == 24h == 24*60m == 24*..