Javascript 기초 - 프로그래밍 기초 및 Javascript 기초 문법

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

CodeTraveler

Javascript 기초 - 프로그래밍 기초 및 Javascript 기초 문법

<목차>

'Javascript > Javascript(2022 version)' 카테고리의 다른 글

티스토리툴바

Javascript 기초 - 프로그래밍 기초 및 Javascript 기초 문법

<목차>

'Javascript > Javascript(2022 version)' 카테고리의 다른 글

'Javascript/Javascript(2022 version)' Related Articles

티스토리툴바