-
210510_5~8(javascript)HTML_JS(Sol) 2021. 5. 10. 15:40
반복문
<!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> var num; num = prompt("단을 입력하세요.(구구단)"); for (i = 1; i < 10; i++) { document.write(num + "*" + i + "=" + num * i + "<p>"); } document.write("<hr> 4일때 건너뛴다.<br>"); for (i = 1; i < 10; i++) { if (i == 4) continue;//그때만 건너뛴다 document.write(num + "*" + i + "=" + num * i + "<p>"); } document.write("<hr> 4일때 멈춘다.<br>"); for (i = 1; i < 10; i++) { if (i == 4) break;// 그때 멈춘다 document.write(num + "*" + i + "=" + num * i + "<p>"); } </script> </body> </html>왠만한 java문법은 다 사용가능한듯..
for()문 / continue; break;
문자열
<!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> // 자바시간에 공부했던 문자열 관련 메소드는 이름과 기능이 모두 똑같다라고 생각한다 var str1 = "독도는 우리땅" var str2 = "Welcome" document.write(str1 + "<br>") document.write(str1 + ": 길이는" + str1.length + "입니다.<br>"); document.write(str2 + "<br>") document.write(str2 + ": 길이는" + str2.length + "입니다.<br><hr>"); str1 = "독도는 우리땅 독도는 우리땅" str2 = "Welcome Welcome" document.write(str1 + "<br>") document.write("우 의 위치는" + str1.indexOf('우') + "번지 입니다<br>"); //index는 0부터 시작한다 document.write("우 의 마지막위치는" + str1.lastIndexOf('우') + "입니다<br>"); document.write(str2 + "<br>") document.write("c 의 위치는" + str2.indexOf('c') + "번지 입니다<br>"); document.write("우 의 마지막위치는" + str2.lastIndexOf('c') + "입니다<br>"); </script> </body> </html>내부에 포함되는 태그들도 length에서 다인식하는것같다
subString(), replace(),
문서요소 접근법
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script> function showDate() { var today = new Date(); var sum_date = today.getFullYear() + "년"; sum_date += (today.getMonth() + 1) + "월"; sum_date += (today.getDate()) + "일" + " "; m = (today.getDay()); switch (m) { case 0: m_day = "Sunday"; break; case 1: m_day = "Monday"; break; case 2: m_day = "Tuesday"; break; case 3: m_day = "Wendnesday"; break; case 4: m_day = "Thursday"; break; case 5: m_day = "Friday"; break; case 6: m_day = "Saturday"; break; } sum_date += m_day //문서의 요소에 접근하는 방법 큰것에서 작은것으로 접근한다. // 기본접근법 :(윈도우) ->문서->폼->요소->속성 //원하는 곳에 데이타를 출력하려면 //이부분이 중요함 document.clock_frm.date_in.value = sum_date; //년 월 일 요일 //비교 원하는곳의 데이타를 가져오는것. //sum_date =document.clock_frm.date_in.value; } function showTime() { var now = new Date(); var hour = now.getHours(); var min = now.getMinutes(); var sec = now.getSeconds(); var sum_time = (hour > 12) ? hour - 12 : hour; sum_time += ((min < 10) ? ":0" : ":") + min; sum_time += ((sec < 10) ? ":0" : ":") + sec; sum_time += (hour >= 12) ? "P.M" : "A.M"; document.clock_frm.time_in.value = sum_time; //setTimeout('호출함수',ms) ; 특정시간 후에 함수를 호출함 timer_again = setTimeout("showTime()", 1000); //1초간격으로 showTime()을 호출 //재귀호출 } function startClock() { showDate(); showTime(); } </script> <body onLoad="startClock()"> <!-- onLoad 는 이벤트 핸들러다 문서가 로드될때--> <h2>현재날짜와 시간</h2> <form name="clock_frm"> 날짜: <input type="text" name="date_in" size=25 value=""><br> 시간: <input type="text" name="time_in" size=25 value=""><br> </form> </body> </html>
//문서의 요소에 접근하는 방법 큰것에서 작은것으로 접근한다.
// 기본접근법 :(윈도우) ->문서->폼->요소->속성
//원하는 곳에 데이타를 출력하려면
document.clock_frm.date_in.value = sum_date; //년 월 일 요일
//비교 원하는곳의 데이타를 가져오는것.
//sum_date =document.clock_frm.date_in.value;
이벤트핸들러
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> //javascript는 대소문자 구별이 있다. //html은 대소문자 구별이 없다 function mOver (str){ document.aa.txt.value=str; } function mOut(){ document.aa.txt.value='마우스를 그림에' } function callTxt1(){ //직접접근-id값으로 요소를 얻기 //id는 javascript에서 요소를 직접 선택하기 위한 속성 : 문서내부에서 유일함 mytxt = document.getElementById("txt1"); alert(mytxt.value); } function callTxt2(){ //직접접근-name값으로 요소를 얻기 //name은 폼구성 하위에서 존재함 : 문서내에서 중복이름 존재 가능 mytxt2 = document.getElementsByName("txt2"); //중복이 가능하므로 배열로받는다. alert(mytxt2[0].value); } </script> </head> <body> <!--이벤트 핸들러 : 이벤트를 호출하는 역할을 한다. 주로 자바스크립트 함수를 호출함 onMouseOver : 요소위에 마우스가 올라갈때 onMouseOut : 요소에 마우스가 내려올때--> <BR> <form name="aa"> <input type="text" name="txt" size="55" value=""> </form> <a href="pagescroll.htm" onmouseover="mOver('첫번째그림감상')" onmouseout="mOut()"> <img src="./images/cup1.gif" height="300" border=0 hspace=20> </a> <a href="pagescroll.htm" onmouseover="mOver('두번째그림')" onmouseout="mOut()"> <img src="./images/cup2.gif" width="300" height="300" border=0 hspace=20> </a> <form name="bb"> <input type="text" id="txt1" name="txt1" size="55" value="안녕하세요111"> <input type="text" id="txt2" name="txt2" size="55" value="안녕하세요222"> </form> <input type="button" value="txt1 호출" onclick="callTxt1()"><br> <input type="button" value="txt2 호출" onclick="callTxt2()"><br> </body> </html>
유효성검사하기
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>유효성검사하기</title> </head> <script type="text/javascript"> function myFormCheck(theform) { //객체.폼객체 예약어객체.폼객체 변수 // document.mymember ==> this.form ==> theform //이름 if(theform.m_name.value==null || theform.m_name.value==""){ alert("이름을 입력하세요"); theform.m_name.focus(); return ; } //id if(theform.m_id.value==null || theform.m_id.value==""){ alert("id를 입력하세요"); theform.m_id.focus(); return ; } //암호확인 if(theform.m_password.value==null || theform.m_password.value==""){ alert("암호를 입력하세요"); theform.m_password.focus(); return ; } //주소 if(theform.m_address.value==null || theform.m_address.value==""){ alert("주소을 입력하세요"); theform.m_address.focus(); return ; } //취미 : 체크박스 cnt = 0; if(theform.m_hobby1.checked==true) ++cnt; if(theform.m_hobby2.checked==true) ++cnt; if(theform.m_hobby3.checked==true) ++cnt; if(theform.m_hobby4.checked==true) ++cnt; if(cnt<1){ alert('취미는 한개 이상 선택해야 합니다.'); return; } // 직업 라디오버튼 checked라는 기본값으로 처리한다. //자기소개 : value라는 속성이 없을뿐 /tag body의 내용이 value로 인식된다. if(theform.m_resum.value==null || theform.m_resum.value==""){ alert("자기소개를 입력하세요"); theform.m_resum.focus(); return ; } // 연락처 selected if(theform.m_phone1.value == "000"){ alert("국번을 선택하세요"); return; } if(theform.m_phone2.value==null || theform.m_phone2.value==""){ alert("번호를 입력하세요"); theform.m_phone2.focus(); return ; } if(theform.m_phone3.value==null || theform.m_phone3.value==""){ alert("번호를 입력하세요"); theform.m_phone3.focus(); return ; } //document.mymember.submit(); 확인되면 폼을 전송함 //jsp 수업 시작할때 함 } </script> <body> <!-- 폼태그는 모든 폼구성요소를 감싸야 한다. 제외되는 요소(elements)는 작동하지 않는다 --> <!-- 실제로 데이타를 화면에 출력하는 부분 --> <Form action="" name="mymember"> <table border="1"> <tr> <td colspan="2" align="center"><font color="blue" size="5">회원가입 폼 만들기</font></td> </tr> <tr> <td width="100">이름</td> <td width="400"><input type="text" name="m_name" size="15"></td> </tr> <tr> <td>아이디</td> <td><input type="text" name="m_id" size="15"></td> </tr> <tr> <td>암호</td> <td><input type="password" name="m_password" size="15"></td> </tr> <tr> <td>주소</td> <td><input type="text" name="m_address" size="40"></td> </tr> <tr> <!-- 체크박스는 다중선택이 가능하므로 이름이 다르다 --> <td>취미</td> <td> <input type="checkbox" name="m_hobby1" value="독서">독서 <input type="checkbox" name="m_hobby2" value="게임">게임 <input type="checkbox"name="m_hobby3" value="영화">영화 <input type="checkbox" name="m_hobby4" value="잠자기">잠자기 </td> </tr> <tr> <!-- 라디오버튼은 다중택일용 이므로 이름이 같다 --> <td>직업</td> <td> <input type="radio" name="m_job" value="백수" checked>백수 <!-- radio에서 기본값을설정하는법 checked --> <input type="radio" name="m_job" value="백조">백조 <input type="radio" name="m_job" value="군인">군인 <input type="radio" name="m_job" value="회사원">회사원 <input type="radio" name="m_job" value="프로그래머">프로그래머 </td> </tr> <tr> <td>자기소개</td> <!-- textarea는 value라는 속성이없다.tag body안에 내용을 출력한다 --> <td><textarea rows="4" cols="40" name="m_resum"></textarea></td> </tr> <tr> <td>전화번호</td> <td><select name="m_phone1"> <option value="000" selected>국번을 선택하세요</option> <!-- 기본값설정 selected --> <option value="010">010</option> <option value="017">017</option> <option value="018">018</option> <option value="011">011</option> </select>-<input type="text" name="m_phone2" size="4"> -<input type="text" name="m_phone3" size="4"></td> </tr> <tr> <td colspan="2" align="center"> <!-- sumit 버튼은 전송기능이 있는 버튼 --> <input type="button" value="가입하기" onclick="myFormCheck(this.form)"> <input type="reset" value="다시쓰기"> </td> </tr> </table> </Form> </body> </html>
'HTML_JS(Sol)' 카테고리의 다른 글
210510_1~4(javascript) (0) 2021.05.10 210507_4(기타부수적인태그) (0) 2021.05.07 210507_3(가입신청폼 만들기) (0) 2021.05.07 210507_1(HTML태그연습) (0) 2021.05.07 210506_5~8(HTML 기초) (0) 2021.05.06