Isaac
Problem Solving
[CSS] Requirements Q05: Scroll
transition Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione corrupti earum quo ut aperiam, quas itaque voluptate consequuntur dolore perferendis vel, molestiae dolores illo et, dolorem qui. Beatae, cumque eum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto nemo autem earum quia assumenda, dignissimos possimus eum iusto tempora nos..
Problem Solving
[CSS] Requirements Q01: Table design
Member list Table Design No Name Age ID Description 01 Lorem 21 Lorem Lorem ipsum dolor sit amet 02 Magni 22 Facere Obcaecati accusamus perspiciatis nesciunt corporis 03 Nam 23 Laudantium Ipsa nam molestiae ea obcaecati 04 Beatae 24 Esse Repellat expedita dolorum autem architecto 05 Placeat 25 Itaque Soluta eaque nam nemo enim 06 Eligendi 26 Velit Dolores, unde ratione Ab, natus 07 Labore 27 Dol..
Programming/JavaScript
[JavaScript] Event Bubbling, Event Tunneling (Event Capturing)
🍁Event Bubbling, Event Tunneling ⬆️Event Bubbling 이벤트 버블링(Event Bubbling)은 이벤트가 발생한 요소에서 시작해 상위 DOM 트리 요소로 이벤트가 전파되는 방식이다. 가장 하위의 요소에서 이벤트가 시작되어 가장 상위의 부모 요소까지 이벤트가 전파되며, 각 요소의 이벤트 핸들러가 순차적으로 호출된다. ⬇️Event Tunneling 이벤트 터널링(Event Tunneling)은 이벤트 버블링과 반대로 이벤트가 상위 요소에서 시작하여 이벤트가 발생한 요소까지 전파되는 방식이다. 이벤트는 상위 요소에서 시작하여 하위 요소로 내려가며, 마찬가지로 이벤트 핸들러는 최상위 요소에서 시작하여 하위 요소로 내려가면서 호출된다. 이벤트 터널링은 다른 말로 Event ..
Programming/JavaScript
[JavaScript] Template String (Template Literal)
🍁Template String Template String은 ES6때 만들어진 문자열 표기법이다. 템플릿 문자열은 역따옴표(backticks)로 문자열을 감싸고, 변수나 표현식을 ${} 안에 넣어 문자열을 보다 효과적으로 결합할 수 있도록 해준다. let name = 'isaac'; let age = 20; console.log('이름은 ' + name + '이고, 나이는 ' + age + '세 입니다.'); 변수를 만들어서 문자열로 출력을 하고 싶다. 위와 같이 사용할 수도 있지만, 이때 사용할 수 있는 문자열 표기법이 존재한다. 문자열 표기법 'string' "string" `string` : template string 3개의 표기법 모두 같지만, `string` 방식의 문자열 표기법을 사용하면 $..
Programming/JavaScript
[JavaScript] Core: Closure
🍁Closure 클로저(Closure)는 고유한 개념이 아니라, 함수형 프로그래밍 언어에서 발견되는 특성(기술)이다. 클로저는 함수 내부에 정의된 함수가 외부 함수에 접근할 수 있는 방법을 제공하며, 이를 통해 함수는 자신이 생성된 위치의 스코프에 있는 변수들에 접근하고 수정할 수 있게 한다. 지역 함수 선언 function outer() { //지역 변수(outer) let a = 10; console.log('a', a); //지역 함수(outer) function inner() { //지역 변수(inner) let b = 20; console.log('b', b); } inner(); //console.log('b', b); } outer(); //inner(); //console.log('a', ..
Programming/JavaScript
[JavaScript] Core: window 객체
🍁window 객체 [JavaScript] BOM: window 객체 🍁window 객체 window.open(URL, name, options); URL: 새 창의 URL name: 새 창의 이름 options: 새 창 옵션들 window로 창을 새로 만들었을 때 만들어진 창을 자식창이라고 한다. 옵션들 사이는 띄어쓰기를 해도 되 isaac-christian.tistory.com window 객체에 대해서는 위 글을 참고한다. 내장 객체에 프로퍼티 추가 const isaac = { name: 'isaac' } isaac.age = 25; 자바스크립트는 객체에 프로퍼티를 자유롭게 추가할 수 있다. const now = new Date(); console.log(now); now.color = 'tomat..
Programming/JavaScript
[JavaScript] Core: Function
🍁 Function 자바스크립트의 함수는 1급 객체(First Citizen)라는 말이 있다. 1급 객체는 자바스크립트에서만 볼 수 있는 현상은 아니고, 다른 언어(Switf - 아이폰 개발 언어, Python 등)에서도 볼 수 있는 현상이다. 이는 쉽게 말하자면 함수를 객체처럼 취급하여 함수를 값(데이터)으로 사용할 수 있게 하는 것이다. [JavaScript] Function (함수) 🍁Function Java Method 자바의 메서드는 아래의 양식으로 만들어진다. public [static] int m1 (int num) { return 10; } 자바스크립트는 접근 지정자 표현이 없으므로 public을 생략한다. static은 정적인지를 묻는 isaac-christian.tistory.com 자..
