[TIL] 24-11-01

event.stopPropagation();

1번 네모칸 안에 2번 작은 네모가 있고, 둘 다 기능을 하는 버튼일때!

1번 네모에 z-index 1 2번 네모에 z-index 2를 넣고, 2번을 클릭 시 2번이 클릭되면서 1번도 클릭됨

이 현상을 막기 위해 앞에있는 2번 네모에 event.stopPropagation();을 넣어 주어야 함!

JavaScript

특징

• 객체지향 언어
• 동적 타이핑 언어
• 함수형 프로그래밍 지원
• 비동기 처리
• 클라이언트 측 및 서버 모두에서 사용 가능

변수와 상수

메모리에 저장하고, 읽어들여서 재사용한다.

변수의 5가지 주요 개념

• 변수 이름: 저장된 값의 고유 이름

• 변수 값: 변수에 저장된 값

• 변수 할당: 변수에 값을 저장하는 행위

• 변수 선언: 변수를 사용하기 위해 컴퓨터에 알리는 행위

• 변수 참조: 변수에 할당된 값을 읽어오는 것

변수를 선언할 수 있는 3가지 방법: var, let, const

var

변수(재할당, 재선언 가능)

let

변수(재할당 가능, 재선언 불가능)

const

상수(재할당 불가능, 재선언 불가능)

데이터 타입

코드를 작성할 때가 아니라 실제 코드가 실행될 때 데이터 타입이 결정된다.

숫자

// 1-1. 정수
let num1 = 10;
console.log(num1);
console.log(typeof num1);

// 1-2. 실수(float)
let num2 = 3.14;
console.log(num2);
console.log(typeof num2);

// 1-3. 지수형(Exp)
let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3);
console.log(typeof num3);

// 1-4.
// Nan : Not a Number
let num4 = "Hello" / 2;
console.log(num4);

// 1-5. Infinity(무한대)
let num5 = 1 / 0;
console.log(num5);
console.log(typeof num5);

// 1-5. Infinity(무한대)
let num6 = -1 / 0;
console.log(num6);
console.log(typeof num6);

문자

// 2. 문자 : string(문자열 = 문자의 나열)
// ' ' = " "
let str = "Hello World!";
console.log(str);
console.log(typeof str);

// 2-1. 문자열 길이 확인하기
console.log(str.length);

// 2-2. 문자열 결합하기
let str1 = "Hello, ";
let str2 = "world!";
let result = str1.concat(str2);
console.log(result);

// 2-3. 문자열 자르기
let str3 = "Hello, World!";
console.log(str3.substr(7,5));
console.log(str3.slice(7,12));

// 2-4. 문자열 검색
let str4 = "Hello, World1";
console.log(str4.search("World"));

// 2-5. 문자열 대체
let str5 = "Hello, World!";
let result01 = str5.replace("World", "Javascript");
console.log(result01);

// 2-6. 문자열 분할
let str6 = "apple, banana, kiwi";
let result02 = str6.split(",");
console.log(result02);