WEB/JavaScript
[ JS] days03
애플쩀
2022. 6. 2. 07:30
함수, 전역변수 지역변수
<!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>
<style>
</style>
</head>
<body>
<pre>
함수개념: 자바 함수 개념:
js 함수 선언 형식
function 함수명(매개변수){
(return 리턴값)
}
접 기 리 함([]매:){
return 리턴값;
}
함수 호출하는 3가지 방법
ㄱ.이벤트가 발생할때 함수 호출=="이벤트 핸들러"
button onclick="test()"
function test(){}
ㄴ.js코드에서 함수호출
ㄷ.자동(자체 호출 )
</pre>
<button onclick="btn_click()">버튼</button>
<script>
function btn_click(){
//지역변수
let x=10,y=0;
let result=sum(x,y);
alert(result);
}
//a,b 두 숫자의 합을 반환하는 메소드
function sum(a,b){
return a+b;
}
</script>
<script>
var fnDraw=function drawLine(){
console.log("-----");
}
fnDraw();
// alert(typeof fnDraw); -->function
</script>
</body>
</html>
new Date()
<!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>
<style></style>
</head>
<body>
<script>
var msg;
alert(undefined==null);
if(msg==null){
//true
}
if(msg==undefined){
//타입 undefined!=object false
}
</script>
<button onclick="this.innerText=new Date();">현재시간은 ?</button>
<button onclick="disp()">현재시간은?</button>
<p id="demo"></p>
<script>
function disp(){
document.getElementById("demo").innerText=new Date();
}
</script>
<script>
var x=30;
alert(typeof x);
var x2=new Number();
</script>
<script>
// 객체
const person={
name:"admin",
age:20,
dispinfo:function(){
return this.name+","+this.age;
}
}
console.log(person.name);
console.log(person["name"]);
console.log(person.dispinfo());
</script>
</body>
</html>
String
<!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>
<body>
<pre>
js에서 문자열은 홑따옴표 쌍따옴표를 사용한다
js문자열은 0개 이상의 문자집합이다.
타입은 string데이터 유형
문자열의 길이를 가져오는 방법 ,함수 : length
두문자열 비교 equals
</pre>
<script>
var msg='ABCDEFGHIJKLMNOPQRSTUVWXYZ';
console.log(msg);
console.log(msg.length);
let name1="hong";//String
let name2=new String("hong"); //자료형이 object
console.log(name1==name2);
console.log(name1===name2); //문자열+ 타입 까지 비교 string , object 이어서 false
var msg=" hello world ";
console.log( "["+msg.trim()+"]" );
//7
var str1="hello";
var str2="world";
//var str3=str1+str2;
var str3=str1.concat(' ',str2,' ','admin');
//alert(str3);
msg="hello word";
msg=msg.toUpperCase();
console.log(msg);
msg=msg.toLowerCase();
console.log(msg);
</script>
</body>
</html>regex
<!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>
<body>
<script>
var msg="hong gil dong";
// hong=>홍
/* pattern : string 또는 regexp
replacement:string */
//msg=msg.replace(pattern, replacement)
console.log(msg);
//msg=msg.replaceAll(pattern, replacement);
const regex = /HONG/i;
msg=msg.replace(regex, "홍");
console.log(msg);
</script>
</body>
</html>
slice 음수값사용ㅇ
substring 음수값사용x
substr
<!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>
<body>
<script>
let rrn="892323-1700001";
/* rrn.substr(from.length);
rrn.substring(from ,to); 음수값사용 x
rrn.slice(from ,to); 음수값사용o
*/
// 1.substr()
/* let rrn6=rrn.substr(0,6);
console.log(rrn6); */
let rrn6=rrn.substring(0,7);
console.log(rrn6);
let rrn7=rrn.slice(7);
console.log(rrn7);
var year=rrn.substr(0,2);
console.log(year);
var month=rrn.substring(2,4);
console.log(month);
var day=rrn.slice(4,6);
console.log(day);
var sex=rrn.slice(7,8);
console.log(sex);
var con=rrn.slice(-1);
console.log(con);
</script>
</body>
</html>
배열
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
팀원입력:
<input type="text" value="이창익, 유환재, 김지민, 백경환, 박예린">
<script>
$(":text").keydown(function(event){
if(event.which==13){
let team=$(this).val();
let pattern=",";
let teams= team.split(pattern);
//alert(teams.length);
console.log(typeof teams);
$(teams).each(function(i,element){
console.log(element);
$("<li></li>").text(element).appendTo($("#demo"));
})
/* for (let i = 0; i < teams.length; i++) {
console.log(teams[i]);
} */
}
});
</script>
</body>
</html>
정규식
<!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>
<body>
정규식 regex는 텍스트 작업 사용
정규식의 선언형식
i= 대소문자 구분 x
m= multiple
g=
<script>
/* let text="visit Microsoft!";
var pattern="Microsoft";
var index=text.search(pattern);
console.log(index);
//소문자 micro찾기
pattern="microsoft";
index=text.toLowerCase().search(pattern);
console.log(index);
//대소문자 상관없이 찾기
//pattern=/패턴/수정자;
pattern=/MICROSOFT/i;
index=text.search(pattern);
console.log(index)
text=text.replace(pattern,'마소');
console.log(text);
var msg="hong gil dong hong";
pattern = /HONG/ig;
var replacement="홍";
msg=msg.replace(pattern, replacement);
console.log(msg);
</script> */
<script>
// m 설명 -라인단위로 시작
let text="\nls th\nis it?";
let pattern=/^is/m; //is로 시작하는 문자열이 없다.
// let result=text.match(pattern);
//일치하는지 안하는지 true false로 반환하는 함수
let result=pattern.test(text);
</script>
<pre>
i Ignore Case 대소문자를 구별하지 않고 검색한다.
g Global 문자열 내의 모든 패턴을 검색한다.
m Multi Line 문자열의 행이 바뀌더라도 검색을 계속한다.
</pre>
</body>
</html>i Ignore Case 대소문자를 구별하지 않고 검색한다.
g Global 문자열 내의 모든 패턴을 검색한다.
m Multi Line 문자열의 행이 바뀌더라도 검색을 계속한다.
pattern을 입력할떄 쌍따옴표 쓰지 않는다.
숫자 입력 안하면 이벤트 취소
<!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>
<body>
<input type="text" autofocus="autofocus">
+
<input type="text" >
=
<input type="text" disabled="disabled">
<script>
// 제이쿼리에서는 :text
document.querySelector("input[type=text]:first-of-type").onkeyup=function(){
if(event.keyCode==13){
document.querySelector("input[type=text]:nth-of-type(2)").focus();
}
}
// 숫자입력안하면 이벤트취소
document.querySelector("input[type=text]:first-of-type").onkeydown=function(){
this.value = this.value.replace( /[\ㄱ-ㅎ|ㅏ-ㅣ]/g, '');
if(!(event.keyCode>=48 && event.keyCode<=57|| event.keyCode==13||event.keyCode==8)){
alert("입력잘못");
event.returnValue=false;
}
}
document.querySelector("input[type=text]:nth-of-type(2)").onkeyup=function(){
if(event.keyCode==13){
document.querySelector("input[type=text]:nth-of-type(3)").value=
parseInt(document.querySelector("input[type=text]:nth-of-type(1)").value)+
parseInt(document.querySelector("input[type=text]:nth-of-type(2)").value);
document.querySelector("input[type=text]:nth-of-type(1)").focus();
document.querySelector("input[type=text]:nth-of-type(1)").select();
//document.querySelector("input[type=text]:nth-of-type(1)").value="";
}
}
</script>
</body>
</html>
모두 체크 , 체크해제
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
<style>
table, th, td {
border: 1px solid gray;
}
table{
width:50%;
margin:0 auto;
}
</style>
</head>
<body>
<h3>모두 체크와 체크풀기 예제 </h3>
<table>
<thead>
<tr>
<td><input type="checkbox" class="all">모두 선택</td>
<td>Name</td>
<td>Loc</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="ck1"></td>
<td>Animi.</td>
<td>Hic.</td>
</tr>
<tr>
<td><input type="checkbox" id="ck2"></td>
<td>Esse.</td>
<td>Fuga.</td>
</tr>
<tr>
<td><input type="checkbox" id="ck3"></td>
<td>Fuga.</td>
<td>Ducimus?</td>
</tr>
<tr>
<td><input type="checkbox" id="ck4"></td>
<td>Beatae.</td>
<td>Optio.</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="center">
<button>확인</button>
</td>
</tr>
</tfoot>
</table>
<p id="demo"> 체크된 체크박스의 id속성값을 출력 </p>
<script>
//모두체크
$(":checkbox.all").click(function(){
$(":checkbox:not(.all)").prop("checked",true);
});
//체크풀기
$(":checkbox:not(.all)").click(function(){
if( $(":checkbox:not(.all):checked").length==4){
$(":checkbox").eq(0).prop("checked",true);
}else{
$(":checkbox").eq(0).prop("checked",false);
}
});
// 삼항연산자
$(":checkbox:not(.all)").click(function(){
let len= $(":checkbox:not(.all):checked").length;
$(":checkbox.all").prop("checked", len==4? true:false);
});
//id 출력하기
$("tfoot button").click(function(){
// alert("xxx");
$(":checkbox:not(.all):checked").each(function(i,element){
console.log(element.id);
// p태그에 id출력
$("p#demo").html(function(index,htmlString){
return htmlString+"<li>"+element.id+"</li>";
});a
});
});
//name 출력하기
$("tfoot button").click(function(){
// alert("xxx");
$(":checkbox:not(.all):checked").each(function(i,element){
// var name= element.parentElement.nextElementSibling.innerHTML;
var name= element.parentElement.nextElementSibling.childNodes[0].innerText;
console.log(name);
});
});
/* li태그를 만들고 그 안에 id 값을 주겟다 .
"<li>"+element.id+"</li>";== $("<li></li>").text(element.id);
*/
</script>
</body>
</html>
select
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
<style>
select{
height: 200px;
width: 100px;
}
button{
width:40px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<select multiple="multiple" id="sleft">
<option>이창익</option>
<option>김지민</option>
<option>김희진</option>
<option>유환재</option>
<option>박예린</option>
</select>
</td>
<td>
<button>▶</button><br>
<button>▶▶</button><br>
<button>◀</button><br>
<button>◀◀</button><br>
</td>
<td>
<select multiple="multiple" id="sright"></select>
</td>
</tr>
</table>
<script>
//jq
$("button").first().click(function(){
//선택한것만 옮기기
$("#sleft option:selected").each(function(i,element){
//남기지않고 옮기기
//$("#sright").append(element);
//남기고(복제하고) 옮기기
$("#sright").append($(element).clone());
//$("#sright").append($("<option></option>").text(element.innerText));
});
});
$("button").eq(1).click(function(){
$("#sleft option").each(function(i,element){
$("#sright").append(element);
});
});
</script>
</body>
</html>동적추가
<!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>
<style>
p{
border:1px solid gray;
text-align: center;
}
p:hover{
cursor: pointer;
background-color: gray;
color: white;
}
</style>
</head>
<body>
<script>
for (let i = 0; i <10; i++) {
//$("<p>1</p>").appendTo($("body"));
//$("body").append( $("<p>1</p>"));
$("<p></p>").text("test-"+i).click(function(){
$(this).hide()
}).appendTo($("body")) ;
}
</script>
<!--
<script>
for (let i = 0; i < 10; i++) {
let pelemt=document.createElement("p");
pelemt.innerText="test-"+(i+1);
pelemt.onclick=function(){
//this.style.display="none";
event.srcElement.style.display="none";
};
document.body.appendChild(pelemt);
}
</script> -->
</body>
</html>
제이쿼리
<!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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" autofocus="autofocus" >
<select id="operator">
<option value="+" selected="selected">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="%">%</option>
<option value="/">/</option>
<option value="**">**</option>
</select>
<input type="text" >=
<input type="text" >
<script>
// $(":text:first-of-type") == $(":text").eq(0) == $(":text").first()
$(":text").eq(0).keydown(function(event){
//js에서 event.keyCode
if(event.which==13){
// $(":text").eq(1).focus();
$("select").focus();
}
});
/* change는 똑같은 이벤트가 아닌, 서로 다른 이벤트를 선택해야 일어난다
즉 변화가 있어야 한다는 뜻 */
$("select").change(function(){
$(":text").eq(1).focus();
}).
keydown(function(event){
if(event.keyCode==13){
$(":text").eq(1).focus();
}
});
$(":text").change(function(){
$(":text").eq(1).focus();
});
$(":text").eq(1).keydown(function(event){
if(event.which==13){
var n1=parseInt($(":text").first().val());
var n2=parseInt($(":text").eq(1).val());
//var op=$("select option:selected").val();
//alert(op);
var op=$("select").val();
var result;
if(op=='+'){
result=n1+n2;
}else if(op=='-'){
result=n1-n2;
}else if(op=='*'){
result=n1*n2;
}
else if(op=='/'){
result=n1/n2;
}
else if(op=='%'){
result=n1%n2;
}else if(op=='**'){
result=n1**n2;
}
$(":text").last().val(result);
}
});
/*
$("document").ready(function(){
$("#operator").change(function(event) {
alert("D");
var t1 = $(":text:first-of-type").val();
var t2 = $(":text:nth-of-type(2)").val();
var oper = $(this).val();
alert($(this).val());
var result ;
switch(oper){
case '+':
result=parseInt(t1)+parseInt(t2);break;
case '-':
result=parseInt(t1)-parseInt(t2);break;
case '*':
result=parseInt(t1)*parseInt(t2);break;
case '%':
result=parseInt(t1)%parseInt(t2);break;
case '/':
result=parseInt(t1)/parseInt(t2);break;
}
$(":text:nth-of-type(3)").text(result) ;
});
}); */
</script>
</body>
</html>