728x90
728x90

웹프로그래밍 10

HTML] <input>태그의 type 속성 유형

hidden : 사용자에게 보이지 않으나, 서버로 넘겨지는 값 가지는 필드- 예를 들어 회원가입 폼에서 사용자가 입력하지 않아도 되는 정보를 서버로 넘길 때 사용하는 폼- name 속성으로 필드 이름 지정, value 속성으로 서버로 넘김 text : 텍스트 상자, 한 줄 입력- ID, 이름, 주소 등 텍스트 입력 시 주로 사용- name(필드 이름), size(필드 길이), value(필드 부분에 표시될 내용), maxlength(최대 문자 개수)이름 search : 검색 상자 삽입- HTML5에서 추가된 별도 속성 url : URL 입력 필드 삽입- HTML5에서 요소가 분화함. password : password 입력 필드 삽입- value 속성이 없는 것을 제외하고 일반 텍스트 필드와 동일비밀번호

Web] 자바스크립트를 활용한 비밀번호 체크

커뮤니티, 쇼핑몰 같은 웹 사이트에서 회원가입을 하게 되면비밀번호를 확인하는 경우가 있다.자바스크립트를 활용하면 이를 간단하게 해결할 수 있다. 'password'와, 'pass1'을 입력한 상태. 두 칸 모두 'password'를 입력한 상태. 1234567891011121314151617181920function isSame() { var pw = document.twin.wUserPW.value; var confirmPW = document.twin.wUserPWConfirm.value; if (pw.length 16) { window.alert('비밀번호는 6글자 이상, 16글자 이하만 이용 가능합니다.'); document.getElementById('pw').value=document.getE..

HTML] 회원가입 폼

HTML] 회원가입 폼 HTML로 작성한 회원가입 폼이다.지난 기말 텀 프로젝트를 하면서 만들었는데,최초 만들었던 폼에 비해서 그나마 좀 나아진 모습. table의 크기를 절대적으로 지정해놓아서요즘 같은 반응형 웹 시대에 어울리지 않다고 뭐라하는 사람이 있다면 할 말은 없다. 다음 우편번호 api를 적용해놓아서 상단부에 자바스크립트 함수도 존재하지만,해당 소스는 회원가입 폼이랑은 거리가 멀어서 제외했다. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899..

Web] Select 태그를 이용해 정렬하기

Web] Select 태그를 이용해 정렬하기 필자가 텀 프로젝트를 하면서,구매 내역 조회야 DB에 쿼리문 하나만 날리면 조회가 쉽게 이루어지지만,평가 기준에 별도의 기능이 추가되어 있어야 했고,당시 필자의 뇌리에 스쳤던 것은 구매 내역을 정렬하는 기능이었다. 인터넷에 있는 오픈 마켓에서 자기가 구매했던 내역을 특정일을 기준으로,혹은 특정 기간을 기준으로 정렬하는 것을 구현하는 기능을 흔하게 볼 수 있다.필자는 조회일을 기준으로 최근 1개월, 3개월, 6개월 기준으로 구매 내역을 조회하는 기능을 만들어보려고 했다. 소스와 이런 부분에 대해서 이야기를 나누기 전에 하나 짚고 넘어가야 할 점은,필자는 이전에 PHP를 해본 적도 없고, PHP의 버전이 어디쯤 왔는지까지 정확히 알지 못했다.(지금도 자세히는 모른..

API] 다음 우편번호 API 사용하기

필자가 대학을 다니는 동안 데이터베이스 과목을 수강을 했고,그 과목에서는 PHP와 MySQL을 이용해서 자신만의 쇼핑몰을 만드는 것을 목적으로 했다.사용자 모드와 관리자 모드가 존재하는,서버에 올리면 즉시 활용 가능한 수준의 쇼핑몰이 기말 프로젝트로 평가 받았다. 당시 필자가 들었던 수업에서는,우편번호 DB를 직접 서버에 저장해놓고 끌어다 쓰는 방식으로 우편번호 검색 기능을 넣도록 배웠다.요즘 조금만 찾으면 무료 API를 활용할 수 있다는 걸 지난날의 경험을 통해 깨달은 필자한테,MySQL 작업도 이제 좀 다뤄보는 학생들한테 넣기도 불편하고, 넣는 과정도 복잡하고,심지어는 구식의 데이터를(사용하라는 우편번호 DB는 6자리, 현행 우편번호는 5자리) 활용한다는 것이그리 좋은 소리로 들리지 않았다. 찾아보니..

Javascript] BOM(Browser Object Model)

### Browser Object Model ## Window Object - 브라우저의 내장 객체 중 최상위- 모든 전역 객체, 함수, 변수는 자동적으로 window 객체에 속함- 전역 변수(속성), 전역 함수(메서드)- window를 생략한 형태로 객체와 메서드 사용 가능- 공식 표준은 없으나 주요 브라우저들에서 지원- HTML5에서 브라우저 객체 모델을 공식 명세의 일부로 표준화시킴 # Open() 메서드- 주요 브라우저에서 지원함- 선택사항인 4개의 매개변수- URL : 새롭게 생성할 브라우저 창의 주소, 공백 시, 빈 브라우저 창- name : 새로 생성될 창의 이름 지정, form/anchor의 TARGET 속성을 위한 값- features : 창의 위치, 크기, 모양 지정, 일부 옵션은 IE..

Javascript] Object(객체)

### 객체(Object) * JavaScript에서는 다른 객체지향 언어와 달리 클래스 없이 생성 가능* JavaScript는 이러한 이유로 객체 기반의 스크립트 언어로 불리고, 많은 부분이 객체로 존재해 매우 중요한 개념* 자기 자신이 가진 속성을 이용할 때, 반드시 this 키워드를 이용해야 함. JavaScript의 경우 생략 자체가 불가. - 변형 가능한 속성들의 집합- 이름과 값이 있는 속성들이 포함하는 컨테이너- 데이터를 모으고 구조화하는데 유용- 객체에 없는 속성값 접근 시, undefined 출력 Number, String, Boolean = 유사객체 Array, Function, 정규표현식 등 참조 타입이 객체인 것들 = 객체 ## 속성이름 - 빈 문자열을 포함해 어떤 문자열이나 숫자 ..

Javascript] DOM(Document Object Model)

### Document Object Model;문서객체모델 - W3C에서 정의- Core(모든 문서), XML, HTML 표준모델이 존재- HTML DOM : 웹 문서 로드 시, 브라우저는 구성요소를 객체화하여, 트리 구조의 DOM을 생성. HTML의 구성 요소들을 획득, 변경, 추가 삭제하기 위한 표준 ## 문서 객체- JavaScript에서 사용할 수 있는 객체로 만들어진 HTML 요소- 정적 문서 객체 생성웹 문서를 로드하며 HTML 문서 내의 구성요소 읽고 객체 생성- 동적 문서 객체 생성JavaScript로 HTML 문서에 없던 문서 객체 생성 * 요소 : HTML 문서에 작성한 요소* 노드 : HTML 태그와 문자열이 객체화 된 것, 하나의 객체 그 상태, 하나의 텍스트 상자* 문서객체 : H..

JavaScript] 내장 객체

### JavaScript 내장 객체 - JavaScript 자체적으로 제공- Object : 최상위 객체, 모든 객체는 이를 기본으로 하여 생성- Number : 숫자 표현하는 객체- String : 문자열 표현하는 객체- 메서드 체이닝 : 메서드를 연속적으로 사용하는 것 ## Object - JavaScript의 가장 기본적인 내장 객체로, 최상위 객체- Object() 생성자 함수에 의해 생성된 인스턴스- 모든 기본 내장 객체는 Object 객체를 기본으로 만들어짐- 생성var object{};var object = new Object(); - 메서드constructor() : 객체의 생성자 함수를 나타냄hasOwnProperty(V) : 문자열 매개 변수로 전달된 속성이 객체에 있는지 확인isPr..

쇼핑몰 서비스 이용약관, 개인정보 취급 방침

쇼핑몰에 사용될 서비스 이용약관과 개인정보 보호정책 및 취급 방침은직접 작성하지 않아도 된다.이에 대한 부분은 공정거래위원회와 개인정보보호 종합포털에서 제공하고 있다. 서비스 이용약관(전자상거래)이용약관의 경우 00으로 된 부분을 상호에 맞춰 변경하면 된다. http://www.ftc.go.kr/info/bizinfo/stdContractView.jsp?std_agrmt_no=490&currpage=1&searchKey=1&searchVal=%C0%FC%C0%DA%BB%F3%B0%C5%B7%A1&stdate=&enddate= 개인정보 보호정책 및 취급방침개인정보보호 종합포털에서 제공하고 있으며,사용 목적이나, 범위 등에 대해 설정하고필요 내용을 기재하면 알아서 양식에 맞춰 작성해준다.https://www..

728x90