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 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*..
JavaScript 08. 객체_ 1
2022. 12. 20. 16:17
Front/JavaScript
객체 선언 및 사용 객체는 중괄호 {} 를 사용해서 생성하고, 중괄호 안에는 객체에 필요한 속성(property)들을 정의함 속성명 : 속성값 의 형태로 정의 (키: 밸류) 속성값으로는 모든 자료형의 값을 담을 수 있음 변수 = { 속성명:속성값, 속성명:속성값, .. }; - 객체 속성에 접근하는 방법 1) 대괄호 이용하는 방법 : 객체명["속성명"] 2) . 을 이용하는 방법 : 객체명. 속성명 - 객체 생성시 특이 케이스 속성명에 공백이나 특수문자가 있을 경우 따옴표 안에 작성하여 문자열로 묶어주어야한다. > 객체 속성에 접근할 경우 객체명.속성명 의 방법으로 접근 불가 > 객체명["속성명"]으로 접근해야함 실행확인 HTML 삽입 미리보기할 수 없는 소스 객체에서의 반복문 객체가 가지고 있는 모든 ..
JavaScript 07. 함수
2022. 12. 19. 16:49
Front/JavaScript
함수(function) 함수의 종류 : 선언적 함수 / 익명함수 * 선언적 함수 function 함수명(매개변수,매개변수,..){ 해당 함수 호출시 실행할 소스코드;} [return 결과값;] }; * 익명함수 변수|속성 = function([매개변수,...]){ 해당 함수 호출시 실행할 소스코드; [return 결과값;] }; -> 특정 변수나 속성에 대입되는 함수 제시시 주로 사용됨 (주로 이벤트 핸들러 작성시 사용) 실행확인 HTML 삽입 미리보기할 수 없는 소스 함수의 매개변수 : 매개변수 제시시 자료형 지정하지않음, 선언구문X => 변수명만 지정 - 정의 해둔 매개변수 갯수보다 더 많이 전달하는 것 가능하지만 초과된 전달값은 무시됨 - 정의해둔 매개변수 갯수보다 더 적게 전달하는 것 가능 ( 오..
JavaScript 06. 배열
2022. 12. 19. 15:41
Front/JavaScript
배열 - 변수 선언시 별도의 자료형 지정이 없기 떄문에 어떤 자료형의 값들이든 하나의 배열공간에 담을 수 있음 - 크기 제약 없음 * 배열의 0번 인덱스부터 마지막 인덱스까지 순차적으로 접근 => " for in문" 활용 for(let i in arr){ 순차적으로 접근할 배열 } 확인하기 HTML 삽입 미리보기할 수 없는 소스 * 배열 관련 메소드 1. 배열.indexOf(찾고자하는 요소): 배열에서 해당요소가 위치해 있는 인덱스 반환 확인하기 HTML 삽입 미리보기할 수 없는 소스 >> 자바스크립트에서 두값이 동일한지 비교하는 연산자 동등연산자 ( == ) : 자료형과 무관하게 실제 값만 일치해도 true 일치연산자 ( === ) : 값, 자료형 둘다 일치해야 true 2. 배열.concat(배열, ..
JavaScript 05. 문자열과 숫자
2022. 12. 16. 16:30
Front/JavaScript
문자열 관련 기본 메소드 1) toUpperCase() : 문자열을 대문자로 반환 2) toLowerCase() : 문자열을 소문자로 반환 3) CharAt(i) : i번째 인덱스의 문자 반환 4) indexOf("위치찾고자하는 문자") : 문자의 위치를 반환 -> 해당 문자가 존재하지 않을 경우 -1을 반환 5) lastIndexOf("위치찾고자하는 문자") : 뒤에서 부터 찾고자하는 문자의 위치를 반환 6) subString(시작인덱스) : 입력한 시작인덱스부터 끝까지의 문자열을 반환 subString(시작인덱스, 끝인덱스) : 시작인덱스부터 끝인덱스까지의 문자열을 반환 7) split("구분자"): 구분자로 문자열을 나누기 -> 배열로 반환 문자열 처리 메소드 HTML 삽입 미리보기할 수 없는 소스..
JavaScript 04. 요소 가져오기 (접근하기)
2022. 12. 16. 16:10
Front/JavaScript
HTML 요소에 접근하기 ( 해당 요소 객체 가져오기 ) 아이디를 이용해서 요소 가져오기 : document.getElementById("아이디명") -아이디로 접근해서 버튼 클릭시 div 의 속성값 변경하기 아이디로 접근 HTML 삽입 미리보기할 수 없는 소스 - 조건문이용해서 속성값 변경 클릭 > 조건문을 이용해서 red 색상이면 gold로 , red가 아니면 red로 변경하도록 함 태그명을 이용해서 요소가져오기 : document.getElementsByTagName("태그명") 목록1 목록2 목록3 목록4 목록5 태그명으로 접근 > 반환값이 [배열]에 담겨 있기 때문에 바로 .innerHTML과 같은 함수 사용할 수 없음 ( 인덱스에 접근해서 사용) HTML 삽입 미리보기할 수 없는 소스 name..
JavaScript 03. 데이터 입출력
2022. 12. 15. 17:11
Front/JavaScript
1. 데이터를 출력하는 구문 1) window.alert("알람창에 출력할 문구"); -> window. 생략 가능 2) window.console.log("콘솔창에 출력할 문구"); -> window. 생략 가능 3) document.write("화면상 출력할 문구"); -> 이전에 있던 화면상의 코드 사라지고 괄호안의 문구가 보여짐 화면에 출력 HTML 삽입 미리보기할 수 없는 소스 4) 선택한요소.innerHTML | innerText = "요소에 출력할 문구"; 자바스크립트에서 특정요소(element)안의 값(content)을 가져온다거나, 변경하고자할때 사용 확인 HTML 삽입 미리보기할 수 없는 소스 2. 데이터 입력받는 구문(변수에 기록 가능) 1) 변수 = window. confirm("질..