Javascript 기초문법Ⅳ
8. 회원가입 유효성검사 이어서..
어제 작성했던 회원가입 html,script를 가져와서 가입에 새로운 메소드를 연결한다.
function validate2(){
//자바스크립트메소드를 이용해서 폼컨트롤 요소가 갖고 있는 기능을 접근할 수 있다.
}
function validate2(){
//자바스크립트메소드를 이용해서 폼컨트롤 요소가 갖고 있는 기능을 접근할 수 있다.
var frm = document.memfrm; //현재 문서에 name이 memfrm이라고 된 것을 찾아라.
alert(memfrm);
alert(document.memfrm.uid.value); //작성한 아이디가 alert로 뜸
alert(document.getElementById("uid").value); //위와 같다.
alert(frm.uid.value); //위와 같다.
document.memfrm.action="ok2.jsp";
frm.action="ok2.jsp";
//<input type=submit>과 동일한 기능의 자바스크립트 메소드*/
//폼컨트롤요소가 가지고 있던 최초의 상태 복귀
document.memfrm.submit();
frm.submit();
}자주 사용되는 중요한 예제이다.
submit() 메소드.
name속성으로 찾은 것을 부르기
id값으로 부르기
연습문제
연습문제 1) 1~45 중에서 서로 겹치지 않게 6개 발생시킨 후 오름차순으로 정렬해서 각 텍스트 상자에 출력.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로또번호</title>
<style>
body {font-size: 16px; letter-spacing: -0.8px;}
#demo {margin:auto; padding:40px;}
input {height:25px; border: 1px solid #ccc; border-radius: 5px;}
hr {border: 1px dotted #ddd;}
</style>
</head>
<body>
<div id="demo">
<h1>로또번호</h1>
<form name="lottofrm" id="lottofrm">
<input type="text" name="n" id="n0" size="3" readonly>
<input type="text" name="n" id="n1" size="3" readonly>
<input type="text" name="n" id="n2" size="3" readonly>
<input type="text" name="n" id="n3" size="3" readonly>
<input type="text" name="n" id="n4" size="3" readonly>
<input type="text" name="n" id="n5" size="3" readonly>
<hr>
<input type="button" name="" value="추첨" onclick="lotto()">
</form>
</div>
<script>
function lotto(){
//연습문제 1) 1~45 중에서 서로 겹치지 않게 6개 발생시킨 후 오름차순으로 정렬해서 각 텍스트 상자에 출력.
var lotto=[];
var size=6;
for(var i=0; i<size; i++){
lotto[i]=parseInt((Math.random()*45)+1);
for(var j=0; j<i; j++){
if(lotto[i]==lotto[j]){
i--;
break;
}//if end
}//for end
}//for end
function sorting(a,b){return a-b;} //숫자정렬
lotto.sort(sorting); //자바스크립트 정렬메소드
//alert(lotto);
for(var i=0; i<size; i++){
document.getElementById("n"+i).value=lotto[i];
//자바스크립트는 자료형에 유연하기 때문에 "n"+i 이렇게 조합해도 된다.
}
}
</script>
</body>
</html>결과값:
난수번호를 생성하는 random()메소드를 사용한 코드이다.
수의 정렬은 sort하는 방법이 문자열과 다르므로 유의하기.
9. this 예약어
자바에서도 있는 개념인 this의 사용법에 대한 예제.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>This에 대해</title>
<style>
body {
font-size: 16px;
letter-spacing: -0.8px;
}
#demo {
margin:auto;
padding:40px;
}
input {
width: 100px;
height:25px;
border: 1px
solid #ccc;
border-radius: 5px;
}
#btn1 {
width:60px;
height: 32px;
border: 1px solid #48b4e0;
background-image: linear-gradient(45deg, skyblue, #48b4e0);
color:#fff;
}
#btn2 {
width:60px;
height: 32px;
border: 1px solid #00a600;
background-image: linear-gradient(45deg, #00a600, #00b480);
color:#fff;
}
#btn3 {
width:60px;
height: 32px;
border: 1px solid #663399;
background-image: linear-gradient(45deg, #663399, #48b4e0);
color:#fff;
}
#btn4 {
width:60px;
height: 32px;
border: 1px solid #663399;
background-image: linear-gradient(45deg, #663399, #b400e0);
color:#fff;
}
hr {
border: 1px dotted #ddd;
}
</style>
</head>
<body>
<div id="demo">
<h1>This 연습</h1>
<form name="myform" id="myform" onsubmit="test5(this)">
<!-- this: 자기자신의 요소
this는 폼컨트롤요소에서만 사용가능
<a href="" onclick="test5(this)"> </a> 에러
<form>요소에서 this.form은 undefined 주의!!!
-->
<!-- 자기 자신 -->
<input type="button" name="btn1" id="btn1" value="버튼1" onclick="test1()">
<!-- this: 자기 자신의 요소를 가리킴 -->
<input type="button" name="btn2" id="btn2" value="버튼2" onclick="test2(this)">
<!-- this.value 자신의 요소가 가지고 있는 값 -->
<input type="button" name="btn3" id="btn3" value="버튼3" onclick="test3(this.value)">
<!-- this.form 자신의 요소가 속해 있는 폼 -->
<input type="button" name="btn4" id="btn4" value="버튼4" onclick="test4(this.form)">
</form>
</div>
<script>
function test1(){
//1) name 접근
alert(document.myform);
alert(document.myform.btn1);
//변수를 만들어 주었다. 위와 같음
var myform = document.myform;
var testBtn = document.myform.btn1;
alert(myform);
alert(testBtn);
//2) id 접근
alert(document.getElementById("myform"));
alert(document.getElementById("btn1"));
//변수를 만들어 주었다. 위와 같음
var myform1 = document.getElementById("myform")
var testBtn1 = document.getElementById("btn1")
alert(myform1);
alert(testBtn1);
}
function test2(obj) {
alert(obj);
alert(obj.value);
}
function test3(val){
alert(val);
}
function test4(f){
//this.form은 <form name=myform)을 가리킴
alert(f.btn4.value); //[object HTMLFormElement]
}
function test5(f){
alert(f);
}
</script>
</body>
</html>
this: 자기자신의 요소
this는 폼컨트롤요소에서만 사용가능하다.
10. Javascript로 CSS 스타일 변경하기
자바스크립트로 css에 접근하여 수정할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementById</title>
<style>
body {font-size: 16px; letter-spacing: -0.8px;}
#btn1{width:100px; height: 32px; border: 1px solid #48b4e0; background-image: linear-gradient(45deg, skyblue, #48b4e0); color:#fff;}
</style>
</head>
<body>
<div id="myDiv" style="position:absolute; top: 10px; left: 20px; width: 150px; height: 70px; background-color: blue; color:#fff; text-align: center;">바다</div>
<br>
<br>
<br>
<br>
<br>
<input type="button" name="" id="btn1" value="myDiv접근" onclick="test1()">
<script>
function test1(){
alert(document.getElementById("myDiv"));
//순수 자바스크립트로 CSS를 접근한 것이다.
alert(document.getElementById("myDiv").style);
}
</script>
</body>
</html>
그런데 자바스크립트로 작성하면 너무 코드가 길어지기 때문에 JQuery와 같은 라이브러리를 사용해서 제어,수정함.
스타일과 이미지를 변경한 예제 1)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementById</title>
<style>
body {font-size: 16px; letter-spacing: -0.8px;}
#btn1, #btn2, #btn3 {width:100px; height: 32px; border: 1px solid #48b4e0; background-image: linear-gradient(45deg, skyblue, #48b4e0); color:#fff;}
hr {border: 1px dotted #ddd;}
</style>
</head>
<body>
<div id="myDiv" style="position:absolute; top: 10px; left: 20px; width: 150px; height: 70px; background-color: blue; color:#fff; text-align: center;">바다</div>
<br>
<br>
<br>
<br>
<br>
<input type="button" name="" id="btn1" value="myDiv접근" onclick="test1()">
<input type="button" name="" id="btn2" value="스타일변경" onclick="test2()">
<hr>
<img src="https://images.unsplash.com/photo-1562728535-ac776677e69c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60" id="myImg" alt="">
<hr>
<input type="button" name="" id="btn3" value="그림변경" onclick="test3()">
<script>
function test1(){
alert(document.getElementById("myDiv"));
//순수 자바스크립트로 CSS를 접근한 것이다.
alert(document.getElementById("myDiv").style.top);
alert(document.getElementById("myDiv").style.width);
alert(document.getElementById("myDiv").style.color);
alert(document.getElementById("myDiv").style.backgroundColor);
alert(document.getElementById("myDiv").style.left);
alert(document.getElementById("myDiv").style.position);
var cssChange = document.getElementById("myDiv").style;
cssChange.top = "40px";
}
function test2(){
document.getElementById("myDiv").style.backgroundColor="green";
document.getElementById("myDiv").style.color="yellow";
document.getElementById("myDiv").style.top="300px";
document.getElementById("myDiv").style.left="300px";
document.getElementById("myDiv").style.width="100px";
document.getElementById("myDiv").style.height="200px";
document.getElementById("myDiv").style.fontSize="20px";
document.getElementById("myDiv").innerHTML="⛺";
}
function test3(){
//src 속성을 변경하는 것이다.
document.getElementById("myImg").src="https://images.unsplash.com/photo-1494879540385-bc170b0878a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=100";
}
</script>
</body>
</html>버튼 누르기 전:
결과값:
11. Javascript로 마우스이벤트
자바스크립트로 css에 접근하여 수정할 수 있다.
예제 1) 마우스 오버했을 때 다른 이미지 보여주기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스이벤트</title>
<style>
body {font-size: 16px; letter-spacing: -0.8px;}
#btn1, #btn2, #btn3 {width:100px; height: 32px; border: 1px solid #48b4e0; background-image: linear-gradient(45deg, skyblue, #48b4e0); color:#fff;}
hr {border: 1px dotted #ddd;}
th {cursor: pointer;}
</style>
</head>
<body>
<table border="1">
<tr>
<th onmouseover="show('o')">오리지날</th>
<th onmouseover="show('s')">공상과학</th>
<th onmouseover="show('f')">판타지물</th>
</tr>
<tr>
<td colspan="3">
<div id="original" style="display: block;">
Stranger Things<br><img src="../images/img01.jpg" alt="">
</div>
<div id="scifi" style="display: none;">
The girl in the spider's web<br><img src="../images/img02.jpg" alt="">
</div>
<div id="fantasy" style="display: none;">
Sense 8<br><img src="../images/img04.jpg" alt="">
</div>
</td>
</tr>
</table>
<script>
function show(kind){
//alert(kind);
switch(kind){
case 'o': document.getElementById("original").style.display="block";
document.getElementById("scifi").style.display="none";
document.getElementById("fantasy").style.display="none";
break;
case 's': document.getElementById("original").style.display="none";
document.getElementById("scifi").style.display="block";
document.getElementById("fantasy").style.display="none";
break;
case 'f': document.getElementById("original").style.display="none";
document.getElementById("scifi").style.display="none";
document.getElementById("fantasy").style.display="block";
break;
}
}
</script>
</body>
</html>결과값:
테이블 th에 마우스를 올리면 다른 이미지로 변경됨.
예제 2) 오디오 플레이리스트 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>오디오페이지</title>
<style>
body {font-size: 16px; letter-spacing: -0.8px;}
#btn1, #btn2, #btn3 {width:100px; height: 32px; border: 1px solid #48b4e0; background-image: linear-gradient(45deg, skyblue, #48b4e0); color:#fff;}
hr {border: 1px dotted #ddd;}
th {cursor: pointer;}
</style>
</head>
<body>
<div style="text-align: center;">
<h1>Playlist</h1>
<img src="../music/gangnamstyle.jpg" width="300px" height="250px" id="poster">
<hr><br>
<audio id="audio1" src="../music/gangnamstyle.mp3" controls autoplay></audio>
</div>
<hr>
<div style="margin: auto; width: 50%;">
<ol>
<li><a href="javascript:loadMusic('../music/candy.jpg', '../music/candy.mp3')">내 귀에 캔디</a></li>
<li><a href="javascript:loadMusic('../music/crayonpop.jpg', '../music/poppop.mp3')">빠빠빠</a></li>
<li><a href="javascript:loadMusic('../music/genie.jpg', '../music/genie.mp3')">소원을 말해봐</a></li>
<li><a href="javascript:loadMusic('../music/sheis.jpg', '../music/sheis.mp3')">그녀가 처음 울던 날</a></li>
</ol>
</div>
<script>
function loadMusic(jpg,mp3){
var poster = document.getElementById("poster");
var audio1 = document.getElementById("audio1");
poster.src=jpg;
audio1.src=mp3;
}
</script>
</body>
</html>
12. Javascript Date객체
Date 객체를 이용하여 오늘 날짜, 시간 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date 객체</title>
<style>
body {font-size: 16px; letter-spacing: -0.8px;}
#btn1, #btn2, #btn3 {width:100px; height: 32px; border: 1px solid #48b4e0; background-image: linear-gradient(45deg, skyblue, #48b4e0); color:#fff;}
hr {border: 1px dotted #ddd;}
th {cursor: pointer;}
</style>
</head>
<body>
<div id="clock">
<h1>CLOCK</h1>
<input type="button" name="" id="btn1" value="clock" onclick="">
</div>
<script>
var today = new Date();
var str="";
str += today.getFullYear()+".";
str += today.getMonth()+1+""+".";
str += today.getDate()+".";
switch(today.getDay()){
case 1: str += "(Monday) "; break;
case 2: str += "(Tuseday) "; break;
case 3: str += "(Wednesday) "; break;
case 4: str += "(Thursday) "; break;
case 5: str += "(Friday) "; break;
case 6: str += "(Saturday) "; break;
case 7: str += "(Sunday) "; break;
}
var hour =today.getHours();
if(hour>=12){
str += "PM"+(hour-12)+":";
}else {
str += "AM"+hour+":";
}
str += today.getMinutes()+":";
str += today.getSeconds();
document.write("<hr>");
document.getElementById("clock").innerHTML=str;
</script>
</body>
</html>결과값:
'Frontend' 카테고리의 다른 글
| 07월 15일 월 | UI 화면구현 09 - Javascript 기초문법Ⅵ (0) | 2019.07.15 |
|---|---|
| 07월 12일 금 | UI 화면구현 08 - Javascript 기초문법Ⅴ (0) | 2019.07.12 |
| 07월 10일 수 | UI 화면구현 06 - Javascript 기초문법Ⅲ (0) | 2019.07.10 |
| 07월 09일 화 | UI 화면구현 05 - Javascript 기초문법Ⅱ (0) | 2019.07.09 |
| 07월 08일 월 | UI 화면구현 04 - Javascript 기초문법Ⅰ (0) | 2019.07.08 |
댓글