<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성합니다.
| function hey(){ alert('안녕!'); } |
브라우저 개발자도구(F12) 실행 후 - 콘솔 부분에서
페이지에서 빠르게 자바스크립트를 테스트 해볼 수 있음
console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력해줍니다.
개발자가 결과값을 보기 편하도록!
| let으로 변수를 선언합니다. let num = 20 num = 'Bob' // 변수는 값을 저장하는 박스예요. // 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다. |
| 사칙연산, 그리고 문자열 더하기가 기본적으로 가능합니다. let a = 1 let b = 2 a+b // 3 a/b // 0.5 let first = 'Bob' let last = 'Lee' first+last // 'BobLee' first+' '+last // 'Bob Lee' first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다. |
| let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다! |
리스트: 순서를 지켜서 가지고 있는 형태
| let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능! // 또는, let b_list = [1,2,'hey',3] // 로 선언 가능 b_list[1] // 2 를 출력 b_list[2] // 'hey'를 출력 // 리스트에 요소 넣기 b_list.push('헤이') b_list // [1, 2, "hey", 3, "헤이"] 를 출력 // 리스트의 길이 구하기 b_list.length // 5를 출력 |
딕셔너리: 키(key)-밸류(value)값을 묶음
| let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능! // 또는, let b_dict = {'name':'Bob','age':21} // 로 선언 가능 b_dict['name'] // 'Bob'을 출력 b_dict['age'] // 21을 출력 b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기 b_dict // {name: "Bob", age: 21, height: 180}을 출력 |
리스트와 딕셔너리의 조합
| names = [{'name':'bob','age':20},{'name':'carry','age':38}] // names[0]['name']의 값은? 'bob' // names[1]['name']의 값은? 'carry' new_name = {'name':'john','age':7} names.push(new_name) // names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}] // names[2]['name']의 값은? 'john' |
특정 문자로 문자열을 나누고 싶은 경우
| 또, 특정 문자로 문자열을 나누고 싶은 경우 let myemail = 'sparta@gmail.com' let result = myemail.split('@') // ['sparta','gmail.com'] result[0] // sparta result[1] // gmail.com let result2 = result[1].split('.') // ['gmail','com'] result2[0] // gmail -> 우리가 알고 싶었던 것! result2[1] // com myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다! |
함수
| // 만들기 function 함수이름(필요한 변수들) { 내릴 명령들을 순차적으로 작성 } // 사용하기 함수이름(필요한 변수들); |
| // 두 숫자를 입력받으면 더한 결과를 돌려주는 함수 function sum(num1, num2) { console.log('숫자', num1, num2); return num1 + num2; } sum(3, 5); // 8 sum(4, -1); // 3 |
조건문
| function is_adult(age){ if(age > 20){ alert('성인이에요') } else { alert('청소년이에요') } } is_adult(25) |
| function is_adult(age){ if(age > 20){ alert('성인이에요') } else if (age > 10) { alert('청소년이에요') } else { alert('10살 이하!') } } is_adult(12) |
반복문
0부터 99까지 출력해야할 때,
| console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다! 이거를 |
| for (let i = 0; i < 100; i++) { console.log(i); } 이렇게 간단하게 쓸 수 있음 |
전형적인 패턴
| for (let i = 0; i < mise_list.length; i++) { let mise = mise_list[i]; if (mise["IDEX_MVL"] < 40) { let gu_name = mise["MSRSTE_NM"]; let gu_mise = mise["IDEX_MVL"]; console.log("40보다 작은 구: " + gu_name + ", " + gu_mise); } } 파란색 부분만 바꿔서 자주 씀 !! |
| function show_gus(index) { for (let i = 0; i < mise_list.length; i++) { let mise = mise_list[i]; if (mise["IDEX_MVL"] < index) { let gu_name = mise["MSRSTE_NM"]; let gu_mise = mise["IDEX_MVL"]; console.log(gu_name, gu_mise); } } } // 이러면 아래와 같은 것이 가능! show_gus(40) // 40보다 작은 구만 출력! show_gus(35) // 35보다 작은 구만 출력! |
KEEP
1. 답안을 보지 않고 이전에 만들어놨던 자료와 비교해보며 혼자 해결함
Problem
1. 숙제에서 참고하라했던 부트스트랩을 가져왔는데 숙제 완성사진과 달랐다. 양쪽 너비가 작은데 화면크기만큼 넓어져서 그걸 혼자 padding, margin 이용해서 해결함. 근데 정답과 달라서 정답을 복붙해서 확인해봣는데 내가 해결하기 전 모습이었음;; 브라우저 차이인건지.... 내가 해결해서 만든 모습이 숙제완성사진과 훨씬 가까웠음.
- 이 과정에서 padding과 margin의 차이가 머리속에 확립이 안되어있다는걸 알았다.
- 가운데 정렬 하는 4줄짜리 코드가 가운데 정렬은 해주나, 상자 자체를 줄여주진 못했다.
- 그래서 padding과 margin을 썼다 지웠다 반복하면서 구조를 맞췄음
2. 자바스크립트 개념을 오늘 배웠는데, 윈터캠프에서 성우가 알려줬던 함수들이었다.
- 이해하는데 어려움은 없었으나, 혼자 쓰려고하면 생각 안날 것 같음
- 외워둘 것: let / for / if / console.log() / alert
Try
1. 줄맞춤 할 때 ctrl+alt+L 을 ctrl+shift+L로 자꾸 잘못누름
2. margin과 padding 개념 확립
- margin은 테두리부분에서 바깥쪽으로 밀어내는 길이 (상자와 상자끼리의 간격을 조절하고싶을 때는 마진을 쓰자)
- padding은 내부에서의 간격. 내부 중심에서 바깥쪽으로 밀어내는 길이 (상자 자체 길이를 늘이고싶을때는 패딩을 쓰자)
3. console 창 띄워놓고 스크립트 수정해보며 익히면서 외우기
'개발과 계발 > 웹 개발' 카테고리의 다른 글
| JQuery 다루기, 적용하기 (0) | 2022.11.27 |
|---|---|
| github, git 세팅 (0) | 2022.07.19 |
| CSS 기초. 부트스트랩 써보기. (0) | 2022.07.12 |
| 링크모음 웹페이지 만들기 (0) | 2022.07.04 |
| 웹의 개념, 간단한 로그인 페이지 만들기 (0) | 2022.06.27 |