728x90
반응형
<목차>
1) 프로그래밍 기초
1-1) 프로그래밍 언어 구분
1-2) Javascript 특징
2) Javascript 기초 문법
2-1) 변수
2-2) 데이터 타입
2-3) 연산자
2-4) 조건문 - if문
2-5) 반복문 - for문
1) 프로그래밍 기초
1-1) 프로그래밍 언어 구분
- 객체지향 언어: C++, JAVA
- 함수형 언어: Python
- Prototype 언어: Javascript 해당됨 → 객체지향과 함수형을 둘 다 할 수 있기에 효율적이지 못함!!
- Compile 언어: 코드를 컴퓨터가 이해할 수 있는 형태로 변환시켜줌( compiler = 번역기 ) → C++과 JAVA가 해당되며, 해당 언어는 코드 전체를 한 번에 해석하여 실행함
- Interpreter 언어: 코드를 한 줄 한 줄 해석하여 바로 실행해 줌( 코드 작성 시 결과를 한 줄 한 줄마다 바로 출력해 줌 ) → Javascript 해당됨( Javascript는 코드를 실행하기 전에 전반적으로 코드 검사를 한 뒤 코드를 한 줄 한 줄 실행함!! )
1-2) Javascript 특징
Javascript는 Interpreter 언어이기에 엔진 또는 런타임이 필요하다!
- 브라우저 → Javascript로 브라우저의 동작과 관련된 요소를 구성하고 있음 / 브라우저의 동적요소들을 만들고 싶어서 생긴 언어가 Javascript이며, 다만 빠르게 Javascript를 개발하다 보니 에러가 많은 저급한 수준의 언어였음 / 하지만 이후 Javascript의 스펙이 점차 업그레이드 되면서 ES6( 2015년 ), ES7( 2017년 )을 거쳐 발전하게 됨( 실제로 최근에는 스펙이 업그레이드되어 많이 사용됨 )
- Node.js( Chrome V8 Javascript 엔진으로 빌드된 JavaScript 런타임 ) → Javascript로 구성되어 있고, 브라우저와 달리 자신의 컴퓨터를 조작할 수 있음(I/O 가능 = Input/Output)
브라우저와 Node.js는 환경이 다르다!! → 브라우저는 html 파일 상에 script element를 추가하여 간단히 js 파일을 실행시키는 반면, Node.js는 별도의 런타임을 설치한 뒤 node 명령어를 통해 js 파일을 실행시킴!!
<Interpreter 언어의 장점>
- Javascript는 type(데이터를 저장할 수 있는 공간) 지정이 없기에 처음 프로그래밍을 배우는 사람에게 적합함 → Python(함수형 프로그래밍 언어) 역시 type 지정이 없기에 처음 배우기에 좋음
- ex) 256개의 숫자 표현 → 1 byte = 8 bit(00000000) = 2 nibble(1 nibble = 16진수)
2) Javascript 기초 문법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./public/js/index2.js" type="text/javascript"></script>
</head>
<body></body>
</html>
js 파일은 위와 같이 html 파일 상에 <script> element를 추가하여 서로 연결한 뒤 브라우저 창에서 출력 결과를 확인할 수 있음!!
2-1) 변수
/*
예약어
1. var
2. let
3. const
*/
/*
변수
var 변수명 = 값 >> 여기서 "="은 서로 같다는 의미가 아닌 선언한 변수에 값을 할당한다는 의미임!!
var num = 1;
console.log(num);
*/
/*
바로 위의 코드와 동일하게 동작함 >> 이처럼 변수를 먼저 선언한 뒤 해당 변수에 값을 할당하고 출력할 수도 있음!!
var num;
num = 1;
console.log(num);
*/
let numb = 2;
console.log(numb);
const data = 3;
console.log(data);
// let으로 선언한 변수는 재할당은 가능하지만 재선언은 안 됨!!
let num;
num = 1;
console.log(num);
// 재할당
num = 10;
console.log(num);
/*
const
const는 상수를 선언함
선언과 동시에 값을 할당해야 함(대입 연산자까지 같이 써줘야 함)
재할당이 안 됨
재선언도 안 됨
const num;
num = 1;
console.log(num);
const num = 1;
console.log(num);
*/
/*
변수 선언방법
예약어(let, const) 변수명 = 데이터
- 변수명에 특수문자를 쓰면 안 됨(단, "$"과 "_"는 변수명에 사용 가능함!!)
- 변수명의 첫 글자가 숫자이면 안 됨
- 예약어를 변수명에 쓰면 안 됨
*/
/*
다양한 변수 표기법
let firstName >> camel 표기법
let FirstName >> pascal 표기법
let first_name >> snake 표기법
*/
2-2) 데이터 타입
/*
데이터 타입
1. number
2. string
3. boolean
*/
/*
1, 0 => 각각 1 bit
참, 거짓
true, false
5 > 3 참(1)
5 < 3 거짓(0)
*/
// 데이터 타입: string
let string = "1";
console.log(string);
// 데이터 타입: number
let string2 = 1;
console.log(string2);
// 선언 변수명 대입연산자 값(데이터 타입)
let string = "block";
let string2 = "chain";
// 연산자 +
// 데이터 타입이 string이면 글자를 단순히 이어서 출력해 줌
console.log(string + string2); // blockchain
let num = 1;
let num2 = 2;
// 데이터 타입이 number이면 숫자를 더한 결과를 출력해 줌
console.log(num + num2); // 3
// 데이터 타입이 하나라도 string이면 값들을 단순히 이어서 출력해 줌
console.log(string + num); // block1
console.log(num + string); // 1block
let strNum = "191";
let num3 = 3;
console.log(strNum + num3); // 1913
2-3) 연산자
/*
연신자: +, -, /, *, %, **
+ 제외하고 나머지 연산자는 Number로 결과를 출력
*/
// 단항 산술 연산자: ++, --
let num = 1;
num++; // num = num + 1;과 동일함!!
console.log(num);
num--;
console.log(num);
// 값 호출 후 증가
// console.log(num++);
// 선증가 후 값 호출
// console.log(++num);
let num2 = 4;
console.log(--num2); // 3
console.log(num2++); // 3
console.log(num2--); // 4
console.log(++num2); // 4
console.log(num2); //4
/*
+= / -=
num += 5 >> num = num + 5과 동일함
num -= 5 >> num = num - 5과 동일함
num /= 5 >> num = num / 5과 동일함
num *= 5 >> num = num * 5과 동일함
*/
let num3 = 5;
num3 += 3; // num3 = num3 + 3과 동일함!!
console.log(num3); // 8
num3 -= 5;
console.log(num3); // 3
/*
비교 연산자
비교 연산자를 사용하면 결과물을 boolean type으로 반환함
== >> 서로 같다는 의미(값만 비교, 데이터 타입은 비교 안 함)
=== >> 서로 같다는 의미(값과 데이터 타입 모두 비교함)
!= >> 서로 다르다는 의미(값만 비교, 데이터 타입은 비교 안 함)
!== >> 서로 다르다는 의미(값과 데이터 타입 모두 비교함)
*/
console.log(1 == 1);
console.log(1 === "1");
console.log(1 !== 1);
console.log(1 == true);
console.log(0 == false);
console.log(1 != true);
/*
대소관계
>, <, >=, <=
*/
console.log(1 > 2);
console.log(1 < 2);
console.log(1 >= 2);
console.log(1 <= 2);
console.log(2 >= 2);
console.log(2 <= 2);
2-4) 조건문 - if문
/*
조건문
비교를 함(true, false)
true일 때는 A라는 것을 console.log
false일 때는 B라는 것을 console.log
*/
/*
if문
기본 골격 + else
if () {
} else {
}
() 안에 있는 내용(boolean)을 정확하게 이해하는 것이 중요!!
비교 연산자와 많이 사용됨!!
*/
/*
if (1 > 2) {
// true일 때 실행됨
console.log("hello world");
} else {
// false일 때 실행됨
console.log("false");
}
*/
2-5) 반복문 - for문
/*
반복문
() 안에는 3가지 값이 존재함
1. 초기값 >> 변수 선언 후 할당
2. 종료 조건 >> boolean, 비교연산자
3. 증감값
*/
/*
for(1.초기값; 2.종료 조건; 3.증감값) {
}
*/
// 1 ~ 100까지의 숫자를 한 번씩 순서대로 출력하는 반복문
for (let i = 1; i <= 100; i++) {
console.log(i);
}
// 1 ~ 10까지의 숫자 출력 시 'hello world' 또한 각 숫자마다 함께 아래에 출력되도록 하는 반복문
for (let i = 1; i <= 10; i++) {
console.log(i);
console.log("hello world");
}
/*
바로 위의 반복문 출력 결과
1
hello world
2
hello world
3
hello world
4
hello world
5
hello world
6
hello world
7
hello world
8
hello world
9
hello world
10
hello world
*/
// 1 ~ 10까지의 숫자를 순서대로 출력함과 동시에 그 중 4의 배수에 해당하는 숫자만 'hello world'로 바꿔서 출력하도록 하는 반복문
for (let i = 1; i <= 10; i++) {
if (i % 4 === 0) {
console.log("hello world");
} else {
console.log(i);
}
}
// true || false >> ||(or 연산자)
// 구구단 중 2단만 출력하는 반복문
for (let i = 1; i <= 9; i++) {
console.log("2 * " + i + " = " + i * 2);
}
// 구구단을 2단 ~ 9단까지 순서대로 출력하는 반복문
for (let i = 2; i <= 9; i++) {
console.log(`<---- ${i}단 ---->`);
for (let j = 1; j <= 9; j++) {
console.log(`${i} * ${j} = ${i * j}`);
}
}
'Javascript > Javascript(2022 version)' 카테고리의 다른 글
Javascript 기초(6) - 상속 및 메서드 (0) | 2022.11.04 |
---|---|
Javascript 기초(5) - 객체 및 메서드 (0) | 2022.11.03 |
Javascript 기초(4) - 함수 및 객체 (0) | 2022.11.02 |
Javascript 기초(3) - 함수 (0) | 2022.11.01 |
Javascript 기초(2) - 기본 문법 및 예시 코드 정리 (0) | 2022.10.31 |