728x90
반응형
1. message box
2. form
1. message box
- 메세지 박스, Dialog Box
- 속성값
| 속성명 | 설명 |
| alert() | 메세지 전달 |
| confirm() | 메세지 전달, 사용자의 의사를 확인한다.(Yes or No 선택) |
| prompt() | 사용자의 정보 입력, 디자인 수정이 불가하다.(지금은 전혀 안쓰인다.) |
[ alert(), confirm(), prompt() 예제 ]
<body>
<form name="form>
<input type="button" value="alert 버튼" name="btn1">
<input type="button" value="confirm 버튼" name="btn2">
<input type="button" value="prompt 버튼" name="btn3">
</form>
<script>
var btn1 = document.form1.btn1;
var btn2 = document.form1.btn2;
var btn3 = document.form1.btn3;
btn1.onclick = function() {
alert(100);
};
btn2.onclick = function() {
var result = confirm('자바스크립트가 어렵습니까?');
console.log(result); // 반환값이 true, false로 나온다.
};
btn3.onclick = function() {
var age = prompt('나이를 입력하세요.', '');
if ( age >= 19 ) {
location.href= "http://naver.com"
} else {
alert('미성년자 접근 불가');
}
};
</script>
</body>
2. form
[ 폼 구성 요소 ]
| 이름 | 문법 |
| button | <input type="button"> |
| checkbox | <input type="checkbox"> |
| hidden | <input type="hidden"> |
| password | (<input type="password"> |
| radio | <input type="radio"> |
| text | <input type="text"> |
| textarea | <textarea>default text</textarea> |
| select | <select><option>option1</option><option>option2</option></select> |
[ text 예제 ]
See the Pen 텍스트 박스 예제 by yhyuk (@yhyuk) on CodePen.
[ checkbox 예제 1 ]
See the Pen 체크박스 예제1 by yhyuk (@yhyuk) on CodePen.
[ checkbox 예제 2 ]
See the Pen 체크박스 예제2 by yhyuk (@yhyuk) on CodePen.
[ radio 예제 ]
See the Pen 라디오 박스 예제1 by yhyuk (@yhyuk) on CodePen.
[ select 예제 ]
See the Pen 셀렉트 박스 예제1 by yhyuk (@yhyuk) on CodePen.
MEMO>
# 선생님이 JS 문법이 쉽다고해서 처음에는 쉬웠는데, function(함수) 부분 부터 Java와 다른점이 있다보니 자꾸 뭔가 헷갈리는 느낌이다.. HTML, CSS 속성도 머릿속에 아직 잘 안들어와서 그런거같다. 주말에 다시 복습하자.
# HTML/CSS 수업때도 느끼긴했는데, JS수업할때 많이 이동 하다보니 복습하려고 다시 코드랑 주석을 보려고 하면 이해가 잘 안되는 부분이 많다. 이 부분 감안해서 수업때 필기를 잘 해둬야 겠다.
728x90
반응형
'교육 > JavaScript' 카테고리의 다른 글
| JavaScript 개발자 수업 65일차 - 부모-자식-형제 태그, DOM 제어, DOM 이벤트 (0) | 2021.06.29 |
|---|---|
| JavaScript 개발자 수업 64일차 - Timer, DOM, Content (0) | 2021.06.28 |
| JavaScript 개발자 수업 62일차(2) - Collection, Window, Screen, Location, History , Links, Images (0) | 2021.06.27 |
| JavaScript 개발자 수업 62일차(1) - event(mouse, key) (0) | 2021.06.26 |
| JavaScript 개발자 수업 61일차(2) - Object, BOM (0) | 2021.06.26 |
댓글