코딩 노트

5.map-address.html DOCTYPE html> 주소로 지도 찾기 #map { width:100%; height: 300px; } /* info window */ .outer { font-size: 20px; padding: 0.5em; } .outer > .inner { width: 100%; text-align: center; } $(function(){ //마커와 인포윈도우를 기억해 두기 위한 배열 var memory = { markerList: [], infowindowList: [] }; //var container = document.getElementById('map'); //var container = document.querySelector("#map"); var contain..

55.map.html DOCTYPE html> Kakao 지도 시작하기 var container = document.getElementById('map'); var options = { center: new kakao.maps.LatLng(33.450701, 126.570667), level: 3 }; var map = new kakao.maps.Map(container, options); 56.map.html DOCTYPE html> Javascript 실습 #map { width:100%; height: 300px; } var container = document.getElementById('map'); var options = { center: new kakao.maps.LatLng(33.45070..

21.calculate.html DOCTYPE html> 체크박스 과제(가격계산) function calculate(tag) { // console.log(tag.value); //value를 읽는 방법 // console.log(tag.dataset.price); //data-* 를 읽는 방법 //체크되어 있는 모든 체크박스를 불러와서 data-price를 합쳐서 출력 var checkboxList = document.querySelectorAll(".check-item:checked"); //체크되어 있는 상품(옛날 함수는 상태를 불러오는 것이 안 됨) var total = 0; for(var i = 0; i < checkboxList.length; i++){ total += parseInt(chec..

.*와 .*? 의 의미는 다르다. ?는 0또는 1이라는 뜻/*는 0이상이라는 뜻 15.join.html function checkMemberId() { var input = document.querySelector("[name=memberId]"); var regex = /^[a-z0-9]{5,20}$/; //따옴표가 아닌 슬래시로 작성 var isValid = regex.test(input.value); //test는 정규표현식 객체만 가질 수 있다. input.classList.remove("success", "fail", "fail2"); if(isValid) { //아이디 중복검사 코드 및 성공 실패 input.classList.add("success"); return true; //누가 불러서 ..

14.write.html DOCTYPE html> 게시글 작성 function checkTitle() { var input = document.querySelector("[name=boardTitle]"); // var regex = /^.{1,100}$/; //정규표현식으로 검사한다면 var isVaild = input.value.length > 0 && input.value.length 1000){ var copy = textarea.value; while(copy.length > 1000) { copy = copy.substring(0,copy.length - 1); } textarea.value = copy; } var span = document.querySelector(".form-input-..

전시간 리뷰 html과 css로 만들어진 구조에 백엔드와 효율적으로 소통하기 위한 언어가 Javascript 언어이다, 1차적으로 이벤트 처리 방법을 배우는 것이라 봐도 좋다. 1, 라는 태그로 둘러쌓인 언어가 필요하다. 2. 자바와 유사하지만 차이점이 있다. (조건이나 문법은 거의 동일) 3. 함수는 반환형이나 접근제한 없이 적는다. (이 함수를 html에서 특정상황에 부르게 처리, 이벤트의 종류에 따라 함수 호출 가능) 4. 태그를 가져온다가 아닌 태그를 제어하는 리모콘이 생겼다라고 보는 게 좋다. 5. 함수로 속성과 스타일, 클래스를 바꿀 수 있다. 정규표현식으로 아이디, 비밀번호 형식 검사하는 3가지 형태 11.join.html DOCTYPE html> 회원가입 function checkId ()..

자바스크립트는 코드가 너무 길기 때문에 제이쿼리를 사용하면서 코드 간소화와 크로스 브라우징을 한다. 이 중 하나는 다룰 수 있어야 프론트엔드라고 할 수 있다. 라는 태그가 있어야 Javascript를 쓸 수 있고 head에 위치하는 게 알맞다. 브라우저마다 스크립트 실행 순서가 다르기 때문이다. 스크립트언어의 단점 유연하기 때문에 코드 오류를 찾을 수 없다. NaN은 오류와 가까운 값이다. ex) console.log(v1 * d); //이상한 계산(NaN : Not A Number) 자바스크립트에서 홈페이지 알림창을 띄울 수 있는 구문 alert("Hello Javascript!"); 02.variable.html //int a = 10; //System.out.print(a); var a = 10; ..

4장 목표: 다양한 객체의 종류와 각 객체에 내장된 기능(메서드) 및 속성을 이해하기 04-1 객체 ▶ 객체란? 자바스크립트는 객체(Object) 기반 언어이다. 객체는 기능과 속성을 가지고 있다. ex) 객체 - TV ▷ 기능(Method) - 켜다(); 끄다(); , 볼륨을 높이다(); , 볼륨을 줄이다(); 속성(Property) - 너비;, 높이;, 색상;, 무게; // 기본형 객체.메서드(); // 객체의 메서드를 실행 객체.속성; // 객체의 속성값을 가져옴 or 객체.속성=값; // 객체의 속성값을 바꿈 ▶ 객체의 종류 내장 객체, 브라우저 객체 모델(BOM, Browser Object Model), 문서 객체 모델(DOM, Document Object Model) - 내장 객체 자바스크립트..