함수 맛보기 (function)
Javascript는 브라우저가 알아들을 수 있는 유일한 언어이다. 물론 다른 언어도 사용가능하다.
다만, 이미 만들어진 '표준'이기 때문에 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있다.
버튼을 누르면 안녕!이라는 문구가 팝업된다.
Head안에:
<script>
funtion hey() {
alert('안녕!');
}
</script>
Body안에:
<button onclick="hey()" type="button">나는 버튼이다</button>Console
크룸 개발자도구 콘솔창은 띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구이다. 새로고침하면 모두 사라진다.
윈도우: F12
맥: alt(option) + command + i
console.log(변수)
🔸변수, 자료형, 함수, 조건문, 반복문을 알아두면 거의 원하는 로직 만들 수 있다.
(변수 이름은 가급적 직관적으로 짓도록 하자, 안 그러면 헷갈린다.)
let으로 변수를 선언한다.
리스트:
순서를 지켜서 가지고 있는 형태
let a_list = [] (리스트를 선언. 변수 이름은 아무렇게나 가능!)
let a_list = [1,2,'hey',3]
a_list[0] ▶ 1 를 출력
a_list[2] ▶ 'hey'를 출력
---리스트에 요소 넣기---
a_list.push('헤이')
a_list ▶ [1, 2, "hey", 3, "헤이"] 를 출력
---리스트의 길이 구하기---
a_list.length ▶ 5를 출력딕셔너리:
키(key)-벨류(value) 값의 묶음
let a_dict = {} (딕셔너리 선언. 변수 이름은 아무렇게나 가능!)
let a_dict = {'name':'Bob','age':21}
a_dict['name'] ▶ 'Bob'을 출력
a_dict['age'] ▶ 21을 출력
a_dict['height'] = 180 (딕셔너리에 키:밸류 넣기)
a_dict ▶ {name: "Bob", age: 21, height: 180}을 출력
(즉, name은 키 : bob은 벨류)리스트와 딕셔너리의 조합
-----------------------------(예시1)-----------------------------
a_dict = {'name':'bob','age':27}
a_list = ["수박","사과","배"]
합치면,
a_dict['fruits'] = a_list (fruits는 '키'이며, 변수 이름은 아무렇게나 가능)
-----------------------------(예시2)-----------------------------
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'
-----------------------------(예시3)-----------------------------
순서를 표시할 수 있고, 정보를 묶을 수 있다.
순서대로 이름, 휴대폰 번호를 적었고, 변수만을 사용한 모습은 다음과 같다.
let customer_1_name = '김스파';
let customer_1_phone = '010-1234-1234';
let customer_2_name = '박르탄';
let customer_2_phone = '010-4321-4321';
...(알아보기 힘들다.)
👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있다.
let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};
👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해진다.
let customer = [
{'name': '김스파', 'phone': '010-1234-1234'},
{'name': '박르탄', 'phone': '010-4321-4321'}
]
✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있다.그외 것들
🟠나눗셈의나머지
let a = 20
let b = 9
a % b = 2
🟠모든 알파벳을 대문자로
let myname = 'codingmaster'
myname.toUpperCase() ▶ CODINGMASTER
🟠특정 문자로 문자열 나누기 (경우1)
let myeamil = 'coding@gmail.com'
let result = myemail.split('@') ▶ ['coding','gmail.com']
result[0] ▶ coding
result[1] ▶ gmail.com
let result2 = result[1].split('.') ▶ ['gmail','com']
result2[0] ▶ gmail
result2[1] ▶ com
또는, 한번에.
myemail.split('@')[1].split('.')[0] ▶ gmail -> 간단하게 쓸 수도 있다!
되도록이면 하나하나 찾아가면서 하는 습관을 갖도록 하자.
🟠특정 문자로 나누기 (경우2)
let txt = '서울시-마포구-공덕동'
let names = txt.split('-'); ▶ ['서울시','마포구','공덕동']
특정 문자로 합치고 싶은 경우
let result = names.join('>'); ▶ '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
함수
기본 생김새
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
🟠예시
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
return num1 + num2; ✅return은 "끝내고 나를 이렇게 변신 시켜줘" 라는 뜻이다.
}
sum(3, 5); ▶ 8
sum(4, -1); ▶ 3조건문
if, else if, else
🟠예시1)
(age가 20보다 크면 성인, 아니면 청소년)
function a_adult(age){
if(age > 20){
alert('성인입니다') ✅콘솔창에서 바로 보려면 console.log()를 대신 쓰자.
} else {
alert('청소년입니다')
}
}
a_adult(25) ▶ 성인입니다
🟠예시2)
(age가 20보다 크면 성인, 그렇지 않을 때 age가 7보다 크면 청소년, 나머지는 아동)
function b_adult(age){
if(age > 20){
alert('성인입니다')
} else if (age > 7) {
alert('청소년입니다')
} else {
alert('아동입니다')
}
}
b_adult(5) ▶ 아동입니다AND 조건과 OR 조건
🟠AND 예시)
function c_adult(age, sex){
if(age > 20 && sex == '여'){
alert('성인 여성')
} else if(age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년')
}
}
c_adult(21, '여') ▶ 성인 여성
🟠OR 예시)
function d_adult(age, sex){
if (age > 65 || age < 10) {
alert('탑승하실 수 없습니다')
} else if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년')
}
}
d_adult(70, '남') ▶ 탑승하실 수 없습니다반복문
예를 들어 0부터 99까지 출력해야 하는 상황이라면
console.log(0)
console.log(1)
console.log(2)
...
console.log(99)라고 쓰기엔 힘들다. 그래서, 이렇게 하면된다.
for (let i = 0; i < 100; i++) {
console.log(i);
}
for (시작조건; 반복조건; 더하기) {
매번실행;
}즉, i가 0일 때, i가 100보다 낮을 때, i가 하나씩 높여진다.
🟠예제1
let people = ['철수','영희','민수','형준','기남','동희']
for (let i = 0 ; i < people.length ; i++) {
console.log(people[i])
}
🟠예제2
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]);
}
scores[1] ▶ {name: "영희", score: 85}
scores[1]['score'] ▶ 85
🔹🔹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']
console.log(name, score)
}
이름과 점수 리스트가 출력된다.
🔸🔸🔸🔸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)
}
}
70이하의 이름과 점수 출력된다.
🔅함수로 했을 경우🔅
🔸🔸🔸🔸function show_score(num) {
for (let i = 0 ; i < scores.length ; i++) {
let name = scores[i]['name']
let score = scores[i]['score']
if (score < num) {
console.log(name, score)
}
}
}
show_score(70) ▶ 70이하 이름과 점수 출력된다.
또는🔹🔹🔹🔹 for (let i = 0; i < scores.length; i++) {
if(scores[i]['score'] < 70) {
console.log(score[i]['name'], score[i]['score'])
}
}
위와 똑같은 결과가 나온다.짝/홀수에 따른 알럿
<script>
let count = 1;
function hey() {
if(count % 2 == '0') {
alert('짝수입니다')
} else {
alert('홀수입니다')
}
count +=1; ✅count = count + 1; 이랑 같음.
}
</script>