특정 값을 선택했을 때.
radio, checkbox : 자동으로 checked 속성이 부여된다.
select~option:자동으로 selected 속성이 부여된다.(디폴트는 최상단의 값이다.)
myform.email.value.indexOf('@')==-1 : 특정 위치의 값이 어떠한 값을 포함하고
있는지 확인하는 메소드 없다면 -1이 리턴된다.
location.reload() : 새로고침이나 재접속과 같이 갱신하여 실행하겠다.
onclick="location.href='http://www.daum.net'":
location 객체에 href 속성을 사용해 해당 위치로 이동한다.
RegularExpression(정규표현식) : 주로 문자열의 패턴의 유효성 검사를 할때 사용한다.
예/ 우편번호,이메일 등.
var reg= /^\d{6}-[1-4]\d{6}$/; //[1,2,3,4]도 된다.(1~4 사이)
var reg=/^\d{4}[\s/\.-][01]?\d[\s/\.-][0~3]?\d /;
= 숫자 4개 뒤에 공백 또는 슬래쉬 또는 점 또는 하이픈 뒤에 0이나 1이 올수도 있고
뒤에 숫자 하나 뒤에 또 특수기호 뒤에 0~3사이가 올수도 있고 뒤에 숫자 1개
=생년월일을 받는 타입.
-을 처음이나 마지막에 써주는 이유: -가 앞문자와 뒷문자의 사이를 뜻하기 때문이다.
var reg=/^[a-zA-Z0-9_]{5,10}$/;
=소문자 a~z 대문자 A~Z 숫자 0~9 _ 을 5~10자리로
?: 앞의 조건이 하나 있거나 없거나
+: '' 하나 이상 있음
*: '' 하나 이상 있거나 없거나
https://regexper.com/ : 짜여진 패턴을 그림으로 보여주는 웹사이트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex04_RegularExpression.html</title> <!-- 정규표현식 -->
<script type="text/javascript">
function check() {
msg=window.document.forms[0].code.value;
/* form 배열의 0번째 (자동생성된다.) */
var reg = /^\d{1,3}-?\d{3}$/ ;
/*(^:시작지점 지정)숫자 1~3자리 -(?=앞에 없거나 1개 있거나 이 경우 -이 있거나 없거나.
) 숫자 3자리(^:종료지점 지정)*/
if(msg.search(reg) == -1){
/* search() 패턴을 알아보는 메소드 다르다면 -1을 리턴한다.
단 해당 패턴을 가지고 있다면 앞뒤에 다른 문자가 있어도 -1을 리턴하지 않는다.
그래서 패턴을 설정할때 앞에는 ^ 뒤에는 $ 를 붙여줘야한다.*/
alert('잘못된 형식');
} else{
alert('올바른 형식');
}
}
</script>
</head>
<body>
<form>
<input type='text' name='code'>
<input type="button" value='클릭' onclick='check()'>
</form>
</body>
</html>jQuery
jQuery.com에서 설치
DOM(Document Object Model) : HTML 태그를 객체로 취급하는 방식
<script type="text/javascript" src="./../js/jquery.js"></script>
//jquery파일의 위치를 꼭 정의해주어야 한다.
<script type="text/javascript">
$(document).ready(function(){ //도큐먼트를 객체화 함
//document가 로드 된 후 실행하는 메소드
$('span').addClass('spotlight'); //$('태그명').메소드('불러올값');
$('div').addClass('redText');
});
</script>$('#simple2').css('color','green').addClass('under');
=id가 simple2인 곳에 css 직접 설정. 속성과 값을 ,를 통해 같이 써줘야한다.
뒤에 연달아서 다른것도 설정해 줄 수 있다.
$(document).ready(function() {
$('tr:nth-child(1)').addClass('selectedstyle'); //==
$('tr:first-child').addClass('selectedstyle'); //위와 같다.
$('tr:first').addClass('selectedstyle');//전체의 첫번째 위와 다르다
$('tr:nth-child(3n)').addClass('selectedstyle2');
//3의 배수에 해당하는 위치
$('tr:nth-child(3n+1)').addClass('tdselectedstyle');
$('tr:even').addClass('selectedstyle');
$('tr:nth-child(even)').addClass('selectedstyle');
//even,eq:0부터 시작 전체테이블로 따짐
//nth-child(even):1부터 시작 각각의 테이블로 따짐
$('td:eq(3)').addClass('tdselectedstyle');
});'Develop > JavaScript JQuery JSP' 카테고리의 다른 글
| 0707 AJAX JSON XML (0) | 2022.07.08 |
|---|---|
| 0706 JQuery (0) | 2022.07.06 |
| 0704 <form> 태그의 특성 (0) | 2022.07.04 |
| 0704 시간 띄우고 인터벌로 갱신하기 (0) | 2022.07.04 |
| 0704 PopUp과 리턴데이터 활용 (0) | 2022.07.04 |