본문 바로가기

Web 기초

(26)
[Web] 웹 기초 (24) - HTML, 자바스크립트로 게시판 만들기 (2) HTML태그로 화면 구현 파일 구조 board.css : 공통 css 파일 board.js : 공통 js 파일 insert.html : 게시글 입력 화면 modify.html : 게시글 수정 화면 (insert.html 을 기반으로 작성) select.html : 게시글 조회 화면 view.html : 게시글 상세 조회 화면 조회 화면 구현 게시글 조회 (메인) 페이징 처리를 제외한 간단한 게시글 목록 게시글 순번, 제목, 작성자, 작성일, 조회수 게시글을 눌렀을 때 해당 게시물 상세 조회 화면으로 이동 게시글 검색 기능 게시글 제목을 키워드로 게시글을 필터링하여 보여준다. 게시글 입력 버튼 버튼을 눌렀을 때 게시글 입력 화면으로 이동 먼저 디자인을 제외하고 아주 간단하게 HTML 태그로 게시판 조회 화면을 구현해봤다. 게시글 ..
[Web] 웹 기초 (23) - HTML, 자바스크립트로 게시판 만들기 (1) 개요,요구사항 javascript_board 폴더를 생성하여 아래의 파일 작성하기 insert.html→ 입력 select.html → 리스트 조회 화면 view.html → 상세보기 modify.html→ 수정, 삭제 [요구조건] 입력된 데이터는 JSON타입으로 변환하여 localStorage에 저장 (DB 대신에 localStorage를 쓴다) 입력항목 (순번.serial(PK), 작성일, 작성자, 제목, 내용, 조회수) 순번은 항상 증가하도록 입력된 데이터는 function을 사용하여 객체화하시오. (toJSON()) 을 사용하여 데이터를 JSON으로 변경 [Web] 웹 기초 (24) - HTML, 자바스크립트로 게시판 만들기 (2) HTML태그로 화면 구현 파일 구조 board.css : 공통 css 파일 bo..
[Web] 웹 기초 (22) - JavaScript #15 DOM Object 응용 (2) 동적으로 이미지 삽입 자바스크립트 동적으로 이미지 삽입 이벤트가 발생할 때 이벤트 객체를 이벤트 리스너의 매개변수값으로 전달함 여기서 'event'는 상수값 아니고 이벤트 객체가 담겨있는 변수 event.srcElement 출력하면 이벤트가 담겨있는 태그가 나옴 그것의 value값은 파일의 경로! srcElement : 소스요소 name 아니라 value값 파일태그에 보안상 초기값은 넣을 수 없어서 폴더명이 fakepath (원래 경로는 보여주지 않음. 어떤 경로를 선택하든 무조건 c드라이브 fakepath) ⇒ 업로드하거나 다운로드할 수 없다 event.srcElement : 이벤트가 발생한 개체를 반환/설정 event : document 에서 발생하는 이벤트 자체를 가르킨다 srcElement : 이벤트가 발생된 docu..
[Web] 웹 기초 (21) - JavaScript #14 DOM Object 응용 (1) 동적으로 문서객체 생성 동적으로 문서객체 생성 UI/CSS 출장가고 싶은 지역 동적 선택 국가 지역 인원수 option은 빼고 select상자 틀만 만들어놓기 초기값 생성 (배열 생성, 문서 객체 생성) function init(){ /*초기값 생성하는 부분 초기값이니까 국가만 옵션에 추가*/ let arrayCty = ['미국', '일본']; let arrayZone = [ ['LA', 'New York'], ['동경', '오사카'] ]; /* arrayZone은 2차원 배열 (미국에 따른 지역, 일본에 따른 지역) 미국을 선택하면 첫번째 배열이 나오고 일본을 선택하면 두번째 배열이 나옴 */ index 0 : LA, New Year / index 1 : 동경, 오사카 let arrayCnt = [ [1,2,3,4], [5,..
[Web] 웹 기초 (20) - JavaScript #13 DOM Object 문서객체모델 (Document Object Model) 사용메소드 document.getElementById('아이디') document.querySelector('선택자') document.getElementsByName('이름') // name 속성 document.getElementsByClassName('클래스') document.querySelectorAll('선택자') 동적으로 문서객체 생성 function first(){ let header = document.createElement('h1'); let textNode = document.createTextNode('Hello DOM'); header.appendChild(textNode); document.body.appendChild(h..
[Web] 웹 기초 (19) - JavaScript #12 navigator.userAgent 모바일 장치 구분 let userAgent = navigator.userAgent; console.log('agent : ', userAgent); let userAgent = navigator.userAgent; console.log('agent : ', userAgent); let btn = document.getElementById('btn'); // id가 'btn'인 요소 btn.onclick = function(){ let sp = ['iphone', 'ipad', 'android']; for( i in sp ){ if(userAgent.toLowerCase().match(new RegExp(sp[i]))){ alert('모바일 페이지로 이동...'); location.href='m.naver..
[Web] 웹 기초 (18) - JavaScript #11 배열 (Array), 정렬 (sort) Array 객체 자바스크립트 배열선언 배열의 길이는 가변적이다. 생성 방법 1: let a = new Array() 생성 방법 2 : let a = new Array(1,2,3); 생성 방법 3 : let a = [] 생성 방법 4 : let a = [1,2,3]; 다차원 배열은 1차원 배열의 요소를 다시 1차원 배열로 선언 let a = new Array(); a[0] = new Array(); (a의 첫번째 요소를 다시 배열로 만들기) // 기본형------------------------ let a = [1,2,3,4,5]; console.log(a[0]); // 1 console.log(a); // 배열 정보, 값 출력 //map형 --------------------------- let b = ..
[Web] 웹 기초 (17) - JavaScript #10 String 객체 (length, charAt, indexOf, replace, split, substring) String 객체 String length : 문자열의 길이 charAt(index) : index 위치의 문자 indexOf(str) | lastIndexOf(str) : str의 위치 replace(regExp, replacement) : 문자열 변경 (정규식 사용) split(seperator, limit) : 문자열을 limit의 개수만큼 분해 substring(start [, end]) : 문자열추출 // str.length : 공백 포함한 문자의 개수 let str = "abc 가나다 123 다나가"; console.log(str + ' : ', str.length); // charAt(index) 문자가 어디에 있는지 반환. 제로베이스 let c = str.charAt(1); console...
[Web] 웹 기초 (16) - JavaScript #9 객체 (생성자함수) 객체를 생성하는 방법 객체 리터럴을 사용하여 객체를 생성 : let obj={ ... } function을 사용하여 객체를 생성 : function ABC { ... } (자바의 static과 같은 개념) prototype을 사용하여 객체를 생성 (메소드를 생성) ⇒ 객체 생성할때마다 메소드도 새로 생성되는 것이 아니라 prototype으로 공유하는 것 class를 사용하여 객체를 생성 (자바의 class와 유사함. ECMAScript 6 이상) 리터럴 사용하여 객체 생성하기 기본형 리터럴 객체 리터럴로 만든 obj1은 재사용할 수 없다. 일회성이 아니면 잘 사용하지 않는다. 기본형 + 메소드가 있는 리터럴 객체 리터럴 객체를 map으로 생성 (리터럴 안에 key와 value값이 있다) function을..
[Web] 웹 기초 (15) - JavaScript #8 JSON JSON (형태, 사용법) 1) [ ] : 일반적인 배열 2) { key : value, key : value, ... } : map 구조 (key, value 한쌍으로 / key, value는 모두 큰 따옴표 "" 로 감싸주어야함 = > script에서는 문제없지만 자바에서 오류) 3) 2차원 배열 [ {... }, { ... } ] ⇒ 대괄호 안에 대괄호 4) { key : [ ], key : value } value값이 배열 (혼합해서 사용 가능) id, irum : 속성 (attribute) getter, setter : 함수 or 메소드