본문 바로가기

Front-End: Web

 (163)
[코딩애플] js part 1-6. 자바스크립트가 문자 다루는 신기한 방법 - Template literals (strings) Template Literals 문자를 다르게 제작할 수 있는 방법이다. backtick / backquote (백틱) var 문자 = `손흥민`; 엔터키 가능 var 문자 = `손 흥민`; 중간중간 변수 넣기 쉬움 var 변수 = '손흥민'; var 문자 = `안녕하세요 저는 ${변수}`; // (예전방식) '문자' + 변수 특히 HTML 작성시 유용함 var 템플릿 = `${변수}`; ⭐tagged literal (backquote 문자열 + 함수) 함수 뒤에 (소괄호) 대신 ``을 붙여도 함수가 실행된다. var 변수 '손흥민'; var 문자 = `안녕하세요 ${변수}입니다`; function 함수(){ return 10; } console.log(함수`안녕하세요 ${변수}입니다`); // 10 되..
[코딩애플] js part 1-5. 변수 신문법 총정리 1. var let const와 선언, 할당 범위 변수란? 자료 임시 저장공간 변수 만드는 방법 var var 이름 = 'Kim'; let, const ES6 신문법. var 키워드를 대체한다. let 이름 = 'Kim'; var vs let,const varletconst **재선언** 가능 불가능 불가능 **재할당** 가능 가능 불가능 **범위** function 중괄호 {} 중괄호 {} 재선언 var 이름 = 'Kim'; var 이름 = 'Park'; var 이름 = 'Heo'; // ➡️ 재선언 가능 let 나이 = 20; let 나이 = 30; // ➡️ Error 발생: 재선언 불가능 const 나이2 = 20; const 나이2 = 30; // ➡️ Error 발생: 재선언 불가능 재할당 v..
[코딩애플] js part 1-4. this & arrow function 연습문제 3개 1. 간단한 메소드 만들기 문제 **사람**이라는 오브젝트가 하나 있습니다. 이 오브젝트에 sayHi라는 함수를 (메소드를) 하나 추가하고 싶습니다. var 사람 = { name: '손흥민', } 사람.sayHi(); //안녕 나는 손흥민 위의 코드처럼 **사람.sayHi()**라고 작성하면 콘솔창에 **'안녕 나는 손흥민'** 이라는 글자가 나와야합니다. '손흥민'이라고 이름을 하드코딩해서 출력하기보다는 실제 내 오브젝트에 있는 name에 해당하는 값이 출력되면 참 좋을 것 같군요. **Q. sayHi()라는 함수를 어디서 어떻게 만들면 될까요?** 내 풀이 var 사람 = { name: "손흥민", sayHi: function () { console.log(`안녕 나는 ${this.name}`); }..
[코딩애플] js part 1-3. Arrow function은 function을 대체하는 신문법이 아님 함수 만드는 방법 (1=2) function 함수() {} var 함수 = function () {}; **ES6 Arrow function**을 이용 (function 키워드 대신) var 함수 = () => {}; 함수 사용하는 경우 함수는 그냥 쓰는 문법이 아니다. 코드들을 기능으로 묶고 싶을 때 사용 **입출력 기계**를 만들고 싶을 때 사용(input, output) ➡️ 함수 본연의 기능 var 함수 = (a) => { return a + 10 }; Arrow function의 좋은 점 입출력 나타내는데 훨씬 직관적임(쉽게 예측 가능) 파라미터 1개면 소괄호 생략 가능 var 함수 = a => { return a + 10 } 코드 한 줄이면 중괄호도 생략 가능 var 함수 = a => a + ..
[js] event.currentTarget vs event.target 보호되어 있는 글입니다.
[js] 이벤트 핸들러들 (onClick, onChange, onSubmit, onInput, onLoad, ...) 보호되어 있는 글입니다.
[코딩애플] js part 1-2. this 키워드를 알아보자 this 키워드는 뜻이 사용 용도에 따라서 3~4가지가 된다. 1. 함수와 Object에서 사용하면? => 나를 담고 있는 오브젝트가 나옴 (1) 그냥 쓰거나, 일반 함수 안에서 쓰면, 객체 {window} ❓window란 자바스크립트 기본 함수들을 담고 있는 개체 자바스크립트는 **키워드나 변수를 만나면 데이터를 바꾸고 싶어한다**. 자바스크립트의 가장 최상단에서 this 키워드는 무엇을 의미하는지 콘솔 찍어보자. window가 출력이 된다. 이게 this 키워드의 첫 번째 뜻이다. this를 출력하는 함수를 생성해보고 실행하자. 동일하게 window가 뜬다. 즉, **그냥 쓰거나 일반 함수에서 쓰면 object {window}이다**. ❗자바스크립트 strict mode에서 쓰면 'undefined'..
[코딩애플] js part 1-1. 강의 듣기 전 자바스크립트 기본 문법 총정리 JavaScript를 쓰는 이유 1. HTML 변경하려고 씀 안녕 2. HTML 누르면 뭐 실행하고 싶을 때 ➡️이벤트리스너 안녕 버튼 3. 잠깐 자료를 저장해두고 싶다면 ➡️ 변수 용도에 따라 var, let, const 사용 가능함 4. 긴 코드를 짧게 축약하려면 ➡️ 함수 안녕 버튼 5. 함수 다양하게 쓰려면 ➡️ 파라미터로 업그레이드 안녕 버튼 화살표 함수 정확히 같은 역할을 하는 것은 아님. 후에 알아볼 것임. document.getElementById('button').addEventListener('click', () => { 작명('바보'); }) 6. 한 번에 여러 개 자료를 저장하려면 ➡️ array, object array array 속에 array나 함수를 넣을 수도 있다. 원하는 ..
반응형

티스토리툴바