<1>JavaScript
(1) 프로그래밍 언어로, HTML 상에서 쓸 수 있는 언어
<2>JavaScript 기초 문법
(1) 변수 선언
- 이름에 특정한 값을 부여하겠다는 뜻
- let 뒤에 원하는 변수 이름을 적고 = 뒤에 값을 적으면 된다
ex) let num = 10 // 변수를 선언할 때는 앞에 let 을 쓴다
console.log(num)
- 콘솔창에서 직접 코드 입력할 때는 변수 이름만 적고 엔터를 쳐도 값을 확인할 수 있음
ex) num // 10이 출력됨
- 변수를 한 번 선언하고 나서는 그 값을 바꾸어줄 수 있다.
ex) let num = 20
num //20
num = 2
num //2
- 변수 선언을 먼저 하고 값을 나중에 넣어줄 수도 있다.
ex) let num
num // 아직 값이 정의되지 않았기 때문에 undefined라고 뜬다.
num = 2
num //2
- 다른 변수에 들어가 있는 값을 새 변수에 넣어줄 수도 있다
ex) let num1 =1
let num2 = num1
console.log(num1, num2) // 1 1
(2) 자료형과 기본 연산
- 자료형(data type) : 말 그대로 프로그래밍 언어에서 쓰는 데이터의 형태
- 자료형(data type) : 변수에 저장할 수 있는 값과 그 형태
- 숫자형
ex) let a = 4.8
let a = 7
ex) 숫자형은 사칙 연산도 가능
let a = 7
let b = 2
a+b // 9
a-b // 5
a*b // 14
a/b // 3.5
a%b // 1 (나머지)
a+3*b // 13 (여러 연산을 한 줄에 할 경우 사칙연산의 순서를 따른다.)
ex) 변수에 지정된 값에 연산을 한 수 다시 그 값을 같은 변수에 저장할 수도 있다
let a = 5
a = a + 3 // 5에 3을 더한 값을 다시 a 에 저장
console.log(a) // 8
a +=1 // 줄여 쓴 것 원래 a = a +1 , 8에 1을 더해 9를 a 에 저장. 사칙연산 모두 가능
// 증감연산자
a++ // 1을 더한 값을 다시 a에 저장
a-- //1을 뺀 값을 다시 a에 저장
-문자형
> 글씨를 따옴표로 감싸 문자열 자료형으로 정의
> 작은따옴표'', 큰따옴표"" 모두 사용할 수 있고
> 시작과 끝에 짝이 맞아야 함
ex) let word = "Hello"
let word = 'coding'
let mac = "McDonald's"
let sentence = ' He said, "Hello!" '
> 따옴표로 감싸지 않으면 변수명으로 인식함
ex) let a =1
let b = "a"
let c = a
console.log(a, b, c) // 1, "a", 1
let d = x // x 라는 변수가 정의되지 않았기 때문에 에러메시지가 나온다
let d = "x" // "x"
> 문자열 간의 더하기는 두 문자열을 이어붙인 문자열을 반환
ex) let firstName = "Harry"
let lastName = "Potter"
firstName + lastName // HarryPotter
firstName + " " + lastName // Harry Potter
let a = "3"
let b = "5"
a + b // "35" 문자열 간의 덧셈이라서 그냥 앞뒤로 붙임
let c = 7
firstName + c // "Harry7" 문자열과 숫자를 더하면 숫자를 문자열로 바꾼 후 붙임
> 변수 이름은 원하는 대로 지을 수 있지만, 협업을 위해서는
프로그래밍 언어, 회사에 따라 정해진 네이밍 컨벤션(Naming convention)을 따라야함.
소문자로 쓰고 밑줄(undersconre,_) 잇는 snake case (first_name) 와
뒤에 오는 단어의 첫글자를 대문자로 쓰는 camel case (firstName)를 많이 씀
대부분 프로그래밍언어에서 _ 외에 특수문자는 변수명에 포함될 수 없다.
> 자바스크립트에 미리 정해져있는 메소드를 이용해 다양한 연산이 가능
ex) 모두 대문자로 바꾸기
let myname = 'yoon'
myname.toUpperCase() // YOON
ex) 특정문자를 기준으로 문자열을 나누기
-이메일주소에서 도메인만 추출하기
let myemail = 'test@gmail.com'
let result = myemail.split('@') // [ 'test', 'gmail.com' ]
result[0] // test (리스트의 첫번째 요소)
result[1] // gmail.com (리스트의 두 번째 요소)
let result2 = result[1].split('.') // ['gmail', 'com']
result2[0] // gmail
result[1] // com
// 한 줄로도 쓸 수 있다.
myemail.split('@')[1].split('.')[0] // gmail
-불(Boolean) 자료형
> 참, 거짓을 나타내는 자료형
> 보통 비교연산자의 결과로 나오며
> 배울 조건문에도 자주 쓰임
ex) let x = true // 참. 무조건 소문자로 써야함
let y = false // 거짓
// 대문자로 쓰면 자료형으로 인식하지 않고
변수명이라고 생각해서 에러가 난다.
let z = True // True is not defined
// 비교 연산자
4 > 2 // true 크다
5 < 1 // false 작다
6>= 5 // true 크거나 같다
4 <= 4 // true 작거나 같다
3 == 5 // false 같다
4 != 7 // true 같지 않다
> 불 자료형에는 논리연산자를 이용할 수 있다
ex) let a = 4 > 2 // true
!a // false NOT 연산자, 참을 거짓으로, 거짓을 참으로 바꿔준다
let b = 2! = 2 // false
a &&b // false AND 연산자, 모두 참이여야 참을 반환
a || b // true OR 연산자, 둘 중 하나만 참이면 참이다
- 리스트와 딕셔너리
> 리스트와 딕셔너리는 숫자, 문자열 등 다른 값들을 여러 개 갖는 자료형
> 리스트의 각 요소에는 순서가 있고, 순서가 있기 때문에
'인덱스(index)' 를 이용해서 각 값을 받아올 수 있음.
ex) let a_list = [] // 빈 리스트를 선언, 변수 이름은 아무것이나 가능
// 또는,
let b_list = [1,2,'hey', 3] // 로 선언 가능
// 서로 다른 자료형의 요소를 섞어 가질 수 있음
b_list[1] // 2 를 출력. index는 0 부터 시작
b_list[2] // 'hey'를 출력
b_list[2] = 5 // 값 수정
b_list // [1, 2, 5, 3]
// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, 5, 3, "헤이"] 를 출력
// 리스트의 길이 구하기
b_list.length // 5 를 출력
> 리스트는 다른 리스트를 요소로 가질 수 있다
ex) let a_list = [1, 4, 2, [3,1] ]
a_list.length // 4
a_list[3] // [3,1]
a_list[3][1] // 1
let b_list = [4, 1, 0]
a_list.push(b_list)
a_list // [1, 4, 2, [3,1], [4, 1, 0]]
a_list.length //5
// 리스트와 리스트를 이어붙이고 싶다면
let c_list = a_list.concat(b_list)
c_list // [1, 4, 2, [3,1], [4, 1, 0], 4, 1, 0 ]
a_list // [1, 4, 2, [3,1], [4, 1, 0] 변하지 않아
> 딕셔너리는 키(key)와 밸류(value)의 쌍으로 이뤄진 요소들을 갖고 있음
딕셔너리의 요소의 값은 키를 이용해 가져올 수 있고, 각 요소에 순서는 따로 없다
ex) let a_dict = {} // 빈 딕셔너리 선언
// 또는,
let b_dict = {'name' : 'Bob', 'age':21} // 로 선언 가능
b_dict[name] // 'Bob' 을 출력
b_dict['age'] // 21 출력
// 값 수정하기
b_dict['age'] = 40
b_dict // {'name' : 'Bob', 'age':40}
b_dict['height] = 180 // 딕셔너리에 키 : 밸류 넣기
b_dict // { name: "Bob", age:40, height: 180 }
- 함수
> 함수는 한번에 실행할 코드들을 묶어놓은 것.
> 기본 생김새는 아래처럼 생김
ex) 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들)
> 예를 들어 두 숫자를 입력 받아 더한 결과를 돌려주는 함수는 다음과 같이 씀
ex) //두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
let result = num1 + num2
console.log(num1, "+", num2, "=", result // 콘솔에 출력
retutn result // 반환값
}
sum( 3, 5 )
// 3 + 5 = 8
// 8
let a = sum(4, -1) // 함수가 실행되면서 우선 콘솔에 출력
// 4+ -1 = 3
a // 반환 값은 a라는 변수에 저장
// 3
> 함수는 필요한 변수가 없을 수도, 반환ㄱ값이 없을 수도, 둘다 없거나 둘다 있을 수도 있다.
ex) //필요한 변수도 반환값도 없는 함수
function hey() {
console.log("Hey :)")
}
hey() // Hey :) 출력
//필요한 변수가 없는 함수
function three() {
return 3
}
let a = three
a // 3이 a에 저장됨
//반환값이 없는 함수
function hello (name) {
console.log("Hi, "+name" + "!" )
let b = hello("jungle") // Hi, jungle!
- 조건문
ex) if (조건) {
조건을 만족할 때 실행할 것
}
// 또는,
if (조건) {
조건 만족 시 실행
} else {
조건 불만족 시 실행
}
// 조건이 더 많을 때, else if 개수는 원하는 만큼 쓸 수 있따.
if (조건1) {
조건1 만족 시 실행
} else if (조건2) {
조건1을 불만족하고 조건2를 만족할 때 실행
} else if {
조건1과 조건2를 둘다 불만족할 떄 실행
ex) 나이에 따른 다른 문구를 띄울 때
let x = 23
if (x>=20) {
alert("성인입니다.")
} else if (x >13) {
alert("청소년입니다.")
} else {
alert("어린이입니다.")
}
// 성인입니다. 출력
x = 10
if (x>=20) {
alert("성인입니다.")
} else if (x>13) {
alert("청소년입니다.")
}else {
alert("어린이입니다.")
}
// 어린이입니다. 출력
ex) 함수 응용
funtion is_adult(age) {
if (age>=20) {
alert("성인입니다.")
} else if (age>13) {
alert("청소년입니다.")
} else {
alert("어린이입니다.")
}
}
is_adult(23) //성인입니다
let x =17
is_adult(x) // 청소년입니다.
let age =5
is_adult(age) //어린이입니다.
ex) 논리연산자 사용해서 여러 개 조건을 걸기
funtion I_am_a (age, gender) {
if (age<20 && gender == "남") {
console.log("I am a boy.")
} else if (gender=="남") {
console.log("I am a man.")
} else if (age<20 && gender=="여") {
console.log("I am a girl.")
} elseif ( gender =="여") {
console.log("I am a woman")
} else {
console.log(I am who I am)
}
}
I_am_a(30, "남") // I am a man 출력
ex) 반복문
console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
console.log(6)
...
console.log(99)
> 반복문 기본 문법
for (1.시작 조건; 2. 반복조건; 4. 더하기) {
3. 조건을 만족할 때 실행
}
// 1 ->체크하고 (괜찮으면) -> 3 -> 4 ->1 순서로 실행
> 반복문 예시
for (let i = 0; i < 100; i++)
> 반복문 풀어서 쓰면
let i=0
if (i<100) {
console.log(i) // 조건을 만족하므로 실행
}
i++ // i=1
if (i<100) {
console.log(i) // 조건을 만족하므로 실행
}
i++ // i=2
...
if (i<100) {
console.log(i) // 조건을 만족하므로 실행
}
i++ // i=99
if (i<100) {
console.log(i) // 조건을 만족하므로 실행
}
i++ // i=100
if (i<100) {
console.log(i) // 조건을 만족하지 않으므로 출력하지 않고 반복문 끝
}
> 리스트와 함께 쓰일 수도 있음
ex) let people = ['철수', '영희', '민수', '형준','기남','동희']
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있다.
for (let i = 0 ; i < people.length ; i++) {
console.log(people[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])
}
//점수가 70 미만인 사람의 이름 출력
for (let i = 0 ; i < scores.length ; i++) {
let score = scores[i]
if ( score['score'] < 70) {
console.log(score['name']);
}
}
<자바스크립트 연습>
- Q1. 1부터 n 까지의 합을 구하는 함수
> 1. 어떤 순서로 연산을 실행해야 결과가 나올 것인지 생각. 이런 문제해결 절차를 알고리즘이라고 한다.
ex) n이 주어져 있을 때,
더한 결과를 저장할 수 있는 변수를 만들고,
이 변수에 1, 2, 3, ..., n 까지 순서대로 더한다.
결과 변수를 돌려준다.
> 2. 위같이 언어로 코드를 흉내는 것을 '의사코드'라고 한다. 좀 더 코드의 형태로 적어보면
ex) n 이 주어지면,
sum은 0에서 시작
i가 1부터 n 까지 커지는 동안
sum에 i를 더한다.
sum을 반환한다.
> 3. 코드로 작성한다.
ex) let n = 10
let sum = 0
for (let i=1; i<=n, i++) {
sum += i
}
console.log(sum) //55
> 4. 함수 형태로 만든다
function add_num(n) {
let sum = 0
for (let i=1; i<=n; i++) {
sum += i
}
return sum
}
> 결과를 확인한다
add_num(10) // 55
> 코드를 쓰기 전에 알고리즘에 대한 고민은 미리 하는 것이 좋다.
-Q2. 미세먼지(IDEX_MVL) 의 값이 40미만인 구 이름(MSRSTE_NM)과 값을 출력하기
> 데이터를 먼저 확인, 리스트 안에 각 구에 대한 정보가 딕셔너리로 들어있는 것을 볼 수 있음.
무슨 키가 어떤 값을 의미하는지 생각해보기
> 알고리즘을 생각해 슈도코드로 적어보자
mise_list 라는 데이터가 있을 때
리스트의 요소인 각 구에 대하여
미세먼지 값이 40 미만이면
구의 이름을 출력한다.
> 코드로 나타낸다
let mise_list =[...]
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)
}
}
> 기준을 40이 아닌 다른 값도 쓸 수 있도록 함수를 만들어 본다.
let mise_list = [...]
function show_good(n) {
console.log(미세먼지 수치가 "+n"보다 낮은 구의 목록)
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< n ) {
console.log(gu_name, gu_mise)
}
}
}
show_good(50)
> Q3. 자전거(ParkingBikeTotCnt)가 5개 이하인 정류장의 이름을 출력하기
- bikes 라는 데이터가 있을 때
정류장 이름에 대하여
자전거(parkingBikeTotCnt)가 5 개 이하인
정류장 이름을 출력한다
- for ( let i = 0 ; i <= bikes.length; i++ ) {
if (bikes[i]['parkingBieToCnt'] <=5) {
console.log(bikes[i]['statinoName']);
}
}
- 자전거 대수를 변수로 받는 함수
function show_names(num){
for(let i = 0; i<bikes.length; i++) {
if (bikes[i]['parkingBikeToCnt'] <=num) {
let station = bikes[i]['stationName'];
console.log(num + "대 이하 정류장 : " + station
}
}
}
funtion show_name(num)
for (let i = 0; i <= bikes.length: i ++) {
if (bikes[i][ParkingBikeToCnt]<+num {
let station = bikes[i]['stationName'];
console.log(num + "대 이하 정류장: " + station
}
}
}
// 이러면 아래와 같은 것이 가능
show_name(10) // 10개 이하 주차된 정류소만 출력
show_name(5) // 5개 이하 주차된 정류소만 출력