20230228 TIL
HTML 문서 개념 D-Day 카운터 만들기t
함수
어떤 기능을 수행하거나 계산을 수행하는 코드의 집합
const sum(함수이름) = function(){
console.log(10 + 10); //실행할 코드
let result = 10 + 10;
return result;
}. → 밖에서도 사용가능
함수를 만들려면?
함수(기능,Function) - 매개변수(parameter;입력데이터) → 반환데이터(결과;return)
만든 함수를 호출하기
function SayHi(){
console.log("안녕하세요 여러분")
}
// 함수를 사용하기위한 호출
SayHi()onclick
id, class처럼 클릭되었을때 펑션
<head>
<script>
const btnFunc = function() {
console.log("버튼이 눌렸어요!")
}
</script>
</head>
<body>
<button onclick="btnFunc()">버튼</button>
</body>
**버튼이 눌렸을 때 버튼이 눌렸다고 알람뜸querySelector
id # class . 을 querySelector()의 소괄호 안에 넣기
new Date()
자바에서 취급하는 날짜데이터 : 일종의 객체
new Date() → 컴퓨터시간 기준 현재 날짜, 시간 가져옴
new Date("2022-09-09") → 특정날짜 데이터 가져옴
함수의 리턴
cf. 해당 반환값을 특성 변수에 담아주기
*특성 : 반환에만 국한되지 않음, 함수 실행도중 return 만나면 함수 종료; 실행되지 않음
→ console.log() 실행될 수 없는 코드함수 선언 종류
함수 선언식
function 함수이름(param1, param2, ...){
// ...code here
return 결과값
}함수 표현식
const 함수이름 = function(param1, param2, ...){
// ...code here
return 결과값
}변수에 할당된 함수 - 익명함수 ; 호이스팅 영향받지 않음. 표현식 사용 권장
호이스팅 ; 위로 끌어 올려지는 것. - 예측 어려워짐
화살표 함수
const 함수이름 = ( param1, param2, ... )=>{
// ...code here
return 결과값
}cf. 매개변수(Func소괄호 안에있는거), return 결과값 ⇒ 필수 아님
; 상황에 따라 필요할 때 적기
localhost
ip 주소 = localhost(liveserver 켰을 때)
DNS(Domain Name System)
127.0.0.1 → 식당의 상세 주소
localhost 직관적인 주소(식당이름) = 도메인
port(포트번호 구글)
https 443(자물쇠)
http. 80 (보안X)
ex. localhost:5500 → 라이브서버가 열어둔 문 넘버(localhost접근할 수 있도록)
비교 연산자
데이터를 서로 비교하는 방법 ( ===, 2 <5, 5<2;false, 3 < = 4)
느슨한 비교 연산자(실무사용하지않음)
1==”1” //true 값만 비교
0 == “0” // true
0 == [] // true
“0” == [] // false. → 사용하면 안되는 이유
문자열 숫자열 같이 취급
엄격한 비교 연산자
1===”1” // false
데이터 메모리 주소 비교해 완전히 일치하는지 비교
원시 타입과 참조 타입
원시타입
- String
- Number
- Boolean
- Bigint
- undefined
- Symbol
- null
특징 : 불변성 - 데이터 변하지 않음
let box = ‘abc’;
주소 : 101 - ‘abc’
box 저장 → 주소값 가져오는 것(임시 메모리에 저장된 주소값)
let box = ‘def’; 재할당 → 주소값이 변수에 담기게 됨
주소 : 102 - ‘def’
let box = “abc” → 101이라는 주소를 가진 메모리에 저장, box = “def” (재할당) → 102에 저장
대체되지 않음 = 원시타입의 불변성
참조타입
원시타입 제외 모두, 참조타입 = 객체타입
참조타입의 가변성; 101번주소 메모리값 수정가능
414주소 할당한 201주소 메모리(불변) - 414 주소 메모리에 객체 정보 저장(변화 가능)
객체의 껍데기 : 주머니, 객체 안의 데이터 : 공 → 주머니; 불변, 공;가변(삭제추가O)
let arr = [1, 2, 3]
arr === [1, 2, 3] // false 주소값까지 비교
배열 생성할때마다 주소값 생성
[1, 2, 3] → 새로운배열 생성; 새로운 주소값
⇒ 값 복사하려면
let origin = ‘hi’ ;
let copy = origin;
origin = ‘bye’ ;
console.log(copy); → ‘hi’ // 원시타입
let origin = [1,2,3]
let copy = origin;
origin.pop();
console.log(copy); → [1,2]
console.log(origin); → [1,2] // 참조타입
조건문
코드 실행 분기점
if문은 특정 조건이
참일때 명령문을 실행하며,
거짓일경우에는else 문을 실행
또한
조건은 비교연산자를 사용한 참 또는 거짓으로 평가되는 표현식
if( 조건식 입력 ) {
// 조건1이 참이면 실행
} else if( 조건2 ) {
// 조건1은 거짓, 조건2는 참이면 실행
} else {
// 모두 거짓이면 실행
}let name = “Jason”
if( name === “Jason”){console.log(’Hi, Jason’)}
예시
if(user.name==="peter"){
console.log("안녕하세요. peter님")
}else if(user.name==="jason"){
console.log("안녕하세요. jason님")
}else{
console.log("저희 멤버가 아니신가요?")
}논리 연산자
&& (and 연산자): 양쪽에 위치한 조건을 모두 만족한 경우 true|| (or 연산자): 양쪽 중 하나라도 만족한 경우 true! (not 연산자): boolean의 값을 반전 시켜주는 논리 연산자. (true값이었던건 false로, false값이었던건 true로.)const obj = { name : ‘Peter’, age: 25};
if (obj.name === ‘Jason’ || obj.name === ‘Peter’){
console.log(’HI, ‘ + obj.name); } else {
console.log(’you are not a member’)}
falsy값 : 거짓과 같은 값
undefined, null, 0, “”, NaN (이외 데이터 truthy)
조건에 따른 메세지 출력
