버튼을 클릭하면 명언이 나와요
-이름이 나와요
변수부터 익혀보자
변수란 "프로그램에서 사용하기 위해 값을 담아 놓는 바구니"라고 생각하면 쉽습니다.
변수 이름 지정하기
1.변수 이름은 숫자로 시작할 수 없고. 이름 안에 공백이 포함되어 있으면 안됩니다.
2.앞에 숫자가 오면 안됩니다.(ex: 25name)
3.글씨 중간에 띄어쓰기를 사용하면 안됩니다.(ex: na me)
4.특수문자(*, ? 등)은 인코딩할 떄 문제가 발생할 수 있으므로 사용하지 않는 것을 권장합니다.(ex: name*)
5.무의미한 변수 이름은 피합니다.
변수 선언하기
자바스크립트에는 값을 변경할 수 있는 "변수(let)"와 값이 바뀌지 않는 "상수(const)"가 있습니다.
사용할 변수를 선언하고 나면 "=" 기호를 사용해서 변수에 값을 저장할 수 있는데. 이것을 "변수에 값을 할당한다"라고 합니다.
자료형 사용 방법(숫자형, 문자열, 템플릿 리터럴, 논리형, 배열, 객체)
1.숫자형
자바스크립트에서는 큰따음표(" ")가 없으면 숫자로 인식합니다.
자바스크립트에서는 큰따음표(" ")가 있으면 문자로 인식합니다.
typeof(10); // number [10]
typeof("10"); // 문자열 [10]
typeof(3.14); // number [3.14]
2.문자열
문자열 또는 string 자료형은 작은따옴표(' ')나 큰따옴표(" ")로 묶은 데이터를 의미합니다.
//typeof();는 타입을 알수 있게 해줍니다.[숫자 : number / 문자 : String]
typeof("안녕하세요"); //문자열(안녕하세요) 출력
let str = "문자열 선언";
console.log(str); //문자열(문자열 선언) 출력
3.탬플릿 리터럴
탬플릿 리터럴은 문자열과 변수, 식을 섞어서 하나의 문자열을 만드는 표현 형식입니다.
let name = "이름";
let number = 123;
//자바스크립트는 선언 방식은 변수이름은 그냥 쓰고 "+"기호를
//붙인다음 "문자열"(큰따음표는 문자열을 나타냅니다.)로 표시합니다.
console.log(name + "님의" + number번호 입니다.); // 이름님 123번호 입니다.
4.논리형(불리언)
논리형은 참(true)이나 거짓(false)값을 표현하기 위한 데이터 유형으로 "불리언 유형"이라고도 합니다.
false로 인정되는 값(0, " ", NaN, undefined, null)입니다. 그외에 것들은 true입니다.
console.log(30 > 20); //true
console.log(30 < 20); //false
5.배열
배열은 하나의 변수에 여러 개의 값을 저장할 수 있습니다.
- 배열 선언 방법
배열명 = [값, 값, .....];
배열 = [ ];
let empty = [ ]; //빈 배열 생성
let colors = ["red", "blue", "green"]; //문자열 배열
let arr = [10, "banana", true]; / 여러 자료형으로 구성된 배열
//배열에 접근하는 방법은 인덱스로 접근을 해야합니다.(0번지부터 시작)
console.log(colors[0], colors[1], colors[2]); //red, blue, green 출력
//배열의 이름만을 적는다면 배열 안에 저장된 데이터가 전부 출력 됩니다.
console.log(arr); //10, banana, true 출력
6.객체
객체는 하나의 변수에 다양한 정보가 포함되어있는 자료형입니다.
- 객체 선언 방법
객체명 = {
키 : 값,
키 : 값,
}
객체명.키 이름
객체명["키 이름"];
- 객체 선언 및 접근하기
//객체 선언은 " {} " (중괄호)를 사용하여 선언합니다.
let obj = {
name : "이름",
number : 1234,
bool : true
}
//배열 선언은 " [] " (대괄호)를 사용하여 선언합니다.
//배열 안에 객체 선언도 가능합니다.
let obj2 = [
{a : "배열안에 객체", b : "내용"},
{c : 1234}
]
//객체 접근
console.log(obj.name); //이름 출력
console.log(obj.number); //1234 출력
console.log(obj.bool); //true 출력
//배열 안의 객체 접근
console.log(obj2[0].a); // 배열안에 객체 출력
console.log(obj2[0].b); // 내용 출력
console.log(obj2.c); // 1234 출력