#1. 연산자
객체.메소드(); :객체기반언어
object.method();
document.write("자바스크립트" + "<br />")
document : 객체
wirte : 객체의 기능#1.1. 변수
var 변수명;
var num = 10;
var num = num/2;
document.write(num + "<br />")
// 변수명 작성 시 주의사항
// 대,소문자 구분
// 변수명 앞에는 영문, _, $
// 변수명에는 영문, 숫자, _, $var firstNum = 100;
var nextNum = 2;
var result = firstNum + nextNum;
document.write(result + "<br />")
// 자바스크립트에서의 =는 오른쪽 값을 왼쪽 값에 대입한다라는 뜻.
// 같다라는 뜻은 ==임.// 변수에 저장 가능한 데이터 타입
var txt1 = "자바스크립트"; //문자형, string
var txt2 = '10';
var num = 10; //숫자형, Number
var result = true; //논리형, boolean (true, false)
var result = null; //널형, Null (비어있음)/*
지역변수 : 변수가 정의되어있는 함수 내에서만 쓴다.(우선호출)
함수내에서 선언하며 반드시 앞에 var 키워드를 붙여 선언한다.
전역변수 : 현재페이지 내 자바스크립트 어디든 사용가능
함수 밖에 선언하거나, 함수내에서 var 없이 선언한다.
*/
var Num;
function theFnc(){
Num = 30;
}
theFnc();
console.log(Num);
var a = 10;
var b = 20; // 전역변수, 모든 곳에서 호이스팅을 통해 사용 할 수 있다.
function theT(){
var b = a + 200; // 지역변수, 이 함수 안에서만 사용할 수 있다.
alert(b); // 함수 안에서는 지역변수가 전역변수보다 우선순위를 갖는다.
}
theT();
console.log(b);#1.2. 산술 연산자 / 이항 연산자
산술연산자,이항연산자
+,-,*,/,%
var A = 10;
var B = 4;
var result;
result = A+B; //더하기
document.write(result + "<br />")
result = A-B; //빼기
document.write(result + "<br />")
result = A*B; //곱하기
document.write(result + "<br />")
result = A/B; //나누기
document.write(result + "<br />")
result = A%B; //나머지
document.write(result + "<br />")#1.3. 비교연산자
비교연산자 값: true(참), flase(거짓)
A > B
A>B, A<B, A<=B
A==B 값만 같으면 true
A===B 값, 데이터타입 모두 일치해야 true
A!=B, 같지 않으면 true
var A = 10;
var B = 3;
var C = "10";
var result;
result = A>B; //true
document.write(result + "<br />");
result = A<B; //false
document.write(result + "<br />");
result = A==B; //false
document.write(result + "<br />");
result = A!=B; //true
document.write(result + "<br />");
result = A!=C; //false
document.write(result + "<br />");
result = A==C; //true , 값만 같으면 true
document.write(result + "<br />");
result = A===B; //false, 값과 데이터도 모두 같아야 true
document.write(result + "<br />");
result = A!==C; //true
document.write(result + "<br />");#1.4. 대입 연산자
대입 연산자
=, +=, -=, *=, /=, %=
왼쪽 값에 오른쪽 값을 연산 후 다시 왼쪽 값에 대입
var numA = 10;
var numB = 20;
numA += 5; // numA = numA + 5;
document.write(numA + "<br />")
numA -= 5; // numA = numA - 5;
document.write(numA + "<br />")
numA *= 5; // numA = numA * 5;
document.write(numA + "<br />")
numA /= 5; // numA = numA / 5;
document.write(numA + "<br />")
numB %= 3; // numB = numB % 3;
document.write(numB + "<br />")#1.5. 증감 연산자
증감 연산자
++ 1씩 증가, -- 1씩 감소
var numA = 10;
var numB = 20;
numA++;
document.write(numA + "<br />"); //10 + 1 = 11
numB--;
document.write(numB + "<br />"); //20 - 9 = 19#1.6. 논리 연산자
논리 연산자
|| 논리합(or) , && 논리곱(and), ! 논리부정[true(1), flase(0)]
true || true -> true (1+1)
true || false -> true (1+0)
false || false -> false (0+0)
true && true -> true (1x1)
true && false -> false (1x0)
false && false -> false (0x0)
var A = 10;
var B = 20;
var C = 30;
var D = 40;
//ex1.
var num1 = A>B; //false
var num2 = C>=D; //false
var a = num1 || num2; //false || flase -> fasle
document.write( a + "<br />");
var b = num1 && num2; //false && false -> false
document.write( b + "<br />");
var c = !num1; //false의 부정 -> true
document.write( c + "<br />");
//ex2.
var num1 = A>=B; //false
var num2 = C<=D; //true
var d = num1 || num2; //false || true-> true
document.write( d + "<br />");
var e = num1 && num2; //false && false -> false
document.write( e + "<br />");
var f = !num1; //false의 부정 -> true
document.write( f + "<br />");
//ex3.
var num1 = A<=B; //true
var num2 = C<D; //true
var g = num1 || num2; //true || ture -> true
document.write( g + "<br />")
var h = num1 && num2; //true && ture -> true
document.write( h + "<br />")
var i = !num1; //true의 부정 false
document.write( i + "<br />")#1.7. 조건 연산자 / 삼항 연산자
조건 연산자, 삼항연산자
조건식 ? 실행문A : 실행문B;
조건식이 true면 실행문A 실행, false면 실행문B 실행
var num1 = 30;
var num2 = 20;
num1 >= num2 ? alert("True") : alert("False"); // num1(30) >= num2(20) 가 true므로 :(콜론)이전의 실행문이 실행됨
// confirm("내용"), 확인:true값 반환, 취소:false값 반환
var result = confirm("Do you like JavaScript?");
var theText = result ? "good" : "No-good" ;
document.write(theText);#1.8. 연산자 예제
문제1 - 20대이고 여성이면 true
prompt Method 사용
prompt("질문내용", "기본답변제시"); - 당신의 성별은?, 여성
prompt("질문내용", "기본답변제시"); - 당신의 나이는?, 20
var gender = prompt("당신의 성별은?", "여성"); //prompt : 입력창 띄워 사용자가 입력 한 값을 변수에 대입
console.log(gender);
var age = prompt("당신의 나이는?", "20");
console.log(age);
var gender;
var result = gender=="여성" && age>=20 && age<30;
document.write("결과 :" + result + "<br />");
문제2 - 국어, 영어, 수학 점수 입력받고
평균이 70점이상 이고 각 과목점수가 60이상 이면 true
Number(prompt("문자열","")); Number() -> 대입값을 숫자형으로 변환
var kor = Number(prompt("국어 점수를 입력하세요."));
var eng = Number(prompt("영어 점수를 입력하세요."));
var math = Number(prompt("수학 점수를 입력하세요."));
var avg = (kor + eng + math)/3;
var result = avg >= 70 && kor>=60 && eng>=60 && math>=60;
document.write("결과 :" + result + "<br />");문자 결합 연산자
"문자" + "문자" , "문자" + 숫자, String(숫자) + 숫자
var txt1 = "아름다운";
var txt2 = "우리강산";
document.write(txt1 + txt2 + "<br/>");
var txt3 = "은하철도";
var txt4 = 999;
document.write(txt3 + txt4 + "<br/>");
var num1 = 200;
var num2 = 300;
var txt5 = String(num1);//'200'
document.write(num1 + num2 + txt5 + "<br/>");
var addText = "2002월드컵";
addText += "대한민국";
addText += "짝짝짝";
document.write(addText + "<br/>");#2. 제어문
#2.1. if 조건문
if 조건문
if(조건식){
실행문;
}
조건식이 true일 경우 실행문 실행
조건식이 false일 경우 코드 스킵
var myAge = 25;
if(myAge >= 20){
document.write("당신은 성인입니다." + "<br/>")
}
//prompt를 이용해서 시험점수를 입력받고, if문 사용 70점 이상이면 '합격' 메시지 출력
var testNum = Number(prompt("시험점수를 입력하세요."));
if(testNum >= 70){
document.write("합격입니다!" + "<br/>")
}
if ~else문
if(조건식){
실행문1;
}else{
실행문2;
}
조건식이 true 일 경우 실행문1 실행
조건식이 false일 경우 실행문2 실행
// prompt를 이용해서 나이를 입력받고,
// 나이가 20세 이상이고, 30세 미만일 경우 "통과", 그 외는 "비통과"
var myAge = Number(prompt("당신의 나이는?"));
if(myAge >= 20 && myAge <30){
document.write("통과" + "<br/>"); // prompt로 입력받은 값이 true일 경우
}else{
document.write('비통과' + "<br/>"); // prompt로 입력받은 값이 true가 아닐 경우
}
if ~else if문
if(조건식){
실행문1;
}else if(조건식2){
실행문2;
}else if(조건식3){
실행문3;
}else if(조건식4){
실행문4;
}else{
실행문5;
}
모든 if/else if문이 거짓일 경우
else의 실행문이 실행된다.
// 문제1 prompt를 이용해서 시험점수를 입력받고
// 학점 90점이상 A학점, 80점이상 B학점, 70점이상 C학점, 60점이상 D학점, 60점 미만 F학점
var testScore = Number(prompt("시험점수를 입력하세요."));
if(testScore >= 90){
document.write("A학점");
}else if(testScore >= 80){
document.write("B학점");
}else if(testScore >= 70){
document.write("C학점");
}else if(testScore >= 60){
document.write("D학점");
}else{
document.write("F학점");
}#2.2. switch/case문
switch ~ case 문
저장한 변수에 저장된 데이터와 정확히 일치하는 경우 case안에 있는 실행문 실행
switch변수에 일치하는 값이 없는 경우 default실행문 실행
default문 없을 경우 무한 반복하므로 주의
num = 300;
switch(num){
case 100:
실행문1;
break;
case 200:
실행문2;
break;
case 300:
실행문3;
break;
default:
실행문4;
break;
}
// prompt로 지역을 입력하세요.
// 서울 02, 경기 031, 부산 051, 등록되지 않은지역입니다.
var myArea = prompt("지역을 입력하세요.", "서울");
var areaNum;
switch(myArea){
case "서울" :
areaNum = "02";
break;
case "경기" :
areaNum = "031";
break;
case "부산" :
areaNum = "051";
break;
default :
alert("등록되지 않은 지역입니다.");
break;
}
document.write(myArea + "지역번호는" + areaNum);#2.3. While문
while문 - 특정 조건을 만족하는 동안 실행문을 반복적으로 수행
var i = 초기값;
while(조건식){
실행문;
증감식;
}
var i = 1;
while(i<10){
document.write(i + "<br/>");
i++; // 무한반복을 하지 않기 위해서 반드시 증감식이 있어야 함
}
// 문제1 10부터 1까지 내림차순으로 2의 배수만 출력
var j = 10;
while(j>0){
if(j % 2== 0){
document.write(j + "<br/>")
};
j--;
}
// 문제2 1부터 100까지 오름차순으로 3의 배수만 출력
var k = 1;
while(k<101){
if(k % 3== 0){
document.write(k + "<br/>")
};
k++;
}#2.4. For문
for문
for(var k=초기값; 조건식; 증감식){
실행문;
}
// 1,2,3,4,5,6,7,8,9,10
for(var l=1; l<=10; l++){
document.write(l + "<br/>");
}
// 10부터 1까지 내림차순으로 2의 배수만 출력
for(var i=10; i>0; i--){
if(i % 2 == 0){
document.write(i + "<br/>")
};
}
/*
h6 즐거운 금요일!!
h5 즐거운 금요일!!
h4 즐거운 금요일!!
h3 즐거운 금요일!!
h2 즐거운 금요일!!
h1 즐거운 금요일!!
*/
for(var i=6; i>0; i--){
document.write("h" + i + " 즐거운 금요일!!" + "<br/>");
}
/*
<h1>h1 즐거운 금요일!!</h1>
<h2>h2 즐거운 금요일!!</h2>
<h3>h3 즐거운 금요일!!</h3>
<h4>h4 즐거운 금요일!!</h4>
<h5>h5 즐거운 금요일!!</h5>
<h6>h6 즐거운 금요일!!</h6>
*/
for(var m=1; m<7; m++){
document.write("<h" + m +">h" + m + "즐거운 금요일!!" + "</h" + m + ">" + "<br/>");
}
//"<img src='images/quick01_0.png' alt='0' />"
//quick01_0.png ~ quick01_19.png
for(var i=0; i<20; i++){
document.write("<img src='images/quick01_" + i + ".png' alt='" + i + "' />");
}
// 구구단 2단
var x = 2;
document.write("<h1>" + x + "단" + "</h1>")
for(var y=1; y<=9; y++){
document.write(x + "x" + y + "=" + x*y + "<br/>");
}// 중첩for문
// 구구단 전체
for(var k=2; k<10; k++){ // 2단~9단 제목
document.write("<h1>" + k + "단</h1>");
for(var j=1; j<10; j++){ // 1~9 곱하기
document.write(k + "x" + j + "=" + (k*j) + "<br/>")
}
}#2.5. Break문
break문 : 해당 반복문을 종료
for(var i=1; i<11; i++){
document.write(i + "<br/>")
if(i=5) break; //조건문의 값이 참일 경우 실행
}#2.6. Continue문
continue문 : 반복문이 continue문을 만나면 더 이상 실행문을 수행하지 않고 증감식으로 돌아가서 실행문을 반복한다.
for(var i=1; i<11; i++){
if(i%2 == 1) continue;
document.write(i + "<br />");
}#3. 객체
#3.1. 객체의 의미
자바스크립트는 객체기반 언어다.
객체 - 특정 기능을 수행하는 단위체
메소드 - 객체가 지닌 각각의 기능
object.method();
휴대폰.통화하기(); : 메소드
휴대폰.색상; : 속성
새로운 객체를 생성할 때 - new 연산자, new 내장객체함수명
var todayObj = new Date();
todayObj.getFullYear();
#3.2. Date 객체
Date 객체
var 변수 = new Date();
var 변수 = new Date(년,월,일,시,분,초);
날짜 제공 메소드
getFullYear() : 년
getMonth() : 월 0~11
getDate() : 일
getDay() : 요일 0,일요일 ~ 6,토요일
getHours() : 시간 0~23
getMinutes() : 분 0~59
getSeconds() : 초 0~59
getMilliseconds() : 1/1000초
getTime() : 1970년 1월 1일 이후부터 경과된 밀리초 제공
날짜 지정 메소드
setFullYear() : 년
setMonth() : 월 0~11
setDate() : 일
setDay() : 요일 0,일요일 ~ 6,토요일
setHours() : 시간 0~23
setMinutes() : 분 0~59
setSeconds() : 초 0~59
setMilliseconds() : 1/1000초
setTime() : 현재까지 경과된 밀리초 새로지정
toGMTString() : 날짜를 그리니치천문대 표준시로 표시
toString() : 날짜를 문자형식으로 표시
// 오늘 날짜 가져오기
document.write("<h1>현재날짜/시간정보</h1>");
var today = new Date();
var nowYear = today.getFullYear();
document.write("년 :" + nowYear + "<br />");
var nowMonth = today.getMonth()+1;
document.write("월 :" + nowMonth + "<br />");
var nowDate = today.getDate();
document.write("일 :" + nowDate + "<br />");
var nowDay = today.getDay();
switch(nowDay){
case 0:
nowDay = "일요일";
break;
case 1:
nowDay = "월요일";
break;
case 2:
nowDay = "화요일";
break;
case 3:
nowDay = "수요일";
break;
case 4:
nowDay = "목요일";
break;
case 5:
nowDay = "금요일";
break;
case 6:
nowDay = "토요일";
break;
default:
break;
}
document.write("요일 :" + nowDay + "<br />");// 현재 시간 가져오기
var nowHours = today.getHours();
var nowMinutes = today.getMinutes();
var nowSeconds = today.getSeconds();
document.write("시 : " + nowHours + "<br />");
document.write("분 : " + nowMinutes + "<br />");
document.write("초 : " + nowSeconds + "<br />");
var nowTime = today.getTime();
document.write("경과시간 : " + nowTime + "<br />")// 날짜 지정하기
today.setMonth(11);
today.setDate(25);
var nowMonth = today.getMonth()+1;
document.write("월 : " + nowMonth + "<br />");
var nowDate = today.getDate();
document.write("일 : " + nowDate + "<br />");// D-day 계산
var today = new Date(); //현재까지의 밀리초
var afterDay = new Date(2022,11,25); //D-Day까지의 밀리초
var diffDay = afterDay.getTime() - today.getTime(); //D-Day까지의 밀리초 - 현재까지의 밀리초
document.write(diffDay + "<br />");
var DDay = Math.ceil(diffDay / 1000 / 60 / 60 / 24); //D-Day 변환
document.write(DDay + '일' + "<br />");// 요일에 맞는 사진 가져오기
var today = new Date();
var nowDay = today.getDay()+1;
document.write('<img src="images/img' + nowDay + '-22.jpg" />"' + '<br />');#3.3. Math 객체
Math 객체 - new 연산자를 사용하지 않는다.
메소드
max(,,); : 최대값
min(,,); : 최소값
round(); : 소수점 첫째자리 반올림
ceil(); : 소수점 무조건 올림
floor(); : 소수점 무조건 절삭
abs(); : 절대값
random(); : 0~1사이 난수 발생
var maxNum = Math.max(30,70,5);
document.write("최대값 : " + maxNum + "<br />");
var minNum = Math.min(8,10,15);
document.write("최소값 : " + minNum + "<br />");
var roundNum = Math.round(3.457);
document.write("반올림 : " + roundNum + "<br />")
var ceilNum = Math.ceil(5.1);
document.write("소숫점올림 : " + ceilNum + "<br />")
var floorNum = Math.floor(10.9);
document.write("소숫점내림 : " + floorNum + "<br />")
var absNum = Math.abs(-10);
document.write("절대값 : " + absNum + "<br />")
var ranNum = Math.random();
document.write("0~1 난수 : " + ranNum + "<br />")// img1-24.jpg ~ img3-24.jpg 랜덤이미지 출력
// Math.random()*(갯수) + 시작수
// 0.00001*3 + 1 = 1.00003
// 0.99999*3 + 1 = 3.99997
var imgNum = Math.floor(Math.random()*3+1); //랜덤 공식
document.write('<img src="images/img' + imgNum + '-24.jpg" alt="랜덤이미지" />' + '<br />');// 로또번호 구하기 1~45, 6개
for(i=1; i<7; i++){
var lotto = Math.floor(Math.random()*45+1);
document.write(lotto + "<br />");
}#3.4. String 객체
String 객체 : 문자형 변수도 String 객체다.
var 변수(인스턴스 네임) = new String("자바스크립트");
var 변수 = "자바스크립트";
메소드
.length : 텍스트의 개수 반환
.split(" ") : '공백' 을 기준으로 데이터 분리. (공백은 콤마로 변환)
.indexOf("i") : 텍스트의 첫 글자부터 'i'를 찾아 인덱스 번호 반환 (없으면 -1 반환)
.lastIndexOf("i") : 텍스트의 마지막부터 거꾸로 'i'를 찾아 인덱스 번호 반환
.slice(4,6) : 4번 인덱스부터 6번 인덱스 직전 텍스트 반환 (4,5번 인덱스 텍스트 반환)
.substring(4,6) : 4번 인덱스부터 6번 인덱스 직전 텍스트 반환 (4,5번 인덱스 텍스트 반환)
.substr(10,3) : 10번 인덱스부터 3개의 텍스트 반환
.charAt(5) : 5번 인덱스 요소의 텍스트를 반환
.concat("foo") : 끝에 'foo'를 결합해서 반환
.replace("foo","bar") : 텍스트 'foo'를 'bar'로 교체(치환)
.bold() : 볼드체로 변환
.link("URL") : 텍스트에 링크 적용
.toLowerCase() : 소문자로 반환
.toUpperCase() : 대문자로 반환
document.write("<h3>문자치환</h3>");
var theText = "img2_out.jpg";
theText1 = theText.replace("out.jpg","over.jpg"); // 문자 치환 후 반드시 대입하여 저장 할 것
document.write(theText1 + "<br />");document.write("<h3>문자추출</h3>");
var theText2 = "images/img10.jpg";
theText2 = theText2.split("/")[1];
theText2 = theText2.substring(3);
theText2 = parseInt(theText2); // 정수만 추출
document.write(theText2 + "<br />");document.write("<h3>마지막 문자 추출</h3>");
var theText3 = "Hello JavaScript";
var lastIndex = theText3.length-1; // 마지막 인덱스 번호 알아내기
theText3 = theText3.charAt(lastIndex); // 마지막 인덱스 문자 반환
document.write(theText3 + "<br />");// 예제1)
// prompt로 주민번호를 입력받고 생년월일만 출력
// 900101-*******
var idNum = prompt("주민번호를 입력하세요.", "900101-1234567");
document.write(idNum.substring(0,6) + "-*******" + "<br />")
// 예제2)
// prompt로 이메일 주소를 입력 받고 @나.이 없으면 다시 입력하라는 알림창
// 정확히 입력 받았다면 당신의 이메일 주소는 000입니다. 출력
// var userEmail = prompt("이메일 주소를 입력하세요.", "abc@abc.com");
if(userEmail.indexOf("@") == -1 || userEmail.indexOf(".") == -1){
alert("이메일을 다시 입력하세요.");
} else{
document.write("당신의 이메일 주소는 " + userEmail + "입니다." + "<br />");
}
// 예제3)
// prompt로 아이디를 입력, 아이디가 제대로 입력됐는지 확인
// 글자 입력 안하거나 또는 첫글자가 공백문자
var userID = prompt("아이디를 입력하세요.");
if(userID.length <= 0 || userID.charAt(0)==' '){
alert("아이디를 다시 입력하세요.");
} else{
document.write("당신의 ID는 " + userID + "입니다." + "<br />")
}#3.5. Array 객체
// **작성 시 var arr = ‘a,b,c,d,e,f’.split(’,’); 사용하면 작성속도 높음**
배열 : 하나의 변수에 여러개의 데이터를 저장
var 변수(인스턴스 네임) = new Array();
변수[0] = "값1"
변수[1] = "값2"
변수[2] = "값3"
var 변수 = new Array(3);
var 변수 = [값1,값2,값3]; 추천
메소드
reverse() : 역순 반환
slice(1,3) : 인덱스 1~3직전까지 반환
sort() : 오름차순 정렬
join("구분자") : 구분자로 데이터 연결
concat() : 하나로 결합
shift() : 첫 인덱스 데이터 삭제
pop() : 마지막 인덱스 데이터 삭제
unshift(값) : 첫 인덱스에 새 값 추가
push(값) : 마지막 인덱스에 새 값 추가
splice(5,3) : 5번인덱스부터 3번째순서의 인덱스까지 삭제// 예제1) 첫번째 배열방식으로 리더뽑기
var userName = new Array();
userName[0] = "가나다";
userName[1] = "라마바";
userName[2] = "사아자";
userName[3] = "차카타";
userName[4] = "파하가";
userName[5] = "나다라";
console.log(userName);
var leader = Math.floor(Math.random()*6+0);
document.write(userName[leader] + "<br />")
// 예제2) 두번째 배열방식으로 메뉴 정하기
var theFood = ["자장면","냉면","갈비탕","돈까스","삼겹살"];
var randomFood = Math.floor(Math.random()*5+0);
document.write(theFood[randomFood] + "<br />")
// 예제3) 세번째 방식으로 요일 나타내기
var today = new Date();
var nowDay = today.getDay();
var days = new Array("일","월","화","수","목","금","토");
console.log(days);
document.write("오늘은 " + days[nowDay] + "요일 입니다." + "<br />");
// 예제4) 가계부, 숫자 총 합 구하기
var money = [100,100,200,50,100,150];
var total = 0;
for(var i=0; i<money.length; i++){
total += money[i];
}
document.write(total + "<br />")
//reverse
var theFood = ["자장면","냉면","갈비탕","돈까스","삼겹살"];
theFood.reverse();
console.log(theFood);
//sort
var theSubway = ["2호선","9호선","7호선","4호선","3호선"];
theSubway.sort(); //숫자와 문자가 같이 있는 경우에는 정렬이 잘 되지만, 숫자만 있는경우에는 다른 방법을 사용해야한다.
console.log(theSubway);
//slice
var userName = ["가나다","라마바","사아자","차카타","파하가"];
var result = userName.slice(2,4);
console.log(result);
//concat
var Mountain1 = ["백두산","청계산","한라산","광교산","설악산"];
var Mountain2 = ["지리산","남산","북한산","관악산"];
var joinResult = Mountain1.concat(Mountain2);
console.log(joinResult);
//join
var theProduct = '냉장고,컴퓨터,선풍기,밥솥,핸드폰'.split(',');
var joinResult = theProduct.join("-");
console.log(joinResult);
var theSubway = '2호선,9호선,7호선,4호선,3호선'.split(',');
var newLine1 = "1호선";
var newLine2 = "분당선";
console.log(theSubway);
//shift
theSubway.shift();
console.log(theSubway);
//pop
theSubway.pop();
console.log(theSubway);
//unshift
theSubway.unshift(newLine1);
console.log(theSubway);
//push
theSubway.push(newLine2);
console.log(theSubway);
//예제5) 로또번호생성
var myLotto = []; //로또번호저장
var aryLotto = []; //1~45까지 번호 저장, aryLotto[0]=1이 저장됨.
var idx = 0;
for(var i=1; i<46; i++){
aryLotto.push(i);
}
console.log(aryLotto);
while(myLotto.length < 6){
idx = Math.floor(Math.random()*aryLotto.length+0);
myLotto.push(aryLotto[idx]);
aryLotto.splice(idx,1); //idx부터 1개 삭제
}
for(k=0; k<6; k++){
document.write("번호 : " + myLotto[k] + "<br />")
}#4. 함수
#4.1. 함수의 정의
함수 - 일련의 실행문들을 메모리에 저장했다가 필요할 때 함수이름으로 호출해서 사용
내장함수, 사용자정의함수
지역반수, 전역변수
function 함수(매개변수1,매개변수2){
실행문;
}
함수명(인자값1,인자값2);
주의사항, 인자값과 매개변수의 개수는 같아야 함
// 사용법1)
// function greet(){
// alert("안녕하세요");
// }
// greet();
// 사용법2)
function greet(theText){
alert(theText);
}#4.2. 재귀함수
재귀함수 : 함수안에 실행문에서 자기자신함수를 스스로 호출하는 것
var i = 0;
function theTest(){
i++;
document.write("안녕하세요" + i + "<br />");
if(i<10) theTest();
}
theTest();#4.3. return문
return문
1) 다음 실행문을 수행하지 않고 함수문을 마침
2) 함수 호출문에 값을 반환함
var num1 = 10;
function theFnc(num2){
var sum = num1 + num2;
var mul = num1 * num2;
return sum;
}
var result = theFnc(40);
document.write(result);#4.4. 함수 예제
// 이미지 넘기기
var num = 1;
function nextGallery(){
num++;
if(num>7) num=1;
document.getElementById("gallery").src="images/img"+num+"-31.jpg";
return false;
}
function prevGallery(){
num--;
if(num<1) num=7;
document.getElementById("gallery").src="images/img"+num+"-31.jpg";
return false;
}<body>
<button onclick="greet('안녕하세요.');">들어오기</button>
<button onclick="greet('안녕하가세요.');">나가기</button>
<div id="galleryWrap">
<h1>이미지 넘기기</h1>
<p>
<a href="#" onclick="prevGallery();"><img src="images/left_btn-31.png" alt="이전 그림 버튼"></a>
<img src="images/img1-31.jpg" alt="갤러리 그림" id="gallery">
<a href="#" onclick="nextGallery();"><img src="images/right_btn-31.png" alt="다음 그림 버튼"></a>
</p>
</div>
</body>// 예제
// 한개의 함수로 이미지 바꾸기
var Num = 0;
var colWidth = -400;
function myBanner(whichBtn){
var myBannerList = document.getElementById("bannerList");
if(whichBtn == "prevBtn"){
Num--;
if(Num<0) Num = 6;
myBannerList.style.left = ( Num * colWidth) + "px";
}else{
Num++;
if(Num>6) Num = 0;
myBannerList.style.left = ( Num * colWidth) + "px";
}
return false;
}<body>
<div id="bannerWrap">
<div class="frame">
<ul id="bannerList">
<li><a href="#"><img src="images/s_img1-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img1-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img1-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img1-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img2-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img2-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img2-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img2-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img3-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img3-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img3-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img3-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img4-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img4-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img4-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img4-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img5-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img5-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img5-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img5-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img6-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img6-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img6-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img6-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img7-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img7-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img7-33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/s_img7-33.jpg" alt=""></a></li>
</ul>
</div>
<a href="#" class="leftBtn" onclick="myBanner('prevBtn');">
<img src="images/left_arrow-33.png" alt="이전 왼쪽버튼">
</a>
<a href="#" class="rightBtn" onclick="myBanner('nextBtn');">
<img src="images/right_arrow-33.png" alt="다음 오른쪽버튼">
</a>
</div>
</body>//예제
//버튼에 따라 다른 알림창 띄우기
var arrYes = ["멋집니다","지금처럼 열심히","Good입니다"];
var arrNo = ["그만 놀아요","분발하세요","재미없어요"];
var idx = Math.floor(Math.random()*3+0);
function iLoveJS(answer){
if(answer === "yes"){
alert(arrYes[idx]);
}else{
alert(arrNo[idx]);
}
return false;
}<h1>당신은 자바스크립트를 좋아하십니까?</h1>
<button onclick="iLoveJS('yes');">...네...</button>
<button onclick="iLoveJS('no');">.아니오.</button>//예제
//가격 받아 할인가 알려주기
function salePrice(){
var theOrg = document.getElementById('oPrice').value; //input
// document.getElementById('oPrice').value = 값;
var thePrice = parseInt(theOrg * 0.7);
//alert(thePrice);
var myArea = document.getElementById('area'); //div
myArea.innerHTML = thePrice + "원 입니다."
return false;
}<h1>백화점 세일 기간입니다.</h1>
<p>모든 상품에 대해 30% 세일을 하고 있습니다.</p>
<form action="" method="post" onsubmit="return salePrice()"> <!--리턴값을 함수로 보내고 끝냄-->
<label for="oPrice">정상가</label>
<input type="text" name="price" id="oPrice">
<button>세일가</button>
</form>
<div id="area"></div>// 예제
// prompt로 수량, 단가를 입력
// 함수만들어서 수량 x 단가 계산하고
// area 안에 수량, 단가, 함수 계산값이 나오게 만들기
window.onload = function(){
var qua = Number(prompt("수량"));
var pri = Number(prompt("단가"));
function calc(a,b){
var total = a * b;
return total;
}
var result = document.getElementById('area'); //div
result.innerHTML = "수량: " + qua + " 단가: " + pri + " 금액:" + calc(qua,pri) + "원";
}<div id="area"></div> <!--수량: , 단가: , 금액: 함수호출() 원-->// 예제
// 상품가격 받고 버튼 누르면 합계와, 세일가 알려주기
window.onload = function(){
var pro1, pro2, pro3, totalResult, saleResult; // 전역변수로 선언
function product(){ // 한번에 변수 호출할 수 있는 함수 선언
pro1 = parseInt(document.getElementById("product1").value);
pro2 = parseInt(document.getElementById("product2").value);
pro3 = parseInt(document.getElementById("product3").value);
}
function getTotal(a,b,c){ // 합계 함수
totalResult = a + b + c;
return totalResult; // 다시 합계 함수로 값 반환
}
function getSale(d){ // 세일 함수
saleResult = Math.floor(d * 0.7);
return saleResult; // 다시 세일 함수로 값 반환
}
var total_Btn = document.getElementById('totalBtn'); // 합계 button 선택
total_Btn.onclick = function(){ // onclick 이벤트 선언
product(); // 한번에 변수 호출
document.getElementById("total").value = getTotal(pro1,pro2,pro3); // 합계 함수의 반환 값을 대입
return false; // 함수 끝내기
}
var sale_Btn = document.getElementById('saleBtn'); // 세일 button 선택
sale_Btn.onclick = function(){ // onclick 이벤트 선언
document.getElementById("sale").value = getSale(totalResult); // 세일 함수의 반환 값을 대입
return false; // 함수 끝내기
};
}<h1>백화점 세일 계산기</h1>
<p>모든 상품에 대해 30% 세일을 하고 있습니다.</p>
<form action="/" method="post">
<legend>세일 계산기</legend>
<ul>
<li>
<label for="product1">상품1</label>
<input type="text" name="text" id="product1" />
</li>
<li>
<label for="product2">상품2</label>
<input type="text" name="text" id="product2" />
</li>
<li>
<label for="product3">상품3</label>
<input type="text" name="text" id="product3" />
</li>
<li>
<button id="totalBtn">합계</button>
<input type="text" id="total" />
</li>
<li>
<button id="saleBtn">세일가</button>
<input type="text" id="sale" />
</li>
</ul>#5. 내장함수
내장함수
eval() : 문자열을 자바스크립트 문장으로 변환(수식은 계산, 문자는 변수로)
parseInt() : 숫자를 정수로 반환
parseFloat() : 숫자를 실수로 반환
inNaN() : 숫자가 아닌 문자가 포함되면 true를 반환
isFinite() : 주어진 값이 유리수인지 아닌지 판단
Number() : 문자를 숫자형으로 반환
String() : 숫자를 문자형으로 반환
escape() : 문자를 16진수 아스키코드 값으로 반환
unescape : escape()로 변환된 값을 다시 되돌려 반환
var result1 = eval("10+20"); // 문자열 30을 숫자로 반환
document.write(result1 + "<br />");
var num = 100;
document.write("num" + 10 + "<br />"); // 문자열 + 숫자
document.write(eval("num") + 10 + "<br />"); // 문자열을 숫자로 변환한 값 + 숫자 = 숫자
var result2 = isNaN("02-123-4567"); // 숫자가 아닌지 값이 있는지 판단
document.write(result2 + "<br />"); // true#6. 생성자 함수
생성자함수
특정 속성, 메소드를 가진 객체(사용자 정의 객체)를 쉽게 생성할 수 있다.
function 함수명(매개변수1,매개변수2,매개변수3){ // 생성자 함수
this.속성1 = 매개변수1;
this.속성2 = 매개변수2;
this.속성3 = 매개변수3;
this.메소드1 = function(){실행문;}
}
var 객체명(인스턴스네임) = new 함수명 (값1,값2,값3)
매개변수를 지정해서 속성을 부여한 새로운 함수를 선언할때 사용할수있다.
function carFactory(carcolor,carSeat,carEngin){ // 생성자 함수
this.color = carcolor; // 매개변수로부터 속성 부여
this.seat = carSeat;
this.engine = carEngin;
this.info = function(){
document.write("제조업체 : 현대자동차 <br />");
document.write("자동차 종류 : 승용차 <br />");
}
}
var sonata = new carFactory("red","4인용","6기통"); // 객체 생성
document.write(sonata.color + "<br />");
document.write(sonata.seat + "<br />");
document.write(sonata.engine + "<br />");
sonata.info(); // 생성자 함수 내에 있는 메소드(함수) 실행
var avante = new carFactory("white","4인용","4기통");
document.write(avante.color + "<br />");
document.write(avante.seat + "<br />");
document.write(avante.engine + "<br />");
avante.info();#7. 이벤트
이벤트 Event : 웹브라우저에서 일어나는 모든 행동들
이벤트 핸들러 : 이벤트가 발생한 시점에서 함수를 호출하거나 스크립트를 실행하게 하는 요소
onload : 문서를 모두 불러오고 나서 발생
onunload : 문서를 종료할 때 발생
ondbclick : 더블클릭 했을 때
onclick : 클릭 했을 때
onkeypress : 키보드 누르고 있을 때
onkeydown : 키보드 눌렀을 때
onkeyup : 키보드 누르고 뗐을 때
onmouseover : 대상에 마우스를 올렸을 때
onmouseout : 마우스가 벗어났을 때
onfocus : 포커스 되었을 때
onblur : 포커스 잃었을 때
onsubmit : form에서 submit 확인 버튼 눌렀을 때
onreset : form에서 reset 취소 버튼 눌렀을 때
onchange : 입력요소의 값이 바뀌고 포커스가 옮겨졌을 때
onmousemove : 마우스 움직일 때마다 발생
onresize : 브라우저 창을 조절할 때마다 발생
onerror : 문서나 이미지를 불러올 때 에러가 나면 발생
onabort : 문서를 불러오다가 중단되면 발생
function theFnc(){
alert("자바스크립트");
}
window.onload = function(){
var myBtn = document.getElementById("btn1"); //button
//myBtn.onclick = function(){ the Fnc(); }
myBtn.onclick = theFnc; //이벤트핸들러의 함수에는 괄호 사용하면 안됨
}#8. 이벤트 객체
이벤트 객체
: 이벤트 핸들러가 구동될 때 생성되는 객체
: 클릭 또는 키보드입력 등의 동작 자체를 의미 함
특정 이벤트 핸들러를 구동하면, 함수의 매개변수에 이벤트객체가 자동으로 생성된다.
document.onclick = function(e){ //이벤트 객체
console.log(e.clientX);
}
keydown, keypress 이벤트 객체 속성
altKey : 알트키를 눌렀을 때 true 값이 반환
shiftKey : 쉬프트를 눌렀을 때 true 값이 반환
ctrlKey : 컨트롤키를 눌렀을 때 true 값이 반환
keyCode : 입력된 문자키의 고유한 유니코드값을 반환
type : 이벤트의 종류
click, mousemove, mouseover, mouseup, mousedown 이벤트 객체 속성
clientX : 현재문서기준 이벤트가 발생한 곳의 x 좌표 (스크롤바 너비 계산 x)
clientY : 현재문서기준 이벤트가 발생한 곳의 y 좌표 (스크롤바 높이 계산 x)
pageX : 현재문서기준 이벤트가 발생한 곳의 x 좌표 (스크롤바 너비 계산 o)
pageY : 현재문서기준 이벤트가 발생한 곳의 y 좌표 (스크롤바 너비 계산 o)
screenX : 모니터기준 이벤트가 발생한 곳 x 좌표
screenY : 모니터기준 이벤트가 발생한 곳 y 좌표
layerX : position:absoulte; 인 레이어 안에서의 상대 x 좌표
layerY : position:absoulte; 인 레이어 안에서의 상대 y 좌표
target : 이벤트가 발생한 대상 요소
button : 마우스 버튼(왼쪽/오른쪽/휠) 의 클릭된 상태 체크
type : 이벤트의 종류
document.onkeydown=function(e){
var theKey1 = e.keyCode;
var theKey2 = e.shiftKey;
if(theKey1 == 72 && theKey2){ // shift + h
alert("단축키 완성");
}
}#9. 브라우저 객체
#9.1. BOM(브라우저 객체 모델)
브라우저 객체 모델(BOM) : 브라우저 창에 포함된 모든 객체 요소들을 의미함.
최상위 객체 window 아래 존재.
브라우저 객체 종류
window : 최상위 객체, 새 창을 생성하는 역할
document : 문서 객체, 하위 form,cookie,image
navigator : 브라우저에 대한 정보를 제공하는 객체
loaction : 위치(url) 관련 정보를 제공하는 객체
screen : 스크린(모니터)에 대한 정보를 제공하는 객체
history : 인터넷 방문기록에 대한 정보를 제공하는 객체
window, 최상위 객체로써 새 창을 생성하는 역할
메소드(window객체 생략 가능)
window.open("경로","창이름","옵션width,height,left,top스크린기준,scrollbars,menubar,toolbar,loaction,status,resizeable-yes,no") : 새창으로 문서를 열 때 사용
alert("문자") : 알림창
prompt("질문","기본응답") : 질문과 답변 작성하는 창
confirm("질문") : 질문이 나오고 확인(true)/취소(false) 선택 하는 창
setTimeout("실행문","간격시간") : 해당 간격시간 뒤에 실행문을 한 번만 수행
setInterval("실행문","간격시간") : 해당 간격시간 뒤에 실행문을 반복적으로 수행
var ddd = function(){
var ttt = new Date();
document.getElementById('date_time').value = ttt;
}
window.onload = function(){
var btn = document.getElementById("app");
btn.onclick = function(){
window.open("11_popup.html","newbook","width=375px,height=812px,left=200px,top=20px,scrollbars=no,toolbar=no,location=no,status=no,resizeable=no");
}
var bt2 = document.getElementById("bt2");
bt2.onclick = function(){
location.replace("http://www.naver.com");
}
}#9.2. location 객체
location 객체 : 브라우저의 현재 url 주소값에 대한 정보를 제공
속성
location.hash : 주소창에 url에서 #뒤에 오는 문자열을 반환
location.host : 주소창에 url에서 도메인명과 포트번호를 반환
location.hostname : 주소창에 url에서 도메인명을 반환
location.href : 주소창에 url에서 전체정보를 반환
location.pathname : 주소창에 url에서 도메인명 다음에 오는 경로를 반환
location.port : 주소창에 url에서 포트번호를 반환
location.protocol : 주소창에 url에서 프로토콜을 반환
document.write("<h4>location.hash: " + location.hash + "</h4>");
document.write("<h4>location.host: " + location.host + "</h4>");
document.write("<h4>location.hostname: " + location.hostname + "</h4>");
document.write("<h4>location.href: " + location.href + "</h4>") ;
document.write("<h4>location.pathname: " + location.pathname+" </h4>");
document.write("<h4>location.port: " + location.port+"</h4>");
document.write("<h4>location.protocol: " + location.protocol+"</h4>");
//1초마다 바뀌는 이미지
var banner = ["img1-31","img2-31","img3-31"];
var today = new Date();
var nowSec = today.getSeconds();
var idx = nowSec % 3;
document.write("<p><img src='images/" + banner[idx] + ".jpg' /></p>");
setInterval("location.reload()",1000);#9.3. navigator 객체
navigator 객체 : 브라우저에 대한 정보를 제공
속성
appCodeName : 브라우저의 코드명을 제공
appName : 브라우저의 이름을 제공
appVersion : 브라우저의 기본 버전과 실행중인 플랫폼 정보를 제공
userAgent : 브라우저의 전체적인 정보를 제공
document.write("코드명 : " + navigator.appCodeName + "<br />");
document.write("브라우저명 : " + navigator.appName + "<br />");
document.write("플랫폼 버전 : " + navigator.appVersion + "<br />");
document.write("플랫폼명 : " + navigator.platform + "<br />");
document.write("전체정보 : " + navigator.userAgent + "<br />");
var myAgent = navigator.userAgent.toLowerCase();
// alert(myAgent);
var mobile = 'iphone,ipod,ipad,android'.split(',');
for(var i=0; i<mobile.length; i++){
if(myAgent.indexOf(mobile[i]) >= 0){
location.href="http://m.naver.com";
break;
}
}#9.4. screen 객체
screen 객체 : 스크린(모니터)에 대한 속성을 제공
속성
availWidth : 사용가능한 스크린 가로 너비값 반환
availHeight : 사용가능한 스크린 세로 높이값 반환, 작업 표시줄을 제외한 높이값
availTop : 창이 위치 할 수 있는 최상위의 위치값을 반환
availLeft : 창이 위치 할 수 있는 가장 좌측의 위치값을 반환
document.write("스크린 너비값" + screen.availWidth + "<br />");
document.write("스크린 높이값" + screen.availHeight + "<br />");
document.write("스크린 가장 좌측 위치값" + screen.availLeft + "<br />");
document.write("스크린 가장 상단 위치값" + screen.availTop + "<br />");
document.write("스크린 너비값" + screen.width + "<br />");
document.write("스크린 높이값" + screen.height + "<br />");
document.write("색상수" + screen.colorDepth + "<br />");
document.write("해상도" + screen.pixelDepth + "<br />");#9.5. history 객체
history 객체 : 브라우저로 방문한 페이지들의 정보를 제공, '이전','다음' 등의 페이지 이동을 위한 버튼을 만들 수 있다
go(값) : 값만큼 다음 또는 이전페이지로 이동 go(1), go(-1)
back() : 이전페이지로 이동
forward() : 다음페이지로 이동#10. 문서객체
#10.1. DOM(Document Object Model), 문서 객체 및 선택자
DOM (Document Object Model) : 문서객체
도식화
최상위 노드 node : html
요소 : 노드 node
노드 node : 요소(element)노드1, 속성노드2, 텍스트노드(공백문자포함)3;
선택자
원거리 선택자
id선택자 : 선택대상.getElementById("아이디명");
요소명 선택자 : 선택대상.getElementByTagName("태그명"); //배열
근거리 선택자 : 특정 요소를 기준으로 상대적인 다른 요소를 선택할 때
parentNode : 선택요소 기준으로 부모요소 선택
childNode : 선택요소 기준으로 자식요소 선택
children : 선택요소 기준으로 자식요소 선택
firstChild : 선택요소 기준으로 첫번째 자식요소 선택
lastChild : 선택요소 기준으로 마지막 자식요소 선택
previousSibling : 형제요소 중 이전요소를 선택
nextSibling : 형제요소 중 다음요소를 선택
tagName(속성) : 선택요소의 태그명을 반환
nodeValue(속성) : 선택요소의 텍스트를 반환
window.onload = function(){
//아이디가 list인 요소의 부모를 변수에 대입
var parentN = document.getElementById("list").parentNode;
var childN = document.getElementById("list").childNodes;
var childrenN = document.getElementById("list").children;
// 공백문자가 나옴
var firstChildN = document.getElementById("list").firstChild;
//배열 형태이기 때문에 공백을 무시 하고 첫 요소를 선택 할 수 있다.
var childrenF = document.getElementById("list").children[0];
// 공백문자가 나옴
var lastChildN = document.getElementById("list").lastChild;
//마지막 인덱스 값을 변수에 대입
var lastIdx = document.getElementById("list").children.length - 1;
//공백 포함하지 않은 마지막 자식 요소 선택
var childrenL = document.getElementById("list").children[lastIdx];
// 이전 요소인 공백문자가 나옴
var prev = document.getElementById("title").previousSibling;
// 이전형제요소가 공백(노드타입3)일 경우 그 요소의 이전형제요소를 선택한다.
if(prev.nodeType === 3) prev = prev.previousSibling;
// 다음요소인 공백문자가 나옴
var next = document.getElementById("title2").nextSibling;
// 다음형제요소가 공백(노드타입3)일 경우 그 요소의 다음형제요소를 선택한다.
if(next.nodeType === 3) next = next.nextSibling;
}#10.2. 문서객체조작
문서객체조작 : 새로운 요소를 생성,추가,삭제,복제
메소드
1)생성
createElement("요소명") : 새로운 요소를 생성
appendTextNode("텍스트") : 새로운 텍스트를 생성
createTextNode("텍스트") : 새로운 텍스트를 생성
2)추가
선택요소.appendChild(새요소) : 선택요소에 새로운 자식요소를 추가
부모요소.insertBefore(새요소,자식요소) : 자식요소 앞에 새로운 자식요소 추가
3)교체
부모요소.replaceChild(새요소,자식요소) : 자식요소를 새요소로 덮어쓰기
4)삭제
부모요소.removeChild(자식요소) : 자식요소 삭제
5)복제
선택요소.cloneNode(true or false) : 선택요소를 복제해서 true일 경우 하위요소까지 모두 복제
6)속성부여
선택요소.setAttribute("속성","값") : 선택요소에 해당 속성값 부여
#10.3. 문서객체조작 예제
예제1) 요소 생성
//요소 생성 예제
window.onload = function(){
var newPtag = document.createElement("p");
var newButton1 = document.createElement("button");
var newButton2 = document.createElement("button");
var text1 = document.createTextNode("버튼1");
var text2 = document.createTextNode("버튼2");
newButton1.setAttribute("id","btn1");
newButton2.setAttribute("id","btn2");
newButton1.appendChild(text1);
newButton2.appendChild(text2);
newPtag.appendChild(newButton1);
newPtag.appendChild(newButton2);
var theObj = document.getElementById("theBox");
theObj.appendChild(newPtag);
}예제2) 요소 순서바꾸기
window.onload = function(){
var theList = document.getElementById("theList"); //ul
var listAll = theList.getElementsByTagName("li"); //li, li, li, li
var copyList = listAll[3].cloneNode(true); //복제
theList.insertBefore(copyList,listAll[0]); //삽입 (copyList를 listAll의[0]번인덱스에 삽입)
theList.removeChild(listAll[4]); //삭제
}
https://kyledev.tistory.com/