개발일지
베이스캠프 11일차 본문
어제부로 css 기초강의가 끝났다 css 마지막 부분에 대해서는 내가 집중력이 떨어지고 이해하는 부분이 너무 없어서 작성을 제대로 못하였다 .
오늘부터는 javascript 강의가 시작 되었다
javascript
자바스크립트란 웹페이지를 동적으로 동작할 수 있도록 만들어주는 프로그래밍 언어이다.
변수와 상수
웹페이지의 기본은 데이터 관리 라고 할수 있다. 데이터를 관리하는대 가장 효율적인 방법은 어딘가에 저장하고 출력하여 정제가 가능하도록 하는것이다 이를 변수와 상수를 이용하는 방법이다.
변수와 상수란 무엇일까
자바스크립트에서는 데이터를 다루기 위해 변수와 상수를 사용 합니다. 이때 변수와 상수는 데이터를 담고 꺼내쓰는 상자라고 생각하면 좋다
변수와 상수는 데이터를 재사용할수있고, 해당 데이터에 접근하기 위해서 필요하다
변수 -값이 변할수 있는
var , let
상수 - 값이 변하지 않는
const
변수와 상수 만들기
1 선언
선언은 변수의 이름을 알려주는 행위이다. 변수와 상수를 사용하기 위해서는 변수 또는 상수를 선언해주면 된다.
//변수를 선언하는 세가지 키워드
var, let, const
let box
// let 라는 키워드로 box 라는 변수를 생성
2 할당
할당이란 변수에 데이터를 담아주는 행위이다
변수에 데이터를 할당하게 되면 할당된 데이터는 컴퓨터의 메모리에 저장을 하게 된다.
할당을 해줄때는 = 기호를 사용한다
result = 10 + 20
//result 란 변수에 10 + 20 이란 데이터를 할당해서 담았다
변수 참조
선언한 변수명을 사용하여 원하는 위치에 변수에 담긴 데이터를 불러와서 사용 가능하다
let 이란 키워드로 box 라는 변수를 만들고 그 안에 123 * 987 이란 데이터를 할당하고 box 변수를 이용해서 구구단처럼 사용한예
변수와 상수의 종류,특징
변수명을 중복으로 선언할수있는지에 대한 재선언 여부와 데이터를 수정할수 있는 지에 대항 재할당 여부이다
재할당 - 이미 데이터가 있는 변수에 다시 할당
재선언 - 이미 선언 되어있는 변수명으로 다시 선언
const - 선언과 할당이 동시에 이루어져야 한다. 주로 const를 많이 사용
let - 반복문을 사용할때 사용
변수명 주의사항변수명은 동사가 아닌 명사로, 첫 글자는 숫자 사용 불가능
camelCase - 띄어쓰기 대신 대문자로 구분
snake_case - 띄어쓰기 대신 대문자로 구분
PascalCase - 첫글자도 대문자, 띄어쓰기 대신 대문자로 구분
데이터 타입
자바스크립트의 모든 데이터는 특정한 데이터 타입에 속한다
데이터타입이라 함은 자바스크립트 데이터의 종류 이며 자료형이라고 불린다
데이터 타입의 종류
String(문자열)
" " 큰따옴표, ''작은 따옴표 안에 입력되는 데이터는 문자열로 표시 된다
숫자, 알파벳,공백 등 모두 텍스트화 가능
문자열의 연산
문자열에 + 기호를 사용하여 문자열을 연결해서 사용 가능
let str = "Hello" + "World"
console.log(str)
// HellloWorld
Number 숫자열
1, 2, 80, 과 같은 흔한 숫자 데이터 입니다 숫자타입에서는 여러 연산이 가능하다
산술 연산자
1 + 2 덧셈
3 - 2 뺄셈
3 * 5 곱셈
2 / 4 나눗셈
9 % 3 나머지
산술 연산자는 숫자타입의 데이터로 연산을 시도했을 경우만 정상적인 값을 반환하며 만일 숫자가 아닌 값으로 연산을 시도했을 경우 NaN(Not a Number)을 반환한다
문자와 숫자의 혼합연산
문자 타입과 숫자 타입에서 공통으로 사용할수 있는 산술연산자가 있다 + 더하기 연산자이다
더하기 외 다른 연산자를 사용하게 되면 NaN을 반환하게 된다
let box = "문자타입" + 10
console.log(box)
"문자타입10"
//이런식으로 문자열과 숫자열을 더해주면 숫자열이 문자열로 변환됩니다
"문자" - 10 // NaN
"문자" * 10 // NaN
"문자" / 10 // NaN
"문자" % 10 // NaN
더하기 외에 연산자들을 이용하면 NaN을 반환한다
문자열안에 숫자가 들어 있을 경우에는
"100" * 20
=2000
이럴때는 숫자열로 값을 반환하는데 더하기 연산자를 제외한 다른 연산자들은 문자열과 사용시
데이터 타입을 숫자열로 변환하는 시도를 하여서 저렇게 값이 나옴
배열 array
여러 데이터를 순서와 함께 저장을 할수 있는 저장 창고라고 생가하면 쉽다
배열을 만들 때는 대괄호를 [] 사용해서 안에 데이터를 넣어주면 되는데 안에 데이터 하나하나를 요소라고 부른다
요소를 작성할때는 요소하나당 , 쉼표로 구분해준다
let ranking = ["Jason", "Alice", "Jhon"]
배열의 index
index는 배열의 각 요소에 순서를 부여할때 뿐 아니라 해당 요소에 접근이 가능하도록 해준다
index의 값은 0번부터 시작한다
let ranking = ["Jason", "Alice", "Jhon"]
// index. 0. 1. 2.
//index 번호로 요소에 접근
ranking[0] = "Jason"
ranking[2] = "Jhon"
배열의 property 속성
배열은 고유한 속성을 가지고 있다 배열의 길이를 구하거나 배열에 내장된 함수를 이용해 배열을 확장하여 사용할수 있다
arrat .length
length의 속성은 이름에서 알 수 있 듯 배열의 길이를 나태내는 속성이다 배열의 길이는 배열 내 요소의 개수를 알수 있다
lengtha는 index 와 다르게 1번부터 시작
let user = ["wan", "Jason", "Chris", "Lee"]
//index. 0. 2. 3. 4.
//length 1. 2 3. 4. uset.length = 4
배열의 메서드
array.push()
배열의 가장 뒤에 데이터를 추가
push("추가할 데이터") push의 괄호안에 넣어주고 싶은 데이터를 넣어주면 됩니다
let ranking = ["정훈","주은","시윤"]
ranking.push("원두")
// 결과
ranking = ["정훈","주은","시윤","원두"]
array.pop()
배열의 가장 뒤의 데이터를 삭제
push 와 다르게 pop 괄호안에는 아무것도 넣지 않아도 됩니다.
let ranking = ["정훈","주은","시윤"]
ranking.pop()
// 결과
ranking = ["정훈","주은"]
array,includes()
해당 배열에 주어진 데이터가 있는지 확인하여 boolean 값으로 반환
let ranking = ["정훈","주은","시윤"]
ranking.includes("정훈")
// 결과
true
array.indexOf()
해당 배열에서 지정된 요소를 찾을수 있는 index값을 반환
만일 찾을 수 없으면 -1 일 반환한다
let ranking = ["정훈","주은","시윤"]
ranking.indexOf("정훈")
// 결과
0
배열의 정의
1 순서가 존재하는 데이터 창고
2 배열은 대괄호를 열고 닫음으로써 생서 대괄호: []
3 배열 안에 존재하는 데이터들은 쉼표로 구분하고 그 데이터를 요소라고 한다
어떠한 데이터든 요소가 될수 있다
4 요소들은 각 위체 맞는 값을 가지는데 이걸 index라고 한다 index는 0부터 시 작한다 이를 이용해서 요소에 접근할수 있다
배열의 속성
length
배열에 존재하는 요소의 개수를 기반으로 해당 배열의 길이를 나타내는 속성
배열의 메서드
- push() - 데이터 추가 괄호안에 추가하고 싶은 데이터를 넣으면 배열의 마지막 자리에 추됨
- pop() - 데이터를 삭제하는 메서드 배열의 마지막 요소를 삭제함
- indexOf() - 특정 인덱스를 찾는 메서드 찾고 싶은 데이터의 index값을 알고 싶을때 괄호안에 데이터를 넣으면 index값을 반환 index는 0부터 시작하니 +1을 하면 length의 값이 된다.
- includes() - 배열안에 데이터가 있는지 확인하는 메서드 괄호안에 데이터를 넣어주면 그 데이터가 포함되어 있는지 true/false 값으로 반환
객체 (object)
const people = ["홍길동", 189, 90, "코린이"]위에서 보듯이 배열 안에 있는 데이터들이 무언에 대한 데이터인지 명시할수 없는데 객체는 키값을 통해서 해당 데이터가 무엇에 개한 데이터인지 알수 있다
객체 만들기
객체를 만들때는 중괄호 {} 를 이용해서 만든다
let userData = {
name:"홍길동",
age:85,
height:189,
company:"코린이"
}중괄호 안에 원하는 데이터를 모아서 넣어주면 객체를 만든거다
객체 안의 데이터를 하나하나를 프로퍼티(property)라고 한다
객체의 프로퍼티에 접근하기
객체의 프로퍼티에 접근할때는 기본적으로 key 값에 접근해서 value를 가지고 옵니다
접근할수 있는 두가지 방법이 있는데
Dot notation(점 표기법)
key 값에 접근시 . 점을 이용해서 접근 하는 방법입니다.
let userData = {
name:"홍길동",
age:85,
height:189,
company:"코린이"
}
//Dot notation(점 표기법) 접근
userData.name = "홍길동"
userData.age = 85
Bracket notation(괄호 표기법)
key 값에 접근시 괄호 [] 를 이용해서 접근
let userData = {
name:"홍길동",
age:85,
height:189,
company:"코린이"
}
//Bracket notation(괄호 표기법) 접근
userData["name"] = "홍길동"
userData["age"] = 85Bracket notation을 사용하실 때 “”를 붙여주시지 않으시면, 안의 key값이 아닌 변수로 인식됩니다.
key 값에 접근을 원하신다면 반드시 “”를 붙여주세요
객체의 Method(메소드)
Object.keys()
주어진 객체의 key 값만 가져와 배열에 담아주는 메소드
사용할때 괄호 안에 key 값을 뽑아올 객체 이름을 넣어주면 됩니다
let userData = {
name:"홍길동",
age:85,
height:189,
company:"코린이"
}
Object.keys(userData)
// 결과
[ "name", "age", "hight", "company"]
Object.values()
주어진 객체의 value만을 가져와 배열에 담아주는 메소드
사용할때는 괄호안에 value 값을 뽑아올 객체의 이름을 넣어주면 된다
let userData = {
name:"홍길동",
age:85,
height:189,
company:"코린이"
}
Object.values(userData)
// 결과
[ "홍길동", 85, 189, "코린이"]
객체 정의
1 중괄호를 사용해서 정의 중괄호: {}
2 객체 내부의 요소는 여러개의 프로퍼티(속성)로 구성 되어있고 그 프로퍼티들은 각각의 (키 : 값)이런식으로 쌍을 이루어서 존대
3 Dot notation, Bracket notation을 이용한 방법으로 객체의 요소에 접근 가능 브라켓노테이션은 변수를 통해서 객체 프로퍼티에 접근 가능하다
const jasonData = {
name: "Jason",
age: 29,
gender: "Male"
}
let key = "gender"
console.log(jasonData[key])
Male
4 위 두가지 방식으로 객체에 새로운 프로퍼티 생성 가능
const jasonData = {
name: "Jason",
age: 29,
gender: "Male"
}
jasonData.favoriteFood = [
"rice", "noodle", "chicken"
]
(3) ['rice', 'noodle', 'chicken']
console.log(jasonData)
{name: 'Jason', age: 29, gender: 'Male', favoriteFood: Array(3)}
객체의 메서드
1 Object.keys() - 객체 안에 key들을 모두 모아서 배열로(문자열로) 반환해준다
2 Object.values()- 객체 안에 값을 모두 모아서 배열로 (데이터타입그대로 )반환해준다
