Dynamic Web Project: JavaScript
Folder : javascript
[ HTML 페이지에 결과 출력 ]
- HTML 페이지의 <body> 태그 안을 document(문서)라고 부른다.
Document document;
- <body> 안에 새로운 내용을 출력
document.write("출력할 내용");
- <body> 태그 안에 출력되는 내용이므로, 다른 HTML 태그를 포함하여 출력할 수 있다.
exma01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
document.write("안녕 자바스크립트!!");
</script>
</head>
<body>
<h1>Hello JavaScript!!</h1>
</body>
</html>
스크립트는 동작을 처리하기 위해서 쓰는 것
html이 다 뿌려지고 스크립트가 들어가기 때문에 body 태그로 내려오는 것이 더 맞다.
절차식이라 위에서 아래로 내려오는 것
스크립트는 body 태그 안에 !! 벗어나는 것은 절대 안된다.
[ 변수 ]
- 변수의 자료형은 값이 할당될 때 자동으로 결정된다.
- var, let, const으로 선언
//선언
var a;
var b;
→ 이거 굳이 안 해도 된다. / 들어오는 데이터에 따라 자료형이 할당된다. 그러므로 선언이 중요하지 않다.
//할당
a = 10;
b = 43.5;
exma02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
let num;
let msg;
num = 12345;
msg = 'Hello';
document.write(num + "<br>")
document.write(msg + "<br>")
</script>
</body>
</html>let은 자바의 로컬변수와 똑같다.
들어오는 데이터에 따라 자료형 정해진다.
한 줄만 쓸 때는 세미콜론 생략 가능
num = "aaa";
document.write(num + "<br>")
let exist = true; //boolean
document.write(exist + "<br>")
let value1 = null;
let value2;
document.write(value1 + "<br>");
document.write(value2 + "<br>"); //undefined
let - 지역변수, 구역단위로 살아있다.
exam02-let.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//지역변수, 구역단위로 살아있다.
let a = 100;
a = 250;
console.log(a)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//지역변수, 구역단위로 살아있다.
let a = 100;
a = 250;
console.log(a) //250
{
let a = 200;
console.log(a) //200
{
let a = 300;
console.log(a) //300
{
let a = 400;
console.log(a) //400
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//지역변수, 구역단위로 살아있다.
let a = 100;
a = 250;
console.log(a) //250
{
let a = 200;
console.log(a) //200
{
let a = 300;
console.log(a) //300
{
let a = 400;
console.log(a) //400
}
console.log(a) //300
}
console.log(a) //200
}
console.log(a) //250
</script>
</body>
</html>
var - 전역변수
exam02-var.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//전역변수
var a = 100;
a = 250;
console.log(a) //250
{
var a = 200;
console.log(a) //200
{
var a = 300;
console.log(a) //300
{
var a = 400;
console.log(a) //400
}
console.log(a) //400
}
console.log(a) //400
}
console.log(a) //400
</script>
</body>
</html>
const - 재할당이 안된다.(상수취급) / let하고 똑같은 구역 단위이다.
exam03-const.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//재할당이 안된다.(상수취급) / let하고 똑같은 구역 단위이다.
const a = 100;
//a = 250; - error
console.log(a) //250
{
const a = 200;
console.log(a) //200
{
const a = 300;
console.log(a) //300
{
const a = 400;
console.log(a) //400
}
console.log(a) //300
}
console.log(a) //200
}
console.log(a) //100
</script>
</body>
</html>
exam03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//산술 연산사
let sum = 25 + 36;
let sub = 25 - 36;
let mul = 25 * 36;
let div = 25 / 36; //0.6944444444444444
let mod = 25 % 36; //나머지
document.write("합 = " + sum + "<br>");
document.write("차 = " + sub + "<br>");
document.write("곱 = " + mul + "<br>");
document.write("몫 = " + div + "<br>");
document.write("나머지 = " + sum + "<br>");
//우선순위
let num = 2 + 3 * 5;
document.write("num = " + num + "<br>");
</script>
</body>
</html>
exam04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//대입 연산자
let num = 5;
num += 5; // num = num + 5, 10
document.write("num = " + num + "<br>");
num -= 3; // 7
document.write("num = " + num + "<br>");
num *= 4; // 28
document.write("num = " + num + "<br>");
num /= 5; // 5.6
document.write("num = " + num + "<br>");
num %= 5; // 나머지
document.write("num = " + num + "<br>");
</script>
</body>
</html>
exam05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//증감 연산자
let num = 5;
num++; //6
document.write("num = " + num + "<br>")
++num; //7
document.write("num = " + num + "<br>")
let num2 = num++; //후행
document.write("num = " + num + "  num2 = " + num2 + "<br>");
let num3 = ++num; //선행
document.write("num = " + num + "  num3 = " + num3 + "<br>");
let num4 = ++num2 * num3--;
document.write("num2 = " + num2
+ "  num3 = " + num3
+ "  num4 = " + num4 + "<br>");
</script>
</body>
</html>
prompt
exam06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//if
let score = prompt("당신의 점수 입력 : ");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//if
let score = prompt("당신의 점수 입력 : ");
let grade = null;
if(score >= 90)
grade = "A학점";
else if(score >= 80)
grade = "B학점";
else if(score >= 70)
grade = "C학점";
else if(score >= 60)
grade = "D학점";
else grade = "F학점";
document.write("당신의 점수는 " + score + "점 이므로 " + grade + "입니다.");
</script>
</body>
</html>
Math.ceil() : 소수점 올림, 정수 반환
Math.floor() : 소수점 버림, 정수 반환
Math.round() : 소수점 반올림, 정수 반환
toFixed() : 숫자에서 원하는 소수점 길이만큼만 반올림하여서 반환
parseInt() : 문자 -> 정수 "123" -> 123
parseFloat() : 문자 -> 실수 "45.3" -> 45.3
Number() : 문자 -> 정수&실수
Math.floor( )
exam07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//switch
let score = prompt("당신의 점수 입력 : ");
switch( Math.floor(score/10) ){
case 10:
case 9:
grade = "A학점";
break;
case 8:
grade = "B학점";
break;
case 7:
grade = "C학점";
break;
case 6:
grade = "D학점";
break;
default:
grafe = "F학점";
}
document.write("당신의 점수는 " + score + "점 이므로 " + grade + "입니다.");
</script>
</body>
</html>
JAVA - switch (int)(score / 10)
PL/SQL - trunc(score / 10)
JavaScript - Math.floor(score / 10)
let num = 85.9876543
console.log(num.toFixed(3)); //85.988, 반올림
console.log(num.toFixed(0)); //86, 반올림
let a = "1.7"
console.log(a + 3); //1.73
console.log(parseInt(a) + 3); //4, 반올림X
console.log(Math.floor(a) + 3); //4, 버림
console.log(Number(a) + 3); //1.7 + 3 = 4.7
console.log(~~(a) + 3); //Math.floor()와 비슷, 4
exam08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//반복문
let sum = 0;
for(let i=1; i<10; i++){
document.write("i = " + i + "<br>");
sum += i;
}//for
document.write("<h1>1부터 10까지의 합은 " + sum + "입니다.</h1>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//반복문
let sum = 0;
for(let i=1; i<10; i++){
document.write("i = " + i + "<br>");
sum += i;
}//for
document.write("<h3>탈출 i = " + i + "</h3>");
document.write("<h1>1부터 10까지의 합은 " + sum + "입니다.</h1>");
</script>
</body>
</html>
let가 지역변수로 잡혀있기 때문에 지역을 벗어나면 소멸해버리기 때문이다.
Uncaught ReferenceError: i is not defined
error가 났다가 화면에는 표시되지 않는다.
F12(개발자 도구)에서 확인하면 error를 볼 수 있다.
=> 해결 방법은 let i를 for문 위에서 선언하거나 또는 var i로 바꾼다.
- var i로 바꾼다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//반복문
let sum = 0;
for(var i=1; i<10; i++){
document.write("i = " + i + "<br>");
sum += i;
}//for
document.write("<h3>탈출 i = " + i + "</h3>");
document.write("<h1>1부터 10까지의 합은 " + sum + "입니다.</h1>");
</script>
</body>
</html>
- let i를 for문 위에서 선언
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//반복문
let sum = 0;
let i;
for(i=1; i<10; i++){
document.write("i = " + i + "<br>");
sum += i;
}//for
document.write("<h3>탈출 i = " + i + "</h3>");
document.write("<h1>1부터 10까지의 합은 " + sum + "입니다.</h1>");
</script>
</body>
</html>
함수()
어떤 기능을 구현해놓은 명령어들의 집합
함수의 사용방법은 "정의"와 "호출"의 두 부분으로 나뉜다.
호출한 함수는 반드시 호출한 곳으로 되돌아온다.
함수를 쓰면 시간이 더 걸리지만
그럼에도 코드가 중복되는 것을 막기위해서 함수를 쓴다.
프로그램이 너무 크면 메모리에 들어갈 수 없으므로 함수단위로 자른다.
함수단위로 메모리가서 수행하고 처리가 끝나면 빠져나오고 이런 느낌~
(1) 정의
function 함수이름() { → 구현부
명령문;
}
자바 - public void 메서드명( ) {
}
(2) 호출
함수이름();
함수는 가서 처리하고 끝내면 돌아온다. → 수행시간이 길어진다.
exam09.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function sayHello() { // 정의, 구현
document.write("<h1>안녕하세요.</h1>");
document.write("<h1>자바스크립트</h1>");
}
sayHello(); //호출
sayHello();
</script>
</body>
</html>
exam10.html - function이라는 키워드만 쓰고 자료형을 쓰지 않는다는 것 !!
JAVA → public void sub(int x) {
JS → function sub(x) {
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function sub(x) { //정의, 구현
var y = x + 1;
document.write("<h1>" + y + "</h1>");
}
sub(5); //호출
sub(10);
sub(2.5);
</script>
</body>
</html>
자료형이 없으므로 어떤 값이던간에 숫자형태로 받아서 결과를 찍어낸다.
exam11.html
JAVA → public int f (int x, int y) {
JS → function f(x, y)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function f(x, y) {
var z = x + y;
if(z < 10) {
return; //함수를 벗어나라
}
return z; //반환
}
let a = f(2,1);
document.write("<h3>" + a + "</h3>"); //undefined
</script>
</body>
</html>z가 3으로 10보다 작으니까 return 돼서 아무값도 없이 반환되므로 밑에와 같은 결과가 나온다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function f(x, y) {
var z = x + y;
if(z < 10) {
return; //함수를 벗어나라
}
return z; //반환
}
let a = f(2,1);
let b = f(5,7);
let c = f(10.9, 5.4);
let d = f("사과", "딸기");
document.write("<h3>" + a + "</h3>"); //undefined
document.write("<h3>" + b + "</h3>"); //12
document.write("<h3>" + c + "</h3>"); //16.3
document.write("<h3>" + d + "</h3>"); //사과딸기
</script>
</body>
</html>
[ 내장함수 ]
1. eval(문자열) : 문자열을 수식으로 변환 ex) eval("25+3")
2. Number(문자열) : 문자열을 숫자(정수, 실수)로 변환
3. parseInt(문자열) : 문자열을 정수로 변환
4. isNaN(문자열) : 문자열이 숫자형식이 아니면 true, 숫자형식이면 false -> Not-A-Number(숫자가 아님)
5. alert(문자열) : 문자열을 대화상자로 출력
6. confirm(문자열) : 문자열을 확인/취소 대화상자로 출력
7. prompt(문자열) : 문자열이 제목으로 표시되는, 값을 입력받기 위한 대화상자 호출
exam12.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
document.write("*** eval 내장함수 ***<br>");
var str = "100 + 1";
document.write(str + "<br>");
var result = eval("100 + 1"); //문자열 => 수식, "100 + 1" => 100 + 1
document.write(result + "<br><br>");
</script>
</body>
</html>
Number(문자열) : 문자열을 숫자(정수, 실수)로 변환
parseInt(문자열) : 문자열을 정수로 변환
document.write("*** Number, parseInt 내장함수 ***<br>");
var value1 = "100";
var num1 = Number(value1); //100
var num2 = parseInt(value1); //100
var r1 = value1 + 1; //"100" + 1
var r2 = num1 + 1; //100 + 1
var r3 = num2 + 1;// 100+ 1
document.write("r1=" + r1 + "<br>"); //1001
document.write("r2=" + r2 + "<br>"); //101
document.write("r3=" + r3 + "<br>"); //101
Number(문자열) : 문자열을 숫자(정수, 실수)로 변환
parseInt(문자열) : 문자열을 정수로 변환 - 반올림 안 하고 소수점 밑은 다 잘라버림.
var value2 = "100.6";
var num3 = Number(value2); //100.6
var num4 = parseInt(value2); //100, 반올림X
var num5 = parseFloat(value2);//100.6
var r4 = num3 + 1;
var r5 = num4 + 1;
var r6 = num5 + 1;
document.write("r4=" + r4 + "<br>"); //101.6
document.write("r5=" + r5 + "<br>"); //101
document.write("r6=" + r6 + "<br>"); //101.6
exam13.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var a = Number("a");
document.write("a = " + a + "<br>"); //NaN (Not a Number)
</script>
</body>
</html>
숫자 형식이 아니다. Not a Number
var sum = a + 1; //NaN + 1
document.write("sum = " + sum + "<br>"); //NaN
결합으로 된다.
var str = a + "str"; //NaN + str
document.write("str = " + str + "<br>"); //NaNstr
var v1 = "가나다라";
var v2 = "123456";
var is_num1 = ! isNaN(v1); //v1은 숫자의 형식이 아닙니까? !true = false
var is_num2 = ! isNaN(v2); //v1은 숫자의 형식이 아닙니까? !false = true
if(is_num1)
document.write(v1 + "은(는) 숫자입니다. <br>");
else
document.write(v1 + "은(는) 숫자가 아닙니다. <br>");
if(is_num2)
document.write(v2 + "은(는) 숫자입니다. <br>");
else
document.write(v2 + "은(는) 숫자가 아닙니다. <br>");
function sumInt(x, y){
var isStrX = ! isNaN(x); //"a"는 숫자가 아니므로 true -> false
var isStrY = ! isNaN(y); // 1은 숫자이므로 false -> true
if(! isStrX || ! isStrY){ //true || false -> true
return "숫자 형태이거나 숫자값이 전달되어야 합니다.";
}
var result = parseInt(x) + parseInt(y); // 1+2=3
return result;
}
document.write(sumInt("a", 1) + "<br>"); //숫자 형태이거나 숫자값이 전달되어야 합니다.
document.write(sumInt("1", "2") + "<br>"); //3
document.write(sumInt(100, "5.6") + "<br>"); //105
document.write(sumInt(-1, "-100") + "<br>"); //-101
if문에서 ! isStrX가 이미 true이므로 isStrY는 실행안된다.
parseInt는 뒤에 소수점 다 버린다는 것 체크 !!
exam14.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var user_id = prompt("아이디를 입력하세요.", "hong");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var user_id = prompt("아이디를 입력하세요.", "hong");
if(user_id != ""){
alert("안녕하세요. " + user_id + "님");
if(confirm("정말 로그아웃 하시겠습니까?")){
alert("로그아웃");
}else
alert("로그아웃 취소");
}//if
</script>
</body>
</html>
confirm은 true / false만 return한다.
이벤트 처리
- 특정한 상황이 발생했을 때, 사용자가 정의하는 특정한 동작(함수)들을 호출되도록 하는 것.
- Javascript를 사용하는 이유는 <body> 안의 어떠한 태그를 사용자의 이벤트에 반응하도록 제어하기 위함이다.
(1) 이벤트 종류
1. onBlur - 문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 사라질 때
2. onClick - 링크, 이미지맵 영역, 폼 요소가 클릭되었을 때
3. onFocus - 문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 놓였을 때
4. onLoad - 이미지, 문서, 프레임이 로드될 때(읽을 때)
5. onMouseOver - 태그의 요소 위로 마우스 커서가 들어갈 때
6. onMouseOut - 태그의 요소 위에서 마우스 커서가 빠져나갈 때
(2) 제어대상 지정
- 태그의 id로 제어할 특정 태그를 지정한다.
document.getElementById("아이디") 로 자바스크립트로 태그를 가져온다.
(body 태그에서 가져와라 (모든 태그의 부모는 Element) 모든 태그들 중에서 id가 "아이디"인거 가져와라)
exam15.html
<script type="text/javascript" defer>
function printResult(){
}
</script>
defer을 적으면 수행 순서를 나중에 하게 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>10 + 50 = <span id="question">?</span></h1>
<input type="button" value="결과보기" onclick="printResult()" />
<script type="text/javascript">
function sum(x, y){
return x + y;
}
function printResult(){
var result = sum(10, 50);
//<span> 태그 얻어오기 // DOM 문법
var myTag = document.getElementById("question"); //<body> 태그 안에서 id가 question인 태그를 가져와라!
alert(myTag);
}
</script>
</body>
</html>
<span>태그의 주소값을 가져온다.
alert(myTag.tagName); //대문자로 가져온다 SPAN
myTag.innerText = result;
myTag.innerText
myTag.innerText = "<font color='red'>" + result + "</font>";
myTag.innerHTML
myTag.innerHTML = "<font color='red'>" + result + "</font>";
exam16.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 onmouseover="showResult()" onmouseout="hideResult()" style="border: 1px solid red">
10+ 50 = <span id="question">?</span>
</h1>
<p>결과를 보시려면 수식 위에 마우스를 올리세요.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 onmouseover="showResult()" onmouseout="hideResult()" style="border: 1px solid red">
10 + 50 = <span id="question">?</span>
</h1>
<p>결과를 보시려면 수식 위에 마우스를 올리세요.</p>
<script type="text/javascript">
function sum(x, y){
return x + y;
}
function showResult(){
var result = sum(10,50);
var myTag = document.getElementById("question");
myTag.innerText = result;
}
function hideResult(){
document.getElementById("question").innerText = "?";
}
</script>
</body>
</html>
'HTML CSS JS' 카테고리의 다른 글
| DAY 35 - JS - 템플릿리터럴 / 연산자 / 화살표함수 / 시간 / onclick / history (2024.08.21) (0) | 2024.08.21 |
|---|---|
| DAY 34 - JS - getElementById / getElementsByClassName / querySelector / querySelectorAll (2024.08.20) (0) | 2024.08.20 |
| DAY31, 32 - 페이지 만들기 코드 복습 - main.css (4) | 2024.08.18 |
| DAY31, 32 - 페이지 만들기 코드 복습 - index.html (0) | 2024.08.18 |
| DAY31, 32 - 페이지 만들기 코드 복습 - reset.css (0) | 2024.08.18 |
