코비누나의 개발일지💻🐶

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) 웹 크롤링(실시간 데이터 수집, Web Scraping)이란? - 웹 사이트에서 원하는 정보를 추출하는 것을 의미한다. - 보통 웹 사이트는 HTML 기반이므로 정보를 추출할 페이지에서 개발자모드 실행 후, 원하는 태그를 검색하는 스킬이 요구된다. - 크롤링한 데이터를 소장, 활용하는 것은 불법이 아니지만 영리를 위한 목적 또는 배포시 문제가 될 수 있으니 이 경우에는 해당 사이트의 허락을 반드시 받아야한다. 2) 웹 크롤링 라이브러리 1. Jsoup 정적 데이터를 비교적 빠르게 수집할 수 있지만 브라우저가 아닌 HTTP Request를 사용하기 때문에 동적 데이터를 수집하기 위해서는 해당 서버의 인증키 요구 등 수집할 수 없는 경우가 많다. 2. Selenium Jsoup에 비해 느리지만 브라우저..

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..

1) GitHub Pages - 깃허브 페이지를 이용하여 웹페이지를 서비스해주는 기능입니다. - index.html 파일이 GitHub Pages로 설정된다. 2) GitHub Pages 설정방법 1. GitHub Pages를 생성할 해당 레포지토리의 Settings탭 클릭 2. GitHub Pages 목록에 Check it out here! 글씨 클릭 3. Source 목록의 Branch를 master로 설정 후 저장하면 상단에 GitHub Pages 링크가 생성된다.

1) String 객체 특징 - 문자열을 쉽게 만들고 다룰 수 있게 한다. const str = '자바스크립트'; const str = new String('자바스크립트'); 2) String 객체의 메소드 종류 1. length 문자열의 길이를 저장한다. const str1 = '안녕하세요. JavaScript'; console.log(str1); //안녕하세요. JavaScript console.log(str1.length); //17 2. indexOf( ) 매개변수로 전달된 문자열이 처음 등장하는 위치를 반환해준다. console.log(str1.indexOf('J')); //7, 0번부터 해서 7번째 자리에 있다는 뜻 console.log(str1.indexOf('Java')); //7, 맨 첫..