728x90
이번에는 자바의 변수의 입력과 출력, Math, eval(), 사용자 정의 함수에 대해서 정리하겠습니다.
1. 변수 입력과 출력 : prompt(), document.write, alert
- 사용자로부터 변수를 입력받는 방법은 prompt() 함수를 사용하는 것이다. 해당 함수를 사용하면 얼럿창이 뜨면서 값을 입력할 수 있게 된다.
- 입력받은 값 혹은 변수를 출력하기 위해서는 아래 3가지 방법을 사용 할 수 있다
- document.write 는 바로 body 부분에 출력 가능하다
- alert 은 말 그대로 경고창 뜨는 그곳에 값이 출력된다 → 주로 입력받은 후 해당 값이 맞는지 아닌지 true 면 ~~하고 false 면 ~~하는 등의 조작이 가능할듯?
- console.log 는 개발자 도구에 있는 콘솔 창에 값을 출력한다. 테스트 시에는 가장 편하고 좋은 코드일듯?
<!DOCTYPE html>
<html>
<head>
<script>
// 사용자 입력
var n1 = prompt("첫번째 입력값");
var n2 = prompt("두번째 입력값");
// 문자를 숫자로 바꿔주는 함수
var n3 = parseInt(n1)+ parseInt(n2);
// 출력 1. document.write 사용
document.write("<h1>입력한 값의 합 : "+n3+"<h1>");
// 출력 2. alert() 사용
alert(n3);
// 출력 3. console.log() 사용
console.log("두 수의 합은? : "+n3);
</script>
</head>
<body>
</body>
</html>
2. 사용자 정의 함수 - function
- 자바 스크립트에서도 java 와 동일하게 사용자 정의 함수를 만들 수 있다. ⇒ 일종의 메소드
- 이러한 함수는 보통 html body 태그 내에서 onclick=”함수명()” 을 사용하여 클릭 시 해당 함수가 실행되도록 연결한다 ⇒ Jframe 의 mouseClicked 하면 함수로 이벤트 처리하는 것처럼
- 사용자 정의 함수 만들기
- 자바와 공통점은 매개변수를 줄 수 있다는 점이고, 다른점은 void 여부에 상관없이 function 로 만든다.
- function 함수명(){ 처리할 코드; }
<!DOCTYPE html>
<html>
<head>
<script>
// 사용자 정의 함수 - function 함수명(){ 처리해야할 코드; }
function click1(){
console.log("2번 출력입니다");
}
function nop(){
for(var i=5;i>=0;i--){
console.log("폭파 "+i+"초 전");
}
}
</script>
</head>
<body>
<!-- onclick=함수명() 을 통해서 클릭 시 해당 함수를 실행하도록 함 -->
<input type="button" value="출력1" onclick="print()">
<input type="button" value="출력2" onclick="click1()">
<input type="button" value="dont click" onclick="nop()">
</body>
</html>
1) 사용자 정의 함수 + for 문 + 사용자 값 입력을 활용한 예시
<html>
<head>
<script>
function printDan(){
var n = prompt("몇 단을 출력하시겠습니까?");
for(var i=1; i<10; i++){
console.log(n+" * "+i+" : "+i*n);
}
}
var n = 0;
function run(){
n+=1;
console.log(n);
}
</script>
</head>
<body>
<input type="button" value="n 단 출력버튼" onclick="printDan()">
<input type="button" value="+1 버튼" onclick="run()">
</body>
</html>
2) 예시 2번
<html>
<head>
<script>
function sum(){
var n = parseInt(prompt("얼마까지 누적할까요? "));
var sum = 0;
for(var i=1; i<=n; i++){
sum += i;
}
console.log("1부터 "+n+" 까지의 누적합은 : "+sum);
document.writeln("최종 누적 합 : "+sum);
}
function sum2(){
var n = prompt("몇 번 누적할까요? ");
var sum = 0;
for(var i=0; i<n; i++){
sum += parseInt(prompt(i+"번째 누적"));
}
console.log("최종 누적 합 : "+sum);
}
</script>
</head>
<body>
<input type="button"value="출력" onclick="sum()">
</body>
</html>
3. Math 다루기
- Math 클래스를 사용하면 자바와 동일하게 랜덤, 제곱근, 원주율 등등을 구할 수 있다
<html>
<head>
<style>
img{
width: 300px;
height: 500px;
}
</style>
</head>
<body>
<img src="../images/movie_image_1.jpg" id="poster" alt="">
<script>
// id 가 poster 인 엘리먼트 객체
var img = document.getElementById("poster");
// img 의 정보 콘솔에 출력
console.log(img);
console.dir(img);
console.log(img.src);
// refresh 시 매번 새로운 이미지가 나오게
// 1. 정수 랜덤값 생성
var ran1 = parseInt(Math.random()*6)+1;
// 혹은
var ran2 = Math.floor(Math.random()*10+1);
console.log(ran2);
// 2. 랜덤값을 이용해서 이미지 경로 수정
var RanimgScr = "../images/movie_image_"+ran1+".jpg";
img.src = RanimgScr;
</script>
</body>
</html>
4. eval() 함수
- eval 함수는 되게 특별한 함수 중 하나이다.
- 쉽게 생각하면 문자열을 식으로 만들어서 해당 식을 계산해주는 함수
- 예를 들어서 meg = “3*2” 라는 문자열이 들어가있을 때 이걸 eval(msg) 에 넣는다면
- 3*2 가 하나의 식이 되어서 계산후 결과가 출력된다
- 자바에서는 생각도 못한 미친 함수
<script>
// function ss(){
// eval()
// 변수를 javascript 의 함수나 연산자처럼 사용하는 함수
var msg = "3*2";
console.log(msg);
var data = eval(msg);
console.log(data);
// }
</script>
'JavaScript' 카테고리의 다른 글
| 데이터 전달의 꽃 AJAX 다루기 - JS, JQuery, jsp(feat. 실시간 아이디 중복검사) (1) | 2022.05.12 |
|---|---|
| JavaScript 기본기 익히기 (3) : html에서 값 가져오기, form 값 가져오기,객체 다루기 (0) | 2022.05.02 |
| JavaScript 기본기 익히기 (1) : 변수 선언, 배열, 제어문, 문자열 (0) | 2022.04.23 |
댓글