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
Javascript 문법 따라할 땐 생소하지만, 일단은 눈에 익숙해지면서 따라해보자!!!
✅그리고 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>