스포츠마케터의 초보 개발자 도전기
HTML / CSS / JS/ jQuery study 06 본문
ex001_js_write
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트의 출력구조</title>
<script>
/**/
//자바스크립트를 사용하기 위한 영역
//document(Document Object Model : DOM객체) -> body
document.write("hello javascript<br>");
document.write('hello javascript' + '<br>');
document.write(1+1 + "hello" +1 +1 + "<br>");
document.write('안녕', 100, '<br>');
document.write('hello'+'world', 'java','<br>');
document.write(1,1+1,'<br>');
//'자바'의 정석
document.write("'자바'의 정석<br>");
//"자바"의 정석
document.write('"자바"의 정석<br>');
//"자바"의 '정석'
document.write('"자바"의', "'정석'<br>");
</script>
<style>
</style>
</head>
<body>
나는 body입니다.
</body>
</html>
ex002_valueType
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
//자바스크립트의 자료형들
//var, let, const
//var는 같은 변수 값 사용시 오류를 잡을 수 없다
var a = 10;
var a = "안녕";
document.write('a :', a);
document.write('<hr>');
//let 가장 많이 씀
let b = 15;
let c = true;
document.write('b:', b + " / " + 'c:', c);
document.write('<hr>');
//const 상수값 (못바꿈)
const d = 100;
//d = 101;
document.write("d : ", d);
</script>
</head>
<body>
</body>
</html>
ex003_operator (연산자)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연산자</title>
<script>
let a = 10;
let b = 3;
let result;
result = a + b;
document.write(result,"<br>");
result = a / b;
document.write(result,"<br>");
result = a / b;
document.write(result.toFixed(2),"<br>");
document.write(result.toFixed(0),"<br>");
result = a % b;
document.write(result,"<br>");
document.write("<hr>");
result = a > b;
document.write(result + "<br>");
result = a == b;
document.write(result + "<br>");
result = a != b;
document.write(result + "<br>");
document.write("<hr>");
a += b;
document.write(a + "<br>");
a = 10;
a /= b;
document.write(a + "<br>");
document.write(a.toFixed(2) + "<br>");
document.write("<hr>");
//과수원이 있다.
//과수원에서 하루에 생산되는 과일의 갯수는
//사과 5개, 오렌지 10개, 배3개이다.
//과수원에서 하루데 생산되는 과일의 총 갯수를 출력하고
//시간당 전체과일의 평균 생산 갯수를 출력
//---------------
//하루 생산량 : 18개
//시간당 생산량 : 0.75개
let apple = 5;
let orange = 10;
let pear = 3;
let totalPerDay = apple + orange + pear;
let totalPerHour = totalPerDay/24;
document.write("하루 생산량 : " + totalPerDay + "개<br>");
document.write("시간당 생산량 : " + totalPerHour.toFixed(2) +"개<br>");
document.write("<hr>");
</script>
</head>
<body>
</body>
</html>
ex004_operator
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
let n1 = 10;
let n2 = 20;
document.write(++n1 + "<br>");
document.write(n2-- + "<br>");
document.write("<hr>");
let gender = prompt("당신의 성별?");
let age = prompt("당신의 나이?", 0);
let result = age >= 20 && age <=30 && gender == '여자';
document.write(result + "<br>");
result = age >= 20;
document.write(result + "<br>");
//prompt로 받은 값은 무조건 문자열 구조
result = age + 10;
document.write(result + "<br>");
//prompt로부터 넘겨받은 데이터가 숫자형식이라면
//부등호, -, *, /, %의 연산은 문제없이 처리된다.
//그러나 넘겨받은 데이터가 문장형식이라면
//-, *등의 연산자는 사용할 수 없다.
</script>
</head>
<body>
</body>
</html>
ex005_operator
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
/*국어, 영어, 수학 성적을 prompt로 입력 받는다
세 과목의 총점과 평균을 출력*/
let korean = prompt("국어성적");
let english = prompt("영어성적");
let math = prompt("수학성적");
let sum = Number(korean) + Number(english) + Number(math);
let avg = sum/3;
document.write(sum + "<br>");
document.write(avg.toFixed(2) + "<br>");
</script>
</head>
<body>
</body>
</html>
ex006_operator
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
let num1 = 30;
let num2 = 20;
num1 <= num2 ? document.write("참") : document.write("거짓");
document.write("<hr>");
let res = num1 >= num2 ? "참" : false;
document.write(res);
document.write("<hr>");
//타입이 따로 정해져 있지 않은 document... 코드는
//res 등의 변수에 대입될 수 없으므로 '어떤자료형인지 알 수 없다'의 의미인 undefined를 가져 온다.
res = num1 <= num2 ? 100 : document.write("나는 거짓");
document.write(res);
//alert() : 경고창
num1 <= num2 ? alert("num1이 작습니다") : alert("num1이 큽니다");
</script>
</head>
<body>
</body>
</html>
ex007_if
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
/*키보드에서 국어, 영어 점수를 입력받고,
두 과목 모두 80점 이상 이라면 합격, 그렇지않다면 불합격을 출력*/
let kor = Number(prompt("국어")); //Number 없어도 부등호는 자동 연산 가능
let eng = Number(prompt("영어"));
if(kor >= 80 && eng >= 80) {
document.write("합격");
}else{
document.write("불합격");
}
</script>
</head>
<body>
</body>
</html>
ex008_for
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
/*for문을 통해서 1 ~ 10까지 값을 화면에 출력*/
for(let i = 1; i <= 10; i++){
document.write(i," ");
}
document.write("<hr>");
for(let i = 6; i > 0; i--){
document.write("<h"+i+">" + i + "자바스크립트"+"</h"+i+"> <br>");
}
document.write("<hr>");
document.write("<ul>")
for(let i = 0; i <= 4; i++){
document.write("<li>" + "메뉴" + i +"</li>");
}
document.write("</ul>");
</script>
</head>
<body>
</body>
</html>