자바스크립트54 [자바스크립트] 자바스크립트에서의 this this란? '이것'이란 뜻입니다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 property나 method를 참조할 수 있습니다. 선언이 아닌 호출 방식에 따라 동적으로 달라집니다. 각 상황별로 this의 쓰임 1. 전역에 선언한 this의 경우 this를 호출하는 경우엔 전역 변수(Global variable)를 가리킵니다. 브라우저라는 자바스크립트 런타임의 경우에 this는 항상 window라는 전역 변수를 참조합니다. function thisFn () { return this; } thisFn(); //window 객체 출력 알고 가자! 전역 변수(Global Variable)와 지역 변수(Local Variable) - 변수는 유효 범위에 따라 전역 변수(Global Var.. 2022. 4. 25. [자바스크립트] 형변환 Number(), parseInt(), parseFloat()의 차이 Number() 문자열을 인자로 받아 숫자형으로 반환합니다. let num = Number('123'); //123 숫자가 아닌 경우 NaN을 반환합니다. let num = Number('12삼'); //NaN parseInt() Number()와 동일하게 문자열 인자를 받아 숫자형을 반환합니다. 다른 점은 숫자로 시작하는 경우에는 숫자가 끝날 때까지만 형 변환을 하여 저장합니다. 시작이 숫자가 아니면 Number()와 마찬가지로 NaN을 저장합니다. let num1 = parseInt('1000원'); //num에 1000이 저장 let num2 = parseInt('가격 1000월'); //num에 NaN이 저장 구문 Number.parseInt(string) Number.parseInt(string.. 2022. 4. 18. [자바스크립트] 숫자타입을 문자타입으로 변환, String 함수와 toString() String 함수와 toString 은 둘 다 숫자형을 문자형으로 변환해줍니다. 그렇다면 이 둘에는 어떤 차이가 있는 걸까? String 함수 String 함수는 주어진 인자를 문자열로 변환할 뿐만 아니라 new 키워드와 함께 새로운 문자열 객체를 생성할 수 있습니다. let num1 = 12; console.log(typeof num1); //number let str1 = String(num1); console.log(typeof str1); //string new 를 사용하여 string 만들어보았습니다. let newString1 = String(100); //"100" let newString2 = new String(100); //String {"100"} toString 함수 toString.. 2022. 4. 18. [자바스크립트] JavaScript 기초 다지기 - 1 sum sum function의 x+y값을 리턴합니다. function sum(x, y) { return x + y; } console.log(sum(1,3)); //4 multiply multiply function의 x*y값을 리턴합니다. function multiply(x,y) { return x*y; } console.log(multiply(2,3)); // 6 length getStringLength function은 length를 사용하여 총문자열의 길이를 리턴합니다. function getStringLength(str) { return str.length; } console.log("Hello, world"); //12 toLowerCase() 문자열에 toLowerCase()라는 메서드(함.. 2022. 4. 12. [자바스크립트] 자료형 문자형 String 문자형은 3가지 방법으로 쓸 수 있다. const name1 = "Sam"; // ""와 ''는 큰 차이가 없다. const name2 = 'Sam'; const name3 = `Sam`; 특수 문자 사용 방법 const wrong = "I'm a boy."; //에러가 난다. const right = "I\'m a girl."; // 역 슬래쉬를 넣어주면 특수 문자를 인식한다. // I'm a girl. 백 틱은 문자 내부의 변수를 표현할 때 사용하기 편리하다. const name = "Sam"; const sentence = `My name is ${name}.`; console.log(sentence); // My name is Sam. 숫자형 Number 사칙연산이 가능하다. .. 2022. 3. 15. [자바스크립트 ] append, prepend, after, before append, prepend, after, before 페이지 로드 완료 후에 이미지를 순차적으로 로드한다던지 페이지마다 다른 내용을 보여줘야 할 때 등 동적으로 html요소를 추가해야 할때 아주 유용하게 사용되는 함수들입니다. append() 선택한요소의 자식요소 뒤에 내용삽입 prepend() 선택한요소의 자식요소 앞에 내용삽입 after() 선택한 요소의 뒤에 내용 삽입 before() 선택한 요소의 앞에 내용 삽입 // 기본 소스 코드 append() $("#parentDiv").append(''); prepend() $("#parentDiv").prepend(''); after() $("#parentDiv").after(''); before() $("#parentDiv").before(''); 2022. 3. 13. [자바스크립트] form, input 이벤트 핸들링 목표 입력된 값을 console에 뽑아 보기 html 파일 이벤트 헨들링 html 결과 JavaScript 파일 // input 창에 입력된 값 읽어와 주게 설정을 해주었다. function App() { document.querySelector('#menu-name').addEventListener('keypress', (e) => { console.log(e.key); }); } // document.querySelector('') -> html에 있는 element를 찾을 수 있다. // addEventListener('', (e)=>{}) -> 찾은 element에서 이벤트를 받아 올 수 있다. 입력창에 입력을 해도 console에 나타나지 않는다. 그 이유는 function App을 선언만하고 .. 2022. 3. 12. [자바스크립트] async와 await를 사용하여 비동기 프로그래밍을 쉽게 만들기 async, await란? 기존의 콜백 함수와 promise의 단점을 보완한 비동기 처리 방식이다. async, await의 필요성 JavaScript는 싱글 스레드 기반 언어이기 때문에 비동기 처리가 필수적이다. JavaScript의 일부인 async 그리고 await 키워드는 기본적으로 비동기 코드를 쓰고 Promise를 더 읽기 쉽도록 만들어준다. 비동기 처리는 결과를 예측할 수 없기 때문에 동기식의 처리가 필요하다. 대표적으로 promise, callback이 있다. async와 await는 기존 동기식 처리의 단점을 보완하고 가독성을 높여주는 코드를 작성할 수 있다. 사용방법은 function() 앞에 async만 붙여주면 되고 비동기로 처리되는 부분 앞에 await만 붙여주면 된다. 그리고 a.. 2022. 3. 8. [자바스크립트] 기본 강화_변수 [1] 자바스크립트 기본을 다지기 위해 정리를 시작했습니다. 연습 코드들은 Codepen을 사용하여 연습했습니다. Codepen은 무료로 HTML, CSS, JS 등을 온라인에서 작성하고 결과물을 확인할 수 있는 기능을 제공해주는 사이트입니다. 코드가 공유 가능하며 다른 사람들이 개발한 프로젝트들도 볼 수 있습니다. Codepen Create a New Pen ... codepen.io 오늘은 변수에 대해 알아 보았습니다. 변수란? 어떤 정보에 이름을 붙여서 저장하고 싶을 때 사용됩니다. 변수를 선언하는 방법 name=”Mike”; 자바스크립트에서 문자는 항상 따옴표(””, ‘’)로 감싸줘야 합니다. 그리고 변수를 선언하는 데는 몇 가지 규칙이 있습니다. 예제) name=”Mike”; alert(name); c.. 2022. 3. 1. 이전 1 ··· 3 4 5 6 다음 728x90
