본문 바로가기
728x90
반응형

블로거

[java script] Vue.js 조건(v-if)과 반복(v-for) 1 1.v-if : 조건에 따른 표시 이전에 if문을 java와 java script에서 많이 다뤄 보았었습니다. Vue.js에서는 어떻게 사용하는지 예제로 바로 알아보죠! ◎ 체크박스가 true 일때 결과를 출력하는 예제) true일때만 표시하는 예제 표시 체크박스가 ON script의 메서드에 if대신 body 내부에 변수를 넘겨주면서 체크박스가 on이 되면 v-if문 안의 글자가 출력됩니다. 조건이 true라면 표시 의 방법으로 사용하시면 됩니다. ◎ if문을 이용해 두 수를 비교하는 예제) if문을 이용해 두 수를 비교하는 예제 첫 번째 수는 : 두 번째 수는 : 큰 수 : {{ num1 }} 작은 수 : {{ num2 }} 작은 수 : {{ num1 }} 큰 수 : {{ num2 }} 두 수는 같습.. 더보기
[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] 자바의 정석 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, .. 더보기
[java script] 구구단 출력하기 예시 ◎ 구구단 만들기 예제) 홀수단은 1행, 짝수단은 2행으로 출력되도록 하시오. 홀수 짝수 table과 id를 이용해 홀수와 짝수 칸을 나눠주고 홀수, 짝수 버튼을 누르면 아래와 같은 출력이 되도록 만듭니다. 문자열은 변수에 더해서 저장하면 변수에 계속해서 문자열이 저장되게 됩니다. ex) str += "" => str = str + → 이때, 자바스크립트 내부에서 id를 지정할 때면 작은따옴표로 지정하면 됩니다. 구구단이 계속해서 div로 구분되어 저장되고 지정한 변수에 짝수와 홀수를 구분해서 넣어줍니다. → 반복문 내부의 str은 계속 초기화 되기 때문에 반복해서 값들을 넣어줄 수 있습니다. document.getElementById("odd").innerHTML = oddstr; → odd라는 id에.. 더보기
[java script] addEventListener의 이벤트 사용 예시 ◎ addEventListener 사용 예시 상품 정보 원산지 : 에디오피아 지 역 : 이르가체프 코체레 농 장 : 게뎁 고 도 : 1,950 ~ 2,000 m 품 종 : 지역 토착종 가공법 : 워시드 상세 설명 2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다. 커피의 풍미 은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득. 1. '상품 정보'에 마우스를 올리면 글자색(red), 글자사이즈(2.0em), 배경색(blue)을 변경하고 마우스를 내리면 글자색(blue),.. 더보기
[java script] addEventListener의 이벤트 종류 ◎ UI 이벤트 NO Event Description 1 load 웹 페이지나 스크립트의 로드가 완료되었을 때 2 unload 웹 페이지가 언로드 될 때 (주로 새로운 페이지를 요청한 경우) 3 error 브라우저가 자바 스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우 4 resize 브라우저 창의 크기를 조절했을 때 5 scroll 사용자가 페이지를 위 아래로 스크롤 할 때 6 select 텍스트를 선택했을 때 ◎ Keyboard 이벤트 NO Event Description 1 keydown 키를 누르고 있을 때 2 keyup 누르고 있던 키를 뗄 때 3 keypress 키를 누르고 뗐을 때 4 keyCode 키 코드 값 ◎ Mouse 이벤트 NO Event Description 1 clic.. 더보기
[java script] 문서 객체 모델(DOM) 1. 문서 객체 모델이란? ◎ 자바스크립트를 이용해 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법입니다. ▷ 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리합니다. ex) 웹 문서 전체는 document 객체, 삽입한 이미지는 image 객체, h1의 글자는 text 객체입니다. ◎ DOM 트리 ▷ 웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것입니다. ▷ 나무 형태가 되기 때문에 "DOM 트리"라고 합니다. ▷ 노드(node) : DOM 트리에서 가지가 갈라져 나간 항목입니다. ▷ 루트 노드(root node) : DOM 트리의 시작 부분(html) ◎ DOM 구성 원칙 ▷ 모든 HTML 태그는 요소(element) 노드 ▷ 웹 .. 더보기
728x90
반응형

티스토리툴바