본문 바로가기

웹개발 수업/JavaScript

(16)
[Day +66 / Java Script 과제]HTML5 API 보호되어 있는 글입니다.
[Day +66 / Java Script]기초(21. cookie, 22. Web Storage, 23. File Reader, 24. Drag and Drop) 210928 화 cookie cookie : 브라우저에 저장되는 작은 크기의 문자열로 HTTP 프로토콜의 일부 * HTTP(Hypertext Transfer Protocol) : 인터넷 상에서 데이터를 주고 받기 위한 서버/클라이언트 모델을 따르는 프로토콜 * 프로토콜(통신 규약) : 상호 간에 정의한 규칙을 의미하며 특정 기기 간에 데이터를 주고 받기 위해 정의 쿠키는 주로 웹 서버에 의해 만들어지며 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장함 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달 * Web Server : HTTP를 ..
[Day +65 / Java Script]기초(19. 정규 표현식, 20. geolocation) 210927 월 정규 표현식 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어로 정규 표현식을 이용하면 입력된 문자열에 대하여 특정 조건 검색, 치환 처리 복잡한 조건문 대신 간단하게 처리 가능 정규 표현식(Regular Expressions)의 객체 생성 자바스크립트에서는 RegExp 객체와 문자열 메소드를 조합해 정규 표현식 사용 정규 표현식은 패턴(pattern)과 선택적으로 사용할 수 있는 플래그(flag) 문자로 구성 정규식 사용 메소드 정규 표현식 메소드 1) test : 문자열에서 정규식 변수의 값과 일치하는 값이 있으면 true리턴, 없으면 false 리턴 2) exec : 문자열에서 정규식 변수의 값과 일치하는 값이 있으면 처음 매치된 문자열 반환 문자열 메소드 match..
[Day +64 / Java Script 과제]이벤트, 이벤트2(과제 제출 안했음) 보호되어 있는 글입니다.
[Day +64 / Java Script]기초(16. 마우스와 이벤트, 17. 키보드와 스크롤 이벤트) 210924 금 마우스 이벤트 1. 마우스 이벤트 종류 mousedown/mouseup : 요소 위에서 마우스 버튼을 누를 때, 마우스 버튼을 누르고 있다가 뗄 때 mouseover/mouseout : 마우스 커서가 요소 바깥에 있다가 요소 안으로 움직일 때, 마우스 커서가 요소 위에 있다가 요소 밖으로 움직일 때 mousemove : 마우스를 움직일 때 click : 동일한 요소 위에서 mousedown 이벤트와 mouseup 이벤트를 연달아 발생시킬 때 dblclick : 동일한 요소 위에서 마우스 왼쪽 버튼으로 빠르게 클릭할 때 contextmenu : 마우스 오른쪽 버튼을 눌렀을 때 2. 마우스 이벤트 테스트 마우스 왼쪽이나 오른쪽 버튼을 사용해 클릭 3. 마우스 이벤트 좌표 클라이언트 좌표(cl..
[Day +62 /Java Script 과제] 문서수정(과제 제출 안했음) 보호되어 있는 글입니다.
[Day +62 / Java Script]기초(13. 문서 수정, 14. BOM, 15. 이벤트) 210917 금 13) 문서 수정 문서 수정 1. 노드 생성 documnet.createElement(tag) : 태그 이름을 사용해 새로운 요소를 만듦 document.createTextNode(value) : 텍스트 노드를 만듦(잘 쓰이지 않음) element.cloneNode(deep) : 요소를 복제함. deep == true일 경우 모든 자손 요소도 복제됨 2. 노드 삽입, 삭제 node.append(노드나 문자열) : node 끝에 노드나 문자열을 삽입 node.prepend(노드나 문자열) : node 맨 앞에 노드나 문자열을 삽입 node.before(노드나 문자열) : node 이전에 노드나 문자열을 삽입 node.after(노드나 문자열) : node 다음에 노드나 문자열을 삽입 nod..
[Day +61 / Java Script 과제]숫자&문자&날짜, 요소 검색 과제 보호되어 있는 글입니다.
[Day +61 / Java Script]기초(12. 주요 노드 프로퍼티) 210916 목 12) 주요 노드 프로퍼티 주요 노드 프로퍼티 1. innerHTML 요소 안 HTML을 문자열 형태로 받아올 수 있음 요소 안 HTML을 수정하는 것도 가능함 자바스크립트에서 태그 앨리먼트의 값을 읽거나, 변경할 때 innerHTML 속성을 사용함 innerHTML 확인 2. outerHTML outerHTML 속성에는 요소 전체 HTML이 담김 outerHTML은 innerHTML에 요소 자체를 더한 것 innerHTML은 요소 값을 수정하지만 outerHTML은 요소 값을 수정할 수 없음 area2 영역입니다. *추가 내용 innerHTML innerHTML에서 지정한 요소 태그를 제외한 안쪽 태그만 값을 가져온다 자기자신 미포함 outerHTML outerHTML에서 지정한 요소 ..
[Day +60 / Java Script]기초(9. 숫자&문자&날짜, 10. DOM, 11. 요소 검색) 210916 수 9. 숫자 & 문자 & 날짜 숫자 문자 날짜 다루기 1. 숫자형 메소드 isNaN(value) - 인수를 숫자로 변환한 다음 NaN(Not a Number : 에러를 나타내는 값)인지 테스트 (*추가 : 문자이면 true, 숫자이면 false) isfinite(value) - 인수를 숫자로 변환하고 변환한 숫자가 NaN/Infinity/-Infinity가 아닌 일반 숫자인 경우 true를 반환함 (*추가 : 숫자이면 true, 문자나 NaN/Infinity/-Infinity이면 false) Number는 문자열 앞 뒤 공백을 제외하고 다른 문자가 섞여 있으면 형변환이 불가능함 하지만 parseInt/parseFloat를 사용하면 문자열에서 숫자만 읽고, 읽은 숫자를 에러가 발생하기 전에 ..