개발/JavaScript

JavaScript / 입출력(document.write, prompt, alert)

코인아님 2023. 2. 10. 14:55

자바스크립트는 자바랑 많이 비슷한 듯 하지만 비슷하지 않다,,, 생각보다 어렵다!

 

document.write

 

자바로 따지면   System.out.print  이다! 

document.write("들어갈 문자!")
document.write("들어갈 문자!")

요렇게 줄바꿈이 되지 않고 옆으로 출력되게 된다. 만약 줄바꿈을 하고싶다면?

document.write("들어갈 문자!", "<br>")
document.write("들어갈 문자!")

요렇게 줄 바꿈 하고싶은 곳에 "<br>" 을 적어주면 된다! println의 ln역할을 해준다고 보면 될 듯!

만약 변수를 출력하고 싶다면

var age = 20
var nickname = "코린이"
document.write("제 나이는" + age, "<br>")
document.write(nickname , " 코인아님")

'+' 를 사용해도 되고 ',' 를 사용해도 된다! 만약 변수가 2000개면 +나 ,를 2000번 써야하는데

그럴 때 사용하는것이 백틱, 자바로 따지면 printf같은 것이 있다!

document.write(`제 나이는${age} <br> ${nickname} 코인아님`)

`${변수명}` 이렇게 써주는 것이다.

`는 문자열을 쓸 때 쓰는 따옴표 ' 가 아니라키보드의 1 왼쪽에 물결 누를 때 쓰는 그 것이다!

헷갈리지 않도록 주의하자!

 

prompt

 

자바의 Scanner처럼 사용자에게 입력받는 것을 한 번 해보자! prompt를 이용해서 사용자에게 값을 입력받을 수 있는데, prompt가 무엇일까!

웹사이트에 이렇게 들어갔을 때 가운데에  뜨는 이 것이 프롬프트이다! 사용자의 명령을 입력받겠다! 라고 생각하면 될 듯!

prompt("나이를 입력하세요")

요렇게 나이를 입력받을 수 있고, 만약에 그 것을 변수로 저장하고싶다면

var age = prompt("나이를 입력하세요")
document.write(age)

이렇게 사용자가 입력한 값이 변수 age에 저장되는 것을 볼 수 있다.

prompt로 학생의 평균값을 구할 수도 있다!

코린이의 국어, 영어, 수학, 과학의 점수 평균을 구한다면

var sum = 0;
var sub = ['국어', '영어', '수학', '과학']

for(var i = 0; i < sub.length; i++){
    var score = prompt(sub[i] + "점수를 입력하세요")
    score = parseInt(score)
    sum += score
}
var avg = sum / sub.length
document.write(avg)

요렇게 할 수 있다. 어라 근데 score의 parseInt는 무엇일까! 바로 자바의 Integer.parseInt("문자열")과 같은 것이다!

prompt로 받은 문자들은 String형으로 저장되어 들어오는데, 그 것을 int형으로 형변환 해줘서 사용해야 한다.

 

alert

 

alert는 말그대로 알림창을 띄운다고 생각하면 된다. 별건 없다. 그냥 확인버튼 하나 딱 나오는 놈이 나온다!

alert("안녕하세요")

 

confirm

 

컨펌받는다고 하지 않는가? 확인 / 취소 를 누를 수 있는 것이 confirm이다. 

var name = confirm("코린이입니까?")
document.write(name)

confirm은 boolean의 형태인데, 확인을 누르면 true를, 취소를 누르면 false가 된다.

나는 코린이가 맞기때문에 확인을 눌러보겠다.

요렇게 true가 뜨게 된다!

var name = confirm("코린이입니까?")
if(name === true){
    document.write("코린이 환영해!")
}else{
    var who = prompt("이름을 입력하세요")
    document.write(who + " 환영해!")
}

요런식으로 true가 아니면 사용자의 입력을 받아서 환영문구를 띄울 수도 있다!

반응형