javascript(13)
-
정규표현식
/ ~ / 시작과 끝 ^ : 패턴의 시작 : 안의 문자를 찾음 [x-z] : x~z 사이의 문자를 하나를 찾음 x+ : x가 1번이상 반복 x$ : 문자열이 x로 끝남 ^x : 문자열이 x로 시작 \d : 숫자 x{n} : x를 n번 반복한 문자를 찾음 x{n,m} : x를 n번 이상 m번 이하 반복한 문자를 찾음 아이디: 영문 대문자 또는 소문자로 길이는 4 ~ 20자까지 입력 가능 /^[A-Za-z]{4, 20}/ 이름: 한글만 사용 /^[가-힣]+$/ 휴대폰 번호: 앞번호는 3글자, -, 중간번호는 3글자 또는 4글자, - 마짐가 번호는 4글자 010-111-1111 또는 010-1111-1111 /^\d{3}-\d{3,4}-\d{4}$/ 이메일: 영문 대문자 또는 소문자 또는 숫자로 시작 적절한 ..
2023.04.10 -
DOM과 Node
문서 객체 모델(DOM: Document Object Model) HTML 문서 또는 XML 문서 등을 접근하기 위한 일종의 인터페이스 역할 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공 document 객체 웹 페이지 자체(body)를 읨하는 객체 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document 객체로부터 시작 getElementById(): 해당 아이디의 요소를 선택 getElementsByTagName(): 해당 태그 이름의 요소를 모두 선택 getElementsByClassName(): 해당 클래스에 속한 요소를 모두 선택 getElementsByName(): name 속성값을 가지는 요소를 모두 선택 querySelectorAll(): 선택자로..
2023.04.07 -
객체2(Object)
Location 객체 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용 https://koreaisacademy.com/renewal2021/community/interview.asp ----- ----------------- ------------------------------------ protocol hostname pathname protocol: 콜론을 포함한 http, https, ftp 등 프로토콜 정보를 반환 hostname: 호스트의 이름과 포트번호를 반환 pathname: URL 경로부분의 정보를 반환 href: 페이지 URL 전체 정보를 반환 또는 URL을 지정하여 페이지를 이동 reload(): 새로고침 history 객체 브라우저의 히스..
2023.04.07 -
객체
하나의 주제를 가지고 관련있는 프로퍼티를 가지고 있는 집합 프로퍼티(property) 이름과 값으로 구성된 정렬되지 않은 집합 프로퍼티는 함수도 저장할 수 있음 -> 프로퍼티 메소드 객체를 생성하는 방법 1. 리터럴 표기법 const 객체명 = { 프로퍼티명1: 값1, 프로퍼티명2: 값2, ... 프로퍼티명n: function(){ 프로퍼티가 호출되면 실행할 문장; ... } } 2. 생성자를 이용 객체를 만드는 함수 new 연산자를 사용하여 객체를 생성하고 초기화할 수 있음 객체를 생성할 때 사용하는 함수를 생성자라고 함 새롭게 생성되는 객체를 초기화하는 역할 같은 형태의 객체를 여러개 생성할 때 유리 function 생성자명(매개변수1, 매개변수2, ...){ this.프로퍼티명1 = 값1 this...
2023.04.06 -
함수
사용자 정의 함수(function) 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있음 코드를 재활용 함수 선언 2가지 1. 함수 선언식 function 함수명(매개변수1, 매개변수2, ..){ 함수가 호출되었을 때 실행할 문장; ... return 값 } // 함수 호출 함수명(값1, 값2, ..); 2. 함수 표현식(권장) let 또는 const 변수명 = function(매개변수1, 매개변수2, ..){ 함수가 호출되었을 때 실행할 문장; ... return 값 } // 함수 호출 변수명(값1, 값2, ..); 디폴트 매개변수 매개변수의 값을 설정하는 것 매개변수의 값을 정하지 않으면 기본값을 변수에 저장 function 함수명(..
2023.04.06 -
배열(Array)
이름과 인덱스로 참조되는 정렬된 값의 집합(자료구조) 배열을 구성하는 각각의 값을 배열 요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 함 //배열 선언 let 배열명; //배열 초기화 배열명 = [요소1, 요소2, 요소3, ..]; 예) let arr; arr = [100, 200, 300]; let arr = [100, 200, 300]; //배열 객체로 생성 const 배열명 = new Array(요소1, 요소2, ...); //배열의 접근 let arr; arr = [100, 200, 300]; console.log(arr[0]); // 100 console.log(arr[1]); // 200 console.log(arr[2]); // 300 자바 스크립트 배열의 특징 1. 배열 요소..
2023.04.05 -
반복문
1. while 문 while 문 while(조건식) { 조건식의 결과가 true인 동안 반복할 문장; ... } do ~ while 문 조건식의 결과가 처음부터 false일 경우에도 1번은 {}의 문장을 실행함 do { 조건식의 결과가 true인 동안 반복할 문장; ... }while(조건식); 2. for 문 for 문 for(초기값; 조건식; 증감식) { 조건식의 결과가 true인 동안 반복할 문장; ... } // for문의 무한루프 for(;;) { } break 문 switch 문 또는 반복중인 루프 내에서 사용하여 해당 문장을 완전히 종료시키고 다음에 위치한 실행문으로 이동 num = 1; while(num
2023.04.05 -
조건문
1. if문 if문 if(조건식) { 조건식이 true일 때 실행할 문장; ... } if-else문 if(조건식) { 조건식이 true일 때 실행할 문장; ... }else { 조건식이 false일 때 실행할 문장; ... } if-else if-else문 if(조건식1) { 조건식1이 true일 때 실행할 문장; ... }else if(조건식2) { 조건식2이 true일 때 실행할 문장; ... }else if(조건식3) { 조건식3이 true일 때 실행할 문장; ... }else{ 조건식이 모두 false일 때 실행할 문장; ... } 2. switch 문 switch(변수) { case 값1: 변수와 값1이 같을 경우 실행할 문장; ... break; case 값2: 변수와 값1이 같을 경우 실행..
2023.04.05 -
연산자(Operator)
1. 산술 연산자 +, -, *, /, %, ** 2. 비교 연산자 >, =,
2023.04.05 -
대화 상자
Web API 브라우저에서 제공하는 API(Application Programming Interface) 프로그램들과 기능들의 상호 통신 방법을 규정하고 도와주는 매개체 기본문법이 아니다 / 브라우저에서만 작동한다 ! alert(): 사용자에게 메세지를 보여주고 확인을 기다린다. confirm(): 사용자에게 메세지를 보여주고 확인이나 취소를 누르면 그 결과를 boolen값으로 반환 prompt() : 사용자에게 메세지를 보여주고 사용자가 입력한 문자열을 반환 ✔ extension 설치 문법이나 자동완성을 도와주는 Javascript(es6) 설치 ✔ 단축키 자동 완성 만들기 f1 → snippets → 코드 조각: 사용자 코드 조각 구성 → 새 조각 만들기 → global-snippets { "Cons..
2023.04.05