9강
기능을 수행하거나 계산을 수행하는 코드의 집합==> 함수.
함수를 사용하는 방법,정의하는 방법
vs코드 속성-->settings에서 emmet검색 -->Emmet:Trigger Extension on Tab에 체크하고 닫기
=⇒설정 이유: html문서의 빠른 작성을 위해.
!치고 텝을 누르면 기본양식이 완성됨.
11강
JS기능만들기
변수 함수의이름 = function () { 여기 입력되는 코드가 이 함수가 실행되었을때 수행할 코드.;}
함수는 호출이라고하는 과정을 통해 실행(수행)
함수 호출==> 함수명()
====>함수명 하고 바로 뒤에 소괄호 열고 닫기
10강
html문서 개념설명.
태그들의 조합으로 구성된 문서
div태그.
:입력한 줄 전체를 차지
span태그:
본인이 가지고있는 컨텐츠 만큼의 크기(영역)만 가짐.
input태그. 스스로 열고 닫기 혼자서 가능,택스트 입력할 공간을 만들어줌==><input />
아이디는 하나의 페이지에서 고유한 값을 가져야함.
클래스는 중복도 가능.
head태그 안쪽의title태그로 페이지 이름을 변경 가능
스타일을 태그에 직접 지정 해줄 수도 있지만 head태그 안에서 style이라는 태그를 만들고 그 안에서 작성을 해 줄 수 있음.(css작성)
또한 head태그 안에서 script태그를 만들고 그 안에서 자바스크립트를 작성 할 수 있음
12강
버튼과 함수 연결하기
버튼태그안에 onclick이라는 속성 부여. 버튼 클릭되었을때 onclick안에 있는 코드가 실행됨.
14강
날짜 정보를 가지고있는 객체가 존재하는 자바스크립트
==>new Date()사용
함수 안에서 선언된 변수는 함수의 영역안에 갇히게 됨.==>지역변수라고 함.
함수 밖에서 선언된 변수는 안으로 들어 올 수 있음
16강
함수표현식==> 변수에 함수를 할당하는 모양
함수선언문==>function 함수명() {
}
차이점:선언문은 표현식 처럼 선언키워드(변수에 함수를 할당하는 모양) 동반X,호이스팅의 영향받게됨.
호이스팅?:위로끌여올려지는것의미.
선언문은 호출한 위치(함수 위쪽)에서는 함수가 정의 되지 않았음에도 불구하고, 자바스크립트가 실제로 해석하는 과정에서는 마치 함수가 이미 선언된것처럼 동작함.
표현식의 경우 선언하기 이전에 함수 실행하면 에러(호이스팅의 영향을 받지 않음).
따라서 선언문의 경우에는 우리가 예측하기 어려운 동작을 하게됨(호이스팅이 적용되기에).
화살표 함수
표현식과 같이 동작
선언키워드 변수명(함수의이름말함) = () => { 실행할 코드;}
대부분의 경우 메서드에서는 화살표 함수를 많이 사용
17강
비교연산자와 조건문.
비교연산자로 데이터 서로 비교. 데이터 타입 심화
코드실행의 분기점을 만들어주는 조건문.
live server 익스텐션 설치, prettier설치
==>속성-->settings-->format on save체크==>저장하면 자동 정렬됨--->default formatter항목Prettier로 지정.
18강
로컬 호스트: 내 컴퓨터의 주소.
localhost ==ip주소 서로 같은것.
127.0.01애는 아이피 주소. 얘를 localhost로 변환시키는 것(도메인주소로 변환시키는것)을 Domain Name System이라고 함.
복잡한 아이피 주소를 대신해 쉬운 이름으로 지정해주는것. 이것이 도메인!!
localhost:5500
여기서 뒤의 숫자가 포트번호.5500은 라이브서버가 사용하기위해 설정 해둔 번호
포트번호==>localhost로 통하는 여러개의 문 중 하나,
사이트 주소창에
자물쇠가 있는 사이트==>443번포트사용,https프로토콜 사용
자물쇠가 없는 사이트==>80번포트 사용,http프로토콜 사용
19강
div태그는 한줄을 전부 차지.
0
일
===>이렇게 표현됨
span태그로 본인의 영역만 차지 하도록하면
0일 ===>이렇게 표현됨.
20강
비교연산자==> === ,<,'>,<=,>=
true, false로 나옴.
할당연산자 ==> =
느슨한 비교 : ==
엄격한 비교: ===
느슨한 비교는 사용하지 않도록!
0 == [] :true
0 == "0" :true
"0" == [] :false
==>예상치 못한 방향으로 결과가 나오기에
const arr = [1, 2, 3];
console.log(arr === [1,2,3], arr === [1, 2, 3]);
===>결과:
arr === [1,2,3] false
21강
배열의 비교가 false를 리턴했던이유.
원시(Primitive)타입, 참조(Reference)타입이라는 데이터타입의 부가적인 기능때문임.
원시(Primitive)타입:
String,
Number,
Boolean,
Bigint,
undefined,
Symbol,
Null
==>불변성(데이터 변하지 않음)
변수에 무언가를 할당한다는 것-->
변수는 데이터 자체를 담고있는것이 아니라 또다른 메모리에 저장된 데이터의 주소값을 가져와 저장.
저장됨과 동시에 주소값을 가지고 주소값으로 데이터를 가져오는 형태.
재할당을 하면 또다른 주소에 저장이되어 그 주소값이 달라지기에 원래의 데이터는 아무런 변화도 없음.따라서 불변하는것이 맞음
==>하나의 데이터는 하나의 값을 가지는것이 원시타입
참조타입: 그 외의 모든것.
참조타입의 경우, 주소값의 참조가 이루어져 주소를 따라 또다른 주소로가서 원하는 데이터의 주소를 알아내어 가는 형태.
let obj = {
name:J,
age: 25
}
obj라는 변수에는 주소값이 있고, 그 주소를 잠조하여 가면 그 안에 데이터의 주소가 있음.되게 복잡한 형태.
앞에서
const arr = [1,2,3]을 선언하고,
arr === [1,2,3] 을 비교하였을때 false가 나온 경우는 ===을 사용하여 엄격한 비교를 하고있기에 주소값까지 비교하여 두 주소값이 다르기 때문인데, 같은 배열인데 왜 다를까?
배열은 생성하는 순간 고유한 주소값을 생성한다. 그래서 일단 변수를 선언하며 할당해준 배열에는 이미 고유한 주소값이 생긴것이다.
거기에 비교해주기위해 배열을 또 생성한것인데 이 경우에도 또다른 고유한 주소를 가지기에 둘의 주소값이 다르다.
서로의 주소값이 달라 false를 리턴한 것이다.
또다른
차이:
원시타입과 참조타입 둘다 값을 복사하여새로운 변수에도 기존의 변수의 값을 가지게 할 수 있는데,
원시타입의 경우 원본이나 복사본에 재할당 등 변화를 주어도 변화를 주지 않은 데이터이는 영향을 주지 않는다.
예를 들어
let origin = 'hi';
let copy = origin;
let origin = 'bye';
이렇게 원본 데이터를 재할당해 준다고 해도 원본데이터만 변화하지 복사본에는 영향을 주지 않는다.
반대로 복사본에 어떠한 변화를 주어도 원본에는 영향을 주지 않는다.
반면 참조타입의 경우
한쪽에 영향을 주면 다른쪽도 영향을 받는데,
let origin = [1,2,3];
let copy =origin;
origin.pop();
을할 경우에 원본에서의 변화뿐만아니라 복사본에도 같은 변화가 일어나 둘다 [1,2]로 바뀐다.
참조 타입의 경우에는 배열이 갖고있는 주소값을 또다른 주소값으로 찾아가는데 값을 복사할 경우 이 처음의 주소값을 복사하여 같은 주소값을 가지게되기에 둘중 하나만 영향을 주어도 둘다 영향을 받는 형태가 된다.
22강
조건문: if(조건식){조건식이 통과될때 사용되는 코드} ==>조건이 true면 조건식 통과false면 코드 생략(스킵)
if (name === 'Jason'){
console.log('Hi, Jason')
}
else 문사용하면 flase일경우 또다른 코드가 실행됨.
if(조건식){
조건식이 true일 경우
}else{
false일경우
}
<else if 문>
if (조건식){
true일경우
}else if(또다른 조건식){
true경우
}else{
두가지 다 아닐경우
}
조건식이 같을경우! 또는 길게 적어 불편항 경우 ==> 논리 연산자 사용 ==>&&(and연산자), ||(or연산자)
&&(and연산자):양쪽 조건을 모두 만족해야 true를 리턴
||(or연산자):양쪽 조건중 하나라도 만족한다면 true를 리턴
23강
자바스크립트에서NaN값 판별할때는 비교연산자 통하지 않음 내장함수인 isNaN(체크하고싶은 데이터)사용
오늘 질문한것:let,const 사용에 관하여.
배열과 객체는 const사용할것.해당 변수에는 항상 객체가 담겨있어야하기에 객체 선언시에는 const사용.
이외에도 자바스크립트는 어떤타입의 데이터가 담겨있는지 예측이 어렵기에 배열 선언 시에도 const사용하여 선언수행할것.
