11코딩완주챌린지 [1주차] 3일차

1. 학습내용

Javascript - 기본표준이 되는 것. 브라우저가 알아들을 수 있는 언어!

✔자바스크립트를 HTML에 연결해서 버튼을 클릭하면 경고창 뜨게하는 방법

	<script>
        function hey()  {
            alert('안녕!!');
        }
    </script>

<a onclick="hey()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>

script내에 자바스크립트를 작성해서 버튼코드(a)를 를 넣는다.

✔Javascript 문법 작성(1) ✅준비 [크롬 개발자도구]에서 console탭에서 한다.
-변수

let a = 2
undefined
a+3
5
a=5
5
a+3
8
let first_name = `jiyoung`
undefined
let last_name = `yim`
undefined
first_name + last_name 
"jiyoungyim"
first_name+5
"jiyoung5"

순서가 중요한 담기 - list형, 딕셔너리형 : ✅서로서로 요소로 쓰일 수 있다.
-list형 : []로 표현함.

let a_list = [`수박`, `참외`, `배`]
undefined
a_list[0]
"수박"
a_list[1]
"참외"
a_list[2]
"배"
a_list[3]
undefined
a_list.push(`감`)
4
a_list
(4) ["수박", "참외", "배", "감"]
a_list[3]
"감"

-딕셔너리형 : {}로 표현되지만, 가지고 올 때에는 []로 한다.

let a_dict = {'name':'bob','age':27}
undefined
a_dict['name']
"bob"
a_dict['age']
27
a_dict['height'] = 180
180
a_dict
{name: "bob", age: 27, height: 180}
a_dict['fruits'] = a_list
(4) ["수박", "참외", "배", "감"]
a_dict
{name: "bob", age: 27, height: 180, fruits: Array(4)}age: 27fruits: (4) ["수박", "참외", "배", "감"]height: 180name: "bob"__proto__: Object
a_dict['fruits']
(4) ["수박", "참외", "배", "감"]
a_dict['fruits'][0]
"수박"
a_dict['fruits'][1]
"참외"
a_dict['fruits'][2]
"배"코드를 입력하세요

-기본함수들(사칙연산)

let a = 100
undefined
a % 8   (% - a를 8로 나눈 나머지)
4
a % 3
1
a < 150
true
a > 200
false
a == 100  (== - a는 100과 같다.)
true
a != 100  (!= - a는 100과 같지 않다.)
false

-이메일을 이용한 문자 나누기

let myemail = 'yimji9@naver.com'
undefined
myemail.split('@')
(2) ["yimji9", "naver.com"]
myemail.split('@')[1]
"naver.com"
myemail.split('@')[1].split('.')
(2) ["naver", "com"]
myemail.split('@')[1].split('.')[0]
"naver"

✅꿀팁! console탭에서 줄바꾸기 하는 방법은 shift+Enter !

✔ Javascript 문법 작성(2)
-함수 **return : 끝내고 나를 변신시켜줘!!!

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

function mysum(num1, num2){
    alert('안녕!')
    return num1+num2
}
undefined
let result2 = mysum(2,3)
undefined
result2
5

-조건문 ** 그리고 : && / 또는 : ||
[기본]

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

[자주쓰임]

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

-반복문
-[기본] i가 0부터 10보다 작을 때, i가 하나씩 높여준다는 조건일 때,

for (let i = 0; i < 10; i++) {           
    console.log(i)
}
VM2408:2 0
VM2408:2 1
VM2408:2 2
VM2408:2 3
VM2408:2 4
VM2408:2 5
VM2408:2 6
VM2408:2 7
VM2408:2 8
VM2408:2 9

[예제1]

let people = ['철수','영희','민수','형준','기남','동희']
undefined
people.length
6
for (let i = 0; i < people.length; i++) {
     console.log(people[i])   
}
VM3505:2 철수
VM3505:2 영희
VM3505:2 민수
VM3505:2 형준
VM3505:2 기남
VM3505:2 동희

[예제2]

let scores = [
	{'name':'철수', 'score':90},
	{'name':'영희', 'score':85},
	{'name':'민수', 'score':70},
  {'name':'형준', 'score':50},
  {'name':'기남', 'score':68},
  {'name':'동희', 'score':30},
]
undefined
scores[0]
{name: "철수", score: 90}
scores[1]
{name: "영희", score: 85}
scores[1]['score']
85
scores
(6) [{…}, {…}, {…}, {…}, {…}, {…}]0: {name: "철수", score: 90}1: {name: "영희", score: 85}2: {name: "민수", score: 70}3: {name: "형준", score: 50}4: {name: "기남", score: 68}5: {name: "동희", score: 30}length: 6__proto__: Array(0)
✔for (let i = 0; i < scores.length; i++) {
     console.log(scores[i])   
}
VM3714:2 {name: "철수", score: 90}
VM3714:2 {name: "영희", score: 85}
VM3714:2 {name: "민수", score: 70}
VM3714:2 {name: "형준", score: 50}
VM3714:2 {name: "기남", score: 68}
VM3714:2 {name: "동희", score: 30}
undefined
✔for (let i = 0; i < scores.length; i++) {
     console.log(scores[i]['name'])  
}
VM3730:2 철수
VM3730:2 영희
VM3730:2 민수
VM3730:2 형준
VM3730:2 기남
VM3730:2 동희
undefined
✔for (let i = 0; i < scores.length; i++) {
     let name = scores[i]['name'] 
     let score = scores[i]['score']
     console.log(name,score)   
}
VM3882:4 철수 90
VM3882:4 영희 85
VM3882:4 민수 70
VM3882:4 형준 50
VM3882:4 기남 68
VM3882:4 동희 30
undefined
[자주쓰임] 
✔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)
     }
  }
VM3961:5 형준 50
VM3961:5 기남 68
VM3961:5 동희 30

✔JQuery연습하기
[예제1]

for (let i = 0; i < mise_list.length; i++) {
    let gu_name = mise_list[i]['MSRSTE_NM']
    let gu_mise = mise_list[i]['IDEX_MVL']
    if (gu_mise > 40) {
    console.log(gu_name,gu_mise)
    }
}
VM2886:5 은평구 42
VM2886:5 도봉구 41
VM2886:5 강서구 42
VM2886:5 영등포구 41
VM2886:5 동작구 41
VM2886:5 금천구 43
VM2886:5 서초구 41
VM2886:5 송파구 42
undefined

[예제2]

for (let i = 0; i < bikes.length; i++) {
    let name = bikes[i]['stationName']
    let bike = bikes[i]['parkingBikeTotCnt']
    if (bike < 5){
    console.log(name,bike)
}    
}
VM3277:5 101. (구)합정동 주민센터 4
VM3277:5 105. 합정역 5번출구 앞 1
VM3277:5 115. 사루비아 빌딩 앞 1
VM3277:5 116. 일진아이윌아파트 옆 1
VM3277:5 120. 신수동 사거리 3
VM3277:5 136. 대흥동 주민센터 1
VM3277:5 137. NH농협 신촌지점 앞 4
VM3277:5 142. 아현역 4번출구 앞 1
VM3277:5 147. 마포역 4번출구 뒤 4
VM3277:5 157. 애오개역 4번출구 앞 1
VM3277:5 158. 독립문 어린이 공원 1
VM3277:5 159. 이대역 4번 출구 1
VM3277:5 161. 무악재역1번 출구 0
VM3277:5 163. 명지전문대학교 정문 앞 0
VM3277:5 173. 서대문역 8번출구 앞 4
VM3277:5 176. 명지대학교 도서관 0
VM3277:5 177. 북가좌 초등학교 1
VM3277:5 178. 증산3교 앞 0
VM3277:5 184. SK망원동주유소 건너편 4
VM3277:5 188. 홍은동 정원여중 입구 2
VM3277:5 192. 연서어린이공원 0
VM3277:5 194. 증산교 앞 2
VM3277:5 196. 연희교차로 인근 1
VM3277:5 211. 여의도역 4번출구 옆 2
undefined

2. 학습소감

Javascript 문법 따라할 땐 생소하지만, 일단은 눈에 익숙해지면서 따라해보자!!!

1주차 과제

✅그리고 1주차 과제할 때 잘못된 점이 있었는데,
전체 가운데로 옮길 때는 그 전에 각각 div값 테두리를 잘 정리해나가야겠다.

<body>
<div class="wrap">
    <div class="item-img"></div>
    <div class="item-desc">
        <h1>짐볼을 팝니다 <span class="price">가격: 17,900원/개</span></h1>
        <p>스트라이프 타입, 마사지 타입, 멀티 타입 3가지 타입으로 다양한 운동이 가능합니다.</p>
    </div>
    <div class="item-order">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-default">주문자이름</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <label class="input-group-text" for="inputGroupSelect01">수량</label>
            </div>
            <select class="custom-select" id="inputGroupSelect01">
                <option selected>-- 수량을 선택하세요 --</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">주소</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">전화번호</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
        <button  type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>
    </div>
</div>
</body>

</html>