JavaScript #1.

1. script 태그

웹브라우저에 JavaScript를 적용 시 사용

2. 이벤트

• 웹브라우저 위에서 발생하는 동작
• 웹브라우저는 자주 사용되는 이벤트들을 내장

<input type="button" value="hi" onclick="alert('hello')">

위 코드에서 onclick 속성은 속성이 위치하고 있는 태그(즉 버튼)를 사용자가 클릭 시 속성값을 실행

3. Console

3-1. 장점

• 파일을 만들지 않고도 자바스크립트의 즉각적인 실행 가능
• html 코드 없이 자바스크립트 코드만으로 사용 가능

3-2. 단점

• 긴 코드를 작성하거나 수정 사항이 많을 경우 콘솔에서 작업이 난해
• 현재 웹페이지를 대상으로 자바스크립트가 실행

텍스트의 글자 수를 해당 페이지의 경고창으로 파악

4. 데이터 타입(자료형)

• 자바스크립트의 자료형은 6개가 존재
• 숫자, 문자열 자료형을 가장 자주 사용

"1"+"1", 'Hello world!'
문자열은 작은 따옴표나 큰 따옴표로 표기

1+1
숫자는 따옴표가 불필요

1+1    "1"+"1"     '1+1'
-> 2   ->"11"    ->'1+1'

타입 파악용 연산자

typeof 1;    typeof '1';
-> number    -> string

5. 연산

주요 연산 명령어 파악

5-1. 제곱

Math.pow(3,2);
-> 9

• Math 수학과 관련된 명령어 카테고리
• pow(3,2) pow는 제곱 명령어, 예시는 3의 2승을 의미

5-2. 반올림

Math.round(7.27);
-> 7

round는 반올림을 하는 명령어

5-3. 올림

Math.ceil(6.25);
-> 7

5-4. 버림

Math.floor(9.25);
-> 9

5-5. 제곱근

Math.sqrt(4);
-> 2

5-6. 임의의 수 생성

Math.random();
-> 0.6896235870663077

random 0과 1 사이의 임의의 실수를 생성하는 명령어

6. 문자열

'Darth Vador: "I am your father"'
작은 따옴표 내에 단순 기호로써 큰 따옴표 사용이 가능하며 반대도 가능

'junhyok's coding'
일반적으로 문자열로 표기된 따옴표와 같은 따옴표를 단순 기호로 사용은 불가능

'junhyeok\'s coding'
단순 기호로 사용할 따옴표 앞에 역슬래쉬를 표기할 경우 문자열로 표기된 따옴표와 같은 따옴표를 사용 가능

7. 문자열에 사용되는 명령어

문자열에 사용되는 간단한 명령어 예시 알아보기

7-1. 개행

"junhyeok's\ncoding"

-> junhyeok's
   coding

\n은 줄을 바꿔줌

7-2. 문자 갯 수 파악

"junhyeok's coding".length;
-> 17

length는 해당 문자열 내에 사용된 문자의 수를 파악

7-3. 문자의 위치 파악

"junhyeok's coding".indexOf('c');
-> 11

indexOf는 해당 문자열을 0부터 카운트해서 문자열 내의 특정 문자 위치를 출력

8. 변수의 사용

값을 담는 그릇

8-1. let

let으로 선언

let a = 1;
a = 10;
console.log(a);
-> 10

담겨진 값은 다른 값으로 변경 가능

let a = '코딩', b = ' coding';
console.log(a+b);
-> 코딩 coding

8-2. const

let과의 차이는 값의 재할당이 불가

let a = 1;
a = 10; // 가능

const a = 1;
a = 10; // 에러 발생

변수에는 숫자 외에도 다양한 형태의 데이터 삽입 가능

9. 변수의 필요성

변수는 코드의 재활용성 향상에 기여(재활용성은 좋은 코드 작성하는데 있어 핵심)

ex)
{(100+10)/10-10}*10 코드 작성 시 변수없이 작성할 경우

console.log(100+10);
console.log((100+10)/10);
console.log((100+10)/10-10);
console.log(((100+10)/10-10)*10);

위 코드를 변수 사용해서 작성 시

let a = 100;
a = a + 10;
console.log(a);
a = a / 10;
console.log(a);
a = a - 10;
console.log(a);
a = a * 10;
console.log(a);

이 때, 계산해야할 값을 100이 아닌 다른 값으로 변경 시 변수 사용 코드는 한줄만 변경 가능하나 변수 미사용 코드는 변경해야 할 부분이 다량 발생

코드가 길어지거나 변경해야 할 부분이 모여있지 않고 흩어져 있을 경우 변경점 파악 난이도가 상승 결과적으로 유지보수가 난해

10. 주석

10-1. 주석의 기능: 컴파일 시 비해석

10-2. 주석 사용의 목적

• 미래의 자신이나 타인과의 코드 공유 시 도움말 작성
• 특정 코드 부분의 동작을 일시적으로 방지

10-3. 주석의 종류

• // 한줄 주석
• /* */ 여러줄 주석
  
  

11. 줄바꿈 및 여백

11-1.

• ; 명령어 구분 목적
• 코드줄 변경 시 ; 미사용해도 컴파일 가능(그래도 되도록 사용)
• 다음과 같이 한줄에 여러 명령어 사용 시 특히 필수

const a = 1; console.log(a);

11-2. 들여쓰기

• 가독성 상승 목적
• tab 또는 space * 4 사용
  
  

12. 연산자 정의

연산자: 어떤 작업을 컴퓨터에 지시하기 위한 기호

비교 연산자
주어진 값의 대소,동등여부 구분하여 true/false 판별
ex) ==, <, >, <=, >=

true/false의 자료형은 boolean

13. 등호를 사용한 연산자

13-1.

= 대입 연산자: 우항을 좌항에 대입

13-2.

== 동등 연산자: 좌우항 값의 동등여부를 비교하여 true/false 판별

console.log(1==1);           console.log(1==2);
-> true                      -> false

console.log('하나'=='하나');  console.log('alpha'=='bravo');
-> true                      -> false

13-3.

=== 일치 연산자: 좌우항이 "정확한" 동등여부를 비교하여 판별

console.log(1=='1');  console.log(1==="1");
-> true               -> false

13-4. 일치 연산자 <-> 동등 연산자

동등 연산자: 좌우항 값의 동등여부만 판단
일치 연산자: 값만이 아니라 자료형의 동등여부까지 함께 판단

프로그램 동작 시 자료형도 구분하는 만큼 동등 연산자보다는 일치 연산자 사용을 권장

13-5.

null: 값이 미존재(프로그래머의 의도한 상황)
undefined: 값이 미정의(프로그래머가 의도하지 않은 상황)

console.log(undefined === null);  console.log(undefined == null);
-> false                          -> true

undefined와 null은 다른 자료형에 소속

13-6.

• 동등 연산자는 1을 true로 1이 아닌 수를 false로 취급
• 숫자와 불린은 다른 자료형이기에 일치 연산자는 전부 false로 취급

console.log(true === 1);  console.log(true == 1);
-> false                  -> true

13-7. NaN은 계산 불가라는 의미

console.log(NaN === NaN);
-> false

NaN은 같아도 거짓으로 판별

14. 부정과 부등호

• != 부정 연산자: 동등 연산자와 정반대로 판별
• !== !=과 같으나 일치 연산자에 대응
• <, > 부등호가 실제 크기와 일치 여부 판별
• <=, >= 부등호가 실체 크거나 같음과의 일치 여부 판별