[JS] 자바스크립트 문법 (+프리트랙)

 

 

 

1. 자바스크립트의 변수

- 변수

: 데이터를 담는 공간

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

var fruit2 = "banana";  // 변수 선언 + 초기화

: 변수 선언 = 데이터를 담을 공간 생성

: 변수 초기화 = 생성된 변수에 데이터를 전달

 

cf.) 변수명

: 변수명은 숫자로 시작X

: 변수명은 최대한 자세하게 작성

: 의미 불명확한 단어들의 조합X

 

 

- 변경된 데이터 확인하는 방법

console.log(변수);  // 콘솔에서 확인
document.write(변수);  // 웹 화면에서 출력해서 확인
document.writeln(변수);  // 출력값 사이에 공백 넣을 수 있음

 

cf.) js파일 html과 연동하는 방법

: <script> 태그 안에 src="파일명.js" 입력 후 html 파일과 연동

 

 

 

2. 자바스크립트 데이터 타입

- 데이터 타입

: 변수에 전달되는 타입에도 여러 종류 존재 (8가지)

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

 

 

- String (문자열)

: " " 또는 ' ' 안에 작성된 데이터

: "와 '의 혼용X

: " " 안에 ' 사용O  /  ' ' 안에 " 사용O

: ' ' 안에 ' 를 사용할 경우 → \' 이렇게 사용해야함 (역슬래시 + ')

 

 

- Number (숫자)

: 10 = 정수 / -10 = 음수 / 3.14 = 실수

: 자바스크립트는 상대적으로 자유도가 높아서 → 정수, 실수 같이 연산 가능

 

 

- Function (함수)

: function 키워드 사용하여 생성

var func = function(){}  // 함수 생성 1
function func1() {}  // 함수 생성 2

func();  // 함수 호출

: 매개변수 = 인자로부터 전달받은 값이 들어가는 통로

: 인자 = 함수에 전달하는 데이터

: return = 함수 안에 데이터 저장할 때 사용 / 값 반환

 

 

- Array (배열)

: 비슷한 성격 갖고 있는 데이터를 하나의 변수 안에서 관리

var name = ["철수", "영희"];  // 배열은 [] 사용
console.log(name[0]);  // 철수
name[0] = "맹구";
console.log(name[0]);  // 맹구

 

 

- Object (객체)

: 프로퍼티(이름을 갖고 있는 데이터들), 메서드(데이터를 갖고 있는 함수), 데이터 로 구성

: 여러 종류의 데이터 타입 삽입 가능

var student = {
    name : "철수",
    age : 20,
    skills : ["HTML", "CSS", "Javascript"],
    sum : function (num1, num2) {return sum1 + sum2;}
}

: 객체 데이터 출력 방법 (2가지)

console.log(student.name);
console.log(student['name']);

 

 

- undefined, null

: undefined = 변수 안에 데이터 입력하지 않은 상태 (데이터X, 초기화X)

: null = 임의로 변수 안에 빈 데이터를 삽입한 상태 (빈 데이터 지정)

 

 

- Boolean

: true / false 들어가 있는 상태

 

 

 

3. 자바스크립트의 프로퍼티와 메서드

- 문자열

var str = "Hello World";
str.length;  // 11
str.charAt(0);  // H
str.split(" ");  // [Hello, World]

: .length = 문자열 길이

: .charAt(0) = 문자열 한 글자씩 추출 (0번째 추출)

: .split(" ") = ()안에 쓴 것을 기준으로 문자 나눠서 배열로 출력 (공백 기준)

 

 

- 배열

var arr = ["a", "b", "c"];
arr.length;  // 3
arr.push("d");  // ["a", "b", "c", "d"]
arr.unshift("z")  // ["z", "a", "b", "c", "d"]
arr.pop();  // ["z", "a", "b", "c"]
arr.shift();  // ["a", "b", "c"]

: .length = 배열의 길이 (배열의 데이터 개수)

: .push() = 배열 뒤에 데이터 삽입

: .uhshift() = 배열 앞에 데이터 삽입

: .pop() = 배열 뒤에 데이터 제거

: .shift() = 배열 앞에 데이터 제거

 

 

- Math 수학 연산 메서드

Math.abs();  // 절댓값
Math.ceil();  // 올림
Math.floor();  // 내림
Math.random();  // 0~1 사이의 임의의 숫자 랜덤 출력

 

 

- 문자 → 숫자 변환하는 메서드

parseInt("");  // 정수로 변환
parseFloat("");  // 실수로 변환

 

 

 

4. 연산자

- 산술 연산자

: +, -, /, *, %(나눗셈 나머지)

console.log("20" + "10")  // 2010
console.log("20" - "10")  // 10
console.log("20" * "10")  // 200
console.log("20" / "10")  // 2
console.log("20" % "10")  // 0

: 숫자 뿐만 아니라 문자열도 산술연산자 사용 가능 (+만 문자열끼리 연결)

 

 

- 증감 연산자

: ++, --

: 앞에 위치한 것과, 뒤에 위치한 것의 차이 있음

 

 

- 비교 연산자

: == (값이 같다), === (값과 데이터 타입까지 같다), !== (값이 같지 않다)

: >, >=, <, <=

: 결과는 true / false

 

 

- 논리 연산자

: && (앞 뒤 모두 참이면 → true), || (둘 중 하나만 참이면 → true)

 

 

 

5. 조건문

- 조건문

: 주어진 조건에 따라 결과값 출력하는 구문 (비교 연산자, 논리 연산자 사용)

 

 

- if 문

: if (조건) { 수행할 코드 }

 

 

- if ~ else 문

: if (조건) { 수행할 코드 } else { 수행할 코드 }

: 조건이 true일 경우 → if문 실행 / false일 경우 → else문 실행

 

 

- if ~ else if ~ else 문

: if (조건) { 수행할 코드 } else if (조건) {수행할 코드 } else { 수행할 코드 }

: 여러 조건문을 생성할 때 사용

 

 

- 중첩 if 문

: if 문 안에 if문을 삽입할 때 사용

 

 

 

6. 반복문

- for 문

: for(초기화한 변수값; 조건; 증감표시) { 수행할 코드 }

 

 

- while 문

: while(조건) { 수행할 코드 }

 

 

- do ~ while 문

: do { 수행할 코드 } while (조건)

: 조건과 관계없이 do가 무조건 한 번 실행

 

 

 

cf.) 문자열 줄바꿈

: "100\nHello" (중간에 \n 넣어주기)

 

cf.) 오름차순 정렬

: answer.sort((a, b) => a-b);

 

cf.) 내림차순 정렬

: answer.sort((a, b) => b-a);