아래의 소스코드는 다음과 같은 기능을 제한한다. - 우클릭 - 드래그 - 키보드 입력(복사, 붙여넣기) - 개발자도구 - 소스코드 보기 // 마우스 우클릭 막기 document.addEventListener('contextmenu', function(e) { e.preventDefault(); }); // 드래그 막기 document.addEventListener('dragstart', function(e) { e.preventDefault(); }); // 키보드 입력 막기 document.addEventListener('keydown', function(e) { // F12 막기 if (e.keyCode === 123) { e.preventDefault(); } // Ctrl + U 막기 if (e...
1. 경고창 window.alert() window.alert("출력"); 2. HTML출력 document.write() document.write("HTML출력"); // HTML document 이후에 document.write()의 사용은 // 존재하는 모든 HTML을 지우고 완전히 로드되기 때문에 // 테스트 용도로만 추천 JavaScript 출력 테스트 click 3. HTML요소에 출력 innerHTML document.getElementById("test").innerHTML = '출력'; 4. 브라우저 콘솔에 출력 console.log() // 브라우저 F12 개발자 모드에서 확인 가능console.log("출력");
- 위 화면의 코드를 보면 $nbsp를 추가하지 않았는데 생성되어있다. 삭제하고자 코드를 봐도 볼 수가 없으니 헤메고 있었다. - 방법을 찾다가 아래와 같은 방법으로 해결했다. - 아래 코드를 보면 해당 class의 값은 form-group으로 지정되어 있다. - 아래 코드는 &nbps 를 지우는 스크립트이다. form-group 위치에 자신이 지정한 클래스명을 적어넣으면 된다. - 해결되었다.
Vue.js의 TodoMVC ToDo list 연결 스크립트 https://kr.vuejs.org/v2/examples/todomvc.html TodoMVC — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org ToDo 리스트 만들기 : 임시데이터로 todo리스트 표시 ToDo 리스트 만들기 {{ todo.text }} [ {{ remaining }} / {{ todos.length }} ] 건 처리 추가 & 삭제 기능 넣기 ToDo 리스트 만들기 {{ todo.text }} 처리완료 목록 삭제 [ {{ remaining }} / {{ todos.length }} ] 건 처리
Google Chart 코드 가져오는 방법 https://developers-dot-devsite-v2-prod.appspot.com/chart Charts | Google Developers Interactive charts for browsers and mobile devices. developers.google.com 해당 화면 하단의 코드를 복붙한다. 구글차트 사용해보기 - Google Charts 라이브러리의 CDN을 지정하는 방법 Google Charts로 원그래프 그리기 선호하는 점심 메뉴 투표 구글차트와 Vue 같이 사용하기 Google Charts로 원그래프 그리기 선호하는 점심 메뉴 투표 {{item[0]}} : {{item[1]}} 한표 + 한표 -
조건에 따른 표시 : v-if True일때만 표시 표시 {{myVisible}} 체크박스 ON 체크박스 OFF - 클릭하면 버튼을 삭제하는 예제 클릭하면 "좋아~" 버튼을 삭제하는 예제 좋아~ 반복 표시 : v-for - 배열 데이터를 리스트로 출력 배열 데이터를 리스트로 표시하는 예제 {{item}} - 오브젝트 배열 데이터를 리스트로 출력 오브젝트 배열 데이터를 리스트로 표시하는 예제 {{item.name}} \{{item.price}} - 구구단을 출력하는 예제 더보기 1 x 5 ~ 10 x 5를 반복 표시하는 예제 {{n}} x 5 = {{n * 5}} - 배열 데이터를 번호가 붙어 있는 리스트로 표시하는 예제 더보기 배열 데이터를 번호가 붙어 있는 리스트로 표시하는 예제 {{index}} : {..
이벤트와 연결하기 : v-on - 버튼 클릭 or 키 입력 시 사용한다. - => 메소드는 Vue 인스턴스에 methods 옵션을 추가해서 만든다. 클릭하면 증가하는 예제 {{ count }} 회 1씩 증가 1씩 감소 다시하기 - 파라미터를 전달하여 메소드 실행하기 : ex) v-on:click="countUp(3)" 클릭하면 증가하는 예제 {{ count }} 회 파라미터를 전달하여 메소드 실행하기 3증가 10증가 100증가 - 버튼 클릭 시 프롬프트 띄워서 원하는 수 만큼 증가시키기 클릭하면 증가하는 예제 {{ count }} 회 파라미터를 전달하여 메소드 실행하기 3증가 10증가 100증가 원하는 수 만큼 증가
