TIL 015 | JavaScript Basics

dhforb123·2021년 12월 1일
0

JavaScript TIL

목록 보기
1/4
post-thumbnail

Today, I Learned.
[멋쟁이 사자처럼 프론트엔드 스쿨]에서 배운 내용 정리.
- JavaScript Basics.

✏️ JavaScript ✏️

JavaScript 란?

JavaScript는 HTML/CSS를 제어하는 프로그래밍 언어로 웹브라우저가 해석해서 실행할수 있는 유일한 프로그래밍 언어이다.
(요즘에는 게임 개발, 서버 개발 등 다양한 분야에서 쓰여지고 있다.)

- 로드 방법

1. 내부 script

- 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">
    <link rel="stylesheet" href="../reset.css">
    <title>js basics</title>
</head>
<body>
    <h1 id="title">Hello World</h1>
    <script>
        document.getElementById("title").innerHTML("Welcome to JS")
    </script>
</body>
</html>

Inline 방법의 경우 html의 <body> 태그 내부 최하단에 작성한다.
즉, </body> 태그 바로 위 <script> 태그 통해 작성한다.

2. 외부 script

- 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">
    <link rel="stylesheet" href="../reset.css">
    <title>js basics</title>
</head>
<body>
    <h1 id='title'>Hello World</h1>
    <script src="../js/001.js"></script>
</body>
</html>

- JS

document.getElementById('title').innerHTML = 'Welcome to JS1';

자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장할 수 있다.
이렇게 분해해 놓은 각 파일은 <script> 태그에 src 속성을 사용해 해당 파일의 경로를 작성하여준다.

HTML 안에 직접 script를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용하며 script가 길어지면 별개의 분리된 파일로 만들어 저장하는 것을 권장한다.

스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에, 성능상의 이점이 있다.

예를 들면 여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용한다. 이를 통해 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라진다.

1. 변수

변수 는 변할 수 있는 수, 변할 수 있는 정보라는 뜻으로
프로그램을 만드는 데 필요한 숫자나 문자와 같은 데이터를 보관할 공간이 필요한데, 물건을 잠시 보관하는 상자 같은 역할을 하는 것이 변수이다.
변수는 선언하고 할당하고 사용할 수 있으며 지정된 값을 계속 바꿀 수 있다.

대다수의 자바스크립트 애플리케이션은 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작한다.

[온라인 쇼핑몰 – 판매 중인 상품, 장바구니 등의 정보]
[채팅 애플리케이션 – 사용자 정보, 메시지 등의 정보]

변수는 이러한 정보를 저장하는 용도로 사용된다.

1-1. 변수 선언

JavaScript에서는 let 키워드를 사용해 변수를 생성한다.
(var는 let과 거의 동일하게 동작하지만 오래된 방식이므로 새로 작성하는 script에서는 사용을 권장하지 않는다.)

let newUserName = "사용자";
let newUserAge = 20;

변수명

  • 낙타 표기법(camelCase)을 흔히 사용한다.
  • 변수이름은 $, _ 를 제외한 공백, 특수문자, 구두점(글의 여러 가지 경계를 구분하기 위해 사용되는 반점(,), 온점(.), 물음표(?) 등)을 사용할 수 없다.
  • 첫 글자는 숫자가 될 수 없다.
  • 대소문자를 구별한다.
  • 예약어가 쓰일 수 없다.
  • 유니코드 문자도 사용할 수 있다.

1-2. 변수 자료형

JavaScript의 변수는 자료형에 관계없이 모든 데이터일 수 있다.
즉, 변수는 어떤 순간에 문자열일 수 있고 다른 순간에는 숫자가 될 수도 있다.
이처럼 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를 동적 타입(dynamically typed) 언어라고 부른다.

각 자료형에 대한 연산과 메서드는 추가적으로 정리할 예정이다.

1-2-1. 숫자형

let n = 123;
let f = 12.345;	// float

숫자형(number)은 정수 및 부동소수점 숫자(floating point number)를 나타내며 관련된 연산은 더하기 +, 빼기 -, 곱하기 *, 나누기 /, 나머지 % 등이 대표적이다.

숫자형에는 일반적인 숫자 외에 Infinity, NaN같은 특수 숫자 값이 포함되며,
Infinity는 어떤 숫자보다 더 큰 특수 값, 무한대(∞)를 나타낸다.
(어느 숫자든 0으로 나누면 무한대를 얻을 수 있다.)

NaN은 계산 중에 에러가 발생했다는 것을 나타내주는 값이다. 부정확하거나 정의되지 않은 수학 연산을 사용하면 계산 중에 에러가 발생하는데, 이때 NaN이 반환된다.

1-2-2. 문자열

let str1 = 'Hello'; // 작은 따옴표 ' '
let str2 = "Hello world"; // 큰 따옴표 " "
let str3 = `${str1} world`; // 역 따옴표(백틱) ` `
			    // str3 == Hello world

JavaScript에서는 문자열(string)을 세가지 종류의 따옴표로 묶는다.
큰 따옴표와 작은 따옴표는 차이가 없으며,
역 따옴표는 문자열 중간에 변수나 표현식을 ${variable}으로 안에 넣어줄 수 있다.

1-2-3. 논리 자료형

var logic1 = true;
var logic2 = false;
var logic3 = 30 > 20; // true
var logic4 = 30 < 20; // false

논리 자료형(Boolean)은 true와 false 두 가지 값밖에 없는 자료이며,
true는 긍정(값이 존재한다.), false는 부정(값이 0이거나 존재하지 않는다.)을 의미한다.

1-2-4. 배열(Array)

let exArray = new Array(5);
let numArray = new Array(10, 20, 30, 40, 50);
let strArray = ['사과', '수박', '복숭아', '딸기', '바나나'];

배열(Array)은 숫자, 문자열, 논리, 배열 등 상관없이 여러 변수를 담을 수 있는 리스트이다.

1-2-5. 객체(Object)

let user = {
  //key: value
  userName: '오래규',
  userAge: 25,
  userHeight: 176,
  userWeight: 70
}

객체(object)는 관련된 데이터와 함수의 집합이다.
(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부른다.)

1-3. typeof

typeof 연산자는 인수의 자료형을 반환하며 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용하다.

typeof 'hello world'   // String
typeof 100             // Number
typeof NaN             // Number
typeof true            // Boolean
typeof undefined       // undefined
typeof Symbol()        // Symbol
typeof function () {}  // function

// JavaScript에서 아래 자료형들은 Object로 반환된다.
typeof null            // Object
typeof []              // Object
typeof {}              // Object

// 아래 방법을 이용하여 정확한 자료형을 알 수 있다.
Object.prototype.toString.call(null).slice(8, -1); // Null
Object.prototype.toString.call([]).slice(8, -1); // Array
Object.prototype.toString.call({}).slice(8, -1); // Object

1-4. 형변환

let x = 10;
let y = "20";
// 숫자형을 문자열로
console.log(String(x));	// "10" : String
console.log(x.toString()); // "10" : String
console.log(x + ""); // "10" : String
// 문자열을 숫자형으로
console.log(Number(y));	// 20 : Number
console.log(parseInt(y)); // 20 : Number
console.log(+y); // 20 : Number
// 논리 자료형으로 변환
console.log(Boolean(-1)); // true
console.log(Boolean(0)); // false
console.log(Boolean(1)); // true
console.log(!!true); // true

2. 상수

상수 는 변화하지 않는 변수를 선언할 때 사용한다.
변수 값이 절대 변경되지 않을 것이라 확신하면, 값이 변경되는 것을 방지하면서 다른 개발자들에게 이 변수는 상수라는 것을 알리기 위해 사용한다.

2-1. 상수 선언

JavaScript에서는 const 키워드를 사용해 상수를 생성한다.

const myBirthday = "1997-11-15";
const COLOR_ORANGE = "#FF7F00";

3. 연산자

3-1. 산술 연산자

console.log(100 + 30); // 130
console.log(100 - 30); // 70
console.log(100 * 30); // 3000
console.log(100 / 30); // 3.3333333333333335
console.log(100 % 30); // 10
console.log(10 ** 3); // 1000

더하기 +, 빼기 -, 곱하기 *, 나누기 /, 나머지 %, 제곱 **이 대표적이다.

3-1-1. 증감 연산자

let a = 0;
console.log(a++); // 0 : 출력 후 1 증가
console.log(++a); // 2 : 1 증가 후 출력

증가 ++, 감소-- 연산자는 변수 앞(prefix)이나 뒤(postfix)에 위치하며
둘다 변수를 1만큼 증가(감소)시켜 주는 것은 동일하지만
앞에 위치할 경우 증가(감소) 후 새로운 값을 반환하고,
뒤에 위치할 경우 기존 값을 반환하고 증가(감소)된다.

3-1-2. 대입 연산자

let a = 0;
console.log(a += 10); // 10 : a = a + 10
console.log(a -= 5); // 5 : a = a - 5
console.log(a *= 10); // 50 : a = a * 10
console.log(a /= 5); // 10 : a = a / 5

더하기 +, 빼기 -, 곱하기 *, 나누기 /, 나머지 % 와 같은 산술 연산을
대입 =과 동시에 진행한다.

3-2. 비교 연산자

let x = 10;
let y = 20;
let z = "10";
console.log(x < y);	// true
console.log(x > y);	// false
console.log(x <= y);	// true
console.log(x >= y);	// false
console.log(x == z);	// true
console.log(x === z);	// false : 변수의 자료형까지 비교
console.log(x != z);	// false
console.log(x !== z);	// true : 변수의 자료형까지 비교

<, <=, >, >=, ==, ===, !=, !==이 대표적이며
결과 값으로 true 혹은 false 값을 반환한다.

3-3. 논리 연산자

// 논리곱(&&)
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false
// 논리합(||)
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false
// 부정(!)
console.log(!true); // false
console.log(!false); // true
console.log(!!true); // false
console.log(!!false); // true

&&, ||, !이 대표적이며 결과 값으로 true 혹은 false 값을 반환한다.

4. 브라우저 상호작용 함수

4-1. alert()

alert("Hello world");

alert() 함수는 사용자가 확인(OK) 버튼이 있는 모달 창을 보여준다.

4-2. confirm()

confirm("Yes or No");

confirm 함수는 매개변수로 받은 값과 확인취소 버튼이 있는 모달 창을 보여준다.
사용자가 확인 버튼을 누르면 true, 취소 버튼을 누르면 false를 반환한다.

4-3. prompt()

prompt("Submit", "Please write here!");

prompt 함수는 매개변수로 받은 값과 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창을 보여준다.
사용자가 확인 버튼을 누르면 필드에 입력된 값을, 취소 버튼을 누르면 null을 반환한다.

0개의 댓글