반응형
*함수
-
데이터형 : typeof
-
경고창 : alert
-
출력 : document.wirte
-
.wirteln
-
console.log
-
정수 : parseInt
-
난수 : Math(클래스=>함수!).random()
*Math : 수학관련 클래스로 자바의 클래스는 아님
-
Math.abs(수) //절댓값
-
Math.round(수) //무조건 첫번째 자리에서 반올림 수행
-
Math.ceil(수) //올림
-
Math.floor(수) //내림
-
Math.random()
*문자열 함수 :
-
글자 수(길이)는 속성으로 제공 (함수가 아님!)=> 변수명.length; //괄호를 절대 붙이지 않는다!붙이는건 자바고 Error나게 됨
-
대문자 : 변수명.toUpperCase();
-
소문자 : 변수명.toLowerCase();
-
문자하나 얻기 : 변수명.charAt(인덱스);
-
인덱스 얻기 : 변수명.indexOf('문자열') //0번부터 시작하고 뒤에서부터 얻는 함수는 없다.
-
자식문자열 얻기 : 변수명.subString(시작인덱스, 끝 인덱스+1); //이때 시작인덱스만 쓰게되면 끝까지 자른다.
-
앞뒤공백 제거 : 변수명.trim();
-
특정문자로 구분하여 배열로 얻을 때 : 변수명.split("구분할 문자열");
-
치한문자로 구분하여 배열로 얻을 때 : 변수명.replace('찾을문자열','변경할 문자열') //가장처음에 찾아지는 문자열만 바꾼다.
-
문자열 내에 가장 처음 찾아지는 문자열만 변경
*재귀호출 함수
-
setTimeout(ms, 호출할 함수); //thread랑 되게 비슷하다.
*날짜 : 서버의 날짜가 아니라 접속자의컴퓨터 날짜 정보이기 때문에 잘 사용..x(접속자 마다 시간이 다르게 나올 수 있다)=>보통 서버의 시간으로!
Date클래스 사용(클래스라 new를 사용하고 배열을 사용하듯이 사용
-
1.생성var 객체명=new Date();
-
2.함수호출년 : 객체명.getFullYear()월 : 객체명.getMonth()+1일 : 객체명.getDate() //getDay();는 요일
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#btnDiv{height: 40px; }
#output{width: 400px; height: 200px; border: 1px solid #333; overflow:auto}/* 자동으로 스크롤 바가 만들어지도록 하는 속성 */
</style>
<script type="text/javascript">
//함수사용
function useMath(){
var divNode=document.getElementById("output");
var output="";
//절대값
var i=-2;
output+= i+"의 절대값 :"+Math.abs(i)+"<br/>";
//반올림 : 무조건 소숫점 첫째자리에서
i=0.523;
output+= i+"의 반올림 :"+Math.round(i)+"<br/>";
//올림
i=13.5;
output+= i+"의 올림 :"+Math.ceil(i)+"<br/>";
//내림
i=13.5;
output+= i+"의 내림 :"+Math.floor(i)+"<br/>";
divNode.innerHTML=output;
}//useMath
function useString(){
var divNode=document.getElementById("output");
var output="";
var msg="오늘은 수요일 입니다.AbcdEf";
//글자수 length는 속성이다.괄호 절대 ㄴㄴ
output+=msg+"의 글자수 : "+msg.length+"<br/>";
output+=msg+"의 모두 대문자로 : "+msg.toUpperCase()+"<br/>";
output+=msg+"의 모두 소문자로 : "+msg.toLowerCase()+"<br/>";
//indexOf() L->R으로 가면서 찾는다
output+=msg+"에서 '수'라고하는 글자의 인덱스 : "+msg.indexOf("수")+"<br/>";
output+=msg+"에서 'A'라고하는 글자의 인덱스 : "+msg.indexOf("A")+"<br/>";
output+=msg+"에서 'O'라고하는 글자의 인덱스 : "+msg.indexOf("O")+"<br/>";//없는걸 넣으면 -1(자바처럼-1/오라클은 0)
//lastIndexOf() R->L으로 가면서 찾는다
output+=msg+"에서 '수'라고하는 글자의 인덱스 : "+msg.lastIndexOf("수")+"<br/>";//어라 last있네..
//인덱스에 해당하는 문자하나 얻기(하나가 나와도 문자열임)
output+=msg+"에서 5번째 인덱스의 문자 : "+msg.charAt(5)+"<br/>";
//인덱스 사이에 해당하는 자식문자열 얻기 : substring(시작인덱스, 끝인덱스+1)
output+=msg+"에서 4~7번째 인덱스의 자식문자열 : "+msg.substring(4,7)+"<br/>";
msg="노,김.김,박,최";//CSV
var arrData=msg.split(",");
var sa=1;
for(var i=0; i<arrData.length; i++){
output+="<marquee scrollamount='"+sa+"'>"+arrData[i]+"</marquee>";
sa+=3;
}//end for
msg=" A BC ";
//앞뒤 공백 제거
output+="["+msg+"]에서 앞뒤 공백 제거 : ["+msg.trim()+"]<br/>";
msg="김,이,최,영,소,박,유";
//특정 문자열을 치환 : L->R로 진행하면서 가장 먼저 나오는 문자열 하나만 치환. replaceAll은 없다!
output+="["+msg+"]에서 '영'제거 : ["+msg.replace("영","young")+"]<br/>";
divNode.innerHTML=output;
}//useString
function useDate(){
var divNode=document.getElementById("output");
var output="";
//날짜정보는 접속자 컴퓨터의 시간정보(접속자마다 다른 날짜 정보가 얻어질 수 있다.)
//1.생성
var date=new Date();
//2.함수 호출
output += date+"<br/>";
//getYear()는 1900을 더해야 현재 년도가 출력된다.
//output += "년 :"+(date.getYear()+1900)+"<br/>";
output += "년: "+date.getFullYear()+"<br/>";
output += "월: "+(date.getMonth()+1)+"<br/>";
output += "일: "+date.getDate()+"<br/>";
output += "시: "+date.getHours()+"<br/>";
output += "분: "+date.getMinutes()+"<br/>";
output += "초: "+date.getSeconds()+"<br/>";
divNode.innerHTML=output;
if(date.getSeconds()==50){
useRecursive();
}//end if
//재귀호출 함수 :지정한 시간에 함수를 호출해주는 함수 :
//setTimeout(함수명, milliseconds); //setTimeout함수를 가지고 있는 함수만 호출할 수 있다.
setTimeout(useDate, 1000);
}//useDate
function useRecursive(){
var divNode=document.getElementById("output");
var output="<img src='../common/images/img2.jpg'/>";
divNode.innerHTML=output;
}//useRecursive
</script>
</head>
<body>
<div id="btnDiv">
<input type="button" value="수학 함수" class="btn" onclick="useMath()"/><!-- 아이디와 이벤트 등록으로도 가능 -->
<input type="button" value="문자열 함수" class="btn" onclick="useString()"/>
<input type="button" value="날짜 함수" class="btn" onclick="useDate()"/>
<input type="button" value="재귀호출 함수" class="btn" onclick="useRecursive()"/>
</div>
<div id="output"></div>
</body>
</html>
*<input type="text" autofocus="autofocus"//하면 자동으로 커서할당
*tap의 인덱스 변경 tabindx="1"//탭의 순서 변경 속성
*javaScript에서 커서를 요청할 때에는 document.폼이름.control이름.focus() //해당컨트롤로 커서가 간다.
*이벤트
-
window.event 객체를 사용하여 처리
-
onXxx를 제공한다.(onclick,onchange,,,)
-
키보드이벤트를 처리할 때 눌린 키의 키값을 얻을 수 있다.
-
function 함수명( ){//키코드 값얻기window.event.keyCode;.which;//(JQuery에서 많이 사용)
-
}
-
onkeydown,onkeypress,onkeyup에 의해서 호출되거나
-
addEventListener("keydown,keypress,keyup")에 의해서 호출되어야 한다.
<<숙제로 할려다 같이함 아이디->비밀번호>>>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload=function(){
var obj=document.loginFrm;
obj.id.focus();
}//function
//아이디에서 엔터가 눌려지면 아이디가 입력되어있는지 확인하고 입력되었으면 커서를 비밀번호로 이동 시킨다.
//비밀번호에서 엔터가 눌려지면 아이디가 입력되어있는지 확인하고 입력되었으면 비밀번호가 입력되었는지 확인하고 비밀번호가 입력되어있지 않으면
//커서를 비밀번호로 이동시킨다.
//아이디와 비밀번호 어디든 엔터가 쳐지고 값이 들어있다면 alert("로그인")을 출력한다.
function chkNull(){
var obj=document.loginFrm;
var idVal=obj.id.value;
var pwdVal=obj.pwd.value;
//alert("눌린키의 코드 값 : "+window.event.keyCode+"/"+window.event.which);//enter는 13
/* obj.id.value는 키업일때 키값을 받아올 수 있을것 */
/* if(window.event.keyCode==13){
//obj.id.focus();//id로 포커스
if(!idVal==""){
obj.pwd.focus();
}
if(!pwdVal==""){
if(!idVal==""){
alert("로그인");
}else{
obj.id.focus();
}
}
}//end if */
if(window.event.keyCode==13){
if(obj.id.value.trim()==""){
obj.id.value="";
obj.id.focus();
return;
}//end if
if(obj.pwd.value.trim()==""){
obj.pwd.value="";
obj.pwd.focus();
return;
}//end if
alert("로그인 성공^o^");
}//end if
/* if(window.event.keyCode==13){//엔터일때 id로 포커스
obj.id.focus();
} */
}//chkNull
function chkEmail(){
var obj=document.emailFrm;
var emailVal=obj.email.value;
if(emailVal.indexOf("@")!=-1 && emailVal.indexOf(".")!=-1 ){
if(emailVal.length>=5){
alert("유효한 메일:"+emailVal);
}else{
document.getElementById("resultDiv").innerHTML="<span style='color:#FF0000'>"+emailVal+"</span>";
}
}else{
//obj.resultDiv.style="color:#FF0000";
document.getElementById("resultDiv").innerHTML="<span style='color:#FF0000'>"+emailVal+"</span>";
//document.getElementById("resultDiv").innerHTML=emailVal;
}
}//chkEmail
</script>
</head>
<body>
<div id="loginBox">
<form name="loginFrm">
<table>
<tr>
<td><!--tabindex="1":탭순서/placeholder:값넣기전까지 힌트같은 존재/title: 마우스를 올렸을때 나타나는 작은 메모같은 상자/autofocus="autofocus":자동으로 커서 갖기-->
<input type="text" name="id" id="id" placeholder="아이디" title="아이디" class="inputBox" onkeydown="chkNull()"/>
</td>
<td rowspan="2">
<input type="button"value="로그인" class="btn" style="width:80px;height:80px;" tabindex="3"/>
</td>
</tr>
<tr>
<td>
<input type="password" name="pwd" id="pwd" placeholder="비밀번호" title="비밀번호" class="inputBox" tabindex="2" onkeydown="chkNull()"/>
</td>
</tr>
</table>
</form>
</div>
<div>
<form name="emailFrm">
<!-- 입력된 이메일이 5글자 이상이면서 @과 .이 존재하는지 둘다 있으면 입력한 메일과 "유효한 메일"메세지를 resultDiv에 출력하고,
그렇지 않으면"잘못된 메일형식"을 글자색이 #FF0000으로 resultDiv출력 -->
<label>이메일</label>
<input type="text" name="email" class="inputBox" id="email"/>
<input type="button" value="유효성 검증" class="btn" onclick="chkEmail()"/>
</form>
<div id="resultDiv"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
function lower(){
var obj=document.textboxFrm;
var textVal=obj.textbox.value;
var arr=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
var output="";
for(var i=0; i<arr.length; i++){
//인덱스 얻기 : 변수명.indexOf('문자열')
//자식문자열 얻기 : 변수명.subString(시작인덱스, 끝 인덱스+1);
//문자하나 얻기 : 변수명.charAt(인덱스);
for(var j=0; j<textVal.length; j++){
//output+=textVal.substring(textVal.indexOf(arr[i]),textVal.indexOf(arr[i])+1);
if(textVal.charAt(j)!=-1){
output+=textVal.charAt(j);
}//end if
}
}//end for
alert(output);
}//lower
function upper(){
var obj=document.textboxFrm;
var textVal=obj.textbox.value;
var arr=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
var output="";
for(var i=0; i<arr.length; i++){
//인덱스 얻기 : 변수명.indexOf('문자열')
//자식문자열 얻기 : 변수명.subString(시작인덱스, 끝 인덱스+1);
if(textVal.indexOf(arr[i])!=-1){
output+=textVal.substring(textVal.indexOf(arr[i]),textVal.indexOf(arr[i])+1);
}//end if
}//end for
alert(output);
}//upper
function viewCase(flag){
var divNode=document.getElementById("output");
var output="";
var data=document.textboxFrm.textbox.value;
if(flag=="lc"){//소문자
output+="소문자 : "+data.replace(/[A-Z0-9]/g,"");
}//end if
if(flag=="uc"){//대문자
output+="대문자 : "+data.replace(/[a-z0-9]/g,"");
}//end if
if(flag=="nc"){//숫자
output+="숫자 : "+data.replace(/[A-Za-z]/g,"");
}//end if
divNode.innerHTML=output;
}//viewCase
</script>
</head>
<body>
<div id="result">
<form name="textboxFrm">
<label>문자열 입력</label>
<input type="text" value="abcy12Ab3456Z" name="textbox"/>
<input type="button" value="소문자" onclick="viewCase('lc')" class="btn"/><!-- viewCase('lc')/lower() -->
<input type="button" value="대문자" onclick="viewCase('uc')" class="btn"/><!-- upper() -->
<input type="button" value="숫자" onclick="viewCase('nc')" class="btn"/><!-- number() -->
</form>
</div>
<div id="output">
</div>
</body>
</html>
반응형
'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글
| 79일차-javaScript_페이지 이동 방법과 popup창 (0) | 2019.02.19 |
|---|---|
| 78일차-JavaScript+a (0) | 2019.02.18 |
| 76일차-JavaScript_값 (0) | 2019.02.15 |
| 75일차-Javascript_함수(function) (0) | 2019.02.14 |
| 74일차-JavaScript_제어문과 배열(2차원 배열) (0) | 2019.02.13 |