기본 규칙
* 하나의 실행문이 끝나면 마지막에 세미콜론(;)를 붙여줌 * 대소문자 구분 * 가독성을 위해 들여쓰기 사용 * 주석 처리 - // : 한 줄 주석 - /**/ : 여러 줄 주석 (ctrl + shift + /)
콘솔창
* 크롬 개발자도구 콘솔창은 띄워놓은 페이지에서 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구 * 새로고침하면 모두 사라짐
console.log(변수)
* console.log(변수) : 콘솔 창에 괄호 안의 값을 개발자가 결과값을 보기 편하도록 출력 * console.log(변수1,변수2) : 여러 변수를 한번에 출력
기본연산
* 변수 대입( a = 2 ) : 오른쪽에 있는 것을 왼쪽에 넣음(2를 a라는 변수에 넣는다) * 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 → 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행
리스트
* 순서를 지켜서 가지고 있는 형태 * 리스트를 셀 때는 0부터 시작하므로 0을 부르면 빨강이 나옴 * 리스트를 선언. 변수 이름은 아무거나 가능! * 말하는 순서 중요!! 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} 출력 * color라는 리스트 추가 b_dict['color'] = a_list 추가하면, b_dict // {name: "Bob", age: 21, height: 180, color} 출력
리스트와 딕셔너리의 조합
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 a = 100 a < 150 a > 200 a == 100 //같다고 할때는 ==해야함 a != 100 //같지 않다는 !=
나눗셈의 나머지
let a = 20 let b = 7 a % b = 6
모든 알파벳을 대문자로 바꾸고 싶은 경우
let myname = 'rainbow' myname.toUpperCase() // RAINBOW
특수 문자로 문자열 나누기
let myemail = 'abc@gmail.com' let result = myemail.split('@') // ['abc','gmail.com'] result[0] // abc result[1] // gmail.com let result2 = result[1].split('.') // ['gmail','com'] result2[0] // gmail result2[1] // com myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있음 let txt = '서울시-마포구-망원동' let names = txt.split('-'); // ['서울시','마포구','망원동']
특수 문자로 합치기
let result = names.join('>'); // '서울시>마포구>망원동' (문자열 바꾸기!)
함수
function 함수이름(필요한 변수들) { 내릴 명령들을 순차적으로 작성 } // 사용하기 함수이름(필요한 변수들); ex) function sum(num1, num2) { console.log('num1: ', num1, ', num2: ', 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)
if
function is_adult(age){ if(age > 20){ alert('성인이에요') } else if (age > 10) { alert('청소년이에요') } else { alert('10살 이하!') } } is_adult(12)
AND
function is_adult(age, sex){ if(age > 20 && sex == '여'){ alert('성인 여성') } else if (age > 20 && sex == '남') { alert('성인 남성') } else { alert('청소년이에요') } }
OR
function is_adult(age, sex){ if (age > 65 || age < 10) { alert('탑승하실 수 없습니다') } else if(age > 20 && sex == '여'){ alert('성인 여성') } else if (age > 20 && sex == '남') { alert('성인 남성') } else { alert('청소년이에요') } } is_adult(25,'남')
반복문
for (let i = 0; i < 100; i++) { console.log(i); } ex) let scores = [ {'name':'철수', 'score':90}, {'name':'영희', 'score':85}, {'name':'민수', 'score':70}, {'name':'형준', 'score':50}, {'name':'기남', 'score':68}, {'name':'동희', 'score':30}, ] for (let i = 0 ; i < scores.length ; i++) { console.log(scores[i]); } // 리스트 내의 딕셔너리를 하나씩 출력 for (let i = 0; i < scores.length; i++) { console.log(scores[i]['name']) } // name을 넣으면 이름만 나옴 name과 score 값이 같이 나옴 for (let i = 0; i < scores.length; i++) { let name = scores[i]['name'] let score = scores[i]['score'] console.log(name,score) } // name과 score 값이 같이 나옴 for (let i = 0 ; i < scores.length ; i++) { if (scores[i]['score'] < 70) { console.log(scores[i]['name']); } } // 점수가 70점 미만인 사람들의 이름만 출력
함수 만들기(파이참)
* <head> ~ </head> 안 <script> ~ </script> 내에 자바스크립트 작성 <script> function hey(){ alert('안녕!'); } </script>
버튼에 함수 연결하기(파이참)
* 버튼을 누르면 함수가 불림 'onclick="hey()"' 붙여주기 <button onclick="hey()" type="button" class="btn btn-primary">버튼</button>
짝/홀수 onclick 함수(파이참)
<script> let count = 1; function hey() { if (count % 2 == 0) { alert('짝짝짝👏'); } else { alert('홀홀홀🎅'); } count += 1; } </script>
