22.06.20(월)

1주차 숙제 <원페이지 쇼핑몰 만들기>

경고문도 성공! ><

 

자바스크립트    ★ 변수, 자료형, 함수, 조건문, 반복문 ★

  ㄴ> 크롬 개발자도구 - console 에 작성!!

  ㄴ> enter 하면 작성 끝!!!!!!!!!! 

  ㄴ> 줄바꿈 : Shift + enter

 

1) 변수 : 값을 받는 박스(괄호 안에 들어가는 것들)

   --> let : 선언

> let a = 2 
> a+3
< 5

> let first_name = 'bella'
> let last_name = 'swan'
> first_name + last_name
< "bellaswan"

   --> 변수 이름 정할 땐 나도 남도 알아보기 쉽게! ★ 언더바(_) 활용하기 ★

 

 

2) 자료형  --> 필요한 이유? 깔끔, 간단 그자체!

  (1) 리스트 list

      --> 순서가 중요한 담기 ( 0부터 시작, [0][1][2]로 표현 )

      --> 추가할땐 .push 

      --> .length : 리스트 길이

> let a_list = [ '수박', '참외', '배' ]
> a_list [0]
< "수박"
> a_list [1]
< "참외"
> a_list [2]
< "배"
> a_list.push( '감' )       ---------> 추가
< 4
> a_list [3]
< "감"

 

  (2) 딕셔너리 dict

      --> 순서 중요하지 않음

      --> 키(key) = 값(value) ★

      --> 선언할 때는 중괄호{ } , 가져올 때는 대괄호 [ ]

      --> 추가할 땐 a_dict [ '추가하고싶은 key' ] = value 

> let a_dict { ' name ' : ' 밥 ', ' age ' : 27 }           ---------> 선언 : 중괄호{ }
> a_dict [ 'name' ]
< "밥"
> a_dict [ 'age' ]
< 27
> a_dict [ 'height' ] = 180      ---------> 추가
< 180
> a_dict [ 'fruits' ] = a_list
< (4) [ "수박", "참외", "배", "감" ]
> a_dict [ 'fruits' ] [2]
< "배"

 

3) 함수 function : 정해진 동작을 하는 것 (프로그래밍함수!!)

   --> .split ( '   ' ) : 문자열 분리

   --> .touppercase( ) : 모든 알파벳을 대문자로

   --> 만들때: function 함수이름(변수들) { 명령들 }

         사용시: 함수이름(변수) ;

%	나눗셈의 나머지
< >	크, 작다	==	같다	!=	같지않다
&&	그리고(and)	||	또는(or)

> let a = 100
> a % 8
< 4    ----------> 나머지
> a < 150
< true
> a != 100
< false

> let myemail = ' abcd @ naver.com '  
> myemail.split ( ' @ ' )
< (2) [ " abcd " , " naver.com " ]
> myemail.split ( ' @ ' ) [1].split( ' . ' )
< (2) [ " naver" , " com" ]

 

   --> function sum ( a , b ) { return a + b }

         : 변수(a,b)를 받아서 return(계산 끝내고 나를 변신시켜줘 = 결과값) 해라!

> function sum(num1, num2) {
          return num1 + num2
   }
> let result = sum(2, 3)
> result
< 5

> function sum(num1, num2) {
          alert ( ' 안녕! ' )
          return num1 + num2
   }
> let result2 = mysum(2, 3)   ---------------> 경고창 뜨고 확인 눌러야 결과 계산됨
> result2
< 5

> function sum(num1, num2) {
          alert ( ' 첫번째 '  + num1 )     ----------------> 경고창이 저 순서대로 두번 뜸
          alert ( ' 두번째 ' + num2 )
   }

 

 

4) 조건문(if문)

   --> if(조건1) ~~~ else if(그 나머지 중에서 조건2,3 등등) ~~~ else(남은거) 로 구성 

   -->  console.log(변수) : 변수를 콘솔에 출력

> let age = 24
> if ( age > 20 ) {
        console.log( ' 성인입니다 ' )
   } else {
        console.log( ' 청소년입니다 ' )
   }
> let sex = '남성'

> if ( age > 20 && sex == '남성' ) {
        console.log( ' 성인 남성입니다 ' )
   } else {
        console.log( ' 청소년입니다 ' )
   }

> if ( age > 20 ) {
        console.log( ' 성인입니다 ' )
   } else if ( age > 7) {
        console.log( ' 청소년입니다 ' )
   } else {
        console.log( ' 아동입니다 ' )
   }

 

 

5) 반복문(for문)

   --> 주로 리스트(특히 딕셔너리)와 함께 쓰임

> for ( let i = 0; i < 10; i ++ ) {
         console.log( i )                  
   }                                                              -------------> 0부터 9까지 쭉 나옴

> let people = [ ' 철수 ', ' 영희 ', ' 민수 ', ' 형준 ', ' 기남 ', ' 동희 ' ]
> people.length
< 6
> for ( let i = 0; i < people.length; i ++ ) {
         console.log( people [ i ] ) 
   }                                                            -------------> 철수 ~ 동희 쭉 나옴

> let scores = [
        { ' name ' : ' 철수 ', ' score ' : 90 },
        { ' name ' : ' 영희 ', ' score ' : 85 },
        { ' name ' : ' 민수 ', ' score ' : 70 },
        { ' name ' : ' 형준 ', ' score ' : 50 },
        { ' name ' : ' 기남 ', ' score ' : 68 },
        { ' name ' : ' 동희 ', ' score ' : 30 },
   ]
> scores[0]
< { name : "철수", score : 90}

> for ( let i = 0; i < scores.length; i ++ ) {
         console.log( scores [ i ] [ ' name' ] ) 
   }                                                         -------------> 철수 ~ 동희 이름만 쭉 나옴

> for ( let i = 0; i < scores.length; i ++ ) {
         let name = scores [ i ] [ ' name ' ]
         let score = scores [ i ] [ ' score ' ]
         if ( score < 70) {
              console.log( name, score ) 
         }
   }                                                       -------------> 형준 50 / 기남 68 / 동희 30

 

<추가 예제>

   --> 서울시 따릉이 현황

   --> 서울시 미세먼지 값

 

 

---

1주차 완주!

아직까지는 기획서만 보고 어떻게 해야겠다는 구성은 좀 오래걸림...ㅠㅠ

하지만 구성 끝나면 오류 없이 성공했음!!! 위 사진이 그 결과 > <

 

여전히 재밌고 신난다!!!  다만...책상에 앉는 과정이 어렵닼ㅋㅋㅋㅋㅋㅋㅋ

더 많이 복습하고 공부하면서 모든걸 내거로 만들고싶다

탐난다... 코딩 너란 녀석!