....

섹션 17:JavaScript Arrays

Introducing Arrays

data structure = data collection

코딩 연습 25: Lotto Numbers Exercise

Array Random Access

string은 바로 바로 수정이 불가능하지만

array는 바로 수정이 가능하다..

->

코딩 연습 26: Array Access Exercise

Push & Pop

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

string은 변수 지정할때를 빼고는 내용이 바뀌지 않는다.(그리고 지정할때에 순간에 대한 내용을 저장한다.)

Shift & Unshift

코딩 연습 27: Push/Pop/Shift/Unshift Practice

Concat, indexOf, includes & reverse

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

indexOf는 만약 array에 똑같은 컨텐츠가 있으면 가장 앞에있는것만 인덱스해준다.

섹션 16:JavaScript Decision Making

 Decision Making With Code??

코드를 통한 의사결정구조를 만든 결과물을 보여줌 (레딧)

레딧을 통해서 게시물에 코맨트가 있으면 코멘트를 눌렀을때 모든 코멘트를 다 보여주고

게시물에 코멘트가 없으면 코멘트가 없다는 화면을 display해주는 결과물을 통해서

어떤식으로 의사결정구조가 이루어져 있는지 간단하게 볼 수 있다.

Comparison Operators

A > a가 false인 이유는 A의 유니코드 값이 0040이고 a가 0061이기 때문에 

유니코드값으로 comparison이 되기때문에 ...

Equality: Triple Vs. Double Equals

double equal은 엄격한 equal이 아니다. ->

타입을 가리지 않고 같음을 표시해주기도하고 null 와 undefined는 엄격히 다른 컨셉임에도 불구하고 같음으로 표시한다.

그것을 위한 triple equal 

엄격한 equal... 

능숙해지면 double equal을 사용하지만 그렇지 않다면 triple equal을 더 권장한다.

퀴즈 6: Comparison Quiz!

그냥 수학문제와 같다.

갑자기 헷갈린건 =<, >= 이라는것 

이상과 이하를 자주 쓰지 않다보니 갑자기 헷갈렸다.

> and = 이 아니라 > or = 인데 

내가 and 개념으로 이해해서 false라고 생각햇는데 그게 아니였다.

Console, Alert, & Prompt

alert과 prompt는 브라우저에 직접 입력창을 띄운다.

Running JavaScript From A Script!

css 파일을 링크시키는것처럼 JS도 사용하려면 html파일에 링크 시켜야한다.

보통은 body의 제일 하단부분에 링크시킨다.(head가 아니라) ->왜냐면 자바스크립트를 브라우저가 인식하기 전에 내용물들을 먼저 인식하고 나서 JS를 적용시키길 원하기 때문에(order matter)

If Statements

basic syntex

if (condition) {

result}

코딩 연습 21: Our First Conditional Exercise

Else-If

Else

코딩 연습 22: getColor Conditional Exercise

Nesting Conditionals

코딩 연습 23: Nested Conditionals Practice

변수를 랜덤 숫자로 설정하라는 건줄 알았는데

조건을 보고서 알맞는 숫자를 입력하는 문제였다.

답은 102였다.

170. Truth-y & False-y Values

Logical AND

코딩 연습 24: Logical AND Mystery Exercise

아래에 조건에 맞는 값을 넣어서 YOU GOT IT!! 을 출력하게 하는 문제

그값들은 첫 글자에 P가 들어가고 글자의 길이는 5글자 이상, 그리고 7이 들어가게 만들어야하는 조건을 읽을줄 알아야하는 문제.

Logical OR

두개 이상의 논리(and, or, 등등)가 결합될경우 order matter에 따른다. 혹은 괄호를 쳐서 좀더 명확하게 순서를 구분할수 있다.

Logical NOT

2020/11/09 - [TIL(today I learned)] - 2020-11-09 TIL

2020/11/10 - [TIL(today I learned)] - 2020-11-10 TIL

2020/11/11 - [TIL(today I learned)] - 2020-11-11 TIL

String Template Literals -SUPER USEFUL

template literals의 syntex는 ` ~~~ ` 

여기서는 quote( ' )가 아닌 back-tick( ` )을 이용한다.

string은 끼워넣기(embed)가 안되서 string을 이용한 코딩을 할때 불편한 점이 많지만

template literals는 내가 정한 변수들(variables)를 끼워넣을 수 있어서(embed) 굉장히 편하다.

Undefined & Null

null = nothing;

undefined = not defined; 'i don't know'

Undefined instead is a concept that just means something.  Not being there, not being defined.

It doesn't mean nothingness.

Random Numbers & The Math Object

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

코딩 연습 20: String Template Literal Exercise

embed 할때 중괄호 넣는줄 모르고 소괄호를 계속 넣다가 헤맸다...

2020/11/09 - [TIL(today I learned)] - 2020-11-09 TIL

2020/11/10 - [TIL(today I learned)] - 2020-11-10 TIL

String Methods With Arguments

mdn에서도 method에 대한 사용 예시가 자세히 나와있다. 참고..!

코딩 연습 19: More String Methods Practice

2020/11/09 - [TIL(today I learned)] - 2020-11-09 TIL

String Methods

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

코딩 연습 18: String Methods Practice

섹션 15:JavaScript Strings and More

Introducing Strings

또다른 원시적(primitive) 타입의 코드

a string is basically textural information, a string of characters.  So they're just another primitive type and they represent text.

string을 표현할때는 스트링의 시작과 끝이 따옴표로 되어 있어야 한다.

※앞과 뒤가 같은 따옴표여야 한다. 작은 따옴표 큰 따옴표 이렇게 되어있으면 인식 x

  섞어서 쓸 수 있는데 가령 'he said "we should go" ' 이렇게 쓸 수 있다.

코딩 연습 17: Our First String Variables

Indices & Length

indice

1.

표시

2.

지수,첨수, 첨자 (A, A의 n, 1 따위)

3.

방증, 상황증거

strings are indexed.

And what this means is that every character in a string has a corresponding number associated with it,

a positional number that goes in order from the beginning of the string starting at zero

1 + "hi" 의 경우는 JS가 텍스트 인포메이션과 넘버 인포메이션을 논리적으로 더 할 수가 없으니 

둘다 넘버로 만들던가 스트링 타입으로 만들던가 해서 더해보는데 결국에는 스트링 타입으로 더해서 결합되어진 것.

퀴즈 5: Strings Basics Quiz

• index는 0부터 센다.
• string + string을 하면 공간을 남기지 않고 글을 덧쓴다.
• When adding a string and a number, JS behaves oddly! It turns the number into a string and smushes them together

섹션 13:OPTIONAL Museum Of Candy Project

candy를 주제로한 웹사이트를 만들어보는 프로젝트

강사가 선택적으로 들으라고 해서 그냥 보기만 했다.

부트스트랩을 응용해서 만들었다. 라는것 정도의 의미..

나중에 이것을 그대로 배끼지 말고 내가 컨셉을 정해서 따로 만들어 보고 싶다.

섹션 14:JavaScript Basics!

Why JavaScript is Awesome

 javascript는 html과 css에 논리를 더해준다.

 html과 css만으로는 정적이지만 javascript를 더함으로써 우리가 만들 수 있는 작업물에 한계를 넓혀준다. 한계를 넓힌다? 라는 느낌보다는 더 많은 것들을 할 수 있다는 느낌이 더 맞는거 같다.

Primitives & The Console

JavaScript Numbers

+

//power (제곱)
3 ** 3 // 3 * 3 * 3 = 27

WTF is NaN

typeof 라는 명령어를 통해서 이 값이 숫자값인지를 알 수 있다.

기술적으로 JavaScript는 NaN(Not a Number)을 number값으로 인식한다.

Quick Numbers Quiz

차례대로 정답은 10 , 9 , NaN이다.

기본적으로 사칙연산의 순서대로 계산을 하지만

계산식에 NaN가 끼어들면 모든 계산이 다 망쳐진다.

Variables & Let

변수(variable)을 저장하는 커맨드 -> let

저장하게 된다면 변수를 입력하면 그 값을 그대로 불러온다.

변수값은 링크가 안된다. 그러니까 변수값을 따로 만든다면 그 때에 만든 상황자체의 값만을 저장한다. 

->변수(A)와 변수값(B)을 더하는 변수값(C)을 저장하고 나중에 A값을 바꾼다고 해서 C값이 그것에 연동되서 바뀌지 않는다. 더한 당시의 값만을 저장한다.

코딩 연습 15: Our First Variables Exercise

Updating Variables

Const & Var

constant

• 1

  끊임없는, 거듭되는

• 2

  변함없는 (=fixed)

• 3

  정수, 항수 (↔variable)

let은 업데이트나 수정이 되지만

const(constant)는 값을 저장하면 수정을 할 수 없다.

var는 let과 const 이전에 사용했던 명령어(?)로 이제는 쓰이지 않는다. 쓸 수는 있다. 다만 쓸모가 없어졌을뿐

코딩 연습 16: Our First Constants Exercise

퀴즈 3: Variables Quiz

1. let

2. let의 업데이트, 수정을 하는 방법

3. const

의 이해를 묻는 문제

Booleans

booleans => yes or no , ture or false

JS에선 소문자로 ture, false다. (True, False는 인식 안함 -> 파이썬에선 앞에 대문자 써야됨)

variables는 booleans와 number값 타입을 바꿀 수 있다.(다른 언어는 안된다는 뉘양스)

Variable Naming and Conventions

velog.io/@recordboy/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B3%80%EC%88%98-%EB%AA%85%EB%AA%85-%EA%B7%9C%EC%B9%99

m.blog.naver.com/PostView.nhn?blogId=playcodingacademy&logNo=221317135750&proxyReferer=https:%2F%2Fwww.google.com%2F

developer.mozilla.org/en-US/docs/Glossary/Identifier

convention

• 1

  관습, 관례

변수 가장 앞에 숫자를 쓰면 인식하지 못한다.

변수를 작성할때 관습적으로 변수의 이름을 낙타(camel)처럼 쓴다. 

첫단어의 앞글자를 소문자로 다음단어로 넘어가면 다음단어의 첫글자를 대문자로 작성하는 식.(낙타처럼 보인다)

아래 _ 표시로 띄어쓰기를 표시하기도 하지만 지금은 잘 쓰이지 않는다.

이런 명명법이 중요한 이유는 코딩은 때로 나 혼자 하지 않기 때문에 이런 규칙들을 지켜줘야 한다는것.

그리고 무엇보다 

let n = 3; 라고 선언하는 것 보다는

let userNum=3; 처럼 이 변수가 무엇을 지칭하고 있는지 의미적인 무언가를 담고 있어야 나중에 수정할 때 애 먹지 않을 수 있다. 

 변수의 이름설정은 아무것도 아닌것 같지만 중요하다.

퀴즈 4: Quick Variable Quiz

1. 변수에 booleans를 선언할때 소문자로 쓰는지에 대한 확인

2. 변수 선언할때 camel-case를 쓰는지 확인

2020/11/01 - [TIL(today I learned)] - 2020-11-01 TIL

2020/11/02 - [TIL(today I learned)] - 2020-11-02 TIL

2020/11/03 - [TIL(today I learned)] - 2020-11-03 TIL

2020/11/04 - [TIL(today I learned)] - 2020-11-04 TIL

Bootstrap Navbars

getbootstrap.com/docs/4.5/components/navbar/

getbootstrap.com/docs/4.5/components/collapse/

외우지마라.. 참고하면서 코딩해라

Bootstrap Icons!

icons.getbootstrap.com/

fontawesome.com/

Other Bootstrap Utilities

getbootstrap.com/docs/4.5/utilities/borders/

getbootstrap.com/docs/4.5/utilities/colors/

getbootstrap.com/docs/4.5/utilities/display/

getbootstrap.com/docs/4.5/utilities/flex/

getbootstrap.com/docs/4.5/utilities/spacing/

getbootstrap.com/docs/4.5/utilities/sizing/

getbootstrap.com/docs/4.5/utilities/shadows/

 A Mixed Bag of Other Bootstrap Stuff

getbootstrap.com/docs/4.5/components/card/

getbootstrap.com/docs/4.5/components/carousel/

getbootstrap.com/docs/4.5/components/dropdowns/

getbootstrap.com/docs/4.5/components/modal/

getbootstrap.com/docs/4.5/components/spinners/

등등

2020/11/01 - [TIL(today I learned)] - 2020-11-01 TIL

2020/11/02 - [TIL(today I learned)] - 2020-11-02 TIL

2020/11/03 - [TIL(today I learned)] - 2020-11-03 TIL

Intro to the Bootstrap Grid

getbootstrap.com/docs/4.5/layout/grid/

영어에서 번역됨-CSS 그리드 레이아웃 또는 CSS 그리드는 CSS (Cascading Style Sheets)의 기술로, 웹 개발자는 브라우저에서 복잡한 반응 형 웹 디자인 레이아웃을보다 쉽고 일관되게 만들 수 있습니다. 위키백과(영어)

레이아웃 구역 나누기 -> gird

bootstrap의 그리드 횡(가로)값의 총합은 12unit이다.

코딩 연습 14: Bootstrap Grid Practice

Responsive Bootstrap Grids

bootstrap으로 반응성 웹페이지를 만드려면 class prefix에 있는 class명을 참고하면 된다.

max container width를 기준으로 breakpoint가 되어 웹페이지가 반응한다.

gutter를 주지 않으려면 class에 no-gutters를 추가하면 된다.

Responsive images

<img src="..." class="img-fluid" alt="Responsive image">

Useful Grid Utilities

getbootstrap.com/docs/4.5/layout/grid/#vertical-alignment

getbootstrap.com/docs/4.5/utilities/flex/

bootstrap의 alignment에 대한 강의

Bootstrap & Forms

getbootstrap.com/docs/4.5/components/forms/

getbootstrap.com/docs/4.5/components/forms/#form-row

row와 form-row는 gutter가 다르다.

getbootstrap.com/docs/4.5/components/forms/#form-groups

2020/11/01 - [TIL(today I learned)] - 2020-11-01 TIL

2020/11/02 - [TIL(today I learned)] - 2020-11-02 TIL

Bootstrap Typography & Utilities

getbootstrap.com/docs/4.5/content/typography/

getbootstrap.com/docs/4.5/utilities/colors/

Badges, Alerts, & Button Groups

getbootstrap.com/docs/4.5/components/badge/

getbootstrap.com/docs/4.5/components/button-group/

getbootstrap.com/docs/4.5/components/alerts/

alerts dismiss는 JS가 작동한다. 만약 JS가 링크되어 있지 않다면 dismiss가 작동하지 않는다.

코딩 연습 13: Bootstrap Basics Practice