프로그래밍 언어/Javascript (9) 썸네일형 리스트형 javascript 즉시 실행함수 script 코드 작성시 여러 명이 함께 개발을 하다 보면 변수명이 충돌날 수 도 있는등 엉킬 수 있는 가능성이 있다. 또한 global 변수인 경우에 브라우저단에서 접근을 할 수 있기 때문에 보안상 안좋은것도 있다. 따라서 기능을 다 구현하고 나면 로컬변수로 만들어주는게 필요하다. 아래는 현재 전역으로 선언된 memberaddress라는 변수를 개발자도구에서 접근한 것이다. 이를 아래 처럼 함수를 감싸고 실행해주는 방식인 즉시실행함수를 사용하면된다. 이 안에 코드를 포함시킴으로써 로컬변수로 만들수 있어서 변수 충돌도 막고 외부에서의 접근을 막을 수 있다. 감싸고 난 후 memberaddress를 출력해보려 하면 에러가 난다. (외부에서 접근을 막았다.) 동적으로 생성된 태그에 이벤트 걸기(event delegation), 링크 막기 1. ajax통신을 통해 아래 ul태그 안에 li태그를 동적으로 만들어줄것이다.(pagination) 2. 페이지가 최초 로딩될때 readstores.do라는 url로 요청을 하여 위의 ul태그에 동적으로 li태그를 만들어준다. 3. 결고 화면은 아래와 같다. 4. 그리고 동적으로 만들어진 소스코드를 보면 아래와 같은데, 현재는 startPage가 1이기 때문에 이전버튼은 disabled 클래스가 적용해놨다. 근데 disabled 클래스를 적용해놨다고 해서 해당 a태그를 클릭했을때 클릭이 저절로 막혀지는게 아니라 UI측면으로만 반영 된것이다. 따라서 diabled클래스를 가진 a태그가 클릭이 되었을때는 클릭이 안되도록 즉 link타고 가지 않도록 javascript쪽에서 처리를 해주어야 한다. 이는 현재.. 폼 유효성 체크-javascript 정규표현식 이용 - 아이디 유효성 체크 (알파벳+숫자 5~20글자) id 입력란에 keyup이벤트가 발생했을때 id 입력란에 입력된 값을 inputId로 가져온다.알파벳+숫자 5~20글자에 해당하는 자바스크립트 정규식을 이용하여 유효성 여부를 체크한다. 이때 '정규식 표현.test(체크하고자 하는 입력값)' 의 형식을 이용하면 되고 매칭되면 true, 아니면 false를 반환하기 때문에 이 값에 따라 추가적인 로직을 수행하면된다. - 이름 유효성 체크: 한글로만 2~10글자 -전화번호 유효성 검증: 01X - XXXX - XXXX 형식 검증정규표현식을 쓸때 시작(^)과 끝($)을 명시하지 않으면 abcd 010-3433-1234 sjsjsj 이런것도 결과 값이 true가 되어버리기 때문에 꼭 명시해주어야한다. javascript와 servlet간의 json 송 수신 - javascript(웹 브라우저단)에서 보낼 데이터를 json타입으로 만들어 서버로 보낸다. 1.등록 버튼(id=registerBtn)을 클릭했을 때 사용자로부터 입력받은 입력 폼 태그의 값들(맛집 이름(id=sname), 위도(id=lat), 경도(id=lng), 메뉴(id=menu)을 받아온다. 2. 객체를 하나 만들고, 받아온 value값들을 이 객체의 property로 추가해준다. 3. 이후 JSON.stringify() 메소드의 매개변수로 넘겨줘서 json 타입의 문자열로 바꿔준다. 그러면 다음과 같이 {sname : 홍콩반점, lat : 37.12313, lng : 127.123123, menu : 짜장면} 의 형태로 바뀐다. 4. 이때 HTTP 프로토콜에서의 키:값은 get이면 url, .. hoisting 자바스크립트에서 변수가 선언될 때 변수 선언부는 함수 스코프의 최상단으로 끌어올려지고, 이때 변수 값에는 undefined가 대입된다. 이와 같은 끌어올림 덕분에 자바스크립트에서는 함수 어디에서나 변수에 항상 접근할 수 있다. 하지만 변수에 초기 값을 대입하기 전까지 변수는 undefined가 된다. 즉, 아래와 같은 코드를 작성하고 실행하면 v는 undefined라고 뜬다. 이는 자바스크립트 엔진에서 변수를 함수 상단으로 끌어올렸기 때문이다.(선언만 할 뿐 지역변수를 초기화 하지는 않는다.) 이러한 자바스크립트에서의 끌어올림의 비밀은 자바스크립트 엔진이 스코프에 진입할 때 코드를 두 단계로 처리하는데 있다. 첫번째 단계에서 자바스크립트 엔진은 변수를 초기화하고, 두 번째 단계에서는 실제 코드를 실행한다.. javascript의 closure 스코프 체인은 함수를 실행한 위치가 아닌 정의한 위치에 의해 결정된다. 즉, 스코프 체인은 함수를 호출하기 전에 이미 만들어지며, 이 덕분에 우리는 closure를 만들 수 있다. 예를 들어, 다른 함수 내부에 정의되어 있다가 전역 스코프로 반환된 함수가 있다고 가정해 볼 때, 반환된 함수는 전역 스코프에 있더라도 스코프 체인을 통해 부모 함수에 여전히 접근할 수 있다.아래 코드는 익명 함수를 반환하는 parentFunction이라는 함수를 정의한 후 전역 스코프에서 이 함수를 호출할 것이다. 반환된 익명 함수는 parentFunction 내부에서 정의되었기 때문에 실행될 때 parentFunction의 스코프에 접근할 수 있다. 이를 가리켜 closure라 부른다. javascript에서의 var 이용 유무에 따른 변수 scope 자바스크립트에서는 var 키워드 없이 변수를 선언하면(설령 함수 스코프에서 선언했다하더라도) 지역 스코프가 아닌 전역 스코프에 변수가 추가된다. 따라서 함수 내에서 변수를 선언할 때는 항상 var를 사용해야 한다. 물론 의도적으로 함수 안에서 전역 스코프 속성을 만들거나 바꿀 계획이었다면 var를 사용하지 않아도 된다. 로또 번호 추첨 프로그램(jquery이용) 이전 1 2 다음
