자바스크립트 기초

1. 자바스크립트 변수

1) 변수란?
=> 데이터를 담는 공간
=> 데이터는 과자, 변수는 과자상자

2) 변수 선언과 데이터 저장

let fruit; // 변수 선언(데이터를 담을 공간 생성)
fruit = "apple"; // 변수 초기화 (생성된 변수에 데이터 전달)

let fruit = "apple"; // 변수 선언 및 초기화

3) 데이터 변경

let fruit = "apple";
fruit = "banana";

변수 fruit의 데이터를 apple -> banana로 변경

4) 변수 안 데이터 확인 방법

let fruit = "apple";
console.log(fruit); // apple을 콘솔에 출력
document.write(fruit); // apple을 웹페이지에 출력

5) 변수 생성시 주의사항
- 숫자로 시작 불가
- 최대한 자세하게 camelCase로 작성
- 의미가 불명확한 단어 조합 금지

6) 자바스크립트 사용방법
html 내 script부분에 JS 파일 주소를 넣으면 됨

<script src = "index.js"></script>

2. JS 데이터타입

String(문자열), Number(숫자), Function(함수), Array(배열), Object(객체), Boolean(불린), undefined(정의되지않음), null(널)

1) String(문자열) - 큰 따옴표나 작은따옴표나 백틱 사용

let str1 = "Hello World";
let str2 = "10";
let str3 = 'He\'s a boy'; // '를 쓸거면 앞에 \를 써야함
let str4 = `He's a boy`; // 백틱 사용가능

2) Number(숫자)

let num1 = -20
let num2 = 3.14

3.1) function(함수)

let func1 = function() {
	console.log("HI");
}
func1(); // 함수 호출

function func2() {
	console.log("Hello");
}
func2(); // 함수 호출

let area = function(width, height) { // width, height를 매개변수라 함
	return width * height; // return은 함수 내 데이터 저장해서 돌려주는 것
}
area(100, 200); // 100, 200을 인자 라 함

3.2) 함수 데이터 호출 방법

let area = function(width, height) {
	return width * height;
}
// 새로운 변수를 만들고 그 변수(result)를 console.log에 넣기
let result = area(100, 200);
console.log(result);

// 함수 자체를 console.log에 넣기
console.log(area(100,200));

4) Array(배열)

let fruit = ["사과","배","포도"]
console.log(fruit);
console.log(fruit[0]); // 0번째 index 데이터 추출(사과)
fruit[0] = "수박"; // 0번째 index 데이터를 수박으로 변경함
console.log(fruit); // 수박,배,포도 순서로 나옴

5) Object(객체)
프로퍼티, 메서드, 데이터 로 구성되어있다.

let student = {
	name : "SJ" // name을 프로퍼티, "SJ"를 데이터라 한다
    age : 100
    skills : ["JS", "HTML", "CSS"]
    sum : function (num1, num2) { return num1 + num2 } // sum을 메서드라 한다.

console.log(student.name); // 객체명.프로퍼티명
console.log(student['name']; // 객체명["프로퍼티명"]

student.name = "Crystal"; // name 프로퍼티 데이터 변경
console.log(student.name); // 출력 시 Crystal이 나온다

6) undefined와 null

let unde1; // 변수 안에 데이터 입력하지 않았음, undefined상태
let empty = null; // 변수 안에 임의로 빈 데이터인 null 지정함

7) Boolean

let t1 = true;
let f1 = false;
// 참,거짓 데이터를 지정

3. JS의 프로퍼티와 메서드

1) 데이터 타입의 프로퍼티와 메서드
- 데이터 별로 갖고있는 고유한 성질
- JS에서 사용자를 위해 사전에 작성 된 편의 기능

2) 문자열 프로퍼티와 메서드

let str1 = "Hello World";
str1.length; // 문자열의 길이 11(공백포함)
str1.charAt(0); // 문자 추출하기, H가 추출됨
str1.split(" "); // 공백을 기준으로 문자를 나눈 후, 배열로 출력 [Hello, World]

3) 배열 프로퍼티와 메서드

let fruit = ["사과", "배", "포도"];

fruit.length; // 데이터의 갯수 3

fruit.push("딸기"); // 배열 맨 뒤에 데이터 삽입
fruit.unshift("레몬") // 배열 맨 앞에 데이터 삽입

fruit.pop(); // 배열 맨 뒤의 데이터 제거
fruit.shift(); // 배열 맨 앞의 데이터 제거

4) Math의 수학연산 메서드

Math.abs(-3); // 절대값
Math.ceil(0.3); // 올림
Math.floor(10.8); // 내림
Math.random(); // 임의의 수 출력

5) 문자를 숫자로 변환하는 메서드

parseInt("20.6"); // 정수형태로 변환, 숫자 20으로 출력
parseFloat("20.6"); // 실수형태로 변환, 숫자 20.6으로 출력됨