3. HTML요소에 접근하기(해당 요소 객체 가져오기)
1) 아이디로 접근하기
아이디로 요소에 접근할 때, document라는 객체가 요소들의 정보를 가지고 있음(접근해야 함)
var 변수명 = document.getElementById('접근할 요소의 아이디 속성 값'); == 요소객체 (document, 변수)
<div id="area1" class="area"></div>
<button onclick="accessId();">아이디로 접근</button>
<script>
function accessId(){
var area1 = document.getElementById('area1');
console.log(area1);
console.dir(area1);* console.log => console창에 결과값
* console.dir => 요소가 가지고 있는 메소드 확인
area1.innerHTML = '아이디로 접근 성공<br>';
area1.innerHTML += '<mark>안녕하세요</mark>';- 선택된 요소의 속성들에 접근해서 값을 가져온다거나 변경 가능
- 속성에 접근하고자 한다면 => 선택된요소객체.접근하고자하는속성명
area1.style.backgroundColor = 'pink';
area1.style.color = 'skyblue';
area1.style.width = '100px';선택된 요소에 스타일 변경 => 인라인 방식으로 스타일이 부여됨
방법1) area1.style
방법2) area1.style.background
방법3) area1.style = "background : pink; color: skyblue; width : 100px";
개발자도구로 확인 시 인라인방식으로 스타일이 부여된 것을 확인할 수 있음
< 실습 : 버튼 누를 때마다 색 변하기 >
<div id="area2" class="area" style="background:red"></div>
<button onclick="accessId2();">실습시간</button>
<script>
function accessId2(){
var area2 = document.getElementById('area2');
// console.log(area2.backgroundColor);
if(area2.style.backgroundColor == 'red'){
area2.style.backgroundColor = 'pink';
} else if(area2.style.backgroundColor =='pink'){
area2.style.backgroundColor = 'yellow';
} else if(area2.style.backgroundColor == 'yellow'){
area2.style.backgroundColor = 'blue';
} else if(area2.style.backgroundColor=='blue'){
area2.style.backgroundColor = 'green';
} else if(area2.style.backgroundColor=='green'){
area2.style.backgroundColor = 'black';
} else if(area2.style.backgroundColor =='black'){
area2.style.backgroundColor = 'orange';
} else{
area2.style.backgroundColor = 'red';
}
}
</script>* 출력 전 console로 확인하는 습관 길들이기 !
2) 태그명으로 가져오기
태그명으로 요소에 접근 * 하나가 아닐 수도 있기 때문에 Elements
document.getElementsByTagName('접근하고자하는 태그명');
=> 선택된 여러개의 요소객체들이 배열에 담겨서 반환
자바스크립트에서 배열은 [ ]로 표현
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
<li>목록4</li>
<li>목록5</li>
</ul>
<button onclick="accessTagName();">태그명으로 접근</button>
<script>
function accessTagName(){
var list = document.getElementsByTagName('li'); //형태 : [li요소객체1, li요소객체2, ...]
console.log(list); // HTMLCollection(5) [li, li, li, li, li] : 5는 배열 길이
console.log('배열의 크기 : ' + list.length)* console.log(list) 시,
- 반복문을 이용해 그라데이션 주기
//rgb(r, g, b) blue가 증가하며 그라데이션
var blueColor= 50;
for(var i = 0; i<list.length; i++){
list[i].style.backgroundColor = 'rgb(100, 200,' + blueColor + ')';
blueColor += 50;
}3) name 속성값으로 접근하기
name속성 값으로 요소에 접근할 때
document.getElementsByName('접근하고자 하는 name속성 값')
=> 선택된 요소객체들이 배열에 담겨서 반환
<form action="test.do">
<fieldset>
<legend>취미</legend>
<input type="checkbox" name="hobby" value="근력운동">근력운동
<input type="checkbox" name="hobby" value="마라톤">마라톤
<input type="checkbox" name="hobby" value="드론">드론
<input type="checkbox" name="hobby" value="혼코노">혼코노
<input type="checkbox" name="hobby" value="영화감상">영화감상
<input type="checkbox" name="hobby" value="기계조립">기계조립
</fieldset>
</form>
<button onclick="accessName();">name속성으로 접근</button>
<script>
function accessName(){
//name속성 값으로 요소에 접근할 때
//document.getElementsByName('접근하고자 하는 name속성 값')
//=> 선택된 요소객체들이 배열에 담겨서 반환
var hobby = document.getElementsByName('hobby'); //[근력운동checkbox, 마라톤checkbox, ...]
console.log(hobby);
// if(hobby[0].checked){
// alert('1번체크');
// }
//체크확인 로직 짜보기 (반복문)
var checkedItem = '';
for(var i = 0; i<hobby.length; i++){
if(hobby[i].checked){
checkedItem += hobby[i].value + ' ';
}
}
alert(checkedItem);
}* 참고
자바스크립트에서 boolean의 형태
true/false
false : 0, null, undefined, NaN, '', 0.0
=> 나머지는 모두 true
if(0){alert('true');} // = false4) 클래스명으로 접근하기
class속성 값으로 요소를 가져올 때
document.getElementsByClassName('접근하고자 하는 class 속성 값');
=> 선택된 요소 객체들이 배열에 담겨 반환
<div id="div" class="test">
<p class="test"> <p>
<ul class="test">
<li></li>
<li></li>
</ul>
</div>
<pre class="tesst test2"></pre>
<button onclick="accessClass();">class로 접근</button>
<script>
function accessClass(){
//class속성 값으로 요소를 가져올 때
//document.getElementsByClassName('접근하고자 하는 class 속성 값');
//=> 선택된 요소 객체들이 배열에 담겨 반환
var arr = document.getElementsByClassName('test');
console.log(arr);
</script>4. 변수와 자료형
변수 선언 시 var뿐만 아니라 let, const를 이용해서 선언가능
* var, let, const의 차이점
1-1) 변수 선언 방법
<h4>1) 변수 선언 방법</h4>
<button onclick="defDeclare()">클릭</button>(1) var는 중복선언이 가능하다 / 재할당도 가능하다
var userId = 'user01';
console.log(userId);
var userId = 'user02';
console.log(userId); //동일한 변수명 또 선언 가능
userId = 'user03';
console.log(userId); //재할당도 가능(2) let은 중복선언이 불가능하다 / 재할당은 가능하다
let userPwd = 'pass01';
console.log(userPwd);
// let userPwd = 'pass02';
// console.log(userPwd);
//Uncaught SyntaxError: Identifier 'userPwd' has already been declared 중복선언 불가능
userPwd = 'pass03'; //재할당은 가능
console.log(userPwd);(3) const는 중복선언이 불가능하다 / 재할당도 불가능하다 ( 상수같은 개념 == 한 번 초기화된 값 변경 X)
const userName = '홍길동';
console.log(userName);
/*
const userName = '김길동';
console.log(userName);
*/
/*
userName = '박길동'; //Uncaught TypeError: Assignment to constant variable.
console.log(userName);
*/var는 자유롭게 변수선언, 사용할 수 있다는 장점이 있다.
하지만 중복된 변수가 많아 질 수 있음. / 의도치 않게 값이 변경될 수 있음
=> 가장 큰 단점
=> 보완돼서 나온 것이 let, const
* 권장사항 : let, const위주로 사용 / 하지만, var가장 많이 사용됨,
1-2) Scope(사용가능 범위)
<h4>2) scope(사용가능 범위)</h4>
<button onclick="defScope();">클릭2</button>(1) var는 functionScope() == 변수가 선언된 "함수영역" 내에서 사용 가능
function defScope(){
var name = '홍길동';
console.log(name);
if(true){
var age = 20;
}
console.log(age); //자바에선 안되지만 JS에선 사용가능함.
for(var i = 0; i <10; i++){}
console.log(i) //가능 == defScope안에서라면 가능
// scopeTest();
function scopeTest(){
console.log(name); //불가능 defScope 함수 바깥이기 때문에
}(2) let, const는 blockScope == 변수가 선언된 블럭{} 내에서만 사용 가능
if(true){
let gender = 'M';
const hobby = '안경쓰기';
}
// console.log(gender);
// console.log(hobby); //Uncaught ReferenceError: gender is not defined2) 변수 선언 위치에 따른 전역변수 / 지역변수
<script>
전역변수
var 변수명;
변수명;
지역변수
function 함수명(){
var 변수명;
변수명;
}
</script>
* <p>태그 혹은 <pre>태그에 '<', '>' 입력 시 대소비교로 인식됨.
=> < script > 와 같이 입력 시 올바로 인식가능
- window.onload = 해당 현재 이 html문서가 다 로딩되고 나서 곧바로 실행할 함수를 지정하는 구문
- " 함수 내에서 " 지역변수명과 전역변수명이 동일한 변수명을 호출 시 지역변수가 호출됨 (함수 내 변수)
- 만약 전역변수에 접근하고 싶다면? window.전역변수명 또는 this.전역변수명
<script>
//전역변수들
str = '전역변수';
var str2 = 'var전역변수';
// window.onload = 해당 현재 이 html문서가 다 로딩되고 나서 곧바로 실행할 함수를 지정하는 구문
window.onload = function(){ //익명함수
var str = '지역변수'; //전역변수명과 중복
var str3 = '새로운 지역변수';
str4 = '지역변수3';
console.log('-----str-----');
console.log(str); //지역변수명과 전역변수명이 동일하다면 지역변수 호출
// 전역변수에 접근하고자 한다면 => window.전역변수명 또는 this.전역변수명
console.log(window.str);
console.log(this.str);
console.log('-----str2-----');
console.log(str2);
console.log(window.str2);
console.log(this.str2);- 만약 없는 변수를 호출한다면? undifined(정의되어있지 않음)
console.log('----str3----');
console.log(str3);//지역변수
console.log(window.str3); //undifined (정의되어있지 않음)
console.log(this.str3);- 만약 함수 내에서 변수를 선얼 할 때 var를 생략할 경우 전역변수로 취급됨.
console.log('----str4----');
console.log(str4);
console.log(window.str4);
console.log(this.str4); //전역변수 확정- 전역변수를 모두 모아보면, 함수 바깥에서 생성한 변수(var생략, var생략 X) + 함수내에서 var생략
function getGlobal(){
console.log('전역변수 총출동');
console.log(window.str + '또는' + this.str);
console.log(str2);
console.log(str4);3) 자료형
변수 선언 시 자료형을 별도로 지정하지 않음(자료형의 개념이 없는 것은 아님)
=> 변수에 대입되는 값(리터럴)에 따라서 알아서 자료형이 자동으로 결정됨 : 타입추론
(1) 자바스크립트의 자료형
- string(문자열)
var name = '홍길동';
- number(숫자)
var age = 15;
- boolean(논리값)
var flag = true;
- object(객체)
var hobby = ['수영', '조깅', '등산']; //object //출력 시 값이 다 나옴
var user = {
name : '김**',
id : 'user01'
} //object
- function(함수)
var testFn = function(){
alert('abcdef'); //입력한 함수 그대로
}
- undifined(초기화가 아직 진행되지 않은 변수)
var noVal; //undifined- 자료형을 찍어보면,
area1.innerHTML += typeof(name) + '<br>'; //string
area1.innerHTML += typeof(age) + '<br>'; //number
area1.innerHTML += typeof(flag) + '<br>'; //boolean
area1.innerHTML += typeof(hobby) + '<br>'; //배열은 자바스크립트에서 객체 (Object)타입
area1.innerHTML += typeof(user) + '<br>'; //object
area1.innerHTML += typeof(testFn) + '<br>'; //function
area1.innerHTML += typeof(noVal) + '<br>'; //undifind5. 문자열과 숫자
- 미리 내부 스타일 부여
<style>
.area{
width: 300px;
border: 1px solid black;
}
.big{
height: 450px;
}
.small{
height: 200px;
}
</style>1) 문자열 관련 메소드
<button onclick="showStringMethod();">문자열 처리 메소드</button>
<div id="area1" class="area big"></div>(1) 문자열
<script>
function showStringMethod(){
var str1 = 'Hello World';
var area1 = document.getElementById('area1');
area1.innerHTML = 'str1 : ' + str1 + '<br>';(2) 문자열의 길이 . length
area1.innerHTML += '문자열의 길이 ' + str1.length + '<br>';(3) 대문자 변환 .toUpperCase()
area1.innerHTML += 'toUpperCase() : ' + str1.toUpperCase() + '<br>';(4) 소문자 변환 .toLowerCase()
area1.innerHTML += 'toLowerCase() : ' + str1.toLowerCase() + '<br>';< 예제 >
- str1에 대입되어있는 문자열을 출력
- 0번째 인덱스 H
- 1번째 인덱스 e
(5) i번째 인덱스 .charAt(i)
for(var i = 0; i<str1.length; i++){
area1.innerHTML += i + '번째 인덱스' + str1.charAt(i) + '<br>';
}(6) 앞에서부터 첫 l의 위치 .indexOf(' ')
뒤에서부터 첫 l의 위치 .lastIndexOf(' ')
area1.innerHTML += '앞에서부터 첫 l의 위치(인덱스) : ' + str1.indexOf('l') + '<br>';
area1.innerHTML += '뒤에서부터 첫 l의 위치(인덱스) : ' + str1.lastIndexOf('l') + '<br>';**잘 기억해두면 활용도가 높음
(7) substring(시작인덱스) substring(시작인덱스, 끝인덱스) : 끝 인덱스를 기입하지 않으면 끝까지
area1.innerHTML += 'substring(시작인덱스) : ' + str1.substring(6) + '<br>'; //6번부터 끝까지
area1.innerHTML += 'substring(시작인덱스 , 끝인덱스) : ' + str1.substring(0, 2) + '<br>';(8) split(' ') : 따옴표 안에 기준으로나눠 배열(object)에 담기
var str2 = '두리안,드래곤후르츠,파인애플,망고';
var fruits = str2.split(',');
area1.innerHTML += 'fruits : ' + fruits + '<br>';
area1.innerHTML += 'fruits의 자료형 : ' + typeof(fruits);2) 숫자(수학) 관련 메소드
<button onclick="showMathMethod();">수학관련 메소드 </button>
<div id="area2" class="area"></div>- Math 내장 객체 제공(Math.메소드명())
(1) 절대값 Math.abs(숫자)
area2.innerHTML += '절대값 : ' + Math.abs(-123) + '<br>';(2) 랜덤값 Math.random()
area2.innerHTML += '랜덤값 : ' + Math.random() + '<br>';(3) 반올림 Math.round(숫자)
area2.innerHTML += '반올림 : ' + Math.round(123.456) + '<br>';(4) 버림 Math.floor(숫자)
area2.innerHTML += '버림 : ' + Math.floor(123.999) + '<br>';(5) 올림 Math.ceil(숫자)
area2.innerHTML += '올림 : ' + Math.ceil(123.111) + '<br>';(6) 제곱근 Math.sqrt(숫자)
area2.innerHTML += '제곱근 : ' + Math.sqrt(4) + '<br>';3) 다른 자료형 끼리의 산술연산
(1) 덧셈연산 : 숫자열이 문자열형으로 자동형변환이 이루어짐
var test1 = 7 + 7; //14
var test2 = 7 + '7'; //77
var test3 = '7' + 7; //77
var test4 = '7' + 7 + 7; //777 순서대로 연산되기 때문에
// var test5 = 7 + 7 + '7'; //147
//출력하기
var area3 = document.getElementById('area3');
area3.innerHTML = 'test1: ' + test1 + '<br>';
area3.innerHTML += 'test2: ' + test2 + '<br>';
area3.innerHTML += 'test3: ' + test3 + '<br>';
area3.innerHTML += 'test4: ' + test4 + '<br>';
// area3.innerHTML += 'test5: ' + test5 + '<br>';(2) 나머지 산술연산
: 덧셈을 제외한 나머지 산술연산들은 문자열이 숫자로 자동형변환된 후 산술연산 진행
단, 이때 문자열이 반드시 숫자로 존재해야 함
=> 숫자가 아닌 문자가 포함될 경우 NaN문구가 뜸(Not a Number)
var test5 = '7' - 7; //0
var test6 = '7' * 7; //49
var test7 = '7' / 7; //1
area3.innerHTML += 'test5: ' + test5 + '<br>';
area3.innerHTML += 'test6: ' + test6 + '<br>';
area3.innerHTML += 'test7: ' + test7 + '<br>';(3) 강제형변환 (문자열 => 숫자)
- 숫자 + 문자
var iNum = 2; //숫자
var sNum = '3'; //문자
var test8 = iNum + sNum; //2 + '3' = '23'- Number(문자열)
var test9 = iNum + Number(sNum); //5- parseInt(문자열)
var test10 = iNum + parseInt(sNum); //5- parseFloat(문자열)
var test11 = iNum + parseFloat(sNum); //5area3.innerHTML += 'test8: ' + test8 + '<br>';
area3.innerHTML += 'test9: ' + test9 + '<br>';
area3.innerHTML += 'test10: ' + test10 + '<br>';
area3.innerHTML += 'test11: ' + test11 + '<br>';- parseInt vs parseFloat
var fNum = '1.234';
var test12 = iNum + fNum; // 21.234
var test13 = iNum + Number(fNum); //3.234
var test14 = iNum + parseInt(fNum); //1(버림)
var test15 = iNum + parseFloat(fNum); //1.234실수로 변경
area3.innerHTML += 'test12: ' + test12 + '<br>';
area3.innerHTML += 'test13: ' + test13 + '<br>';
area3.innerHTML += 'test14: ' + test14 + '<br>';
area3.innerHTML += 'test15: ' + test15 + '<br>';- 1000원
Number('1000원'); : NaN이 저장됨
parseInt('1000원'); : 1000/ 숫자인 부분까지 저장
4) 간단한 문제
(1) 숫자인지 아닌지 판별 예제
input태그에 값을 입력하고 버튼을 클릭하였을 때 값이 숫자인지 아닌지 출력
값이 숫자라면 -> "숫자입니다" / 숫자가 아니라면 => "숫자가 아닙니다"를 alert으로 출력
* isNaN(숫자) : Nan이라면(==숫자가 아니라면) true, NaN이 아니라면 false
<input type="text" id="q_num">
<button onclick="answer();">정답은?</button>
<script>
function answer(){
var q_num = document.getElementById('q_num').value;
console.log(Number(typeof(q_num))); //
if(isNaN(q_num)){
alert('숫자가 아닙니다');
} else {
alert('숫자입니다');
}(2) 덧셈/뺄셈 계산기
정수 1 : <input type="text" id="num1"> <br>
정수 2 : <input type="text" id="num2"> <br>
<label id="result"></label> <br>
<button onclick="plus();">덧셈</button> <button onclick="minus();">뺄셈</button>* 처음 혼자 예제를 풀 때엔 중복을 제거 하고자 전역변수로 값을 받아와 변수에 넣고 싶었지만,
위 두 문장을 함수에 넣고 그 함수를 호출하는 방법을 사용.
왜? 스크립트수행순서때문에 이미 문서를 읽어오는 과정에서 처리되기 때문에 전역변수로 처리할 시 빈값을 받게 됨
(버튼을 누를 시가 아님)
function plus(){
var number1 = document.getElementById('num1').value;
var number2 = document.getElementById('num2').value;
var result = Number(number1) + Number(number2);
var labeEl = document.getElementById('result');
labeEl.innerHTML += '결과 : ' + result;
}
function minus(){
var number1 = document.getElementById('num1').value;
var number2 = document.getElementById('num2').value;
document.getElementById('result').innerHTML += '결과 : ' + (number1 - number2);
}6. 배열
자바스크립트에서는 변수 선언 시 별도의 자료형을 지정하지 않기 때문에 배열도 var, let, const 등으로 선언을 한다.
어떤 자료형이든 상관없이 하나의 배열에 담을 수 있다. (java의 컬렉션과 유사)
<button onclick="arrayTest1();">확인하기</button>
<div class="area small" id="area1"></div>- 배열의 선언 및 초기화
function arrayTest1(){
var arr = ['홍길동', '한양', 15, true, [1,2,3]]; //배열 객체
//어떤 자료형이든 다 담을 수 있음- 배열 콘솔창에 출력
console.log(arr); //(5) ['홍길동', '한양', 15, true, Array(3)]
console.log(arr[2]); //15- 배열안의 배열에 접근
console.log(arr[4]); //(3) [1, 2, 3]- 배열안의 배열안에 인덱스값에 접근
console.log(arr[4][1]); //2- 배열을 사용해 반복문 사용하기
배열의 0번인덱스~ 마지막인덱스까지 순차적으로 모두 접근할 때 향상된 for문 사용했었음
자바스크립트에서는 for in문 활용 가능
[표현법]
for(var 변수명 in 순차적으로 접근할 배열명)
var area1 = document.getElementById('area1');
for(var i = 0; i<arr.length; i++){
area1.innerHTML += arr[i] + '<br>'; }
for(var i in arr){ //i는 인덱스 구실을 하는 변수
area1.innerHTML += arr[i] + '<br>';
}
}1) 배열의 선언
: 배열 선언 시 배열의 크기를 지정한 채로 선언한거나, 따로 크기를 지정하지 않을 수도 있음
(배열의 크기의 제약이 없다 => 자바컬렉션의 장점)
<button onclick="arrayTest2();">확인하기</button>
<div id="area2" class="area big"></div>방법 1) var 배열이름 = new Array(); : 배열크기가 0인 배열선언 / 배열크기가 3인 배열선언
var arr1 = new Array();
var arr2 = new Array(3);방법 2) var 배열이름 = [];
var arr3 = [];console.log(arr1); //[]
console.log(arr2); //(3) [빈 ×3]
console.log(arr3); //[]- 배열에 값 대입
arr1[0] = '감';//배열의 크기가 1
arr1[1] = '사과'; //배열의 크기가 2
arr1[10] = '매실'; //배열의 크기가 11 (값이 없는 인덱스(2~9)는 빈인덱스)
//arr2
console.log(arr2.length);
//배열에 값 대입
arr2[0] = '비행기';
arr2[1] = '지하철';
arr2[2] = '버스';
arr2[3] = '배';
document.getElementById('area2').innerHTML += arr2 + '<br>';
document.getElementById('area2').innerHTML += arr2.length + '<br>'; //크기가 늘어나 4칸이 됨방법 3) 배열선언과 동시에 초기화
var arr4 = ['홍길동', '임꺽정']; //배열의 크기가 2
var arr5 = new Array('Java', 'Oracle', 'HTML'); //배열의 크기가 3
document.getElementById('area2').innerHTML += arr4 + '<br>' + arr5;2) Array객체의 메소드
(1) indexOf(찾고자하는 요소) : 배열에서 해당 요소가 위치해있는 인덱스를 반환
<div id="area3" class="area small"></div>
<button onclick="indexOfTest();">확인</button>function indexOfTest(){
var arr = ['황금올리브', '뿌링클', '고추바사삭', '허니콤보', '후라이드'];
console.log(arr.indexOf('고추바사삭'));//요소가 위치한 인덱스를 반환 ==2
var chicken = prompt('찾고자하는 치킨을 입력하세요.');id값으로 area3를 가진 div요소에
- 입력한 치킨이 있을 경우 : 당신이 찾는 치킨은 XXX X번째 인덱스에 있습니다.
- 입력한 치킨이 없을 경우 : 당신이 찾는 치킨은 XXX 판매하지 않습니다.
for(var i = 0; i<arr.length; i++){
if(arr.indexOf(chicken) != -1){ //indexOf를 했을 때 없으면 -1반환
area3.innerHTML = '당신이 찾는 치킨 ' + chicken + '은(는) ' + i + '번째 인덱스에 있습니다.';
} else {
area3.innerHTML = '당신이 찾는 치킨 ' + chicken + '은(는) 판매하지 않습니다.';
}
}* 참고
동등 비교 연산자
==(동등연산자) : 자료형과 무관하게 실제 값만 일치하면 true
===(일치연산자) : 값, 자료형 둘 다 일치해야만 true
console.log(1==1); //true
console.log(1=='1'); //true => ==(동등연산자) : 자료형과 무관하게 실제 값만 일치하면 true
console.log(1==='1'); //false => ===(일치연산자) : 값, 자료형 둘 다 일치해야만 true(2) concat(배열, 배열, 배열, ...) : 여러개의 배열을 결합하고자 할 때 사용 - 원본 배열에 영향을 끼치지 않는 메소드
==> 배열을 합쳐서 "새로운 배열"을 반환
<div id="area4" class="area big"></div>
<button onclick="concatTest();">확인</button>function concatTest(){
var area4 = document.getElementById('area4');
var arr1 = ['사과', '딸기'];
var arr2 = ['수박', '키위', 'KH', '정보교육원']
area4.innerHTML += 'arr1 : ' + arr1 + '<br>';
area4.innerHTML += 'arr2 : ' + arr2 + '<br>';
area4.innerHTML += 'arr1 기준을 합침 : ' + arr1.concat(arr2) + '<br>';
arr1 = arr1.concat(arr2);
area4.innerHTML += 'arr2기준으로 합침 : ' + arr2.concat(arr1) + '<br>';
area4.innerHTML += '여러개의 배열 합침 : ' + arr2.concat([1,2,3,], arr1, ['안녕하세요']) + '<br>';
}(3) reverse() : 배열에 담긴 요소들을 역순으로 바꿔주는 메소드 - 원본배열에 영향을 끼치는 메소드
<div id="area5" class="area small"></div>
<button onclick="reverseTest();">확인</button>function reverseTest(){
var area5 = document.getElementById('area5');
var arr = ['Apple', 'Banana', 'Lemon', 'Kiwi'];
area5.innerHTML += 'arr : ' + arr + '<br>';
arr.reverse();
area5.innerHTML += 'reverse결과 : ' + arr + '<br>';
//원본 배열에 영향을 끼치는 메소드
area5.innerHTML += 'reverse의 reverse : ' + arr.reverse() + '<br>';
}(4) sort() : 배열에 담긴 값들을 오름차순으로 정렬해주는 메소드 - 원본배열에 영향을 끼치는 메소드
<div id="area6" class="area small"></div>
<button onclick="sortTest();">확인</button>function sortTest(){
var area6 = document.getElementById('area6');
var arr = ['김놩진', '김광진', '김뢍진', '김돵진', '김뫙진'];
area6.innerHTML += 'arr: ' + arr + '<br>';
area6.innerHTML += 'arr.sort(): ' + arr.sort() + '<br>';
area6.innerHTML += '다시 arr: ' + arr + '<br>';
//원본배열에 영향을 끼치는 메소드
area6.innerHTML += '내림차순 arr: ' + arr.reverse() + '<br>';
}(5_1) push(추가할 요소) : 배열의 맨 뒤에 요소를 추가하고 크기도 반환 - 원본에 영향을 끼치는 메소드
(5_2) pop() : 배열의 맨 뒤 요소를 제거하고 제거된 요소를 반환
<div id="area7" class="area big" style="height: 350px ;"></div>
<button onclick="pushPopTest();">확인</button>
<script>
function pushPopTest(){
var area7 = document.getElementById('area7');
var arr = ['별내동', '운서동', '불광동', '장이동', '구의동'];
area7.innerHTML = 'arr : ' + arr + '<br>';
area7.innerHTML += 'push 후 크기 : ' + arr.push('광장동') + '<br>';
area7.innerHTML += 'arr : ' + arr + '<br>';
//원본배열에 영향을 끼치는 메소드
arr.push('퇴계원읍');
area7.innerHTML += 'arr : ' + arr + '<br>';
//add와 비슷
area7.innerHTML += 'arr에서 pop된 요소 : ' + arr.pop() + '<br>';
area7.innerHTML += 'arr : ' + arr + '<br>';
arr.pop();
arr.pop();
area7.innerHTML += 'arr : ' + arr + '<br>';
}
</script>(6_1) unshift(추가할 요소) : 배열의 맨 앞에 요소를 추가 후 배열의 크기 반환 - 원본에 영향을 끼치는 매소드
(6_2) shift() : 배열의 맨 앞에 요소를 제거하고 제거된 요소를 반환
<div id="area8" class="area big"></div>
<button onclick="shiftUnshiftTest();">확인</button>
<script>
function shiftUnshiftTest(){
var area8 = document.getElementById('area8');
var arr=['축구', '아이스하키', '스피드스케이팅'];
area8.innerHTML = 'arr : ' + arr + '<br>';
arr.unshift('야구');
area8.innerHTML += 'arr의 unshift한 후 : ' + arr + '<br>';
//원본배열에 영향을 끼치는 메소드
area8.innerHTML += 'arr의 unshift 후 배열의 크기 : ' + arr.unshift('농구') + '<br>';
area8.innerHTML += 'arr의 shift : ' + arr.shift() + '<br>';
}
</script>(7_1) slice(시작인덱스, 끝인덱스) : 배열 안의 요소들을 추출해주는 메소드 - 원본에 영향을 끼치지 않는 메소드
(7_2) splice(시작인덱스, 제거수, 추가값) : 배열의 요소를 추출해서 제거 및 추가, 추가값은 생략가능 - 원본에 영향을 끼치는 메소드
<div id="area9" class="area" style="height:400px;"></div>
<button onclick="sliceSpliceTest();">확인</button>
<script>
function sliceSpliceTest(){
var area9 = document.getElementById('area9');
var arr = ['나는', '오늘부터', '다이어트를', '시작한다'];
area9.innerHTML += 'arr : ' + arr + '<br>';
//slice
area9.innerHTML += 'slice 결과 : ' + arr.slice(2, 4) + '<br>';
area9.innerHTML += 'arr : ' + arr + '<br>';
//원본배열에 영향을 끼치지 않는 메소드
//splice
// area9.innerHTML += 'splice 결과 : ' + arr.splice(2, 1) + '<br>';
area9.innerHTML += 'splice 결과 : ' + arr.splice(2, 0, '폭식과') + '<br>';
area9.innerHTML += 'arr : ' + arr + '<br>';
//원본배열에 영향을 끼치는 메소드
}
</script>(8) join(구분자)
: 배열에 담긴 값들을 하나의 "문자열"로 합쳐서 반환해주는 메소드
<div id="area10" class="area small"></div>
<button onclick="toStringJoinTest();">확인</button>
<script>
function toStringJoinTest(){
var area10 = document.getElementById('area10');
var arr = ['안', '녕', '하', '세', '요'];
area10.innerHTML += 'arr : ' + arr/*.toString*/ + '<br>'; //안, 녕, 하, 세, 요
area10.innerHTML += 'toString() : ' + arr.toString() + '<br>'; //안, 녕, 하, 세, 요- 배열 객체를 html요소에 출력할 경우(innerHTML) 내부적으로 toString()메소드를 호출 후 돌아올 결과 출력
- 배열이 가지고 있는 메소드 중 toString
area10.innerHTML += 'join : ' + arr.join() + '<br>';//안, 녕, 하, 세, 요
area10.innerHTML += 'join : ' + arr.join(' ') + '<br>'; //안 녕 하 세 요
area10.innerHTML += 'join : ' + arr.join('') + '<br>'; //안녕하세요join은 기본적으로 ,를 통해 하나의 문자열로 합침
join메소드를 호출 시 구분자를 제시한다면 해당 구분자로 하나의 문자열이 만들어짐
3) 문제 : input태그에 입력된 값으로 table을 생성해주세요.
이름 : <input type="text" id="name"> <br>
나이 : <input type="text" id="age"> <br>
성별 : <input type="text" id="gender"> <br>
<button onclick="createTable();">생성</button>
<table border = "1">
<thead>
<tr>
<td >이름</td>
<td >나이</td>
<td >성별</td>
</tr>
</thead>
<tbody id="createTable">
</tbody>
</table>
<script>
function createTable(){
var name = document.getElementById('name').value;
var age = document.getElementById('age').value;
var gender = document.getElementById('gender').value;
var tbody = document.getElementById('createTable');
var table = '<tr><td>' + name + '</td><td>' + age + '</td><td>' + gender + '</td></tr>' ;
tbody.innerHTML += table;
}
</script>
7. 함수
1) 함수의 종류
(1) 선언적 함수
: 이름이 있는 함수, 이름을 통해 호출하여 실행함
[표현법]
function 함수명 (매개변수, 매개변수, ...) {
해당 함수 호출 시 실행할 코드;
return 결과값;
}
- 매개변수가 없는 경우 생략가능
- 반환할 값이 없을경우 return 결과값; 생략가능
<h3 onclick="test1();">선언적 함수</h3>
<div id="area1" class="area"></div>
<script>
function test1(){
document.getElementById('area1') .innerHTML += 'test1()함수 실행됨 <br>';
}
</script>(2) 익명함수 : 이름이 없는 함수, 함수명 대신 변수명에 함수를 대입하여 함수코드를 저장하는 구현방식
[표현법]
변수 = function(){
소스코드 등
}
-> 특정변수나 속성에 대입한는 함수가 필요할 때 주로 사용됨
(주로 이벤트 핸들러 작성 시 사용)
<button id="btn"> 실행확인 </button>
<div id=" area2" class="area"></div>
<script>
var btn = document.getElementById('btn'); //버튼요소객체
btn.onclick = function(){
document.getElementById('area2').innerHTML += '이벤트 핸들통해 시행됨' + '<br>';
}
</script>2) 함수의 매개변수
(1) 문자열
<button onclick="test3('프로개발자');">실행확인</button>(2) 숫자
<button onclick="test3(10);">실행확인</button>(3) 배열
<button onclick="test3([1, 2, 3]);">실행확인</button>(4) 논리값
<button onclick="test3(true);">실행확인</button>(5) prompt
<button onclick="test3(prompt('이름을 입력하세요'));">실행확인</button>==> 자료형에 상관없이 매개변수의 "개수"만 잘 맞는다면 실행하는데 문제가 없다.
(6) 정의해 둔 매개변수보다 적게 전달하는 경우 : undifinded
<button onclick="test3();">실행확인</button> <!--undefined-->>> 정의해둔 매개변수 수보다 적게 전달하는 것은 가능(실행에 문제 없음) 단, undefinded로 뜸
(7) 정의해 둔 매개변수보다 많이 전달하는 경우 : 초과된 전달값은 무시
<button onclick="test3('안녕', '하세요');">실행확인</button>>> 정의해둔 매개변수 수보다 많이 전달하는 것은 가능(실행에 문제 없음) 단, 초과된 값은 무시됨
<script>
function test3(value){ //매개변수 제시시 자료형 지정 X, var, let X -> 변수명만 적음
document.getElementById('area3').innerHTML = value;
//=document.getElementById('area3') ==요소 객체 . 속성 = 속성값;
};
</script>3) 매개변수 관련 배열
함수 호출 시 전달하는 값은 내부적으로 arguments라는 배열에 담김
* arguments : 모든 함수마다 내부적으로 하나씩 존재하는 배열 객체
<button onclick="test4(12,45,24,25,65,45,48,21,46,26,47,76);">실행확인</button>
<div id="area4" class="area"></div>
<script>
function test4(){
console.log(arguments);
console.log(arguments[0]); //12
arguments[0] = 100;
console.log(arguments[0]); //100- 문제
argument배열의 총 합과 평균을 구해서
id속성값이 area4인 div요소에 innerHTML 속성에 대입하시오
var sum = 0;
for(var i in arguments){
sum += arguments[i];
}
var avg = sum/arguments.length;
area4.innerHTML = '총합 : ' + sum + ' 평균 : ' + avg;4) 매개변수 있는 함수에 this키워드 전달하기 *****중요
(1) 해당요소 객체 자체 전달
<button onclick="test5(this);">버튼1</button> <!--this : 해당 요소 객체 버튼 자체-->
<!-- 요소객체 스스로 전달됨 -->(2) 버튼의 content영역 전달 .innerHTML
<button onclick="test5(this.innerHTML);" id='abc'>버튼2</button> <!--"버튼2"-->(3) 버튼의 id속성값 전달 .id
<button onclick="test5(this.id)" id='btn33'>버튼3</button> //btn33(4) 버튼의 value값 전달 == input태그의 button타입도 가능함
<input type="button" value="버튼4" onclick="test5(this.value)"> //버튼4<script>
function test5(a){
console.log(a);
var b = document.getElementById('abc');
console.dir(b);
}
</script>5) 함수의 리턴
(1) 일반적인 값을 리턴하는 경우
<button onclick="test6();">실행확인</button>
<div id="area6" class="area"></div>
- 1부터 100까지 랜덤한 난수를 생성해서 변환해주는 함수를 만들어보자.
=> Math.random()이용
Math.random() -> 0.0 ~0.999999
Mate.random() * 100 -> 0.0 ~99.9999999
Math.random * 100 + 1 -> 0.0 ~100.9999
parseInt(Math.random * 100 + 1) => 1~ 100
function rand(){
return parseInt(Math.random() * 100 + 1)
}
function test6(){
// rend();
document.getElementById('area6').innerHTML = '랜덤값 : ' + rand();
}(2) 익명함수를 리턴하는 경우
input 영역에 사용자가 이름을 입력하면 OOO님 환영합니다. 출력해줄 예정
이름 : <input type="text" id="name">
<button onclick="test7()();">실행확인</button>
<script>
function test7(){
var name = document.getElementById('name').value;
console.log(name);
return function(){
alert(name + '님 환영합니다.');
};
}
</script>8. 객체
- 미리 내부 스타일 속성 부여
<style>
.area{
background-color:bisque;
border: 1px solid goldenrod;
}
.small{
height: 250px;
}
.big{
height: 450px;
}
</style>
1) 객체
key(속성) + Value(속성값)를 한 쌍으로 저장할 수 있는 구조
여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입
- 객체는 중괄호를 {}사용해서 생성하고
중괄호 안에 이 객체에 필요로 하는 속성 (property)들을 정의함(속성:속성값) == (키:밸류)
참고로 속성값으로는 모든 자료형의 값을 담을 수 있음
-> 자바스크립트의 배열 : 자바의 ArrayList와 비슷한 개념
-> 자바스크립트의 객체 : 자바의 HashMap과 비슷한 개념
[표현법]
var 변수명(==객체명)={
속성명 : 속성값,
속성명 : 속성값,
속성명 : 속성값,
....
}
<button onclick="test();">실행확인</button>
<div id="area1" class="area big"></div>function test(){
//배열
var arr = ['크루아상', 2000, '식사', ['밀가루', '버터'], '뚜레쥬르'];
//객체 : 순서가 보장되지 않음
var product = {
pName : '크루아상',
price : 2000,
kind : '식사',
'material' : ['밀가루', '버터'],
company : '뚜레쥬르'
};- 객체 속성은 따옴표 안에 넣어도 문자열로 인식함, value값으로 어떤 자료형이든 다 저장가능
console.log(arr); //Array(5)
console.log(product); //Object => 펼치면 속성값 볼 수 있음
console.log(typeof(product)); //object- 출력해보면,
area1.innerHTML += 'arr: ' + arr.toString() + '<br>';
//arr: 크루아상,2000,식사,밀가루,버터,뚜레쥬르
area1.innerHTML += 'product: ' + product + '<br>';
//[object, Object]로 출력됨* 해당 객체 내부의 각 속성에 접근하는 방법
방법1) .을 이용하는 방법 객체명.속성명
area1.innerHTML += '<b> 방법1. 객체명.속성명으로 접근하기 </b><br>';
area1.innerHTML += 'product.pName : ' + product.pName + '<br>' +
'product.price : ' + product.price+ '<br>' +
'product.kind : ' + product.kind+ '<br>' +
'product.meterial[0] : ' + product.material[0] + '<br>' +
'product.meterial[1] : ' + product.material[1] + '<br>'+
'product.company : ' + product.company + '<br>';방법2) 대괄호를 이용하는 방법 : 객체명['속성명']
area1.innerHTML +='<b>방법 2. 객체명["속성명"]으로 접근하기 </b><br>'
area1.innerHTML +='product["pName"] : ' + product['pName'] + '<br>'
area1.innerHTML +='product["price"] : ' + product['price'] + '<br>'
area1.innerHTML +='product["kind"] : ' + product['kind'] + '<br>'
area1.innerHTML +='product["material"] : ' + product['material'] + '<br>'
area1.innerHTML +='product["material"][0] : ' + product['material'][0] + '<br>'
area1.innerHTML +='product["material"][1] : ' + product['material'][1] + '<br>'
area1.innerHTML +='product["compony"] : ' + product['company'] + '<br>'2) 객체 생성 케이스
<button onclick="test2();">실행확인</button>
<div id="area2" class="area small"></div>- 속성명 제시 시 공백이나 특수문자가 포함될 경우
function test2(){
var user = {
'user name' : '홍길동', //공백을 넣고 싶을 떄,
'age!!' : 20 //특수문자 넣고 싶을 때
};=> 객체의 속성명이 ''로 묶여있다면 .을 이용해서 접근이 불가하다
var area2 = document.getElementById('area2');
area2.innerHTML += 'userName : ' + user['user name'] + '<br>';
area2.innerHTML += 'age : ' + user['age!!'] + '<br>';=> 어쩔 수 없이 방법2를 사용해 접근해야 함.
=> 그러니 둘 다 알고 있자!
3) 객체의 반복문
인덱스 개념이 없기 때문에 단순 for문 사용 불가능, for in문 사용 가능
객체가 가지고 있는 모든 속성들에 대해서 순차적으로 접근하고자 할 때 사용 가능
<button onclick="test3();">실행확인</button>
<div id="area3" class="area small"></div>function test3(){
var area3 = document.getElementById('area3');
var arr = ['청포도', 30, '샤인머스캣'];
for(var i in arr){
area3.innerHTML += arr[i] + '<br>';
}in키워드 뒤에 배열을 제시했다면
반복문이 돌 때 마다 0에서부터 마지막 인덱스까지의 인덱스가 var i 에 담김
var game = {
title : '스타크래프트',
price : 15000,
language : '한국어',
supportOS : ['windows64', 'MAC'],
service : true
};
for(var key in game){
area3.innerHTML +=key + ': ' + game[key] + '<br>'
};area3.innerHTML += key + ': ' + game.key + '<br>';
game 객체한테 가서 key라는 속성명을 가져오기
.을 통한 방법 => 객체명.속성명 => 사용불가
in 뒤에 객체 제시시
반복문이 돌 때마다 해당 객체의 속성명들이 var key(변수명)에 담김
==> 방법2(대괄호)를 통한 객체 접근 방법 이용
4) 객체의 메소드 속성
- 객체의 속성 중 함수자료형인 속성을 메소드라고 부른다.
<button onclick="test4();">실행확인</button>
<div id="area4" class="area small"></div>function test4(){
var area4 = document.getElementById('area4');
var name = "이승*"; //홑따옴표, 쌍따옴표 다 가능 ->섞어쓰지않기
var dog = {
name : '충만이',
kind : '진돗개',
eat : function(food){
area4.innerHTML += this.kind + '종류인 ' +
this.name + '(이)가 ' + food + '를 먹고 있어요. <br>' ;
}
};
dog.eat('쌀');메소드의 경우 속성명이 function의 이름이 되므로 "익명함수"로 작성
메소드 안에서 같은 객체 내의 속성을 호출할 경우 this.를 앞에 붙인다.
만약, 속성명과 변수명이 동일한 경우에는 this를 안붙이면 전역변수가 호출된다.
!!쌀은 인자값으로 함수를 호출해 food라는 변수에 담기는 건가?
=> 해결 ! 매개변수로
5) in과 with
이름 : <input type="text" id="name"> <br>
국어 : <input type="text" id="kor"> <br>
수학 : <input type="text" id="math"> <br>
영어 : <input type="text" id="eng"> <br>
<button onclick="test5();">실행확인</button>
<div id="area5" class="area big"></div>- 객체 생성하기
function test5(){
var name = document.getElementById('name').value;
var kor = Number(document.getElementById('kor').value);
var math = Number(document.getElementById('math').value);
var eng = Number(document.getElementById('eng').value);
var student = {
name : name,
kor : kor,
math : math,
eng : eng,
getSum : function(){
return this.kor + this.math + this.eng;
},
getAvg : function(){
return this.getSum() / 3;
},
toString : function(){
return this.name + ',' + this.kor + ',' + this.math + ',' + this.eng;
}
};- .toString *****
var area5 = document.getElementById('area5');
area5.innerHTML += 'student : ' + student + '<br>';
//toString을 선언해주지않으면, student : [object Object] 06_배열
area5.innerHTML += 'student : ' + student.toString() + '<br>';
area5.innerHTML += 'arr : ' + arr.toString() + '<br>';in : 객체 내에 해당 속성이 있는지 확인해주는 키워드
- 해당 객체에 해당 속성이 존재하나? => '속성명' in 객체명 : 있으면 true 없으면 false
area5.innerHTML += 'student에 name속성이 존재하나 ? : ' + ('name' in student) + '<br>';
area5.innerHTML += 'student에 kor속성이 존재하나 ? : ' + ('kor' in student) + '<br>';
area5.innerHTML += 'student에 math속성이 존재하나 ? : ' + ('math' in student) + '<br>';
area5.innerHTML += 'student에 eng속성이 존재하나 ? : ' + ('eng' in student) + '<br>';
area5.innerHTML += 'student에 test속성이 존재하나 ? : ' + ('test' in student) + '<br>';
with : 코드를 줄여주는 키워드
- 해당 객체의 속성에 반복해서 접근하고 싶다면 => with(객체명){속성명으로만 접근}
=> 코드가 간결해진다는 장점
with(student){
area5.innerHTML += '학생이름 : ' + name + '<br>';
area5.innerHTML += '국어점수 : ' + kor + '<br>';
area5.innerHTML += '수학점수 : ' + math + '<br>';
area5.innerHTML += '영어점수 : ' + eng + '<br>';
area5.innerHTML += 'toString : ' + toString() + '<br>';
area5.innerHTML += 'getSum : ' + getSum() + '<br>';
area5.innerHTML += 'getAvg : ' + getAvg() + '<br>';
};6 ) 객체의 속성 추가 및 제거 (추가 중요*****)
<button onclick="test6();">실행확인</button>
<div id="area6" class="area small"></div>- 빈배열/객체 생성
function test6(){
// 빈 배열 생성
var arr = [];
// 빈 객체 생성
var student = {};- 객체에 속성을 추가 ******
student.name = '홍길동';
student.hobby = ['도둑질'];
student.dream = '아버지를 아버지라 부르는것';
student.age = 58;* 주의사항 : 속성명이 중복된다면 => 덮어씌워짐
student.dream = '돈많은백수';- 하나씩 추가하기 귀찮아서 with속성 사용해서 가능할까? ==> 불가능 !
=> 속성값을 가져오는 용도로만 사용할 수 있음
with(student){
address = '한양';
phone = '010-123-3443';
}- 메소드 속성 추가
student.toString = function(){
return 'name : ' + this.name + '<br>'
+'hobby : ' + this.hobby + '<br>'
+'dream : ' + this.dream + '<br>'
+'age : ' + this.age + '<br>';
};
document.getElementById('area6').innerHTML = student.toString();
=> [object Object]
toString메소드가 내부적으로 호출됨
- 속성제거
delete(객체명.속성명) : 객체의 속성을 제거할 수 있는 함수
delete(student.toString);
document.getElementById('area6').innerHTML += student;
console.log(student);9. 객체2
- 미리 스타일 부여
<style>
.area{
background-color: lemonchiffon;
border : 1px solid blanchedalmond;
height: 300px;
}
</style>1) 객체배열을 통한 다량의 데이터 관리
<button onclick="test1();">실행확인</button>
<div id="area1" class="area"></div>- 학생 객체 만들기
function test1(){
var student0 = {name:'김**', java:100, oracle:80, html:95, css:50};
var student1 = {name:'제임스고슬링', java:100, oracle:100, html:30, css:20};
var student2 = {name:'박**', java:100, oracle:90, html:80, css:40};
var student3 = {name:'이**', java:100, oracle:75, html:100, css:60};- 학생 객체를 담을 배열 만들기 (빈배열)
var students = [];- 배열에 객체 추가하기
: 자바스크립트에서 배열에 값을 추가할 떄 push(맨뒤에), unshift(맨앞에)사용
: 순차적으로 넣어서 관리하고자 한다면 push()가 더 적합
students.push(student0); // 0번
students.push(student1); // 1번
students.push(student2); // 2번
students.push(student3); // 3번- javaScript : 100을 배열 속 객체의 속성으로 추가하고 합계, 평균을 구해주는 기능을 구현해보자.
for(var i in students){
// 객체에 공통적인 속성 추가
students[i].javascript = 100;
students[i].getSum = function(){
return this.java + this.oracle + this.html + this.css + this.javascript;
};
students[i].getAvg = function(){
return this.getSum() / 5;
};
};- 전체 학생들의 이름, 총점, 평균 구현하기
var area1 = document.getElementById('area1');
for(var i in students){
area1.innerHTML += '이름 : ' + students[i].name
+ ', 총점 : ' + students[i].getSum()
+ ', 평균 : ' + students[i].getAvg() + '<br>';
};2) 생성자 함수
new 키워드를 사용해서 객체를 생성할 수 있는 함수를 의미
(함수명을 만들 때 첫글자를 대문자로 한다.)
<button onclick="test2();">실행확인</button>
<div id="area2" class="area"></div>- 객체 생성과 동시에 초기화
var student0 = new Student('홍길동', 30, 40, 20, 30, 40);
var student1 = new Student('김말동', 40, 50, 80, 100, 20);
var student2 = new Student('홍말동', 20, 60, 70, 90, 10);
// 배열에 담기
var students = [student0, student1, student2];- 반복문을 이용해서 출력
for(var i in students){
document.getElementById('area2').innerHTML += students[i];
}- 생성자 함수
function Student(name, java, oracle, html, css, javascript){
// 초기화
this.name = name;
this.java = java;
this.oracle = oracle;
this.html = html;
this.css = css;
this.javascript = javascript;
// 메소드 속성 정의
this.getSum = function(){
return this.java + this.oracle + this.html + this.css + this.javascript;
};
this.getAvg = function(){
return this.getSum() / 5;
};
// toString만들기
this.toString = function(){
return '이름 : ' + this.name + ', 총점 : ' + this.getSum() + ', 평균 : ' + this.getAvg() + '<br>';
}
};3) Date 객체
<button onclick="test3();">실행확인</button>
<div id="area3" class="area"></div>- Date 객체 생성 : new Date();
var date1 = new Date(); // 현재 날짜 및 시간- 2023년 1월 25일로 셋팅
var date2 = new Date(2023, 1-1, 25);
area3.innerHTML += 'date2(종강일) : ' + date2 + '<br>';월의 경우에는 내부적으로 +1이 되기 때문에 해당 월(숫자) -1을 해줘야한다.
시, 분, 초를 지정안할경우 0으로 자동 셋팅
- 시간까지 셋팅
var date3 = new Date(2023, 1-1, 25, 15, 50, 0);
area3.innerHTML += 'date3(종강일) : ' + date3 + '<br>';- ms(밀리초)까지 셋팅하려면?
: 1초 = 1000ms
var date4 = new Date(2023, 1-1, 25, 15, 50, 0, 5000);
area3.innerHTML += 'date4(종강일) : ' + date4 + '<br>';- 종강까지 디데이 구하기
var end = new Date(2023, 1-1, 25);
var now = new Date();
area3.innerHTML += '종강일 디데이 : ' + (end - now) + '<br>';1s == 1000ms
1m == 60s == 60 * 1000ms
1h == 60m == 60 * 60s == 60 * 60 * 1000ms
1d == 24h == 24 * 60m == 24 * 60 * 60s = 24 * 60 * 60 * 1000ms
var dday = (end - now) / (24 * 60 * 60 * 1000);
alert('종강까지 ' + Math.ceil(dday) + '일 남았습니다.');<Date관련 함수들>
- getFullYear()
- getMonth()
- getDate()
- getDay()
// 년도만 알아내고 싶다면 : getFullYear();
area3.innerHTML += '년도 : ' + date1.getFullYear() + '<br>';
// 월만 알아내고 싶다면 : getMonth() + 1;
area3.innerHTML += '월 : ' + (date1.getMonth() + 1) + '<br>';
// 일만 알아내고 싶다면 : getDate();
area3.innerHTML += '일 : ' + date1.getDate() + '<br>';
// 요일만 알아내고 싶다면 : getDay() => 일요일 == 0, 월요일 == 1, ...
area3.innerHTML += '요일 : ' + date1.getDay() + '<br>';
// 추가적으로
// 시 : getHours(), 분 : getMinutes(), 초 : getSeconds() 호출10. 윈도우객체
- 미리 스타일 부여
<style>
body{
background-color: rgb(216, 215, 224);
color :rgb(84, 84, 85);
}
.area{
width : 300px;
height : 100px;
font-size : 50px;
color : aqua;
background-color: bisque;
border : 1px solid lightgreen;
}
.small {
height : 150px;
}
.big {
height : 300px;
}
</style>window객체는 자바스크립트의 최상위 객체 크게 BOM과 DOM으로 나뉨
- BOM (Browser Object Model) : 브라우저 창과 관련된 객체들
- DOM (Document Object Model) : HTML문서의 요소(태그)와 관련된 객체들
1) window객체에서 제공하는 메소드
> 수업시간에 많이 사용했던 것들
(1) window.alert('');
(2) window.console.log('');
(3) window.confirm('');
(4) window.prompt('');
> 이외의 것들
(5) window.open('url', '창이름', '창의 특성');
- url : 새 창에서 열고자하는 주소
- 창이름 : 창이름이 동일한게 이미 열려있을 경우 새롭게 열리지않고 이미 열린 window에서 새로고침
(크롬은 새로고침 / IE 새탭이 뜸)
- 창의 특성 : 새로 열릴 창의 너비, 높이, 툴바, 스크롤바, 상태표시줄 등등..(브라우저마다 다름)
=> px
width : 창의 가로길이
height : 창의 세로길이
=> yes / no
resizable : 창의 크기 조절 여부
location : 주소창이 보일것인지 안 보일것인지
menubar : 메뉴바를 보일것인지 안 보일것인지
scrollbar : 스크롤바를 보일것인지 안 보일것인지
status : 상태표시줄
toolbar : 도구모음
여러 속성을 한번에 지정하고 싶다면 ,로 나열한다.
'속성=속성값, 속성=속성값, ...'
window.open('http://www.naver.com', 'aaa', 'width=500, height=600, resizable=no, location=yes, menubar=no, scrollbar=no, toolbar=no');
// 브라우저에따라 적용되거나 적용이 안되는 속성들이 많다.(6) window.setTimeout(함수, ms)
<button onclick="test2();">실행확인</button>- 3초 뒤에 alert창 뜨게하기
window.setTimeout(function(){
alert('안녕?');
}, 3000);- 3초 뒤에 alert창으로 알린 뒤 닫게 하기 --> 내가 제시한 일정 시간 후에 "단 한 번"만 실행
(7) window.setInterval(함수, ms)
<button onclick="test3();">실행확인</button>
<div id="area1" class="area"></div>- 1초마다 1씩 증가
function test3(){
var area1 = document.getElementById('area1');
var count = 1;
window.setInterval(function(){
area1.innerHTML = count++; //1초마다 1씩 증가 (시계)- 시계 만들기
var now = new Date();
hour = now.getHours();
min = now.getMinutes();
sec = now.getSeconds();
var ap = '';
// 13 -> 1 14 -> 2 15 -> 3 16 -> 4 17 -> 5 // 12시간 단위로 바꾸기
if(hour > 12){
hour -= 12;
ap = '오후';
}
else{
ap = '오전';
}
if(sec < 10){
sec = '0' + sec;
}
if(min < 10){
min = '0' + min;
}
area1.innerHTML = ap + ' ' + hour + ':' + min + ':' + sec;
}, 1000);setInterval : 내가 지정한 시간 간격마다 "매 번" 함수 실행
2) BOM(Browser Object Model)
: location 객체, screen 객체, navigator 객체
<button onclick="console.log(location);">실행확인</button>(1) location객체
브라우저의 주소창과 관련된 객체 => url(href속성)
<button onclick="location.href='http://www.naver.com'">네이버로 이동</button>
<label onclick="location.href='http://www.naver.com'">네이버로 이동</label>굳이 a태그를 쓰지 않고도 이동할 수 있음
- assign() / replace() 페이지 이동 : replace는 뒤로가기를 사용할 수 없음
<button onclick="location.assign('http://www.google.com')">구글로 이동</button>
<button onclick="location.replace('http://www.google.com')">구글로 이동</button>- reload : 새로고침
<button onclick="location.reload();">새로고침</button>
<button onclick="location.href = location.href">새로고침</button>
<!-- 현재 url로 요청보내는 것이 '새로고침' -->(2) screen 객체
<button onclick="console.log(screen);">screen객체 확인</button> <!-- 사용자가 보는 화면에 관한정보-->(3) navigator 객체
<button onclick="console.log(navigator);">navigator 객체 확인</button> <!-- 브라우저에 대한 정보 -->3) DOM(Document Object Model)
HTML에 있는 각각의 요소들을 Node(노드)라고 한다
- 요소 노드(Element Node) : 태그 자체만을 의미 == Element
- 텍스트 노드(Text Node) : 태그 내에 기록되는 내용 == Content
텍스트노드가 존재하지 않는 요소 (시작태그로만 이루어져있는 요소) : input, img ....
텍스트노드가 존재하는 요소(시작태그와 종료태그가 한쌍으로 이루어져있는 요소) : div, button, a, h1, p....
(1) 노드 생성과 관련된 메소드
- 텍스트 노드가 존재하는 노드 생성(시작태그 + 종료태그)
<button onclick="test4();">실행확인</button>
<div id="area3" class="small">
</div>- 동적으로 요소 만들기
ㄱ. "문자열"로 만드는 방법
document.getElementById('area3').innerHTML = '<h3>안녕하세요</h3>';ㄴ. document에서 제공하는 메소드를 통해 "요소객체"로 만드는 방법
a) elementNode 객체 생성 : document.createElement('태그명');
var elementNode = document.createElement('h3');b) textNode 객체 생성 : document.createTextNode('문구');
var textNode = document.createTextNode('안녕하세요');ㄷ. 두 개의 노드를 연결(ElementNode의 하위로 TextNode를 추가)
a의 자식으로 b를 추가하겠다.
요소노드.appendChild(텍스트노드);
elementNode.appendChild(textNode); // <h3>안녕하세요</h3>// innerHTML은 반드시 문자열형태로 넣어야함
document.getElementById('area3').innerHTML += elementNode;
// div태그의 자식으로 elementNode를 추가
document.getElementById('area3').appendChild(elementNode);- 텍스트노드가 존재하지 않는 노드 생성(시작태그만 존재)
<button onclick="test5();">실행확인</button>
<div id="area4" class="big">: <img>태그 요소 객체 만들기
function test5(){
var img = document.createElement('img');<img src="이미지경로" width="~~" height="~~" alt="~~"> => 객체의 속성들
객체의 속성에 접근하는 방법 : 객체명['속성명'] 또는 객체명.속성명
: 속성추가
img.src = 'https://s.pstatic.net/shopping.phinf/20221026_16/d20d5278-bcc3-42b8-b097-07c6609a0a00.jpg?type=f214_292';
img.width = '400';
img.height = '200';: div의 자식요소로 추가하기
document.getElementById('area4').appendChild(img);- 노드 삭제 : 지우고자하는요소객체.remove();
<button onclick="test6();">삭제</button>
<script>
function test6(){
console.log(document.getElementById('area4').firstChild);
document.getElementById('area4').firstChild.remove();
};11. 이벤트
- 미리 스타일 설정
<style>
.area{
background-color: beige;
border : 1px solid lightpink;
height: 100px;
}
</style>1) 이벤트 모델의 종류(이벤트를 부여하는 방법들)
* 이벤트 관련 용어
event target : 이벤트가 일어날 객체(button, h3, label....)
event type : 이벤트 종류(click, scroll, mousemove...)
event handler : 이벤트가 발생했을 때 동작할 코드들의 모임
* 이벤트 모델 종류
(1) 고전 이벤트 모델 => btn.onclick = function(){}
(2) 인라인 이벤트 모델 => <button onclick="함수();"></button> <script>....</script>
(3) 표준 이벤트 모델 => addEventListener를 사용방법
(1) 고전 이벤트 모델(기본 이벤트 모델)
요소 객체를 가지고와서 해당 요소객체의 이벤트 속성에 접근한 후
이벤트 핸들러를 연결하는 방식(== 익명함수를 대입한다.)
요소객체.(이벤트)속성명 = function(){};
=> null을 대입하면 이벤트가 제거됨
<button id="btn1">실행확인</button>
<button id="btn2">실행확인</button>
<div id="area1" class="area"></div>
var area1 = document.getElementById('area1');
document.getElementById('btn1').onclick = function(){
area1.innerHTML += 'btn1이 클릭 ~ <br>';
console.dir(document.getElementById('btn1'));
};: btn1을 click하는 이벤트가 발생하면 실행할 함수
- 이벤트 제거
document.getElementById('btn2').onclick = function(){
// btn2가 클릭되면서 btn1의 이벤트를 제거
document.getElementById('btn1').onclick = null; // 이벤트 제거
area1.innerHTML += 'btn2를 클릭해서 btn1의 이벤트제거';
// 이벤트가 제거된 후 btn1을 클릭하면 아무일도 일어나지 않는다.
}(2) 인라인 이벤트 모델
요소 내부에 직접적으로 이벤트 속성을 제시해서 실행할 내용을 정의하는 방식
주로 script태그 내에 정의되어있는 함수를 호출하는 방법을 선호
<button onclick="document.getElementById('area2').innerHTML+='버튼클릭<br>'; alert('이벤트실행됨');">실행확인</button>
<div id="area2" class="area"></div>
<button onclick="test1();">실행확인</button>
<script>
function test1(){
document.getElementById('area2').innerHTML += '두 번째 버튼 클릭 <br>';
};
</script>요소 내부에 직접적으로 이벤트를 기술하면 실행에는 문제가 없지만
한 줄의 내용이 길어지고(가독성이 떨어짐) 복잡하므로 잘 쓰지 않음
(3) 표준 이벤트 모델(addEventListener)
- 브라우저마다 안되는 곳이 있음
[ 표현법 ]
이벤트를 걸고자하는 요소 객체.addEventListener('이벤트명', 이벤트핸들러 => 익명함수);
<button id="btn3">실행확인</button>
<script>
var btn3 = document.getElementById('btn3');
btn3.addEventListener('click', function(){
alert('표준 이벤트 모델 테스트');
});
// mouseenter : 버튼 안으로 포인터가 들어가는 순간 //hover와 비슷 =>
btn3.addEventListener('mouseenter', function(){
btn3.style.backgroundColor = 'orangered';
});
// mouseout : 버튼 밖으로 포인터가 빠져나가는 순간
btn3.addEventListener('mouseout', function(){
btn3.style.background = 'yellowgreen';
})- mouseenter : 버튼 안으로 포인터가 들어가는 순간
- mouseout : 버튼 밖으로 포인터가 빠져나가는 순간
12. 정규표현식
- 미리 스타일 부여
<style>
.area{
background-color: skyblue;
border: palegoldenrod;
height: auto;
color: tomato;
}
</style>정규표현식(Regular Expression : REGEX / REGEXP)이란,
특정 패턴을 가진 문자열을 찾거나 또는 찾아서 변경할 때 사용하는 형식 언어
정규표현식을 사용하면 문자열에 대해 특정 패턴 조건 검사를 하거나 또는 변경할 때
복잡한 조건을 제시할 필요없이 간단하게 처리 가능
자바스크립트 뿐만 아니라 자바/오라클 또는 다른 언어들에서도 사용가능
1) 정규표현식 객체 생성 및 정규표현식과 관련된 메소드들
<button onclick="test1();">정규표현식 버튼</button>
<div id="area1" class="area"></div>- 정규표현식 객체 생성 == 정규식 변수를 선언한다.
검색조건으로 삼고자하는 문자열 또는 패턴 제시
방법 1)
var regExp = new RegExp('lunch');방법 2)
var regExp2 = /lunch/;
* RegExp 객체에서 제공하는 메소드 => 정규표현식객체.메소드명(검사할 문자열);
- 정규식.test(문자열) : 문자열에서 정규식값과 일치하는 값이 있다면 true, 없다면 false 반환
- 정규식.exect(문자열) : 문자열에서 정규식값과 일치하는 값이 있다면 처음 매칭된 문자열을 반환, 없으면 null
* String 객체에서 제공하는 메소드 => 검사할문자열.메소드명(정규표현식객체)
- 문자열.match(정규식) : 문자열에서 정규식값과 "일치하는 값"을 찾아서 반환
- 문자열.search(정규식) : 문자열에서 정규식값과 "일치하는 값의 시작 인덱스 값"을 반환 / 일치하는게 없다면 -1
- 문자열.replace(정규식, 바꿀 값) : 문자열에서 정규식값과 일치하는 첫 번째 값을 바꿀 값으로 변경해서 반환
- 문자열.split(정규식) : 정규식에서 지정된 값을 구분자로 쪼개서 값들이 담겨있는 배열로 반환
==> 각자 제공하는 곳으로부터 메소드
- 비교할 문자열
var str1 = 'breakfast lunch dinner';
var str2 = 'javascript jquery ajax';- 정규식 메소드
var area1 = document.getElementById('area1');
//정규식메소드
area1.innerHTML += 'reExp.test(str1) : ' + regExp.test(str1) + '<br>'; //true
area1.innerHTML += 'reExp.test(str2) : ' + regExp.test(str2) + '<br>'; //false
area1.innerHTML += 'exec.test(str1) : ' + regExp.exec(str1) + '<br>'; //lunch
area1.innerHTML += 'exec.test(str2) : ' + regExp.exec(str2) + '<br>'; //null=> 결과값이 논리값인 경우 조건식으로 사용 가능 !
- 문자열 메소드
area1.innerHTML += 'str1.match(regExp) : ' + str1.match(regExp) + '<br>'; //lunch
area1.innerHTML += 'str1.search(regExp) : ' + str1.search(regExp) + '<br>'; //10
area1.innerHTML += 'str1.replace(regExp) : ' + str1.replace(regExp, '점심밥') + '<br>'; // breakfast 점심밥 dinner
area1.innerHTML += 'str1.split(regExp) : ' + str1.split(regExp) + '<br>'; //breakfast, dinner2) 메타 문자
메타 문자를 이용해서 정규식으로 "검색조건으로 삼을 특정 패턴"을 만들어서 제시 가능
문자열이 해당 정규식으로 제시한 특정패턴에 만족하는 지
=> test()통해 검사하거나, replace()을 이용해 치환
<button onclick="test2();">실행확인</button>
<div id="area2" class="area"></div>- 비교할 문자 regExp 문자열str
function test2(){
var area2 = document.getElementById('area2');
var regExp = /a/;
var str = 'javascript jquery ajax';area2.innerHTML += '/a/ : ' + regExp.test(str) + '<br>'; // true
area2.innerHTML += '/a/ : ' + str.replace(regExp, '(***)') + '<hr>'; // j(***)vascript jquery ajax* 기본적으로 replace는 치환할 때 일치하는 값들 중 첫 번째 값만 바꿔줌
< 메타 문자 >
(1) ^ : 시작을 의미 -> CSS속성선택자 ^=는 해당값으로 "시작"하는 경우
regExp = /^j/; //문자열이 소문자 j로 "시작"하는 경우
area2.innerHTML += '/^j/ : ' + regExp.test(str) + '<br>'; //true
area2.innerHTML += '/^j/ : ' + str.replace(regExp, '(***)') + '<hr>'; // (***)avascript jquery ajax(2) [] : []안에 있는 문자 중 하나로 존재할 경우를 의미
regExp = /[abc]/; //문자열 중에 a또는 b또는 c가 하나라도 존재할 경우
area2.innerHTML += '/[abc]/ : ' + regExp.test(str) + '<br>'; //true
area2.innerHTML += '/[abc]/ : ' + str.replace(regExp, '(***)') + '<hr>'; //j(***)vascript jquery ajax
//문자열의 시작값이 j또는 a또는 s인지
regExp = /^[jas]/;
area2.innerHTML += '/^[jas]/ : ' + regExp.test(str) + '<br>'; //true
area2.innerHTML += '/^[jas]/ : ' + str.replace(regExp, '(***)') + '<hr>'; //(***)avascript jquery ajax(3) $ : 끝을 의미 => CSS속성 선택자 중 $=는 해당 값으로 "끝"나는 경우였음
regExp = /x$/; //문자가 x로 끝나는 지 비교할 목적
area2.innerHTML += '/x$/ : ' + regExp.test(str) + '<br>' ;
area2.innerHTML += '/x$/ : ' + str.replace(regExp, '(***)') + '<hr>';
//시작값은 j이고 끝ㄴ값은 x인지
regExp = /^jx$/;
area2.innerHTML += '/^jx$/ : ' + regExp.test(str) + '<br>'; //false
//이 패턴을 맍고하는 문자열 오로지 'jx'뿐이기 때문에 false(4) . : 개행문자를 제외한 모든 문자를 의미(영문자, 숫자, 한글, 특수문자 등등)
(5) + : 한 글자 이상을 의미 (0글자 X)
(6) 시작부터 끝까지 오로지 숫자값으로 이루어진 경우
regExp = /[0123456789+]/; //숫자의 개수는 상관없는데 단 1개 이상이어야 함
regExp = /^[0-9]+$/; //0123456789를 0-9로표현가능
area2.innerHTML += '/^[0-9]+$/ : ' + regExp.test('1646516165465416516') + '<br>' //true
area2.innerHTML += '/^[0-9]+$/ : ' + regExp.test('4684e16554') + '<br>'; //false(7) a부터 z까지 a-z
: 시작부터 끝까지 오로지 영문자(소문자, 대문자)로만 이루어진 경우
regExp = /^[a-z]+$/; //문자열의 길이는 상관없음 단, 적어도 한 글자는 있어야 함(8) 시작부터 끝까지 오로지 영문자, 숫자로만 이루어진 경우
regExp = /^[a-zA-Z0-9]+$/;
area2.innerHTML += '/^[a-zA-Z0-9]+$/ : ' + regExp.test('javascript123') + '<br>'; //true
area2.innerHTML += '/^[a-zA-Z0-9]+$/ : ' + regExp.test('javascript123!') + '<br>'; //false(특수문자 존재)(9) 시작부터 끝까지 오로지 한글(자음, 모음, 결합)로만 이루어진 경우
regExp = /^[ㄱ-ㅎㅏ-ㅣ가-힣]+$/;
area2.innerHTML += '/^[ㄱ-ㅎㅏ-ㅣ가-힣]+$/ : ' + regExp.test('늉ㄴ유ㅜㅁ') + '<br>'; //true< 예제>
한국인 사용자에게 이름을 입력받고
유효한 이름을 입력했다면 잘했다고 알림창으로 띄워주고
이상한 이름을 입력했다면 못했다고 알림창으로 띄워주기
regExp = /^[가-힣]{2,}$/;
var name = prompt('이름을 입력해주세요.');
// console.log(name);
if(regExp.test(name)){
alert('잘했다');
}else{
alert('못했다.');
}
}3) 플래그 문자
- /정규표현식/ 뒤에 써 비교를 수행함
- 종류
(1) i : 대소문자를 구분하지 않고 비교를 수행하겠다.
(2) g : 문자열 내의 모든 패턴을 찾겠다(전역으로 비교하겠다).
(3) m : 여러 줄 비교를 수행하겠다.
<button onclick="test3();">실행확인</button>- 비교할 문자열 1
function test3(){
var str = "javaScript JQuery Ajax";- 정규표현식 1
var regExp = /a/;
console.log('/a/ : ' + str.replace(regExp, '(***)'));
//첫 번째 a
regExp = /a/g;
console.log('/a/ : ' + str.replace(regExp, '***'));
//모든 a
regExp = /a/ig;
console.log('/a/ : ' + str.replace(regExp, '(***)'));
//대소문자 관계없이 모든 A, a- 비교할 문자열 2
str = 'JavaScript\nJQuery\nAjax';- 정규표현식 2
regExp = /^J/;
console.log('/^J/ : ' + str.replace(regExp, '(***)'));
//첫번째 j
//(***)avaScript
// JQuery
// Ajax
regExp = /^J/g;
console.log('/^J/g : ' + str.replace(regExp, '(***)'));
//전역 j
//(***)avaScript
// JQuery
// Ajax
//여러줄인 경우 g, m 함께 사용
regExp = /^J/gm;
console.log('/^j/gm : ' + str.replace(regExp, '(***)'));4) 예제 - 정규표현식을 이용해서 주민번호 확인
주민번호 : <input type="text" placeholder="-를 포함해서 입력하세요." id="pno">
<button onclick="test4();">확인</button>- 비교할 문자열
function test4(){
//사용자가 입력한 값(input태그의 value속성의 값)
var value = document.getElementById('pno').value;- 1단계 : 6글자 - 7글자
. : 개행문자를 제외한 모든 문자중에 1개
var regExp = /^......-.......$/; //글자 수 지정- 2단계 : 숫자여야 함
var regExp = /^[0-9][0-9][0-9][0-9][0-9][0-9]-[0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/;* 참고 :메타문자
\d : 숫자(==[0-9])
\D : 숫자를 제외한 모든 문자
\w : 영문자, 숫자, _ (==[a-zA-Z9_])
\W : 영문자, 숫자, _를 제외한 모든 문자
\s : 공백문자 (스페이스바, 탭, 줄바꿈) (==[\t\n])
\S : 공백문자를 제외한 모든 문자
>> 메타문자로 바꾸면
var regExp = /^\d\d\d\d\d\d-[1-4]\d\d\d\d\d\d$/;* 참고 : 수량문자
+ : 최소한 1글자 이상
* : 0글자 이상(0글자도 가능)
? : 0글자 또는 1글자(2글자 이상은 불가)
{5} : 5글자
{2, 5} : 2글자 이상 5글자 미만
{2, } : 2글자 이상
{, 5} : 5글자이하
regExp = /^\d{6}-[1-4]\d{6}$/;- 3단계 : 생년월일
- 생년(두자리): \d{2} 아무숫자로만 2자리 채우기
그룹핑(경우1/경우2)
- 월(두자리) 앞자리가 0일경우엔 1~9까지 가능
앞자리가 1일경우엔 0~2까지 가능
(0[1-9]|1[0-2])
- 일(두자리) 앞자리가 0일 경우엔 1~9까지 가능
앞자리가 1또는 2일경우엔 0~9까지 가능
앞자리가 3일 경우 0~1까지 가능
0[1-9]|[1-2][0-9]|3[0-1])
regExp = /^\d{2}(0[1-0]|1[0-2])(0[1-9]|[0-9]|[1-4]\d{6})$/;12. 정규표현식 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<style>
form {
border : 1px solid lightsteelblue;
padding : 20px;
}
label{
color: gray;
font-size : 12px;
}
</style>
</head>
<body>
<br>
<form action="insert.me">
* 아이디 :
<input type="text" name="userId" id="userId" required> <br>
<label>첫 글자는 반드시 영문자로, 그리고 영문자, 숫자를 포함하여 총 4~12자로 입력하시오.</label>
<br><br>
* 비밀번호 :
<input type="password" name="userPwd" id="userPwd" required> <br>
<label>영문자, 숫자, 특수문자(!@#$%^)로 총 8~15자로 입력하시오.</label>
<br><br>
* 비밀번호 확인 :
<input type="password" id="userPwd2" required> <br>
<label>위의 비밀번호와 일치하게 입력하시오.</label>
<br><br>
* 이름 :
<input type="text" name="userName" id="userName" required> <br>
<label>한글로만 이루어져야 하며 2글자 이상으로 입력하시오.</label>
<br><br>
* 이메일
<input type="email" name="email" id="email"> <br>
<label>이메일 형식에 맞춰서 입력하시오.</label>
<br><br>
*취미
<input type="text" name="hobby" id="hobby" placeholder= "축구, 농구 야구 등" list="hobbyList"> <br>
<datalist id="hobbyList">
<option value="soccer">축구</option>
<option value="basketball">농구</option>
<option value="baseball">야구</option>
</datalist>
<br><br>
*거주지
<select name="address" id="addres">
<option value="namyangju">남양주</option>
<option value="seoul">서울</option>
<option value="incheon">인천</option>
</select>
<br><br>
<input type="submit" value="회원가입" onclick = "return validate();">
<input type="reset" value="취소">
</form>
유효성 검사 : 아이디, 비밀번호, 비밀번호 일치, 이름
input요소로부터 value속성값 뽑기
1) 아이디 검사
첫글자를 반드시 영문자로,
그리고 영문자, 숫자 총 4 ~ 12자로 입력하시오.
function validate(){
var userId = document.getElementById('userId');
var userPwd = document.getElementById('userPwd');
var userPwd2 = document.getElementById('userPwd2');
var userName = document.getElementById('userName');
var regExp = /^[a-zA-Z][a-zA-Z0-9]{3,11}$/;
if(!regExp.test(userId.value)){
alert('아이디를 다시 입력해주세요.');
userId.select();
return false;
}2) 비밀번호 검사
영문자(대소문자 포함), 숫자, 특수문자로 총 8~15자로 입력하시오.
특수문자 : !@#$%^
regExp = /^[a-zA-Z0-9!@#$%^]{8,15}$/;
if(!regExp.test(userPwd.value)){
alert('비밀번호를 다시 입력해주세요.');
return false;
}3) 비밀번호 일치
if(userPwd.value!=userPwd2.value){
alert('비밀번호가 일치하지 않습니다.');
return false;
}4) 이름 검사
regExp = /^[가-힣]{2,}$/;
if(!regExp.test(userName.value)){
alert('잘못된 값입니다.');
return false;
}
return true;'클라우드 융합 Full-stack 웹 개발자 양성과정 > HTML, CSS, JavaScript, j-Query' 카테고리의 다른 글
| j-Query - 탐회(순회메소드_조상, 자손, 동위)메소드, content영역 관련 메소드, 요소생성 및 제거, 추가적인 메소드 (0) | 2022.11.02 |
|---|---|
| j-Query - 개요, 기본선택자, 추가적인 선택자 (0) | 2022.11.01 |
| JavaScript - 개요, 데이터 입출력 (0) | 2022.10.24 |
| CSS - 화면구조잡기(기본, 실습, 상세구조, 세부구조), 실습 (0) | 2022.10.19 |
| HTML - 태그(영역, 하이퍼링크관련 태그), CSS - 선택자(기본, 기타, 우선순위), 스타일(글꼴, 텍스트, 목록, 영역, 테두리, 배경, 레이아웃, 화면꾸미기) (0) | 2022.10.19 |