[JS] 입출력, 변수, 자료형, 초기화
자바 스크립트의 입력
prompt()
: 사용자의 입력을 받을 수 있음 , 팝업창 형태
- 리턴 값은 string 또는 null
- 값을 입력하고 확인 버튼을 누르면 string으로 반환, 취소 버튼을 누르게 되면 null이 반환됨
var name = prompt("이름을 입력하시오."); //입력
document.write(name); //출력
입력받은 이름은 name 변수에 저장 → name을 브라우저 화면에 출력함
출력
- doucument.write() : 브라우저 출력
- console.log() : 콘솔 출력 → 더 많이 씀
var name = prompt("이름을 입력하시오."); //입력 console.log(name); //콘솔창에 출력
- alert() : 알림창으로 출력
var name = prompt("이름을 입력하시오."); //입력 alert(name); //알림창형태로 출력
자바스크립트 소스를 작성할 때 지켜야할 규칙
- 대소문자 구별하기
- 들여쓰기 : 보기 좋도록 !
- 문장 끝은 세미콜론 ;
- 주석 사용하여 메모하기
- //한줄 주석
- /* 여러줄 *
- 식별자는 규칙 지키기
- 첫 글자는 영문자나 밑줄(_), 달러 기호($)
- 두 단어 이상이 모여 하나의 식별자를 만들 경우 하이픈(-)이나 밑줄(_)로 연결 >> 공백 사용 X
- 보통 대문자를 사용하여 단어가 바뀜을 표시함
- ex ) num1, checkTime, _*do_*java_script, java-script
- 예약어는 식별자로 사용할 수 없음
변수
- 선언 방식
- var
- let
- const
호이스팅
var로 선언하면 호이스팅이 가능함
원래는 변수를 사용하려면 사용하기 전에 변수를 선언해줘야함
그러나 호이스팅은 변수를 사용한 후 변수를 선언해도 아래에 선언된 변수가 위에서 사용된 변수라고 인식해줌.
let a = 10 ;
console.log(a);
console.log(b);
var b = 20;
출력 결과 >>
b를 먼저 출력하고 값을 선언해줌 console.log(b) 당시에는 b의 값이 정의 되지 않았으므로 undefined를 출력함 → 선언을 나중에해도 오류는 없음 (호이스팅)
자료형
typeof()
연산자로 자료형 확인 가능
템플릿 문자열
` 기호로 생성 ‘(작은따옴표)랑 다름
console.log의 매개변수로 사용가능
${표현식}으로 사용 표현식은 계산되어서 문자열에 들어감
console.log(`3+4 = ${3+4}`);
// 3+4 = 7 이렇게 출력됨
console.log("3+4 = ", 3+4);
//위와 같은 의미
console.log(`올해는 ${new Date().getFullYear()}년 입니다.`);
//올해는 2023년 입니다. 이렇게 출력됨
배열
var ary1 = ["test1", "test2", 10];
[]로 생성하고 여러가지 타입을 넣을 수도 있음 ⇒ 복합형
인덱스로 요소에 접근
객체
key:value 형식
var me = {
firstName : "kim",
lastName : "hajin",
number : 15
}
console.log(me.firstName); //객체 내의 값인 kim 출력
me.nickName = "무콩";
//객체명.key명 = "value값"; 으로 값 추가도 가능함
key로 value에 접근함 , 여러타입 넣기 가능 ⇒ 복합형
{}에는 function도 들어갈 수 있음
연산자
+연산자
문자열과 문자열을 연결함 : 연결 연산자로 사용됨
“20” + 10 = 2010 을 반환해줌
20 + 10 = 30을 하고 싶다면 ? 형변환이 필요함
Number(숫자형으로 바꾸고 싶은 변수명)
.. -,*,/ 등의 연산자는 “20” - 10 이런식이어도 숫자로 자동 형변환되어 계산됨
비교연산자
보통은 ==
이 같은가? 를 의미함
===
: 자료형까지 완벽하게 같은지를 판단하는 연산자
!==
: 자료형까지 같이 않은가를 판단하는 연산자
ex ) “2” == 2 ⇒ true (2라는 값은 같으므로) , “2” === 2 ⇒ false (값은 같지만 자료형이 다르기때문)
초기화하기
- 삼항 연산자
let test; test = test ? test : "초기화합니다"; //test에 값이 없으므로 false -> "초기화합니다" 가 들어감 console.log(test); //초기화합니다 출력 test = test ? test : "초기화2"; //test에 값이 있으므로 test값 그대로 return console.log(test); //원래 값이 초기화합니다 출력
불 표현식 ? 참 : 거짓
- || 연산자
let test; test = test || "초기화"; //test에 값이 없으므로 "초기화"가 값으로 들어감 console.log(test); //초기화 출력 test = test || "초기화2"; //test 값이 있으므로 test 값 그대 console.log(test); //원래 값이 test , 초기화 출력
변수 = A || B
: 변수가 참이면 A || 거짓이면 B