변수
선언 해도 되고 안 해도 됨
(아주 신기한 자바스크립트의 세계,,)
var 변수명;
let 변수명;
var a = 10; //블록 밖에 선언. 안에 선언한 차이 없음
let b = 20; //블록 안에서 선언하면 블록 내에서만 사용 가능타입 종류
let b = 20; // 정수
c = "hello"; // 문자열
d = 'abc'; // 문자열
let e = 2.34; // 실수
let f = [1,2,3,4,5]; // 배열
let g = {"name":"aaa", "tel":"111"}; // 객체
let h = true; // boolean제어문
// 기본 if문
if(조건){
실행문;
} else {
실행문;
}
// if - else if
if(조건1){
실행문;
}else if(조건2){
실행문;
}else if(조건3){
실행문;
} else {
실행문;
}
// switch
switch(변수){
case 1:
break;
case 2:
break;
default:
break;
}
// for문
for(i=0;i<5;i++){
실행문;
}
// while문
while(조건){
실행문;
}
// do while문
do{
실행문;
}while(조건);continue: 루프 진행
break: 루프나 블록 빠져나감
return: 함수 종료 및 값 반환
함수
1. 함수정의
function 함수명(파라미터 목록){
실행문;
return 값;
}2. 함수호출
함수명();알림창
alert("메시지");
// 메시지와 확인 버튼 하나로 구성
let val = prompt("메시지", "초기값");
// 입력박스가 있는 알림창.
//입력값 반환. 무조건 텍스트 형태로 값을 받는다.
let flag = confirm("메시지");
// 메시지와 확인, 취소 버튼으로 구성.
// 확인 누르면 true, 취소 누르면 false 반환페이징 이동
location.href = "이동할 페이지";이벤트 핸들러
이벤트 : ui에 발생한 사건. 클릭, 드래그, 페이지로드, 입력값변경 등등
이벤트 핸들러 : 이벤트가 발생했을 때 자동으로 호출되는 함수
핸들러 등록 속성 : on이벤트명
click: 클릭 이벤트. onclick
load: 페이지 열리자마자 발생. onload
focus: 포커스 획득. onfocus
blur: 포커스 빼앗김. onblur
change: 입력값이 변경된 뒤 포커스 잃었을 때. onchange
mouseover: 영역에 마우스가 들어갔을 때. onmouseover
mouseout: 영역에서 마우스가 나갔을 때. onmouseout
keydown: 키보드 누를 때 onkeydown
keyup: 키보드 눌렀다 땠을 때 onkeyup
form
window
|
document
|
form
|폼에는 button, text, textarea, radio 등등이 있다.
(윈도우랑 다큐먼트는 생략이 가능하다.)
<form name="formName" method="post">
과일이름 : <input type="text" name="fruit">
</form>그래서 value 값을 가져올거면
formName.fruit.value
(form의 이름). (그 밑의 이름). value
이런 식으로 불러올 수 있다.
window.load
window.onload = function() {
alert("페이지 열리자마자 실행됨");
}
// 얘는 함수가 이름이 없네? 이런 걸 익명함수라고 한다.
// 페이지가 열리자마자 시작되어야 하는 코드들을 window.onload에 넣는다.html
button
<button> 요소에는 언제나 type 속성값을 명시하는 것이 좋다.
type에는 button, reset, submit 등이 있다.
button type속성의 default값은 submit이다!
속성값의 종류 : autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget
등등이 있다. (필요할 때 찾아보기~.~)
❓ button VS input
계산기 프로그램을 만들 때 나는 button을 썼고 쌤은 input을 썼는데 무슨 차이인지 궁금해져서 찾아봤다.
button
<button> 태그는 클릭할 수 있는 버튼을 정의할 때 사용
속성값의 종류 : autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget
input
<input> 태그는 사용자로부터 입력을 받을 수 있는 입력 필드를 정의할 때 사용한다.
그리고 default값은 text이다.
<input>요소는 사용자가 데이터를 입력할 수 있는 입력 필드를 선언하기 위해 <form> 요소 내부에서 사용된다.
속성값의 종류 : accept, align, alt, autocomplete, autofocus, checked, dirname, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, name, pattern, placeholder, readonly, required, size, src, step, type, value, width
종류가 엄청 많다..
type의 종류 : button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week
type도 종류가 매우 많은 걸 볼 수 있다..
그래서 button이랑 input이랑 뭔 차이야?
가장 큰 차이점은 <button>은 스스로 닫지 않는 태그이고 <input>은 스스로 닫는 태그라는 것이다.
닫힌 태그인 <button>은 하위 태그들을 추가할 수 있고 <input>은 그럴 수가 없다.
<button>이 더 자유롭게 사용할 수 있다.
<input>의 한계를 넘기 위해 나온 것이 <button>이다.
공통점은?
기능적으로는 완전 동일하다.
기능적으로는 차이가 없다.
김버그 선생님께서.. : 기능상 완전히 동일하다면 의미가 더 명확한 <button>을 쓰는게 더 낫지 않을까라고 하셨다.
결론은 용도에 맞게 사용하기
<a>
페이지 링크를 걸 때 문서간의 url을 '연결'하기 위해 주로 사용되는 일반적인 방식
<button>
url을 연결하지 않고 단순하게 사용자 인터페이스만을 '조작'하기 위한 버튼.
type을 명시하지 않으면 submit으로 실행하기 때문에 반드시 type="buttton"으로 지정해야 한다.
<input>
사용자의 입력을 서버로 '전송'하기 위한 버튼으로 전달하는 값을 받거나 전달할 때 사용하는 마크업이다.
