TIL #11 JavaScript_end

채록·2020년 12월 13일
0

HTML & CSS + JS

목록 보기
10/14

들어가는 말

생활코딩님의 강의를 통해 JS의 기초이론에 대해서 공부한 뒤, 아직은 감이 잘 오지 않아 제로초님의 기초이론 강의를 수강했다. 여전히 모르겠지만 그래도 두번 들으니 좀 알아들을것 같기도 하고! 이전까지 기록한 TIL들로 좀더 세세하게 적었다면 이번 글은 아주 간단하게 적으며 머릿속을 정리해보았다.

아직 다루지 않은 개념들은 게임이나 To do list를 만들면서 익혀나갈 예정이다!
강의에 나오는 개념보다, 강의에 나오지 않는 개념이 훠어어어어얼씬 많기 때문에 이건 내가 뭘 만들면서 공부하는 수 밖에 없을 것 같다. (아니면 다른 강의를 또 듣거나!)

  • 함수와 속성 (property와 method)의 개념 새기기
  • JS의 data type에 대해 공부하기
  • 반복문 while과 for 서로 능숙하게 변환하기



JavaScript


프로그래밍,, 컴퓨터에게 명령 내리는 것
자바스크립트는 명령할때 사용하는 언어 중 하나! (웹 페이지 제작에 주로 사용됨/모바일/데스크탑 프로그램도 가능!)

  • 구구단 설계 (맛보기)

    1x5? 9 땡, 5 딩동댕
    2x8? 16 딩동댕
    .
    .
    <숫자, 문자, 참/거짓(->'불린 or 불리언' 이라고 부른다)> 모든 major 언어에 포함되는 개념이다.

Data Type

JavaScript의 data type에는 6가지가 있다.

  • 수 (Number / NaN) : + - * / % == === != !== 등,,
  • 문자열 (String)
  • 부울,불린 (Boolean)
  • 객체 (Object) 함수 (Function) 배열 (Array) 날짜 (Date) 정규식 (RegExp)
  • 널 (Null)
  • 정의되지않음 (Undefined)


Number

이거뭐야...

+) NaN (Not a Number)

NaN == NaN
false
1 == '1'
true

=== 이렇게 세번을 쓰는걸로 시작하자! (== 두번만 쓰면 틀린 답이 나올때가 있다. 나중에 더 공부해서 이유 파악해보자 / 비교할땐 === 쓰기!)
비교의 예외 : NaN === NaN 은 false라고 나온다,,


연산자

제곱 연산자 **

> '문자1' + '문자2'
< "문자1문자2"

> '문자2' + 5
< "문자25"
// 숫자 5가 문자로 전환되어 인식된다.

> Number('5')
< 5
// Number 함수로 인해 문자 "5"가 숫자로 출력되었다.


문자열

적용 예1 : []로 해당 순서 단어 가져오기

> '함수야놀자'[2]
< "야"
// 2번째 단어 가져오기 (단어는 앞 순서가 0임 - 대부분의 컴퓨터 언어에서 이런다. 모두는 X)

> var 단어 = "함수야놀자"
< undefined
> 단어[2]
< "야"

적용 예2 : .length

> 'ㄱㄴㄷㄹ'.length
< 4

undefined, null

undefined 대신 null 사용하버릇 하기

undefined는 컴퓨터가 넣어주는 경우가 있으므로 내가 지정한 것인지, 컴퓨터가 지정한 것인지 보다 쉽게 구분하기 위해서!

변수가 기억하고 있는 값을 바꿀 수 있다.

  • var : 새로 지정
  • var 없는것 : 내용 바꾸기

적용 예1 : 값 넣어주기

> var 빈값
< undefined
> 빈값 = 5
< 5	
> 빈값
< 5

적용 예2 : 입력된 값 지우기

> var 이름 = '제로초'
< undefined
> 이름 = '네로'
< "네로
> 이름
< "네로"
> 이름 = undefined
< undifeined
> 이름
< undefined

적용 예3 : null

> 이름 = null
< null
> var 새로운값
< undefined
> 새로운값 === undefined
< true
> 새로운값 = null
< null

객체

  • 객체 = {
    속성(property): 값,
    속성(method): 함수
    }

  • 객체[속성] or 객체.속성 형태로 객체에 담긴 속성 값만 사용 가능하다.
    (단, 대괄호 안에는 변수를 쓸 수 있지만 점 뒤에는 쓸 수 없다!)

배열

  • 배열 = [ ]
  • 배열을 구분해주는 객체 Array.isArray(확인할 객체/배열 이름)
    배열이면 true / 아니면 false로 출력된다.


변수(var / variable) var 이름 = 값;

  • 값을 컴퓨터에 저장해두는 것.
  • $와 _를 제외한 특수문자는 사용할 수 없다. (한글, 영어, 한자 다 가능)
  • 변수의 첫 글자로 숫자는 사용할 수 없다.

적용 예 1

> var result = 15
< undefined

> result
< 15

적용 예 2

> var result = 3 * 6
< undefined

> result
< 18

> result === 18
< true

조건문 (if, else) +) switch

조건이 true면 조건문, false면 else문의 것을 출력.
적용 예1 : true일때 if문 출력

> if (5*5 === 25) { '딩동댕' } else { '땡' }
< "딩동댕"

적용 예2 : 여러개

if (조건) { } else if(조건2) { } else { }

적용 예3 : if문만 작성하기
if문이 true일 경우에 출력됨.



반복문 (while / for)

while <-> for 서로 변환하는 연습 많이 해보기

여러번 쳐서 다 출력되게 하고 싶을때 console.log() 를 사용한다.

> '안녕하세요'
  '안녕하세요'
< "안녕하세요

> console.log('안녕하세요')
  console.log('안녕하세요')
  console.log('안녕하세요')
  console.log('안녕하세요')
  console.log('안녕하세요')
 
  안녕하세요
  안녕하세요
  안녕하세요
  안녕하세요
  안녕하세요
< undefined

백번까지 칠순 없다! 반목문 활용

while

처음
while (조건) { 실행 끝 }
// 조건이 참일동안 중괄호 속 반복 출력

적용 예1

> var 값 = 0
  while (값 < 100) { console.log('값')
  	값 = 값 + 1 }
< //값으로 99까지만 출력된다. (0부터 99까지 총 100번 출력됨)

for

for (처음; 조건; 끝) { 실행 }

적용 예1 : while문을 for문으로 변환해보기

//while 문

var 조건 = 0;
whilt (조건 < 5) {
  console.log ('딸기 좋아')
  조건 = 조건 + 3;
  
//for 문
for (var 조건 = 0; 조건 < 5; 조건 = 조건 + 3;) {
   console.log('딸기 좋아')
   }


함수 (function)

()는 입력값, return은 출력값

적용 예1 : 반복 출력 가능

> function 함수(x, y) {
	return x + z + 5; }
< undefined
> 함수(3, 2)
< 10
> 함수(4, 6)
< 15

적용 예2 : 반복을 최소화 해주는 function

> function 인사(이름) {
	console.log('안녕하세요.')
    console.log(이름 + '님')
    console.log('반가워요')
< undefined

> 인사('제로초')
< 안녕하세요
  제로초님
  반가워요
profile
🍎 🍊 🍋 🍏 🍇

0개의 댓글