어제까지 배운 내용 복습
HTML, CSS, JS -> 브라우저
데이터 저장 파일
~ML - 태그를 이용해서 데이터를 꺼내오기 위해 사용
<tag> data </tag> = <key>data</key>
id(한개), class(여러개)
HTML은 같은 태그를 여러번 사용 하기 때문에 구별과 선택을 하기 위한 속성이 필요하다.
보여지는 화면 중에서 원하는 데이터를 가져와야 할 경우가 많이 때문에 잘 활용하는게 좋다.
tag에는 변수와 메서드(이벤트와 함께)를 갖고 있다.
ex) onclick="처리문들";
: 처리문들을 onclick에 저장한다. click 이벤트가 발생하면 onclick에 저장되어있는 처리문을 찾아서 처리한다.
id, class, style ="key:value"
ex) js.tag.style.color = "red" red를 color에 저장한다.
자바스크립트는 브라우저의 동작이나 데이터 저장이나 처리를 화면에 보여주기 위해 사용하는 언어이다.
<div>data</div> : div.innerHTML = data
innerHTML을 사용하면 data를 <div> 태그 안에 데이터를 넣을 수 있다.
<input value="aaa" name="서버key" id="js나css"> input태그 안에 "aaa" 라는 데이터가 들어가 있다.
input.value = "bbb" value 값이 "bbb"로 바뀐다.
<textarea> - textarea.value
<select> - select.value
함수
- 출력 :
alert(data),console.log(data),document.write(data) - 변수 : 선언하지 않고 사용할 수 있다. 그래서 잘못된 변수명을 입력해도 만들어지기 때문에 오탈자를 찾기 어렵다.
var(=let),const- 상수, 선언과 동시에 값을 넣어야 한다. 변경 불가. - data 타입 :
"나'로 감싸면 문자열(string), 숫자(number) typeof타입 확인 연산자+연산 : 산술연산자, 문자열 이어붙이기==: 출력을 했을 때 결과가 같으면 같다라고 해준다. ex)10 == "10"->true===: 결과와 타입이 같아야 한다. ex)10 === "10"->false- 문자열 형태인 숫자로 산술연산을 하기 위해서는
number()를 사용한다.
if(true/false) {}; ~ else if(true/false){};
if(변수) - 숫자가 0이 아니면 true, 0이면 false. 문자열의 길이가 0이 아니면 true, 0이면 false.
JavaScript HTML DOM Elements
참고 : w3schools js_htmldom_elements
- id를 찾는 메서드 :
document.getElementById("id")- 한 개의 태그를 찾음 - class를 찾는 메서드 :
document.getElementByClassName("class")- 여러개의 태그를 찾음 - tag 찾는 메서드 :
document.getElementByTagName("tag")- 여러개 태그 - 배열
태그 - 배열[ ] : [인덱스], 길이
: 데이터가 여러개이기 때문에 반복문 처리를 해서 여러개의 태그를 한개씩 꺼내야 한다.
JS의 위치
아무곳에나 쓸 수 있지만 HTML과 같이 위에서 아래로 순서대로 실행된다.
그래서 tag가 아래에 있으면 찾지 못하고 null이 나온다.
만약에 위에 작성을 해도 찾을 수 있게 하기 위해서는 body부분에 onload이벤트 처리하면서 그 안에 작성하면 된다.
오늘 수업 내용
if
참고 : JavaScript if, else, and else if
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>condition</title>
<script type="text/javascript">
var data;
function ready() {
// js 위치가 input 태그의 위에 있으면 input 태그를 찾을 수 없기 때문에 null이 된다.
// 데이터가 null인 경우에는 오류가 나지 않지만 null인 데이터를 사용하려고 하면 오류가 난다.
data = document.getElementById("data");
alert(data);
// if(number) - 숫자가 0이면 false, 0이 아니면 true
if(0) alert("0이 아닙니다.");
else alert("0입니다.");
}
function checkData() {
var value = data.value;
alert("데이터입력 : " + value + ", 데이터타입 : " + (typeof value));
// if(string) - 길이가 0이면 false, 0이 아니면 true
if(value) alert("데이터가 있습니다");
else alert("데이터가 없습니다");
// data가 문자열인지 알아보고 싶다.
if(typeof value == "string") alert("문자열 입니다");
else alert("문자열이 아닙니다");
// 숫자를 입력하면 데이터 숫자로 변경되어 나오고 아니면 NaN(Not a Number) 이라고 나온다
alert(Number(value));
}
</script>
</head>
<!-- onload 처리를 해서 함수를 호출하면 찾을 수 있다. -->
<body onload="ready();">
데이터 입력 : <input id="data" onkeyup="checkData();">
</body>
</html>Loop
for of for in
참고 : JavaScript For Loop
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
for (i = 0; i <= 10; i++) {
console.log(i);
}
// setColor() 함수 선언 - body에 onload evernhandler 사용. 아래 body 안의 태그들을 찾을 수 있다.
function setColor() {
// 자바스크립트는 타입을 선언하지 않는다. 배열이 들어오면 배열이 되니까 배열이라고 따로 선언하지 않아도 된다.
// 결과가 배열이 나온다.
var redTexts = document.getElementsByClassName("redText");
// alert(redTexts); // 출력값 [object HTMLCollection]
// alert(redTexts.length); // 출력값 3
// 반복문 처리를 해서 각각 데이터에 대해서 sytle의 color를 red로 변경한다.
// for (i = 0; i < redTexts.length; i++) {
// redTexts[i].style.color = "red";
// }
// for of : 배열의 모든 데이터를 대상으로 처리하려고 하면 of를 사용
for (redText of redTexts) {
redText.style.color = "red";
}
// JSON (JavaScript Object Notation) - js의 객체 선언
// 속성-값 쌍(attribute-value pairs)
var obj = {no:10, name:"홍길동"};
// alert(JSON.stringify(obj)); // 출력값 {"no":10,"name":"홍길동"}
// for in
// obj의 모든 항목에 대해 콘솔창에 출력해보기 - JSON data의 키(항목이름)을 가져온다.
for (data in obj) console.log(data + " - " + obj[data]); // 출력값 no - 10 name - 홍길동
}
</script>
</head>
<!-- body onload : body 안의 내용이 다 오릳ㅇ되면 처리되는 처리문이 있다.
setColor() 함수 호출 -->
<body onload="setColor()">
JavaScript is the world's most popular <span class="redText">programming language.</span>
<br/>
JavaScript is <span class="redText">the programming language</span> of the Web.
<br/>
JavaScript is easy to learn.
<br/>
This tutorial will teach you <span class="redText">JavaScript</span> from basic to advanced.
</body>
</html>String
참고 : JavaScript String Methods
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var dataTag;
var jumin1, jumin2;
var str = "JAVA 개발자";
for (i = 0; i < str.length; i++) {
console.log(str.charAt(i)) // 출력값 'JAVA 개발자' - 한글자씩 줄바꿈해서 나옴
}
function ready() {
// dataTag(input tag)를 찾아서 dataTag 변수에 저장하는 처리
dataTag = document.getElementById("data");
// jumin1, jumin2(input tag)를 찾아서 jumin1과 jumin2에 저장하는 처리
jumin1 = document.getElementById("jumin1");
jumin2 = document.getElementById("jumin2");
}
function checkData() {
// input tag의 데이터 값에 공백을 제거해서 input tag의 데이터값으로 다시 저장
// 데이터를 가져온다
var data = dataTag.value;
// 앞 뒤 공백을 제거한다.
data = data.trim();
// input태그의 데이터값으로 다시 저장 (앞 뒤에 공백을 아예 입력하지 못하게 한다.)
dataTag.value = data;
// console에 데이터와 길이를 출력해본다.
console.log("[" + data + "] , " + "길이 : " + data.length);
}
function goJumin2() {
if(jumin1.value.length == 6) jumin2.focus();
}
</script>
</head>
<body onload="ready();">
데이터 입력 : <input id="data" onkeyup="checkData();"> <br/>
<!-- 주민등록번호 앞자리의 길이가 6이 되면 뒷자리로 자동 이동 시킨다. -->
주민등록번호 : <input id="jumin1" onkeyup="goJumin2();"> - <input id="jumin2">
</body>
</html>정규표현식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var num;
// 숫자에 해당되는 정규표현식 : /\d/;
// [] : 안에 하나를 선택해야 한다. + : 1개 이상 반복. * : 0개 이상 반복
// {시작, 끝} : 반복의 시작~끝. \d - 숫자. 비어 있으면 안된다.
// 시작하는 / 다음에 나오는 ^는 뒤에 나오는 데이터로 시작한다.
// 마지막 / 앞에 $ 바로 앞에 있는 데이터로 끝난다.
// 숫자로 시작해서 숫자로 끝나야 한다
var reg_digit = /^\d+$/;
// var reg_digit = /^[0-9]+$/;
// alert(reg_digit);
// 숫자 확인하는 함수
function checkNum() {
var numStr = num.value;
alert(numStr);
// 숫자인지 아닌지? 1. 정규표현식 사용. 2. 숫자 변환 Number() -> NaN
// reg_digit -= regEx 변수. numStr 정규표현식에 맞는지 확인하는 test()를 사용.
if(reg_digit.test(numStr)) {
// num의 값이 숫자이면 '숫자입니다' 경고
alert("숫자입니다.");
} else {
// 숫자가 아니면 num의 내용을 지우고 다시 입력할 수 있도록 커서를 num에 위치시킨다.
alert("숫자만 입력 하셔야 합니다.");
num.value = null;
num.focus();
}
}
</script>
</head>
<body onload="ready();">
숫자 입력 : <input id="number"> <button onclick="checkNum();">확인</button>
</body>
</html>