목록Front-End/JavaScript (18)
고래씌
* 아이디 : 첫글자는 반드시 영문자로, 그리고 영문자, 숫자를 포함하여 총 4~12글자 입력하시오 * 비밀번호 : 영문자, 숫자, 특수문자(!@#$%^) 총 8~15글자로 입력하시오. * 비밀번호 확인 : 위의 비밀번호와 일치하게 입력하시오. * 이름 : 한글로만 작성해야하며 2글자 이상으로 입력하시오 * 이메일 : 이메일 형식에 맞춰서 입력하시오 * 취미 : 축구 야구 농구 독서 * 거주지 : 선택안함 서울 부산 경기 인천
1. 정규식 - 정규표현식(REGEX / REGEXP : Reqular Expression) 이란, 특정패턴을 가진 문자열을 찾거나 또는 찾아서 변경할 때 사용하는 형식 언어 - 정규표현식을 이용하면 문자열에 대해 특정패턴 조건 검사 시 또는 치환시 복잡한 조건을 제시할 필요없이 간단하게 처리 가능하다. - 자바스크립트뿐만 아니라 자바나 오라클등 다른언어에서도 사용가능 1) 정규표현식 객체 생성 및 정규식과 관련한 메소드 ▶ 정규표현식 객체 생성 == 정규식 년수를 선언 == 검색조건으로 삼고자하는 문자열이나 패턴을 제시해야함 ▶ 정규식 객체 생성 const regExp = /script/; // 정규식 객체 단축생성 구문 const regExp2 = new RegExp("script") // 정규식 객..
Practice4 구매 정보 구매자 : 상품명 : 가격 : 구매 수량 : 납품 등급 : 기타 사항 : 입력 값 출력하기 Practice5 검색할 항목을 선택하세요. 제목 날짜 작성자 검색할 제목을 입력하세요 : 검색 검색할 날짜를 선택하세요 : 검색 검색할 작성자를 입력하세요 : 검색
1. 이벤트 모델 종류 1) 고전 이벤트 모델(기본 이벤트 모델) - 요소 객체를 가지고 와서 해당 요소 객체에 이벤트 속성에 접근한 후 이벤트 핸들러를 연결하는 방식 - 이벤트를 제거할 수도 있음 ■ 요소 내부에 인라인으로 이벤트 속성을 기술하지 않음 확인 확인 => 2번째 확인을 누른 결과, 1번째 확인 버튼을 클릭하여도 생성이 되지 않는 것을 볼 수 있음 2) 인라인 이벤트 모델 - 요소 내부에 직접적으로 이벤트 속성을 제시해서 실행할 내용을 정의하는 방식. - 주로 script 태그 내에 정의되어있는 함수를 호출하는 방식을 선호 확인 확인 3) 표준 이벤트 모델(addEventListener) ▶ addEventListeenr : 이벤트 추가 ▶ removeEventListener : 이벤트 삭제..
1. windows용 객체 : window 객체는 자바스크립트의 최상위 객체이며 크게 BOM과 DOM으로 나눔 - BOM(Browser Object Model) : location, history, screen, navigator... - DOM(Document Object Model) : document 1) window.open('url', '창이름', '특성') ▶ window.open('url', '창이름', '특성') - 첫번째 인자값 : 새 창에서 열고자 하는 url 주소 - 두번째 인자값 : 창 이름, 창이름이 같은게 이미 열려있을 경우, 새로 열리지 않고 이미 열려있는 창에서 새로고침이 된다. - 세번째 인자값 : 창의 특성, 새로 열릴창의 너비, 높이, 툴바, 스크롤바, 리사이즈여부 등등..
Practice3 회원가입 아이디 : 비밀번호 : 비밀번호 확인 : 이름 :
1. 객체 배열을 사용한 다량의 데이터 관리 ■ 09_객체2.html 확인 ▶객체 배열 생성 후, push를 이용하여 객체들 추가 ☞ 값이 추가된 것을 확인 ▶ 객체 배열 내부에 모든 학생들에게 javascript 점수를 추가하고 싶다면? for(let student of sArr){ student.javascript = 100; } } ☞ of를 이용하여 반복문을 돌려서 모든 학생들에게 javascript: 100 점수를 추가 ▶ 모든 학생들의 html, css, javascript 총합과 평균을 구하는 메소드 for(let student of sArr){ // 각 학생 객체 내부에 점수 총합을 구하는 메소드 추가 student.getSum = function() { return this.html + ..
1. 객체 선언 민 호출 - 객체는 중괄호 {}를 사용해서 생성하고, 중괄호 안에 이 객체에 필요로 하는 속성(property)들을 정의함 - 속성 : 속성값의 형태로 정의함(키 : 밸류) - 속성값으로는 모든 자료형의 값을 담을 수 있음 [표현법] let/const/var 변수명 = { 속성명:속성값, 속성명:속성값, 속성명:속성값, ... }; // 세미콜론 찍어야함!! ▶ 자바스크립트에서의 배열 == 자바의 컬렉션(ArrayList) ▶ 자바스크립트에서의 객체 == 자바의 컬렉션(HashMap) ■ 08_객체1.html 확인 ▶ 자바스크립트의 객체 생성과 동시에 값 넣기 const product = { pName:"Dry Mango", price:4000, kind:"pickle", ingredie..
1. 선언적 함수 [표현법] function 함수명(매개변수, 매개변수, ...) { 해당함수 호출시 실행할 소스코드; return 결과값; } - 매개변수가 없는 경우 매개변수 생략가능 - 반환할 결과 값이 없는 경우 return 결과값도 생략 가능 ■ 07_함수.html 확인 ▶ 함수를 선언적으로 사용하는 방법 function test1(){ area1.innerHTML += `TEST1()실행됨 `; } area1.innerHTML += `함수선언식 : ${fnTest0(1,2)} `; function fnTest0(a,b){ return a+b; } => 출력문이 더 앞에 있어도 이 코드는 에러가 발생하지 않는다! ☞ 함수를 선언적으로 사용하는 것은 내부적으로 맨 위에 선언하게 된다. 그래서 ar..
9_1) 배열 반복문(향상된 반복문, 배열을 비우는 방법) ■ 06_배열.html 9_1) 배열 반복문 ▶ 배열을 비우는 방법 arr.length = 0; => 내부데이터도 전부 날라간다. 9_2) 배열을 통한 반복작업(forEach) forEach 문은 아래처럼 여러방법으로 사용할 수 있다. ■ 06_배열.html ▶ forEach문 만드는 방법 배열명.forEach(요소명 => { 실행문( 요소명) }); ☞ 요소명은 내가 정할 수 있으며, 그 배열이 가지고 있는 요소들을 한 번씩 반환하여 반복을 시켜주게 되는것이다. ☞ item : 안에 있는 객체 ☞ index : 현재 반복문을 진행하고 있는 index ☞ array : 배열 10) 배열 탐색(find, filter) ■ 06_배열.html 10)..