Welcome To JAVASCRIPT

suliver·2024년 2월 21일

JAVASCRIPT

목록 보기

1/4

🔍JavaScript이란?

TML과 CSS로 만들어진 웹 페이지에 생동감을 불어넣기 위해 만들어진 객체기반의 스크립트 프로그래밍 언어이다.
스크립트 언어란 이미 존재하는 프로그램을 제어하기 위해 사용되는 언어를 말한다.
HTML이 웹페이지의 기본 구조, CSS이 웹페이지의 디자인, JavaScript가 웹페이지의 동작을 담당한다.
따로 C, C++처럼 컴파일 없이 한줄 한줄 해석하며 바로 명령어를 실행하는 인터프리터 언어 HTML의 특정 요소를 선택하여 다양한 이벤트 ( 마우스 클릭, 키보드 입력 등 )에 따라 어떤 동작을 하도록 기능을 넣을 수 있다.

🔍JavaScript 사용 방법

1. 내부 스크립트

자바스크립트 코드는 ＜script＞태그를 HTML문서안에 넣어서 사용 가능하다.
HTML문서의 어느위치에서나 사용 가능한데 보통 HTML문서가 전부 로드 되고 나서인 ＜body＞ 아래에 사용한다. ( 주로 간단한 스크립트나 테스트용으로 사용한다. )

<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
  
</body>
<script>
	자바 스크립트 코드
</script>
</html>

2. 외부 스크립트

자바스크립트 파일을 HTML과 별개인 .js 확장자의 파일로 저장한 후 불러올 수 있다.
외부 자바스크립트를 사용하려면 ＜script＞의 src 속성으로 HTML 문서 위치의 기준 파일 경로를 입력해주면 된다.

<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
  
</body>
	<script src="./index.js"></script>
</html>

🔍 기초적인 데이터 타입들

1. 숫자 (Number)

1) 정수 (Integer)

1, 2, 3, 4, ..........

2) 소수 (float)

1.555, 2.3443323......, .........

2. 문자 (String)

처음부터 끝까지 문자(text)로 구성되어 있다는 의미를 가지고 있다.
String 타입은 ""을 이용하여 입력하고, String 타입의 합은 두개의 문자가 하나로 합쳐서 출력한다.

"Hello, " + "My name is 철수"　　　　　　　　　　// "Hello, My name is 철수"

3. Boolean

Boolean 값으로 true(참), false(거짓)이 있다.
true ≠ "true", false ≠ "false"

4. null

(값이 없다)가 할당된다. 즉, 정의된다.
박스만들고 아무것도 안넣고 포장한다.

5. undefined

변수는 선언했지만 값을 할당하지는 않는다.
박스만 만들어 놓은 상태이다.

🔍 변수

우리가 일일이 값을 넣어주기에는 시간이 많이 사용된다.
-> 변수를 이용하여 시간을 줄여보자.

변수 선언 방법
- const 변수명 = 값;
  console.log();　　// 콘솔에 출력

const a = 10;
const b = 5;
const myName = "철수";

console.log(a + b);		// 15 출력
console.log(a - b);		// 5 출력
console.log(a * b);		// 50 출력
console.log(a / b);		// 2 출력
console.log("Hello, " + myName);		// "Hello, 철수" 출력

변수명에 공백이 필요한 경우
- Javascript에서는 변수명에 공백이 필요하다면 다음 단어의 첫 문자를 대문자로 사용한다. 그 모양이 낙타 등 모양 같아서 Camel Case라고 한다.
  
  veryLongVariableName
- 파이썬의 경우 공백 대신에 "_"를 사용하고 모든 문자는 소문자로 작성한다. 그 모양이 뱀 같아서 Snake Case라고 한다.
  
  very_long_variable_name

🔍 변수 let, const, var 차이

1. let

재선언 금지❌, 재할당 가능⭕
필요한 경우에만 사용한다.

let a = b;
let a = c;
// 에러 (재선언 금지)

let a = b;
a = c;
// 재할당 가능

2. const

재선언 금지❌, 재할당 금지❌
주로 사용한다.

let a = b;
let a = c;
// 에러 (재선언 금지)

let a = b;
a = c;
// 에러 (재할당 금지)

3. var

재선언 가능⭕, 재할당 가능⭕
실수로값을 업데이트해도 알아차릴 수 없다는 단점이 있다. (퇴물)

let a = b;
let a = c;
// 재선언 가능

let a = b;
a = c;
// 재할당 가능

🔍 Array(배열)

1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다.
순서가 있는 값들의 집합이며, 각 값은 배열 내에서 고유한 위치(인덱스)를 가지고 있다.
boolean, string(문자) ,숫자 등 데이터 정렬 가능하다.

const daysOfWeek = ["월", "화", "수", "목", "금", "토", "일"];

console.log(daysOfWeek[4]);		// "금" 출력 -> 컴퓨터는 숫자를 0부터 세기 때문에, "월"은 0번째라고 생각한다.

// 추가
daysOfWeek.push("요일");		// "요일" 추가

console.log(daysOfWeek);		// ["월", "화", "수", "목", "금", "토", "일", "요일"] 출력

// 변경
daysOfWeek[4] = "불금";		// "금"에서 "불금"으로 변경

console.log(daysOfWeek);		// ["월", "화", "수", "목", "불금", "토", "일", "요일"] 출력

const로 선언된 배열은 재할당은 불가능하지만, 배열의 내용(배열의 요소)은 수정할 수 있다. 이것은 Javascript에서 변수와 값의 차이에 대한 이해와 관련이 있다.
const로 선언된 변수는 재할당이 불가능하지만, 값이 변경되지 않는 것은 아니다. 따라서 배열의 내용은 수정할 수 있고, 배열의 내용을 변경하는 것은 배열의 요소를 수정, 추가 또는 삭제하는 것을 의미한다. 하지만 배열 자체를 다른 배열로 재할당하는 것은 const로 선언된 배열에서는 허용되지 않는다.

const numbers = [1, 2, 3];
numbers[0] = 0;		// 가능 - 배열의 내용을 수정하는 것이므로 허용됨
console.log(numbers);		// [0, 2, 3] 출력

numbers.push(4);		// 가능 -> 배열의 내용을 수정하는 것이므로 허용됨
console.log(numbers);		// [0, 2, 3, 4] 출력

numbers = [5, 6, 7];		// 불가능 -> 변수에 새로운 배열을 할당하려고 하기 때문에 에러가 발생함

이러한 동작은 const로 선언된 배열이 다른 배열을 참조하지 않고, 단지 같은 배열을 가리키고 있는 한, 배열의 내용을 수정하는 것이 자바스크립트의 일관된 동작이다.

🔍 Object(객체)

키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다.
설명이 필요하지 않은 데이터 리스트들은 array로, 설명이 필요한 정보가 담긴 데이터 리스트들은 object를 사용한다.

const player = {
  name : "철수",
  points : 10,
  fat : true,
};

console.log(player);		// {name : "철수", points : 10, fat : true} 출력
console.log(player.name);		// "철수" 출력
console.log(player["name"]);		// "철수" 출력

// 변경
player.fat = false;		// fat 기존 값을 false로 변경
player.points = player.points + 10;		// 기존 포인트에서 10 더하고 변경

console.log(player);		// {name : "철수", points : 20, fat : false} 출력 -> fat가 true에서 false로, points는 10에서 20으로 변경된다.

// 추가
player.lastName = "김";		// lastName = "김" 추가

console.log(player);		// {name : "철수", points : 10, fat : false, lastName : "김"} 출력 -> object에 property(프로퍼티) 추가 할 수 있다.

🔍 Function(함수)

어떤 코드를 캡슐화 해서 실행을 여러번 할 수 있게 해준다.
재사용 가능한 코드 조각을 만들 때 사용되며, 매개변수를 통해 값을 전달받고, 그 값을 기반으로 작업을 수행한 후 결과를 반환할 수 있다.

// 선언
function 함수명(){
  실행할 코드
}

// 실행
함수명();

function의 "()" 안의 매개변수에서 아규먼트(argument)를 받아들일 수 있다.

function sayHello(nameOfPerson) {
console.log(nameOfPerson);
}

sayHello("철수");		// "철수" 출력
sayHello("유리");		// "유리" 출력
sayHello("맹구");		// "맹구" 출력

// 아규먼트(argument) 여러 개 받을 때
function sayHello(nameOfPerson , age) {
console.log(nameOfPerson);
}

sayHello("철수" , 12);		// "철수",12 출력
sayHello("유리" , 20);		// "유리",20 출력
sayHello("맹구" , 23);		// "맹구",23 출력

function의 값은 function 안에서만 존재한다.

// 객체(Object) 안에서 매개변수가 아규먼트(argument)를 받는 방식
const player = {
name : function(Name) {
console.log("내 이름은 " + Name + "입니다.");
} ,
sayHello : function(Age) {
console.log("내 나이는 " + Age + "입니다." );
}
}

player.sayHello(14);		// "내 나이는 14입니다." 출력
player.name("제임스");		// "내 이름은 제임스입니다." 출력

🔍 Return

console.log는 console에 무언가를 log 하는 것이다. 하지만 우리는 데이터를 받아서 사용하거나 콘솔이 아닌 화면에 결과를 출력하고 싶어하기 때문에 return 사용한다.
return은 카페나 식당의 테이크아웃 개념인 것 같다. 함수에서 만들어서 내보낸 결과값을 함수 밖으로 들고 나가서 다른데서 그대로 출력하건 다른 거랑 섞어서 비벼먹건 볶아먹건 사용할 수 있게 해준다.
한번 return을 하면 해당 함수는 끝난다. 그렇기 때문에 return뒤에 작업을 한다면 출력되지 않는다! (＃return 앞에 작업을 한다면 출력된다)
return은 말 자체로 다시 돌려준다라는 의미로해당 함수의 변수값을 지정해주면 해당 code를 안에서 실행해서 그 결과값을 해당 함수의 변수값을 선언한 변수한테 돌려주는 것이다.

function fun(a, b) {
  console.log("Hi");		
  return a + b;		// 함수 실행을 종료하고, 주어진 값을 호출 지점으로 반환한다.
  console.log("bye");		// return을 하면 거기서 함수가 끝나기 때문에 그 다음 코드는 실행 안된다.
}

const result = fun(2, 5)		// "Hi" 출력

console.log(result);		// "Hi" 5 출력

🔍 조건문

특정 조건 만족 시(참인 경유) 실행하는 명령의 집합이며, 어떤 작업을 수행하고 싶을 때 사용하는 것이다.

1. if ~else문

if (조건식) {
	// statement1
} else if(조건식) {
  	// statement2 
} else {
  	// statement3
}

if 안에 있는 조건식이 참인 경우 해당하는 if문, else if문을 실행 한다.
조건문(if, else if)에 모두 해당하지 않으면 else에 있는 statement3 이 실행된다.
else if에는 갯수 제한이 따로 없다.

2. 조건식 거짓으로 취급하는 값

1) false
2) undefined
3) null
4) 0
5) NaN
6) the empty string ("")

3. if문 중첩

if문은 중첩시켜 사용할 수 있다.

const score = 96;
const lecture = "sports";

if("sports" == lecture){
	if (score >= 70){
		console.log("점수 : pass");
	}
	else{
		console.log("점수 : fail");
	}
}else{
	if (score >= 90){
		console.log("점수 : A");
	}else if (score >= 80){
		console.log("점수 : B");
	}else if (score >= 70){
		console.log("점수 : C");
	}else if (score >= 60){
		console.log("점수 : D");
	}else {
		console.log("점수 : F");
	}
}
// "점수 : pass" 출력

🔍 논리 연산자

좌변과 우변을 논리 연산하고, 참일때는 true, 거짓일때는 false값을 반환한다.
두개 이상의 비교 연산자의 결과나 boolean 값에 대해 추가로 "AND"나 "OR"연산을 수행하여 결과를 얻는다.

1. AND

"&&" 연산자 두 개의 boolean값을 비교하여 모두 true인 경우에만 결과값이 true이다.

2. OR

||(enter 키 위의 \ + shift) 연산자는 두 개의 boolean값을 비교하여 둘중 하나라도 true인 경우 결과값이 true이다.

🔍 비교 연산자

두 개의 변수값 간의 관계를 비교하여 참(true)이나 거짓(false)의 결과를 반환한다.
주어진 식이 참인지 거짓인지 판별 가능하므로, 연산 결과는 boolean 값으로 생성된다.

1. ===

두 값이 같다.
==는 두 피연산자가 동일한 경우에만 true를 반환하고, ===는 두 변수에 대해 값과 데이터 유형이 모두 동일한 경우에만 true를 반환한다.

2. !==

두 값이 다르다.

3. <, >

한 값이 다른 값보다 크거나 작다.

4. <=, >=

한 값이 다른 값보다 작거나 같은지, 크거나 같다.

suliver

다음 포스트

Welcome To JAVASCRIPT

JAVASCRIPT

🔍JavaScript이란?

🔍JavaScript 사용 방법

1. 내부 스크립트

2. 외부 스크립트

🔍 기초적인 데이터 타입들

1. 숫자 (Number)

2. 문자 (String)

3. Boolean

4. null

5. undefined

🔍 변수

🔍 변수 let, const, var 차이

1. let

2. const

3. var

🔍 Array(배열)

🔍 Object(객체)

🔍 Function(함수)

🔍 Return

🔍 조건문

1. if ~else문

2. 조건식 거짓으로 취급하는 값

3. if문 중첩

🔍 논리 연산자

1. AND

2. OR

🔍 비교 연산자

1. ===

2. !==

3. <, >

4. <=, >=

JAVASCRIPT ON THE BROWSER

0개의 댓글