재밌는 이벤트의 세계, JavaScript
HTML 태그안에 출력되는 내용으로, 다른 HTML 태그를 포함하여 출력할 수 있어요.
<script> document.write(//출력내용); </script>
<script>
document.write("<h1>안녕하세요.</h1>");
document.write(1 + 1);
document.write("<ul><li>HTML</li><li>CSS</li></ul>");
document.write("반갑습니다. " + "Hello" + "<br/>");
document.write("1" + 1 + "<br/>");
document.write("1" + "1" + "<br/>");
</script>
prompt는 입력을 받을 수 있는 입력창이에요.
<script> document.write(//출력내용); </script>
<script>
var id = prompt("아이디를 입력하세요.");
document.write(id);
</script>
<script> // 함수의 선언 function 함수명(){ // 동작할 구문 } // 함수의 호출 함수명(); </script>
<script>
function sayHello(){
document.write("<h1>안녕하세요.</h1>");
document.write("<h1>자바스크립트.</h1>");
}
sayHello();
sayHello();
</script>
<script>
// 자바스크립트 에서는 데이터타입을 var로 통일시키기 때문에, 매개변수의 갯수만 명시해주면 된다.
function f( x ){
var y = x + 1
document.write("<h1>" + y + "</h1>");
}
function f2( x, y ){
var z = x + y;
document.write("<h1>" + z + "</h1>");
}
function f3( x, y ){
return x + y;
}
var a = f3(1, 2);
// 매개변수 세번째부터 무시가 된다.
var b = f3(2, 10, 6);
document.write("<h1>a : " + a + "</h1>");
document.write("<h1>b : " + b + "</h1>");
document.write("<h1>-----------------------------------</h1>");
f2(2, 5);
// 출력결과 : NaN
f2(5);
// 매개변수 세번째부터 무시가 된다.
f2(2, 5, 7, 3, 1);
document.write("<h1>-----------------------------------</h1>");
f(5);
f(7);
f(10);
f("javascript");
// 10은 무시가 된다.
f(5, 10);
// 출력결과 : NaN
f();
</script>
하나의 함수 안에서 다른 함수를 호출 할 수 있어요.
<script>
function sum(x, y){
var z = x + y;
return z;
}
function printResult(x, y){
var result = sum(x, y);
document.write("<h1>" + result + "</h1>");
}
printResult(7, 10);
</script>
주어진 문자열을 수식으로 변환하여 리턴하는 함수에요.
<script>
var a = "1 + 1" ;
var b = 1 + 1 ;
var c = eval("1 + 1");
document.write("<h1>" + a + "</h1>");
document.write("<h1>" + b + "</h1>");
document.write("<h1>" + c + "</h1>");
</script>
<script>
var v1 = "가나다라";
var v2 = "12345";
var is_num1 = !isNaN(v1);
var is_num2 = !isNaN(v2);
if( is_num1 ){
document.write("<h1>" + v1 + " 은(는) 숫자 입니다.</h1>");
} else{
document.write("<h1>" + v1 + " 은(는) 숫자가 아닙니다.</h1>");
}
if( is_num2 ){
document.write("<h1>" + v2 + " 은(는) 숫자 입니다.</h1>");
} else{
document.write("<h1>" + v2 + " 은(는) 숫자가 아닙니다.</h1>");
}
</script>
<script>
// 만약 아무런 값도 입력되지 않았거나 사용자가 취소 버튼을 눌렀다면, 처음 설정한 "" 빈 문자열이 리턴된다.
var user_id = prompt("아이디를 입력하세요.", "");
if( user_id != "" ){
alert("안녕하세요. " + user_id + "님");
var result = confirm("정말 로그아웃 하시겠습니까?");
if( result ){
alert("로그아웃 되셨습니다.");
} else {
alert("로그아웃이 취소되었습니다.");
}
}
</script>
출처
https://media.giphy.com/media/qqtvGYCjDNwac/giphy.gif
https://media.giphy.com/media/26tPplGWjN0xLybiU/giphy.gif