본문 바로가기

728x90
반응형

전체 글

[java script] Vue.js 유저 입력 연결(v-model) 1. v-model : 입력 폼을 데이터와 연결해줍니다. ◎ 예제 1) 입력한 문자열을 표시하는 예제 입력한 문자열을 표시하는 예제 나는 {{ myName }} 입니다. 문자열을 텍스트 박스 안에 입력하면 아래에 결과가 출력됩니다. ◎ 예제 2) 입력한 문장과 문자수를 표시하는 예제 입력한 문장과 문자수를 표시하는 예제 문장은, 「{{ myText }}」 문자수는 {{ myText.length }} 자입니다. 문장을 입력하면 enter키와 상관없이 문장을 계속해서 나열하고 문장과 문자수를 표시합니다. ◎ 예제 3) 체크박스의 ON/OFF를 확인하는 예제 체크박스의 ON/OFF를 확인하는 예제 체크박스의 상태는 {{ myCheck }} 체크를 하면 true, 체크를 해제하면 false가 출력됩니다. ◎ 예.. 더보기
[java script] Vue.js 속성(v-bind, a, class) 1. v-bind : 요소의 속성을 데이터로 지정합니다. ◎ image 속성 예제 이미지 속성을 지정하는 예제 직접지정 v-bind로 지정 v-bind 생략 이미지 변수를 만들어 v-bind:src="프로퍼티명"으로 지정할 수 있습니다. 또한, v-bind는 생략하고 a태그를 사용하면 동일하게 적용됩니다. ◎ url 속성 예제 링크를 직접지정 링크를 v-bind로 지정 링크를 v-bind로 생략 지정 url 변수를 만들어 v-bind:href="프로퍼티명"으로 지정할 수 있습니다. 이미지와 동일하게 v-bind는 생략하고 a태그를 사용하면 동일하게 적용됩니다. ◎ align 속성 예제 align 지정 예제 우측정렬 직접 지정 우측정렬을 v-bind로 지정 우측정렬을 v-bind 없이 지정 align 변수.. 더보기
[java script] Vue.js 입문 데이터 표시(new Vue, v-text, v-html) 먼저 Vue의 기본 코드를 살펴보겠습니다!! 1. Vue 인스턴스 만들기 : new Vue, el, data 아래와 같이 Script에 작성하면 Vue를 사용할 수 있습니다. new Vue({Vue 인스턴스 내용}) 또는 var 변수명 = new Vue({Vue 인스턴스 내용}) 보통 Vue의 구성은 아래를 참고하시면 됩니다! new Vue({ el : 어느 HTML 요소를 연결할 것인가 data : 어떤 데이터인가 methods : 어떤 처리를 하는가 computed : 어떤 데이터를 사용하여 계산하는가 watch : 어느 데이터를 감시하는가 }) 2. 데이터 표시 방법 데이터를 표시할 때는 이중 중괄호 {{ 데이터 }} 즉 머스태시(Mustache) 태그로 표시합니다. 머스태시 : 콧수염 더블쿼테이션.. 더보기
[java script] Vue.js 입문 start 1. Vue.js란 : 자바스크립트 프레임워크 중 하나입니다. ▷ Vue.js : 데이터와 뷰를 연결해주는 역할 ◎ 프레임워크 : 복잡한 내용을 간단히 미리 규격화/모듈화 해둔 도구 ▷ 프레임워크 사용시 : 기존 자바 스크립트에서 사용할 수 없던 문법이나 입력 방식들을 사용할 수 있게 되고, 타 플러그인을 통해 UI 컴포넌트나 스타일, 추가 기능 등을 불러 사용하는 것도 가능해집니다. ▷ 자바스크립트 프레임워크 종류 : Vue/React/Angular ▷ SPA(Single Page Application)은 한 페이지에서 모든 컨텐츠를 보여주는 웹사이트입니다. ▷ 이때, 동적인 페이지를 쉽게 만들어주는 기술이 Vue.js입니다. jQuery보다 간단합니다. ▷ 아래의 홈페이지는 Vue.js를 통한 예제 .. 더보기
[java] 자바의 정석 ch6 연습문제 풀이 6-1) 다음과 같은 멤버변수를 갖는 SutdaCard클래스를 정의하시오. 타입 변수명 설명 int num 카드의 숫자. (1~10 사이의 정수) boolean isKwang 광(光)이면 true, 아니면 false // 풀이: class SutdaCard{ int num; boolean isKwang; } 6-2) 문제 6-1에서 정의한 SutdaCard클래스에 두 개의 생성자와 info()를 추가해서 실행결과와 같은 결과를 얻도록 하시오. class Exercise06_02 { public static void main(String args[]) { SutdaCard card1 = new SutdaCard(3, false); SutdaCard card2 = new SutdaCard(); System... 더보기
[java script] DOM 노드 추가, 삭제 연습 문제 문제 1) 문제 파일을 열면 다음과 같이 항목 5개가 나열되어 있습니다. 힌트를 참고하여 항목 앞에 있는 체크 표시를 누르면 항목 텍스트의 글자가 회색(#ccc)으로 바뀌면서 가로줄이 그려지는 소스를 작성하세요. 할 일 목록 ✓할 일 1 ✓할 일 2 ✓할 일 3 ✓할 일 4 ✓할 일 5 최종 결과는 1번 클릭시 원하는 스타일로 지정했고 동일한 것을 1번 더 누르면 원상태로 복귀하도록 했습니다. 이때, querySelectorAll을 사용하면 원하는 노드를 다 배열로 지정합니다. 그 배열을 반복문을 통해 click하면 clicks라는 함수가 실행 되도록 설정했습니다. 클릭 함수에는 this를 사용해 해당 배열만 동작하도록 만들었습니다. this라는 것은.. 더보기
[java script] DOM에서 노드 추가, 삭제하기 1. 노드 리스트란? ▷ querySelectorAll() 메서드를 사용해 가져온 여러 개의 노드를 저장한 것입니다. ▷ 배열과 유사합니다. Web Programming HTML CSS Javascript li를 배열과 유사한 형식으로 찾아줍니다! 2. 노드 추가하기 ◎ 텍스트 노드를 사용하는 새로운 요소 추가하기 ▷ 요소 노드 만들기 - createElement() 메서드 ex) var newP = document.createElement("p") → p, div, a, h1 등의 노드를 만들어줍니다. ▷ 텍스트 노드 만들기 - createTextNode() 메서드 ex) var textNode = document.createTextNode("DOM은 document object model") → 노드.. 더보기
[java] 자바의 정석 ch5 연습문제 풀이 5-1) 다음은 배열을 선언하거나 초기화한 것이다. 잘못된 것을 고르고 그 이유를 설명하시오. a. int[] arr[]; b. int[] arr = {1,2,3,}; c. int[] arr = new int[5]; d. int[] arr = new int[5]{1,2,3,4,5}; e. int arr[5]; f. int[] arr[] = new int[3][]; 풀이) d, e d : 두 번째 대괄호 안에 배열의 크기를 지정할 수 없습니다. 이미 괄호 안의 데이터 개수에 따라 방 개수가 정해졌기 때문입니다. e : 배열을 선언할 때는 배열의 크기를 지정할 수 없습니다. 5-2) 다음과 같은 배열이 있을 때, arr[3].length의 값은 얼마인가? int[][] arr = { {5, 5, 5, 5, .. 더보기

728x90
반응형