Jun's TID

자바스크립트도 마찬가지로 객체를 생성하면서 동시에 생성자를 선언해줄 수 있다. 이 때, 맴버 변수나, 메서드들은 반드시 this를 사용하여 선언해줘야 한다. 예제를 확인해보자. ◎quiz-2.js var circle1 = new Circle(r); document.write("반지름이" + r + "cm 일 때" + " 원의 둘레: 약" + circle1.circumference() + "cm 원의 넓이 : 약" + circle1.area() + "cm2"); //Circle 객체 생성자 선언 function Circle(radius) { // Circle 객체의 멤버 변수 선언 this.radius = radius; //Circle 객체의 메서드 선언 this.circumference = functio..

자바스크립트도 마찬가지로 객체지향언어이기 때문에 객체를 생성하여 활용할 수 있다. 객체는 다음과 같은 형식으로 생성할 수 있다. var member = {name: 춘햄, age : 27}; 생성한 객체는 다음과 같이 사용할 수 있다. ◎member.js var member = { id: 123, name: "choonham", age: 27, address: "incheon" }; ◎member.html

기본적으로 HTML 태그들은 작성되는 순서대로 위에서 아래로 나열되지만 style 속성을 display:inline-block 로 지정해주게 되면, 세로에서 가로로 객체들이 나열된다. ◎gugudan.css div { display:inline-block; /*가로로 나열*/ padding:0 20px 30px 20px; margin:15px; border:1px solid #ccc; line-height:2; } div h3 { text-align:center; font-weight:bold; } ◎gugudan.html 구구단 깔 - 끔

더보기 이것은 접은 글 입니다. 위와 같이 자바스크립트를 활용하여 글이나 이미지 등을 클릭했을 때만 보이게할 수도 있다. 간단하게 hideDetail, showDetail 함수를 각각 작성하여 버튼의 onclick에서 호출해주기만 하면 된다. ◎event.css #item { position:relative; width:500px; height:auto; padding:15px 20px; margin:auto; } button { background-color:rgba(255,255,255,0.7);; padding:5px; border:1px solid #ccc; font-size:0.8em; } .over { position:absolute; /*이와 같이 절대 좌표로 버튼을 이미지 위에 띄울 수 있..

자바스크립트 또한 다른 언어와 비슷하게 if, for, while 등 거의 대부분의 제어문을 사용할 수 있다. 간단한 예제 몇개를 작성해보며 알아보자. 1. if 2. for 구구단 3. switch - case 4. while 각각의 제어문의 사용 방법을 익히기 위한 예시이므로, 따로 css코드나 결과 페이지는 설명하지 않는다.

자바스크립트는 alert, window, confirm, prompt 등 다양한 방법으로 사용자에게 알림창을 띄울 수 있다. 이 중 prompt는 상대방이 값을 입력할 수 있는 입력창을 함께 띄워 서버나 스크립트가 입력 값을 사용한 연산이 가능하게끔 만들어 준다. 예제를 한번 확인해보자. ◎age.css @charset "UTF-8"; /*age.css*/ body{ text-align: center; } .btn { margin-top:50px; font-weight: 400; color:#fff; background-color:#007bff; text-align: center; white-space: nowrap; vertical-align: middle; /*세로 정렬*/ border: 1px so..

Date 클래스를 사용하여 현재 시간을 변수에 저장한 뒤 페이지에 출력하는 아주 간단한 자바스크립트 예제이다. ◎js-time.js 별로 맛은 안나는 매우 간단한 예제이지만, 꽤나 유용하게 사용할 수 있는 클래스이니, 알아두는 것이 좋다.

자바 스크립트의 첫 포스팅이다. 개인적으로는 입문하긴 쉽지만 마스터하긴 굉장히 어려운 언어라고 생각을 하는데, 지금부터 차근차근 스탭을 밟아가며, 공부해보자. 우선 그 개념부터 짚고 넘어가자. 기본적으로 자바 스크립트는 웹 브라우저 내에서 동작하는 객체 기반의 스크립트 프로그래밍 언어이다. 또한 다른 응용 프로그램의 내장 객체에도 접근할 수 있기 때문에 View 단에서 동적 웹 페이지를 구성하기 위하서 반드시 알아둬야할 언어이다. 즉, 아래와 같이 script내에서 HTML 태그들을 제어하여 페이지에 동적인 느낌을 줄 수 있다. ◎change.html 자바스크립트 위의 글자를 클릭 위의 글자를 클릭 ◎change_color.css @charset "UTF-8"; body{ text-aglgn: cente..

이번 포스팅은 웹 프로젝트를 만들 때, 특정 페이지에서 사용자가 서버로 파일을 업로드할 수 있게끔 View단을 구성하고, 이를 Server에서 처리할 수 있도록 하는 로직을 어떻게 구현해야 하는 지 알아보겠다. 우선, 기본적으로 input 태그를 사용하여 사용자가 사용자의 pc에서 파일을 선택할 수 있게끔 할 수 있다. 이 input 태그를 처리할 server가 정상적으로 file 객체를 다루게 할 수 있도록 하기 위해서는 다음과 같이 form 태그를 구성하여 encoding type을 지정해야 한다. 일반적으로는 request를 통해서 form 태그 내의 속성들을 얻어낼 수 있지만, 위와 같이 enctype="multipart/form-data" 로 지정하여 전송했을 경우 일반적인 방법으로는 reque..

HTML 문서에는 텍스트가 상당히 많은 비중을 차지하며 CSS 를 사용해 텍스트의 스타일을 지정하는 일이 많기 때문에 font 설정을 css를 이용하여 한번에 설정해놓고 사용할 수 있다. 1. font-size: 텍스트의 크기를 설정 ABCD 2. color: 텍스트의 색상 ABCD 3. font-style: 텍스트의 스타일 ABCD 4. font-weight: 텍스트의 굵기 ABCD 5. font-variant: 대소문자에 대한 스타일 ABCD 6. line-height: 줄 간격 지정 ABCD 7. font: 텍스트의 스타일을 한번에 설정할 수 있는 속성 p { font style: italic; font weight: bold; font size: 12px; line height: 1.6; font..