-
반응형
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> function sub1() { var s = prompt("수식을 입력 하세요", ""); // 3+5 var result = eval(s); alert(s + "=" + result); } function sub2() { if(confirm("삭제 하시겠습니까 ?")) { alert("삭제 했습니다."); } } </script> </head> <body> <h3>prompt와 confirm</h3> <p> <button type="button" onclick="sub1()">계산기</button> <button type="button" onclick="sub2()">삭제</button> </p> </body> </html>- prompt() 함수는 문자를 입력 할 수 있는 창을 띄워줌
그리고 입력한 값을 활용 할 수 있음.
- 계산기 버튼에 onclick로 sub1() 함수를 호출한다.
그리고 confirm() 함수로 예 아니오의 확인 메세지 창을 띄울 수 있다.
if문을 활용해서 확인을 눌렀을때와 취소를 눌렀을때의 이벤트를 설정 가능하다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> // 래퍼 객체(wrapper object) : 숫자 문자열등 원시 타입이 프로퍼티에 접근하기 위해 생성되는 임시 객체 var s = "자바스크립트"; // 문자열 생성 var len = s.length; // String 프로퍼티인 length 속성 사용 console.log("문자열길이:"+len); // String 객체 var s2 = new String("자바스크립트"); len = s2.length; console.log("문자열길이:"+len); console.log(s == s2); // true. ==(동등) 연산자는 리터널 값과 레퍼 객체를 동일하게 본다. console.log(s === s2); // false. ===(일치) 연산자는 리터널 값과 레퍼 객체를 구별 한다. console.log(typeof s); // string 타입 console.log(typeof s2); // object 타입 // 전역 값 속성 console.log(NaN === NaN); // false console.log(isNaN(NaN)); // true </script> </head> <body> <h3>전역 속성</h3> </body> </html>- String과 Object의 관계를 비교할때 조심 해야 한다.
- s1과 s2를 == 이꼴을 2개로 비교를 하면 true가 나오지만 === 3개로 비교하면 false가 나온다.
그리고 NaN인지 아닌지 확인하고 싶을때는 isNaN() 함수를 사용하자.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> function result() { // var n = document.getElementById("num").value; // id로 접근 var n = document.querySelector("#num").value; // 선택자로 접근 /* if(! n ) { document.getElementById("num").focus(); return; } if( isNaN(n) ) { document.getElementById("num").focus(); return; } */ n = parseInt(n); if(n % 2 == 0 && n % 3 == 0) { alert(n + "은 2 또는 3의 배수 입니다."); } else if(n % 2 == 0) { alert(n + "은 2의 배수 입니다."); } else if(n % 3 == 0) { alert(n + "은 3의 배수 입니다."); } else { alert(n + "은 2 또는 3의 배수가 아닙니다."); } } </script> </head> <body> <p> 숫자 : <input type="text" id="num"> <button type="button" onclick="result()">확인</button> </p> </body> </html>- 자바스크립트에서 if문과 switch문 사용 가능하다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> function result() { var n = document.querySelector("#num").value; if( isNaN(n) ) { document.querySelector("#num").focus(); return; } var s; n = parseInt(n); // Math.floor(x) : x를 넘지 않는 최대 정수 switch( Math.floor(n / 10) ) { case 10: case 9: s = "A"; break; case 8: s = "B"; break; case 7: s = "C"; break; case 6: s = "D"; break; default: s = "F"; break; } alert(n + " : " + s) } </script> </head> <body> <form action="javascript:result();"> <p> <input type="text" name="num" id="num" required="required" placeholder="숫자"> <button>확인</button> </p> </form> </body> </html>switch문을 활용해서 점수에 해당하는 알파벳을 뽑아내는 코드
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> var s, n; // while s = 0; n = 0; while(n < 10) { n++; s += n; } console.log("while : " + n + ", " + s); // 10, 55 // do~while s = 0; n = 0; do { n++; s += n; } while(n < 10); console.log("do~while : " + n + ", " + s); // 10, 55 // for s = 0; for(n = 1; n <= 10; n++) { s += n; } console.log("for : " + n + ", " + s); // 11, 55 </script> </head> <body> <h3> 반복문 </h3> </body> </html>- while, do-while, for문의 반복문들을 사용한 모습
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> function result() { var dan = document.querySelector("#num").value; var out; if( ! /^[1-9]{1}$/.test(dan) ) { document.querySelector("#num").focus(); return; } dan = parseInt(dan); out = "<p style='font-weight:bold; color:blue;'>** " + dan +"단 **</p>"; for(var n = 1; n <= 9; n++) { out += dan + " * " + n + " = " + (dan*n) + "<br>"; } document.querySelector("#resultLayout").innerHTML = out; } </script> </head> <body> <p> <input type="text" id="num" placeholder="원하는 단"> <button type="button" onclick="result();">확인</button> </p> <hr> <div id="resultLayout"></div> </body> </html>- 자바스크립트에서 구구단 출력하기
document.querySelector("#resultLayout").innerHTML = out;
이 기능으로 인해서 HTML 부분에서 id 코드가 resultLayout인 부분에 출력이 됨.
out = "<p style='font-weight:bold; color:blue;'>** " + dan +"단 **</p>";
이런식으로 변수에 값 넣을때 style도 줄 수 있음.
반응형'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글
자바스크립트 - 문자열 활용 (0) 2021.09.27 자바스크립트 - 함수 만들기 (0) 2021.09.27 자바스크립트 - 기초(3) / 타이머 함수 (0) 2021.09.26 자바스크립트 - 기초(2) / 인코딩과 디코딩 (0) 2021.09.26 자바스크립트 - 기초(1) (0) 2021.09.26
