함수,객체, DOM
2023. 12. 24. 18:30ㆍDaily Codig Reminder
함수
유틸리티 함수
var kkk = setInterval(function(){
console.log("setInterval")
},3000) //3초에 한번씩 실행됨
setTimeout(function(){
alert("니코짱")
clearInterval(kkk)
}
, 10000) //10초 뒤에
외부함수
var a = function(arg){
var b= function(n){
return n*100
}
return b(arg)
}
var result = a(2)
console.log(result)→200
function x(arg){
function y(n){
return n*10
}
return y(arg)
}
var result = x(3)
console.log(result)→300
<script type="text/javascript">
function xxx(){
console.log("click 이벤트 발생")
}
</script>
</head>
<body>
<button onclick="xxx()" >click</button>
</body>클릭시 콘솔에 이벤트 발생
객체
데이터 관련객체
array 객체
push(값,[값1,값2]) 배열에 새로운 데이터 추가하는 메소드 중요!
pop() : 배열의 마지막 요소를 제거한다.
reverse() : 배열요소 순서를 거꾸로 변환하여 리턴한다.
indexOf(값) :지정한 값에 해당하는 index값을 리턴한다.
slice(start, end) : 배열로부터 지정한 start와 end 요소를 리턴한다.
splice(index,delCount[,값1,값2]) : 배열에 값을 저장하거나 삭제하는 메소드이다.
지정한 index위치에 값을 저장한다. delCount는 삭제할 개수다.
sort(function(a,b){return a-b;}) :배열에 저장된 알파벳 또는 숫자를 정렬한다.
function내에서 return a-b는 오름차순 정렬이고 return b-a는 내림차순 정렬이다.
join(separator) : 배열과 지정된 separator를 join하여 리턴한다
var n = new Array()
n[0] =10
n[1]=20
console.log(n.length)
console.log(n)
var n3 = new Array(10,20,30)
console.log(n3.length)
var n2 = []
n2 [0] =10
n2 [1] =20
console.log(n2)
n2[2]=30
console.log(n2)
var n = new Array(10,20)
console.log(n)
//2. [] 사용
var n2 = [10,20]
// console.log(n2.lemgth)
n2 [2] =30
console.log(n2)
n2[0]=100
console.log(n2)
console.log(n2[0])
console.log(n2[1])
console.log(n2[2])
console.log(n2[3]) //unde
// 배열 데이터 생성하는 방법
//1.[] 사용
var n2 = [10,20,9,7,5,3,1]; //배열생성
//일반 for
//for ~ in
//for ~ of
for(var i=0; i < n2.length; i++){
console.log(n2[i]);
}
for(var i in n2){ // i 는 index값
console.log(n2[i]);
}
for(var i of n2){ // i 는 data java의 foreach와 동일
console.log(i);
}
console.log("===================");
for (var k of n2) {
console.log(">>",k)
}
// 배열 데이터 생성하는 방법
//1.[] 사용
var n2 = [10,20,9]; //배열생성
//n2[3]= 20;
n2.push(20);
n2.push(30);
console.log(n2);
n2.pop();//마지막 삭제
console.log(n2);
n2.pop();
console.log(n2);
var n3 = [1,2,3,4,5];
n3.reverse();
console.log(n3);
var n4 = ["A","B","C",10,true,4.2];
var x = n4.indexOf("C");
console.log(x);
var x2= n4.slice(1,3);//시작index, 끝index-1
console.log(x2);
var n5 = ["A","B","C",10,true,4.2];
n5.splice(1,4); // 1부터 시작, 갯수 삭제
console.log("splice", n5);
var n6 = ["A","B","C",10,true,4.2];
n6.splice(0,1,100); //0위치 1개 삭제 100 추가
console.log("n6>>>>", n6);
var n7 = ["A","B","C",10,true,4.2];
n7.splice(0,0,100); //0위치 0개 삭제 100 추가
console.log("n7>>>>", n7);
//1.[] 사용
var n = [1,2,9,5,4,8];
n.sort()
console.log(n)
n.reverse()
console.log(n)
n.sort(function(a,b){return b-a}) // 내림차순 a-b는 오름차순
console.log(n)
var n3 = ["A","B","C"];
var n4 = n3.join(" and ")
console.log(n4)
//A and B and C
//1.[] 사용
var k = [10,20,30,40,50];
function b (n){
for (var i of n){
console.log(i)
}
}
b(k)
function a (){
var k = [10,20,30];
return [1,2,3] //리턴값으로 배열 사용
}
var x = a() //히ㅏㅁ수 호출 배열받기
console.log(x)
//a함수 호출할 때 반환 값 : 10,20,30
function a (n){
n =100
}
var k =10
console.log(k)
a(k)
console.log(k)
//a함수 호출할 때 반환 값 : 10,20,30
var k = [10,20,30,40,50];
function a (n){
n[0]=100
}
function b (n){
n=100
}
console.log(k)
a(k) //배열넘김
String 객체
charAt(index) : 명시된 index에 해당하는 문자를 리턴한다.
concat(s,s2,s3,…) : 지정한 s, s2 문자열등을 연결하여 리턴한다.
indexOf(str ): 지정한 str에 해당하는 값의 index값을 리턴한다.
일치하는 str 이 없으면 -1 값을 리턴한다.
split(구분자 , [개수]): 지정한 문자열에서 특정 구분자를 기준으로 문자열을 분리하여 얻고자 할 때 사용한다. toLowerCase(): 지정한 문자열을 모두 소문자로 변경하여 리턴한다.
toLowerCase(): 지정한 문자열을 모두 대문자로 변경하여 리턴한다.
substring(start,end): 지정한 문자열을 start 부터 end-1 까지 부분열을 리턴한다.
substr(start, len ): 지정한 문자열을 start 부터 개수가 len을 리턴한다.
replace(패턴, sss): 지정한 문자열에서 일치하는 패턴에 해당하는 값을 sss로 변경하여 리턴한다
//문자열 생성하는 방법
//1. 리터럴방벙
var s = "hello"
//2. new String 방법
var s2 = new String("hello")
console.log(s)
console.log(s2)
console.log(s.toString())
console.log(s ==s2) //true
console.log(s=== s2)//false
//문자열 생성방법
//가. new 이용
var s = new String("HelLo");
//나. 리터럴 이용
var s2 = "HelLo";
console.log(s,s2);
console.log("문자열 길이", s.length)
console.log("특정문자 구하기", s.charAt(0))// h
var ss = s.concat(" world");
console.log("문자열 연결", ss);
var ss2 = s.concat(" aa" , "bbb");
console.log("문자열 연결2", ss2);
console.log("특정문자위치", ss.indexOf('e')); //1
console.log("부분열", s.substring(1,3)); //el start , end -1
console.log("부분열", s.substr(1,3));// elL ,개수
console.log("대문자", s.toUpperCase());
console.log("소문자", s.toLowerCase());
var xx = "Hello world happy";
var arr = ss.split(" ") // " " 기준으로 분할
for (var i in arr){ //foreach ~ in : i - index 값
console.log(arr[i])
}
var xx2 = "Hello/world/happy/xxx/yyyy";
var arr2 = xx2.split("/",3) // "/" 기준으로 분할 3개만
for (var i in arr2){
console.log(arr2[i])
}arr
var kk = "Hello";
console.log("replace", kk.replace("H","A")) //단어병경
var kk2 = " world "
console.log(kk2.length, kk2.trim().length) //공백제거
Number 객체
수치 데이터를 처리하는 객체로서 기본데이터를 wrapper하는 객체이다.
문법: new Number( 값 )
예> var num = new Number(수치값);
만약 수치 데이터로 변경하지 못하는 값을 지정하면 NaN(Not a Number) 이 리턴된다.
//수치데이터 작성방법
//1. new
var n = new Number(10) //number 객체 10
//2.리터럴
//valueOf()는 정수값으로 리턴
//toString()는 문자열으로 리턴
var n2 = 10
console.log(n.valueOf(), n2, n.toString()) //10, 10, "10"
var x = 5.7354
console.log(x.toFixed(2)) //소스점 둘째 자리까지 출력 (반올림)
console.log(x.toFixed())// 쩡수 (반올림)
console.log(x.toFixed(10))//소수점 10자리
Date 객체
var d = new Date()
console.log(d)
console.log("1970/1/1~현재", d.valueOf())
console.log("년도",d.getFullYear())
console.log("월",d.getMonth()+1)
console.log("일",d.getDate())
console.log("시간",d.getHours())
console.log("분",d.getMinutes())
console.log("초",d.getSeconds())
//변경
d.setFullYear(2022);
d.setMonth(7);
d.setDate(20);
console.log(d);
var dd = new Date()
var str;
console.log(dd.getDay())
switch(dd.getDay()){
case 0:
str ="일요일"; break;
case 1:
str ="월요일"; break;
case 2:
str ="화요일"; break;
case 3:
str ="수요일"; break;
case 4:
str ="목요일"; break;
default:
str ="주말"; break;
break;
}
console.log("오늘은 "+str)
Set 객체
var mySet = new Set()
mySet.add(1)
mySet.add(2)
mySet.add("홍길동")
mySet.add("홍길동")
console.log("Set 길이",mySet.size)
console.log("정보 보기",mySet)
mySet.delete("홍길동")
console.log(mySet)
console.log(mySet.has("홍길동"))//f
var xxx = mySet.values()//데이터 => []로 리턴
for (var i of xxx){//of'
console.log(i)
}
//전부 삭제
// mySet.clear()
console.log(mySet)
//foreach
mySet.forEach(
function(v){ //콜백함수
console.log(">>",v)
}
)
Map 객체
var myMap = new Map()
myMap.set("username","홍길동")
myMap.set("age",20)
myMap.set("address","서울")
myMap.set("address","제주")
console.log("크기", myMap.size)
console.log("값얻기", myMap.get("username"),
myMap.get("age"),
myMap.get("address"),
myMap.get("xxx"))
myMap.delete("age")
console.log(myMap)
var keys = myMap.keys();
for(var key of keys){
console.log(key+"="+myMap.get(key))
}
var v = myMap.values();
for(var x of v){
console.log(x)
}
var en = myMap.entries();
for(var [key, value] of en){
console.log(key + " = "+value)
}
브라우저 관련 객체
window 객체
- document window에서 보여지는 현재 문서를 의미한다.
- name window의 이름을 리턴한다.
- history window의 history객체를 의미한다.
- location window의 location객체를 의미한다.
- navigator window의 navigator객체를 의미한다.
- screen window의 screen객체를 의미한다.
- opener 새롭게 생성된 window에서 이전 window의 참조값을 리턴한다.
- parent 현재 window의 부모 window 객체를 리턴한다
메소드
alert() 경고창을 보여줄때 사용한다.
open() 새로운 window창을 보여줄 때 사용한다.
close() 현재 window창을 닫는다.
moveTo() 명시된 위치로 현재 window를 움직인다.
print() 현재 window의 내용을 출력한다.
setInterval() 명시된 시간후 반복적으로 특정 작업 수행.
setTimeout() 명시된 시간후 한번 특정 작업 수행.
confirm() 다이얼로그 창을 보여줄때 사용한다.
focus() 현재 window에 포커스를 지정할 때 사용한다.
blur() 현재 window의 포커스를 제거할 때 사용한다
//// 브라우저 정보 출력
console.log("브라우저 이름", navigator.appName);
console.log("브라우저 버전", navigator.appVersion);
console.log("쿠키사용여부", navigator.cookieEnabled);
console.log("브라우저 언어", navigator.language);
console.log("브라우저 onLine", navigator.onLine);
console.log("헤더정보", navigator["userAgent"]);
//// 브라우저 정보 출력
console.log(screen.width, screen.height);
console.log(screen.availWidth, screen.availHeight);
history 객체
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
</script>
</head>
<body>
</body>현재 05history.html 입니다 <br>
<a href="05hostory2.html">next</a>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
con(history.length+"<br>")
function back(){
history.back()
}
function home(){
history.go(-2)
}
</script>
</head>
<body>
현재 05history2.html 입니다.<br>
<a href="javascript:back()"> 이전으로</a><br>
<a href="05history3.html"> next</a><br>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
con(history.length+"<br>")
function back(){
history.back()
}
function home(){
history.go(-2)
}
</script>
</head>
<body>
현재 05history3.html 입니다.<br>
<a href="javascript:back()"> 이전으로</a><br>
<a href="javascript:home()"> home</a><br>
</body>
</html>
<script type="text/javascript">
var child;
function yyy(){
var width=200;
var height =300;
var left = Math.ceil((window.screen.width-width)/2);
var top = Math.ceil((window.screen.height-height)/2);
child = open("01child.html", "childName",
"width="+width+", height="+height+", left="+left+", top="+top);
//open ("파일명", "자식창이름"," 크기,위치")
};
function yyy2(){
child.close()
};
function yyy3(){
close()
};
</script>
</head>
<body>
여기는 부모창입니다.<br>
<button onclick="yyy()">창생성</button>
<button onclick="yyy2()">자식창 닫기</button>
<button onclick="yyy3()">창닫기</button>
</body>
<script type="text/javascript">
function xxx(){
close()
}
function xxx2(){
opener.close() //나를 연 창 닫기
}
</script>
</head>
<body>
여기는 자식페이지입니다.<br>
<button onclick="xxx()">창 닫기</button>
<button onclick="xxx2()">부모창닫기</button>
DOM
태그 선택방법
- 순회를 이용한 방법 → 스킵
- 선택을 이용한 방법
DOM을 이용한 핵심 작업
가. 자바스크립트를 이용한 페이지의 모든 태그 변경 가능
나. 자바스크립트를 이용한 페이지의 모든 속성 변경 가능
다. 자바스크립트를 이용한 페이지의 모든 CSS 스타일 변경가능
라. 자바스크립트를 이용한 페이지의 모든 이벤트 처리 가능.
DOM 핵심 API
- 순회 : childNodes , firstChild, lastChild , nextSibling , previousSibling
- 선택 : getElementById() , getElementsByTagName() , getElementsByClassName() querySelector(), querySelectorAll()
- 생성 및 추가/삭제 : createElement(), createTextNode(), appendChild(), removeChild() createAttribute() , setAttribute(), getAttribute()
- 내용 저장 및 조회: innerHTML, innerText, .value
가. 직접 접근 방법<
- id 값으로 접근 document.getElementById( id값 ) : Node
- 태그명으로 접근 document.getElementsByTagName( tag명 ) : NodeList
- class 속성으로 접근 document.getElementsByClassName( class명 ) : NodeList
- CSS selector 사용(#, . 등등 css 기호 사용) document.querySelectorAll(css selector); // 일치하는 모든요소 document.querySelector(css selector)//일치하는 하나의 요소
<body>
아이디<input type="text" id="xxx" name="userid" class="kkk" value="tester"><br>
비밀번호<input type="password" id="yyy" name="passwd" class="kkk" value="1234"><br>
<button onclick="login()">로그인</button>
<span id="aaa">innerText로 접근</span>
<script type="text/javascript">
function login(){
var body = document.body;//body 태그 선택
// console.log(body);
var id2 = document.getElementById("xxx");//아이디 잘못될 경우 null 출력
console.log(id2);//id가 xxx인 태그 전체 선택
console.log(id2.value);//value 선택
var pw2 = document.getElementById("yyy")
console.log(pw2)
console.log(pw2.value)
console.log("============================")
var classes = document.getElementsByClassName("kkk")// . 빠짐 class 이름을 사용 - 이름만 기재
console.log("classes",classes)//여러개 선택결과가 배열로 관리됨
console.log("classes",classes[0]) // 여러개 선택결과가 배열로 관리됨
console.log("classes",classes[1]) // 여러개 선택결과가 배열로 관리됨
console.log("classes",classes[0].value) // 여러개 선택결과가 배열로 관리됨
var pw = classes[1]
console.log(pw.value)
console.log("==================")
var inputs = document.getElementsByTagName("input")//태그맵 input
console.log(inputs)
var id = inputs[0]
console.log(id)
console.log(id.value)
var pw = inputs[1]
console.log(pw.value)
var xx = document.getElementsByClassName("userid") //태그 중 name ="userid"
console.log(xx.value) //unde
console.log(xx[0]) //
console.log(xx[0].value)
}
</script>
console.log("==================")
var id = document.querySelector("#xxx")
console.log(id)
console.log("==================")
var tags = document.querySelectorAll(".kkk")
console.log(tags)
console.log(tags[0].value)
console.log("==================")
var t = document.getElementById("aaa")
console.log(t.innerText) //innerText로 접근
<body>
값1<input type="text" id="v1" name="val1" value="abc"><br>
값2<input type="text" id="v2" name="val2"><br>
<button onclick="plus('hello')">+</button>
<button onclick="minus()">-</button>
<button onclick="multiply()">*</button>
<button onclick="divide()">/</button>
<br>
결과값<input type="text" id="result" name="resultval" >
<script type="text/javascript">
function plus(){
var n1 = document.getElementById('v1').value;
var n2 = document.getElementById('v2').value;
var sum = parseInt(n1)+parseInt(n2);
document.getElementById('result').value = sum;
}
function minus(){
var n1 = document.getElementById('v1').value;
var n2 = document.getElementById('v2').value;
var sum = parseInt(n1)+parseInt(n2);
document.getElementById('result').value = sum;
}
function multiply(){
var n1 = document.getElementById('v1').value;
var n2 = document.getElementById('v2').value;
var sum = parseInt(n1)+parseInt(n2);
document.getElementById('result').value = sum;
}
function divide(){
var n1 = document.getElementById('v1').value;
var n2 = document.getElementById('v2').value;
var sum = parseInt(n1)+parseInt(n2);
document.getElementById('result').value = sum;
}
</script>
<body>
값1<input type="text" id="v1" name="val1" ><br>
값2<input type="text" id="v2" name="val2"><br>
<button onclick="calc('+')">+</button>
<button onclick="calc('-')">-</button>
<button onclick="calc('*')">*</button>
<button onclick="calc('/')">/</button>
<br>
결과값<input type="text" id="result" name="resultval" >
<script type="text/javascript">
function calc(op){
var n1 = document.getElementById('v1').value;
var n2 = document.getElementById('v2').value;
var result = document.getElementById('result');
switch (op){
case '+':
result.value = parseInt(n1)+parseInt(n2);
break;
case '-':
result.value = parseInt(n1)-parseInt(n2);
break;
case '*':
result.value = parseInt(n1)*parseInt(n2);
break;
case '/':
result.value = parseInt(n1)/parseInt(n2);
break;
}
}
</script>
</body>
<body onload ="xxx()">
아이디 <input type="text" name="userid" value="abc">
<script type="text/javascript">
function xxx(){
console.log("body onload 후 실행");
var id = document.getElementById("userid");
console.log(id.value);
id.value="test";
}
</script>
<body>
입력값 <input type="text" name="arr" id="v1" value="1,2,3,2,7,5,6">
<button onclick="mySort('asc')">오름차순 정렬</button>
<button onclick="mySort('desc')">내림차순 정렬</button>
결과값 <input type="text" name="arrResult" id="v2">
<script type="text/javascript">
function mySort(s) { // s= 'asc' or 'desc'
console.log("instruct>>>>", s);
var str = document.getElementById("v1").value; // 문자열 가져오기
var arr = str.split(","); // , 기준 배열 생성
if (s == 'asc') { // 오름차순
arr.sort(function (a, b) {
return a - b; // 오름차순 정렬
});
} else {
arr.sort(descSort);
}
var result = document.getElementById("v2");
result.value = arr;
}
function ascSort(a, b) {
return a - b;
}
function descSort(a, b) {
return b - a;
}
</script>
</body>
<body>
<img src="../image/a.jpg" width="200" height="200" id="flag">
<button onclick="before()">전</button>
<button onclick="next()">후</button>
<script type="text/javascript">
var arr =["a.jpg","b.jpg","c.jpg"];
var i=0;
function before(){
var img = document.getElementById("flag");
--i;
if(i<=-1){
i=0;
}
img.src="../image/"+arr[i];
}
function next(){
var img = document.getElementById("flag")
++i;
if(i>=2){
i=2
}
img.src="../image/"+arr[i];
}
</script>
</body>
<body>
<table>
<tr>
<td><img src="../image/a.jpg" id="flag1" width="100" height="100" class="kkk"></td>
<td><img src="../image/b.jpg" id="flag2" width="100" height="100" class="kkk"></td>
<td><img src="../image/c.jpg" id="flag3" width="100" height="100" class="kkk"></td>
</tr>
</table>
<a href="javascript:change(1)">1</a>
<a href="javascript:change(2)">2</a>
<a href="javascript:change(3)">3</a>
<script type="text/javascript">
function change(v){
var arr =["a.jpg","b.jpg","c.jpg","d.jpg","e.jpg","f.jpg","g.jpg","h.jpg","i.jpg"];
var imgs = document.getElementsByClassName("kkk"); //태그이름으로 데이터 얻기 -class
//imgs확인
//imgs 출력
//imgs 태그의 배열
var selectArr=""; //9개 배열중에 3개만 선택
if (v==1){
selectArr= arr.slice(0,3); //0,1,2
}
if (v==2){
selectArr= arr.slice(3,6);//3,4,5
}
if (v==3){
selectArr= arr.slice(6,9);//6,7,8
}
for (var x in imgs){
imgs[x].src="../image/"+selectArr[x];
}}
</script>
</body>
<body>
<table>
<tr>
<td><img src="../image/a.jpg" id="flag0" width="100" height="100" class="kkk"></td>
<td><img src="../image/b.jpg" id="flag1" width="100" height="100" class="kkk"></td>
<td><img src="../image/c.jpg" id="flag2" width="100" height="100" class="kkk"></td>
</tr>
</table>
<a href="javascript:change(1)">1</a>
<a href="javascript:change(2)">2</a>
<a href="javascript:change(3)">3</a>
<script type="text/javascript">
function change(v){
var arr =["a.jpg","b.jpg","c.jpg","d.jpg","e.jpg","f.jpg","g.jpg","h.jpg","i.jpg"];
var imgs = document.getElementsByClassName("kkk"); //태그이름으로 데이터 얻기 -class
//imgs확인
//imgs 출력
//imgs 태그의 배열
var selectArr=""; //9개 배열중에 3개만 선택
if (v==1){
selectArr= arr.slice(0,3); //0,1,2
}
if (v==2){
selectArr= arr.slice(3,6);//3,4,5
}
if (v==3){
selectArr= arr.slice(6,9);//6,7,8
}
// for (var x in imgs){
// imgs[x].src="../image/"+selectArr[x];
for (var x in selectArr){
var tid= "flag"+x;
//console.log(tid); //idx번호
// console.log(document.getElementById(tid));
console.log(document.getElementById(tid).src ="../image/"+selectArr[x]);
}}
</script>
</body>
'Daily Codig Reminder' 카테고리의 다른 글
| event (1) | 2023.12.31 |
|---|---|
| DOM, EVENT (0) | 2023.12.24 |
| jsp- 연산자 , 문장, 함수 (0) | 2023.12.24 |
| javascript (0) | 2023.12.24 |
| My batis2 (1) | 2023.12.23 |