코비누나의 개발일지💻🐶

1) location 객체란? - 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나 브라우저의 새 문서를 불러올 때 사용할 수 있다. - location 객체의 프로퍼티와 함수를 이용하면 현재 문서의 url 주소를 다양하게 해석하여 처리할 수 있다. 2) location 객체 종류 1. location.href 페이지의 url 전체 정보를 반환, url을 지정하여 이동할 수 있다. location.href = "파일이름.html" // 페이지 이동 2. location.reload( ) 새로고침하기 3. location.assign( ) 현재 url을 지정한 url로 바꿔서 이동하고 이전으로 돌아가기가 가능하다. 4. location.replace( ) 현재 url을 지정한 url로 바꿔서 이동하고 ..

1) 이벤트 객체(Event Object)란? - 특정 타입의 이벤트와 관련이 있는 객체를 말한다. - 해당 타입의 이벤트에 대한 상세 정보를 저장한다. - 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트 대상을 나타내는 target 프로퍼티를 가진다. - 이벤트 객체는 이벤트 리스너가 호출될 때 인수로 전달한다. const sendit = funtion(e) { // e : 이벤트 객체 console.log(e.target); // 이벤트 타겟 객체 console.log(e.type); // 이벤트 타입 click } 2) 이벤트 전파 - 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정을 말한다. - 이벤트의 대상이 window 객체와 같은 단..

1) 이벤트란? - 웹 브라우저가 알려주는 HTML요소에 대한 사건의 발생을 의미한다. - 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행한다. - 자바스크립트는 비동기식 이벤트 중심 프로그래밍 모델이라고 한다. 2) 이벤트 타입(Event Type) - 발생한 이벤트의 종류, 이벤트명이라고도 한다. - 가장 많이 사용하는 키보드, 마우스, HTML DOM, window객체등을 처리하는 이벤트가 많이 제공된다. - ex) onClick, onKeypress, onLoad ... 이벤트타입 문자열을 클릭하세요 3) 이벤트 타겟(Event Target) - 이벤트가 일어날 객체를 뜻한다. 4) 이벤트 리스너(Event Listener) - 이벤트가 발생했을 때 그 처리를 담당하는..

1) 정규표현식이란? - 문자열에 특정 문자 조합과 대응시키기 위해 사용되는 패턴을 의미한다. 2) 정규표현식 문법 //정규식 패턴 만들기 const expNameText = /[가-힣]+$/; //한글만 // []+ : 뒤에 플러스가 붙으면 몇글자가 돼도 상관없다라는 뜻. 안의 쓴 모든 내용들이 들어올 수 있다. // $ : 끝내기 const expHpText = /^\d{3}-\d{3,4}-\d{4}$/; // ^ : 무조건 이걸로 시작해야한다. // \d : 숫자 // {3} : 세글자, {3,4} : 세글자 또는 네글자 const expEmailText = /^[A-Za-z0-9\.\-]+@[A-Za-z0-9\.\-]+\.[A-Za-z0-9\.\-]+$/; 3) test( ) 함수 설명 - 정규표..

1) 폼 객체 2) 폼의 접근 const frm = document.myform; //name을 씀 const frm = document.getElementById('regform'); //id를 씀 3) 아이디 value 접근 const id = document.myform.userid.value; //name을 씀 const id = frm.userid.value; //name을 씀 const id = frm.elements[0].value; const id = frm.elements['userid'].value; const id = document.getElementById('id').value;

1) 노드(Node)란? - HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장한다. - HTML DOM은 이러한 노드들을 정의하고 그들 사이의 관계를 설명해주는 역할을 한다. - HTML 문서의 정보는 노드트리(node tree)라고 불리는 구조에 저장된다. - 노드트리는 노드들의 집합이며 노드간의 관계를 보여준다. 2) 노드(Node)의 종류 1. 문서노드(document node) HTML 문서 전체를 나타내는 노드이다. 2. 요소 노드(element node) 모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드이다. 3. 속성 노드(attribute node) 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있다. 4 텍스트 노드(te..

1) 문서 객체 모델(Document Object Model, DOM)이란? - xml이나 html문서에 접근하기 위한 일종의 인터페이스를 뜻한다. - 문서 내에 모든 요소를 정의하고 요소에 접근하는 방법을 제공한다. 초간단 문서 간단한 문서 2) Document 객체란? - 웹 페이지 자체를 의미한다. - 웹 페이지상에 존재하는 HTML 요소에 접근할 때는 반드시 document 객체로부터 시작한다! 3) Document 객체의 메소드 1. document.getElementsByTagName( ) : 해당 태그 이름의 요소를 모두 선택한다. 배열로 값이 들어간다. const tag = document.getElementsByTagName('h2'); // 괄호 안에 따옴표 내부에 태그 적어주기 2. ..

1) 콜백함수(Callback Function) - 파라미터로 함수를 전달받아 함수의 내부에서 실행하는 함수 2) 콜백함수(Callback Function) 문법 const num = [1,2,3,4,5]; num.forEach(x => { console.log(x * 10); }); console.log('💛아래위 동일한 실행문💛'); num.forEach(function(x) { console.log(x * 10); }); ▼결과값▼ 10 20 30 40 50 3) 콜백함수(Callback Function) 예제1 function setUserid(userid,callback){ console.log(`userid : ${userid}`); callback(); } function finish(){ ..

1) 브라우저 객체 모델(BOM)란? - 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다. - 이 때 사용할 수 있는 객체 모델을 브라우저 객체 모델(Browser Object Model)이라고 한다. - 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해준다. 2) window 객체 설명 - 현재 웹브라우저의 창이나 탭을 표현하기 위한 객체 - 비표준 객체 - window객체는 제일 먼저 저장된다. - 함수 사용 시 window. 생략 가능하다. 3) window 객체의 프로퍼티 출력해보기 ▼실행결과▼ 4) window 객체 내 자주 쓰이는 함수 알아보기 1. setTimeout( ) 일정 시간이 지난 후, 매개변수로 제공된 함수를..

1) Date 객체 - 날짜, 시간 등을 쉽게 다룰 수 있는 내장객체 2) Date 객체 문법 const 객체명 = new Date( ); //현재 날짜 시간을 가진 객체가 생성된다. Date 뒤에 소괄호 생략 가능 console.log(new Date); //Sun Jun 20 2021 16:03:59 GMT+0900 (대한민국 표준시) console.log(new Date()); //Sun Jun 20 2021 16:03:59 GMT+0900 (대한민국 표준시) 1. 연도(year) - 2자리로 표현 : 1900 ~ 1999 const date = new Date(21,6,20); // 1921년 7월 20일 console.log(new Date(21,6,20)); //Wed Jul 20 1921 0..