Text Input Exception Treating
<body>
<div>
<!--제목 생략-->
<input type="text" id="name">
</div>
<div>
<input type="text" id="java">
</div>
<div>
<input type="text" id="oracle">
</div>
<div>
<button type="button" id="btn"></button>
</div>
</body>- text 타입의 입력 버튼 생성
- 입력 버튼에 아무것도 입력하지 않거나 적절하지 않은 text 입력하는 예외 처리 필요
<script>
$("#btn").click(function(){
var name=$("#name").val();
var java=$("#java").val();
var oracle=$("#oracle").val();
if(name.length==0)
{
alert("이름을 입력해주세요");
$("#name").focus();
return;
}
if(isNaN(java)||java.length==0) //isNaN:숫자입력시 false,문자입력시 true
{
alert("자바점수는 숫자로만 입력해주세요");
$("#java").focus();
return;
}
if(isNaN(oracle)||oracle.length==0)
{
alert("오라클점수는 숫자로만 입력해주세요");
$("#oracle").focus();
return;
}
});
</script>- val() 함수는 대상 태그의 value 값 호출하며, 그 값이 없으면 length를 0으로 반환
- focus() 함수는 대상 태그에 포커스 효과 발생
- input 버튼에 text를 입력하지 않거나, 숫자 입력 버튼에 문자 입력 시 오류 메시지 호출 코드
Random Function (RGB Creation)
<script>
function randomColor(){
//rgb색상얻기
var r=parseInt(Math.random()*256); //0~255
var g=parseInt(Math.random()*256);
var b=parseInt(Math.random()*256);
var color="rgb("+r+","+g+","+b+")";
return color;
}
</script>- Math.random() 함수를 이용해 0~255 사이의 임의의 정수 생성
- style에서 요구하는 rgb 값 입력하는 양식에 맞춰 color 변수 초기화
- 이를 함수의 반환 값으로 지정
<body>
<div></div><div></div><div></div><div></div><div></div><div></div>
<h2></h2>
<script>
//1~6 숫자 넣기
$("div").each(function(i){
$(this).html(i+1).css("background-color",randomColor());
});
$("div").hover(function(){
rancol=$(this).css("background-color");
$("h2").html(rancol).css("color",rancol);
},function(){
$("h2").empty();
});
</script>
</body>- 만들어둔 randomColor() 함수를 이용하여 각 <div>에 1~6의 숫자 입력 후 배경색 지정
- css(”속성”) 함수를 통해 대상 태그의 css 속성을 가져옴
- empty() 함수는 대상 태그 자체를 제거
- hover 함수로 각 1~6 상자에 마우스 올릴 시 rgb 값이 해당 색으로 출력
Copying & Deleting Function
- clone() : 대상 태그 복제
- empty() : 대상 태그 자체를 제거
- remove() : 대상 태그 내용 제거
<body>
<button type="button" id="btn1">1번영역 복사해서 3번영역에 추가</button>
<button type="button" id="btn2">2번영역 복사해서 4번영역에 추가</button>
<button type="button" id="btn3">3,4번 영역 모두 지우기</button>
<div id="box1">
<img src="../Food/f15.png">
<img src="../Food/f16.png">
</div>
<div id="box2">
<img src="../Food/f17.png">
<img src="../Food/f18.png">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</body>- 버튼 3개와 <div> 박스 4개 생성
<script>
$("#btn1").click(function(){
//box1아래 모든 img태그 복사
var no1=$("#box1").find("img").clone();
//3번박스 영역에 추가
$("#box3").append(no1);
});
$("#btn2").click(function(){
var no2=$("#box2 img").clone();
$("#box4").append(no2);
});
$("#btn3").click(function(){
$("#box3").find("img").remove();
$("#box4 img").remove();
});
</script>- 버튼1, 버튼2 클릭 시 <div> 박스3, 박스4에 <img> 태그 복제
- 버튼3 클릭 시 <div> 박스의 <img> 태그 제거 (empty() 함수 사용 시 <div>태그 자체 제거)
Date Function
<body>
<div>
<input type="date" id="thedate">
</div>
</body>- date 타입의 input 버튼 생성
<script>
var date=new Date();
var y=date.getFullYear();
var m=date.getMonth()+1;
var d=date.getDate();
var currDay=y+"-"+(m<10?"0"+m:m)+"-"+(d<10?"0"+d:d); //삼항연산자 사용
$("#thedate").val(currDay);
</script>- var 참조변수=new Date();로 함수 생성
- date.get~() 함수로 연, 월, 일 생성 (월은 1 더해줘야 현재 월과 동일)
- 기본 value 값을 출력하기 위해서는 ‘연-월-일’을 value 값으로 입력 필요 (월, 일은 두 자리 수)
- 월, 일이 두 자리 수이므로 위와 같이 삼항연산자 사용
is(”:checked”) with Single Button
<body>
<div>
<label><input type="checkbox" id="cblic">운전면허</label>
</div>
</body>- <label> 태그는 선택 툴의 선택 범위를 넓혀줌
- checkbox 타입의 input 버튼이지만 선택지가 하나 뿐임
<script>
s="";
s+="운전면허: "+($("#cblic").is(":checked")?"있음<br>":"없음<br>");
</script>- is(”:checked) 함수는 해당 버튼이 클릭 시 true, 未 클릭 시 false 반환
Additional Selectors
child
<script>
$("ol li:first").css("background-color","gray"); //전체에서 첫번째 li
$("ol li:first-child").css("background-color","gray"); //각 ol항목의 첫번째 li
</script>- first는 <ol> 하위의 <li>에 해당하는 태그가 여러 개일지라도 전체 중 첫번째 하나만 선택
- first-child는 각<ol> 하위의 <li>태그 중 첫번째 모두 선택 (모든 첫째 자식 태그 선택)
contains
<script>
$("li:contains(라면)").css("font-size","1.5em"); //라면을 가진 li찾아서 변경
</script>- <li> 중 ‘라면’이라는 문자열을 포함한 태그를 선택
odd, even
<script>
//odd :홀수번지 even:짝수번지
$("li:odd").css("border","2px solid green");
$("li:even").css("border","3px dotted pink");
</script>- <li>중 홀수 번지 인덱스, 짝수 번지 인덱스 선택
- 인덱스의 값이 홀수 혹은 짝수이므로 0번지 값은 even에 포함
input[ ]
<style>
input[type=text]{
border: 2px dotted gray;
}
input[type=button]{
border: 1px solid blue;
}
</style>- input[type=타입] { }으로 input 버튼의 타입에 따라 각각 스타일 속성 부여 가능
<script>
$("input[name='clang']:checked").length; //선택된 버튼의 갯수
$("input[name='clang']:checked").each(function(i,element){ //선택된 버튼 갯수만큼 반복문 재생
s+=$(this).val()+" ";
});
</script>- input[name=’이름’]:checked 선택자를 통해 checkbox 혹은 radio 타입의 input 버튼 중 선택된 값과 그 갯수를 호출 가능
- input[name=’이름’]:checked 선택자로 반복문 실행 시 선택된 값의 갯수만큼 반복
- 같은 선택자의 val() 함수는 선택된 버튼의 value 값 호출
option:selected
<div>
<select id="selone">
<option value="red">빨강</option>
<option value="yellow">노랑</option>
<option value="blue">파랑</option>
</select>
</div>- <select>와 <option> 태그를 이용해 선택 툴 생성
<script>
//$("#selone option:selected").text();
$("#selone option:checked").text(); //둘다 됨,select option중 선택된 값의 text
$("#selone").val(); //select option중 선택된 값의 value
</script>- option:selected 선택자를 통해 select 선택 툴로 선택된 값 선택 가능
- select 선택 툴에서 text()와 val() 함수 사용 시 선택자가 다름
- text() 함수는 option의 text 값 호출, val() 함수는 value 값 호출
초보개발자