웹을 만들어보다가 JS 복습이 필요하다고 느낀 것도 있고 여러 기능을 써보고 싶어서 생활코딩을 다시 공부하기로 했다. 이번엔 언어로 접근하여 조금더 자세하게 배워볼 것이다.
언어소개
https://opentutorials.org/course/743/4650
언어소개 - 생활코딩
JavaScript JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다. 그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수
opentutorials.org
자바스크립트 기본
실행방법과 실습환경
#크롬 개발자도구 맛보기
https://opentutorials.org/course/580/2865
둘러보기 - 생활코딩
둘러보기 2012-09-27 23:16:03
opentutorials.org
#Console 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
alert('Hello world');
</script>
</body>
</html>이렇게 하면 Hello world 경고창이 뜬다. alert는 경고창이라는 뜻이고 (); 안에 있는 값이 표시가 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
console.log('Hello world');
</script>
</body>
</html>이렇게 'console.log'를 쓰면 위에처럼 alert가 안뜨고 바로 개발자도구 - console 탭에 'Hello world'가 입력된다.
또한 개발자도구 - console 에서 아무 코드 없이 1+1 하고 enter 치면 값이 나오는 등 간단하게 가능하다.
화면이 지저분하면 clear(); 하면 초기화된다.
1. 숫자와 문자
#숫자
자바스크립트에서는 큰따옴표(")나 작은따옴표(')가 붙지 않은 숫자는 숫자로 인식하다.
- alert(2+2);
4 - alert(2*2);
4 - alert(2/2);
1 - alert(2-2);
0
프로그래밍은 사실 계산기로 고안된 도구이다. 계산기가 발달되면서 컴퓨터가 된 것이기에 여러가지 정보와 관련된 일을 처리할 수 있게 된 것. 그래서 프로그래밍은 기본적으로 계산과 관련된 기능들을 기본적으로 많이 가지고 있다. 그 중에서 JS를 이용해서 여러가지 연산을 하고 싶을 때는 Math.~~를 사용한다. 이는 수학과 관련있는 명령들의 카테고리 생각하면 된다. 그리고 그 카테고리에 있는 명령 중에 pow에 해당되는 명령을 가져올 때 앞에다 " . "을 쓴다
- Math.pow(3,2); // 9, 3의 2승
- Math.round(10.6); // 11, 10.6을 반올림
- Math.ceil(10.2); // 11, 10.2를 올림
- Math.floor(10.6); // 10, 10.6을 내림
- Math.sqrt(9); // 3, 3의 제곱근
- Math.random(); // 0부터 1.0 사이의 랜덤한 숫자
- 100 * Math.random(); // 숫자 100보다 작은 임의의 숫자 난수를 얻을 수 있다.
- Math.round(100 * Math.random()); // 100보다 작은 난수를 math.round 안에 넣어서 반올림 한 값
#문자열
- Syntax는 문법. 즉 SyntaxError는 문법오류 라는 뜻이다.
- 문자를 작성할 때는 ' 와 ' 사이 혹은 " 와 " 사이에 써야한다. ' 와 " 은 문자라는 것을 시작할게 라는 뜻이다.
- alert("coding everybody");
- alert('coding everybody');
- 만약 문자열 안에 작은 따옴표나 큰 따옴표를 넣고 싶다면?
- 역슬래시 | (역슬래시 뒤에 있는 ' 것은 문자로 인식하도록 한다)
- '원래가지고 있던 임무로 부터 탈출시킨다'라는 뜻으로 escape 기법이라고 부른다
- alert('egoing|'s coding everybody');
- 숫자 1과 "1" 은 다른 타입이다. 전자는 숫자이고 후자는 문자이다. 즉, 숫자를 따옴표로 감싸면 문자가 된다.
- tpyeof 숫자 를 쓰면 어떤 데이터 타입인지 알 수 있다.
- alert(typeof "1")
- string
- alert(typeof 1)
- number
#여러줄의 표시
- 여러줄을 표시하기 위해서는 \n 을 쓴다. 줄바꿈을 의미한다.
- alert("안녕하세요.\n생활코딩의 세계에 오신 것을 환영합니다");
- 안녕하세요
생활코딩의 세계에 오신 것을 환영합니다
#문자연산
- 문자 + 문자를 할 때 "~" + "~" 형식
- alert("coding"+"everybody");
- 띄어쓰기를 안하면 codingeverybody 이렇게 출력된다.
- alert("coding"+" everybody");
- coding everybody
- 문자의 길이를 구할 때 쓰는 .length
- alert("coding everybody".length)
- 16
- 앞에 있는 code라는 정보를 볼 때, 첫번쨰 자리는 0부터 시작한다. indexOF는 문자가 어디에 위치하는 지 알려주는 기능
- "Code".indexOF("o")
- 1
- "Code".indexOF("d")
- 2
- "Code".indexOF("e")
- 3
2. 변수
#변수의 선언
- 변수는 var로 시작한다.
- var은 변수를 선언하겠다는 의미다.
- 변수의 이름은 $, _ , 같은 특수문자를 제외한 모든 문자로 시작할 수 있다
- var a = 1;
- alert(a+1);
- 2
- var a = 'coding', b = 'everybody' ;
- alert(a+b)
- codingeverybody
#변수가 없다면
- 변수는 코드의 재활용성을 높여준다. 100으로 복잡한 계산을 했는데, 만약에 100을 1000으로 바꾸어야 한다면?
- 이 때 변수가 유용하다.
- 수정해야 할 코드가 적다는 것은 그만큼 해야 할 일이 줄어든다는 것이다.
- 그 과정에서 버그가 발생할 가능성을 낮춘다.
- 변수는 반복문, 조건문, 함수와 결합되면 더욱 중요해진다.
| 변수 사용X | 변수 사용O |
| var a = 100; | |
| alert(100+10); | a = a + 10; alert(a); |
| alert((100+10)/10); | a = a / 10; alert(a); |
| alert(((100+10)/10)-10); | a = a - 10; alert(a); |
| alert((((100+10)/10)-10)*10); | a = a * 10; alert(a); |
3. 주석 // 한 줄, /* 여러줄 */
- 좋은 주석 이라고 하는 것은 너무 길지도 않고 너무 짧지도 않은 너무 장황하지도 않고 너무 빈약하지도 않은 적합한 형태의 설명이 잘 부가되어 있는 코드가 좋은 코드이다.
- 하지만 최고는 한 번에 알아보는 것이 가능한 간결한 코드.
- // 는 줄바꿈을 하기 전까지가 주석이다.
- /* ~ * / 는 여러줄의 주석이다.
4. 줄바꿈과 여백
- 세미콜론 ; 은 하나의 구문이 끝났음을 명시적으로 나타내는 기호다. 한줄에 여러구문을 사용하고 싶을 때 써야한다.
- var a = 1; 와 alert(a); 가 독립된 명령이라는 것을 알려주는 역할
- var a = 1; alert(a);
- 하지만 JS에서는 ;을 생략도 가능한다. 줄이 바뀌면 JS는 명령이 끝났다고 간주하기 때문이다.
- var a = 1
- alert(a)
- 변수 var 설정할 때 var1 이 아닌 var 1 이렇게 띄어쓰기를 해야하지만 var a=1; 이런식으로도 가능하다.
- 단, 가독성을 위해서 보기 좋게 해주는 것
5. 비교
#연산자
- 어떤 작업을 컴퓨터에게 지시하기 위한 기호
- a = 1 => a라는 변수에 1이라는 값(상수:바뀌지 않는 값)을 대입한다.
- '='은 '우항에 있는 값을 좌항에 대입한다'라는 뜻에서 대입 연산자라고 한다.
- 대입연산자 하나에 좌항과 우항을 결합한 연산자 a = 1 같은 것을 이항 연산자라고 한다.
# >,<,== : 비교연산자
비교연산자의 결과는 true나 false 중에 하나이다. 이 둘은 블린(boolean)이라고 불리는 데이터 타입(형식)이다. 조건문에서 많이 다룬다.
# == : 동등 연산자 (equal operator)
- alert(1==2)
- false
- alert(1==1)
- true
- a = 1
- => 대입연산자 = 우항의 값을 좌항에 대입한다.
- a == 1
- => 동등연산자 = 좌항가 우항의 값이 같다면 true 다르면 false 를 만들어주는 것
# === : 일치 연산자 (strict equal operator)
일치 연산자는 좌항과 우항의 정보가 같을 뿐만 아니라 데이터 형식이 같아야 true가 된다. 엄격 +정확 하다.
- alert(1 === "1")
- false
동등 연산자는 좌항과 우항 데이터 형식이 다르다 하더라도, 그것이 실질적으로 같고 있는 정보가 동일하다고 하면 true
- alert(1 == "1")
- true
#Boolean / Number / String / undefined / null 모두 데이터 타입(형식)이라고 부른다.
- null과 undefined는 값이 없다는 의미의 데이터
- null: 값이 없음을 명시적으로 표시한 것
- undefined: 값이 없는 상태
- NaN: 숫자가 아니라는 뜻
- alert(null == undefined); // true
- alert(null === undefined); // false
- alert(true == 1); // true
- alert(true === 1); // false
- alert(true == '1'); // true
- alert(true === '1'); // false
- alert(0 === -0); // true
- alert(NaN === NaN); // false 0/0 같은 연산시 나오는 특수한 데이터. 잘 안씀
# != : 같지않다. 즉, 부정을 의미한다. == 에서 = 한개가 !로 바뀐 것으로 생각. ==와 반대이다.
# !== : '엄격, 정확하게' 같지 않다. === 중에 = 한 개가 !로 바뀐 것으로 생각. ===와 반대이다.
- alert(1==2); // false
- alert(1!=2); // true
- alert(1!=1); // false
- alert("one"!="two"); // true
- alert("one"!="one"); // false
# > : 좌항이 우항보다 크다면 참, 그렇지 않다면 거짓임을 알려주는 연산자다. '<'는 반대의 의미.
- alert(10>20); // false
- alert(10>1); // true
- alert(10>10); // false
# >= : 좌항이 우항보다 크거나 같다. '<='는 반대의 의미.
- alert(10>=20); // false
- alert(10>=1); // true
- alert(10>=10); // true
결론
=== 만 써라. 데이터 타입의 사소한 에러가 나비효과처럼 엄청난 버그를 만들어 낼 수도 있으니까. 참고로, 코드를 작성할 때 문제를 발견하는 것이 동작하고 있을 때 발견하는 것보다 훨씬 좋다.
'[자기계발] > 유튜브로 코딩배우기' 카테고리의 다른 글
| [생활코딩] JavaScript 문법 - 반복문 (2) | 2021.05.22 |
|---|---|
| [생활코딩] JavaScript 문법 - 조건문 (0) | 2021.05.20 |
| [생활코딩] React 강의 완강 - 20~21강 update 구현 (0) | 2021.05.11 |
| [생활코딩]React 강의-4 18강~19강 create (0) | 2021.05.10 |
| [생활코딩]React 강의-3 17강 Component 이벤트 만들기 (0) | 2021.05.08 |
