2023. 2. 28 TIL

Junghan Lee·2023년 3월 12일
0

TIL Diary

목록 보기
10/52

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") → 특정날짜 데이터 가져옴

함수의 리턴

Untitled

cf. 해당 반환값을 특성 변수에 담아주기

Untitled

*특성 : 반환에만 국한되지 않음, 함수 실행도중 return 만나면 함수 종료; 실행되지 않음

Untitled

  → 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접근할 수 있도록)

Untitled

비교 연산자

데이터를 서로 비교하는 방법 ( ===, 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’

Untitled

let box = “abc” → 101이라는 주소를 가진 메모리에 저장, box = “def” (재할당) → 102에 저장

대체되지 않음 = 원시타입의 불변성

참조타입

원시타입 제외 모두, 참조타입 = 객체타입

참조타입의 가변성; 101번주소 메모리값 수정가능

Untitled

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)

조건에 따른 메세지 출력

profile
Strive for greatness

0개의 댓글