20.08.12 Javascript 기초 (값, 연산자, 변수, 조건문, 반복문) + 8.17 내용 추가

deokyeong1020·2020년 8월 12일
0
post-thumbnail

자바스크립트 기초 시작!

사실 HTML, CSS도 완전히 끝났다고는 생각하지 않지만 사전스터디 과제에 맞춰 구현은 할 수 있어 기초 정도는 된다는 판단하에 한번도 손댄적 없는 javascript로 넘어왔다. 아무래도 사전스터디 기간에 본 캠프에 손댈 언어 기초정도는 건드려봐야 할 것 같은 느낌이라..
디테일하게 배우기보다는 유튜브 영상을보며 속성으로 배우는 중이라 디테일이 떨어질 수 있다. 하지만 디테일은 한바퀴 돌리고 채우면 된다는 생각이라 일단 빠르게 기초를 돌파해보겠다.

++ 08.17 유튜브 영상으로는 어렵다고 느껴져 따로 기초 강의를 수강중이다..

아무튼 시작한다.

자바스크립트 작성방법

.js 파일을 만들어서 script태그를 이용해 html에 연결해준다.

<script scr = "hello.js" defer></script>코드를 입력하세요

이런식으로 head나 body 맨 끝에 작성한다.

defer를 써주는 이유는 1)head에 작성했을 때 body랜더링이 끝난 다음에 랜더링 할 수 있게끔하여 바디와 충돌하지 않도록 해준다.

비추하는 방법이지만

<script>
var trash= " 이 방법 별로"
</script>

같은 방식으로 html 문서 내에 작성이 가능하다.

데이터 타입 = 자료형
물건도 값이 중요하다고 했던가... 자바스크립트에서 중요한 값들 먼저 알아보겠다. 데이터의 타입을 분석하고 싶을 때는
typeof value (ex typeof 1 // Number) 식으로 알아 볼 수 있다.

일단 대표적으로 숫자Number,문자열string,Boolean,undefined,null,object이 있다.

숫자(Number) : 그냥 써주면 된다... 1,2,3,4, NaN(Not a Number)
자바스크립트는 숫자가 아닌걸 연산해도 프로그램이 죽지 않고 NaN를 변수로 할당하여 추후에 고칠 수 있도록 해준다.--자바스크립트의 성향
범위... [ 최솟값은 Number 객체의 MIN_VALUE 프로퍼티(Number.MIN_VALUE)에 저장된다. 값은 브라우저마다 다르지만 보통 5e-324이다. 최댓값은 MAX_VALUE 프로퍼티에 저장되며, 보통 1.7976931348623157e+308이다. 계산 결과가 범위를 벗어날 때에는 양수는 Infinity로, 음수는 -Infinity로 변환된다. ]
❗️ Number("5") // 5 숫자 5가 된다.
문자(String) : " " , ' ' , ``(백틱)으로 감싸서 써주면된다. 저 안에 들어가면 숫자라도 문자가 된다. 최대 2의53승-1만큼 글자 수 를 작성가능.

❗️ String(5) // "5" 문자 5가 된다.

참거짓(Boolean) : true, false
undefined : 값이 정의되지 않았을 때 컴퓨터는 기본값으로 이걸 지정한다.
데이터 타입도 undefined

null : 값이 정의되지 않은 값에 대하여 내가 값이 없다고 이걸 지정한다.
데이터 타입이 object이다. 약간 설계 미스인데 es6에서 구분가능한 새로운 것이 나온다.

이것들을 repl방식을 통해 공부해보겠다.
❗️자바스크립트는 데이터를 기준으로 타입을 결정한다
java나 C++같이 데이터 타입을 먼저 선언하는 언어도 있다.

object타입은 이미지 필기로 대체! 읽어보자

연산자 (산술, 비교, 할당)

할당 연산자 : =을 사용하며 우변의 값을 좌변에 저장한다.
-->var 코끼리 = : "elephant" 처럼 이름을 정할때 시멘틱(의미부여)가 확실하게 해준다.

-->변수 적용시 ,를 이용해 여러개를 한 번에 저장 가능
var 코끼리 = "elephant", 사람들 = "people";
단 한 문장에 var는 한 개만 들어갈 수 있다.

--> 값 할당할 때 var = 코끼리 = 사람들 = 109 라는 식으로 작성 가능하지만 브라우저에 따라 추후 사람들 = 119같은 식으로 할당했을 때 코끼리 까지 영향이 미치는 상황이 벌어지기도 하니까 이런 식의 작성은 지양하자.

복합 할당 연산자 : =앞에 연산자 작성

+=,-=,*=,/=,%= 이런식으로 작성된 연산자
//먼저 = 앞에 있는 것을 연산한 후 할당

var point = 1
point += 1
console.log(point) // point에 1을 더한다음에 재할당하였으므로 2가 나온다.

산술 연산자

  • 연산자 : 한 쪽이라도 number타입이 아니면 그 결과는 그냥 연결한다.
    **❗️ 틀리기 쉬울 것 같은 연결
var value = 1 + 5 + "돼지" // 왼쪽에서 오른쪽으로 실행이라 6돼지가 된다.

숫자로 변환 예시 (이미지 파일)

-,*,/,% 연산자
(-) 연산자 : 문자타입이라도 숫자타입으로 변환해서 계산한다.
(*) 연산자 : 숫자 값으로 변환 가능하면 변환해서 곱한다. 숫자가 평과결과가 나오는 것과 곱해야하면 NaN 나온다. 한가지 유동 소수점 관련해서 볼 게 있는데...

(/) 연산자 : 이미지 참고..

(%) 연산자 : 왼쪽 표현식 평가 결과를 오른쪽 표현식 평가 결과로 나누어 나머지 구함

console.log(3 % 2) // 나머지인 1.0이 나옴 

! 연산자 : 논리형에 사용되는 연산자. !true/!false하면 평가결과가 반대로 출력
흔히 말하는 이중 부정도 가능 !!true // true

이건 잘 안 쓰이지만 일단 알고 있으면 좋을 것 같은 연산자 모음
단항 + 연산자 : +value 형태는 값을 무엇이든 Number 타입으로 변환한다. 그러나 +를 더하기로 착각할 수 있어 선호하는 방법은 아니다.
단항 - 연산자 : 이거는 그냥 값의 부호를 바꿀 때 쓴다. 원래 값은 바뀌지 않는다.
후치 ++/--연산자 : 문장을 수행한 다음에 1 증가/감소

var one = 1;
var value = one++ +3;
console.log(value); // 4
console.log(one); // 2

전치 ++/--연산자 : 문장 안에서 1증가/감소

var one = 1;
var value = ++one + 3;
console.log(value); // 5
console.log(one); // 2

부등호 >, <, {<= 좌변이 우변보다 작거나 같다, >= 좌변이 우변보다 크거나 같다 }
관계 연산자 : ==(값만 비교 true!), ===(타입까지 같을 때 true)







❗️JS의 유일한 예외

NaN === NaN // false가 나온다. NaN(Not a Number)


!= (써진거 같지 않다 라는 의미!, 다르면 true) !==(타입만 달라도,true)

❗️일단 고수가 되기 전까지는 === , !==만 사용하자.

변수(variable)
var로 변수를 만들어 컴퓨터한테 값을 저장하도록 만든다.(재활용하려고)
-> 연산도 기억가능, 단 출력시 결과값이 출력.
-> 변수는 여러번 바꿀 수 있다. (const, let 개념은 나중에...)

일단 변수 명명 규칙부터 간다!

  1. 숫자는 맨 앞에 올 수 없다.
  2. 특수문자는 $와 _(언더바) 외에는 올 수 없다.
  3. 변수명은 인간이 쓰는 언어는 다 가능하나 국제표준 영어를 애용하자!

null, undefined
비어있는 값이라는 소리다..

단, 값이 비어있을 때 undefined는 컴퓨터가 지정한 기본값이고 null은 내가 지정한 빈 값이다. 뭐 사용하다가 지워버리면 이런 값이 나오겠지?
이를 통해 변수 정해서 사용하다가 null이 나오면 '아 내가 쓰다가 지웠구나'하는 판단가능
![] (https://images.velog.io/images/deokyeong1020/post/4d881cba-6846-4a75-a31f-c11cc46e01c3/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-08-12%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%208.01.16.png)

조건문 if

-. 작성법

if (내가 세운 조건) { "딩동댕" } else { "꽝" } 
// 조건에 true면 "딩동댕"이 출력되고 false면 "땡"이 나온다.

반복문 while // for는 나중에 추가로...

while (내가 세운 조건) {반복시키고 싶은 거} //true면 반복되고 false면 반복이 멈춘다.!


각각 해석을 해보면 ' 변수 a에 0을 잠시 저장해요, 그리고 반복해봅시다. a가 3보다 작으면 다음 행위를요.. a를 불러주고 a에 1을 더해서 새 값을 저장해요.

조금 낯설다면 아래것은 좀 더 와 닿을 것이다.

'변수 a에 0을 저장해서 선언해요, 그리고 생각해봐요, a<3보다 작은가요? 그렇다면 '나는 프론트엔드를 지망합니다'를 출력하고 a에 1을 더해서 저장한 다음 a가 3이랑 같아지기 전 까지 다음 식을 반복해요. --> 이렇게 해석 가능.

do ~ while문

var k=0
do{ console.log("가면");
k++;}
while (k<2) {
console.log("여기까지가~");}
// 이 문장 실행시
가면
가면
여기까지가~// 이렇게 출력된다. 이유는 true이면 do의 중괄호에 있는 문장이 실행되고 false일 때 비로서  while문장이 실행되면서 문장이 끝나기 때문이다.

--오늘은 여기까지..-- 자바스크립트 기초는 내일 이어서 공부하겠다.

+08.17 중간중간 추가한 내용도 있지만 없는거 추가한 건 밑에다가~

주석!

js는 주석을 코드로 인식하지 않는다.(당연한거긴하죠..)
암튼 주석은 한 줄 주석, 블록 주석, 관례 주석이 있다.

한 줄 주석은 단순하다.

// 여기다가 아무말이나 쓰면 따블 슬레시 이후로는 주석처리다. 한줄 할 때 많이 사용

블록 주석

/* 두 줄 이상 일 때 많이 씁니다~ */

관례로 사용되어오던 주석

/** 개발자들 사이의 코딩 관례로 많이 사용되어 왔으며 이렇게 작성하면 프로그램 설명 문서를 자동으로 만들어 주는 툴이 있다. */

유니코드


profile
일일 개발 기록 블로그

0개의 댓글