Programming/WEB30 [js] 브라우저별 동작 웹 작업을 하다보면 브라우저 별로 다르게 작업해야하는 경우가 생긴다. 이는 아래와 같은 JS 함수를 작성해서 이용할 수 있다. function actionPerBrowser() { const agent = window.navigator.userAgent.toLowerCase(); switch (true) { case agent.indexOf("edge") > -1: //엣지 //Action break; case agent.indexOf("edg/") > -1: // 크롭기반 엣지 //Action break; case agent.indexOf("opr") > -1: // 오페라 //Action break; case agent.indexOf("chrome") > -1 && !!window.chrome: //.. 2022. 5. 19. [jQuery] closest(), parent(), parents() 메서드 정리 오늘은 closest 와 parent, parents 메서드를 정리해 두려고 한다. parent() parent()는 해당 Element 바로 위에 존재하는 부모 요소 하나를 반환한다. 바로 인접한 요소 하나만 반환하는 것이 특징이다. parents() parents()는 해당 Element의 모든 부모 요소를 반환한다. 모든 부모 요소를 반환한다는 점 말고는 parent()와 동일하다. closest() 해당 메서드는 Element에서 파라미터에 입력된 선택자에 만족할 때 까지 탐색을 하고, 이때 가장 가까운 선택자를 선택하여 가져온다. 만약 조건에 만족하는 요소가 없으면 Null을 반환해준다. 이때 자기 자신은 포함된다. 예제코드 X Y A B I J K C Z parent() 예시 $("li.ite.. 2022. 5. 3. [js] javascript 에서 async 와 await를 이용해 비동기 처리하기 하이 ...! 오늘은 javascript에서 async와 await를 이용해 비동기를 처리하는 방법을 공유드리려한다. 먼저 이전에 javascript에서 Promise 패턴을 이용해서 비동기 처리하는 것을 알려드린적 있다. 혹시 기억이 안나면 아래 링크를 보고 오자. https://devkingdom.tistory.com/218?category=841890 [JS] 자바스크립트의 비동기 처리 패턴 - 콜백(callback), 프로미스(promise) 자바스크립트에서 비동기 처리를 하는 것은 특정 코드의 로직이 끝날때까지 코드의 실행을 멈추지 않고 다음 코드를 바로 실행하는 것을 의미한다. 보통 응답과 요청 구조로 되어있는 통신에서 devkingdom.tistory.com 위의 링크를 읽을면 알 수 있듯이.. 2022. 2. 22. [js] javascript 에서 class 사용하기 오늘은 javascript의 class에 대해 정리해 보려 한다. class class는 javascript에서 ES6 이후 생긴 개념이다. 정리된 내용을 보시면 알겠지만 여러분들이 객체지향 언어에서 사용하시는 그 클래스다. 아래 예시를 보자. class User { constructor(name, age, gender) { this.name = name; this.age =age; this.gender = gender; } getName() { return this.name; } getAge() { return this.age; } getGender() { return this.gender; } } const user1 = new User('kang', 33, 'M'); console.log(user1.. 2022. 2. 20. [JS] javascript 의 prototype과 상속 오늘은 javascript에서 prototype과 상속에 대해 정리해 두려고 한다. prototype 이란? javascript에서는 객체를 복사하여 새로운 객체를 생성하는 prototype 기반의 언어이다. 프로토타입 기반의 언어란 객체 원형인 프로토타입을 이용해 새로운 객체를 만들어준다. 이렇게 생성된 객체는 또 다른 객체의 원형이 될 수도 있다. 이 프로토타입을 이용해서 javascript에서 상속을 사용해 객체지향 프로그래밍을 할 수가 있다. 일단 아래 예시를 보자. user 라는 객체를 생성해서 내부를 보면 Prototype이라는 것이 보인다. 실제로 hasOwnProperty (해당 키가 객체의 프로퍼티인지 아닌지 체크해주는 기능을 수행) 라는 것을 써보면 위처럼 true, false 로 결과.. 2022. 2. 20. [JS] javascript에서 함수 호출 방식과 상관없이 this 를 지정하는 방법 javascript에서 객체 자기자신을 가르키는 키워드가 this이다. this에 대해서는 이전 포스팅에서 생성자 함수를 얘기하면서 잠시 언급한 적이 있다. https://devkingdom.tistory.com/308?category=841890 [JS] javascript 에서 객체 (object) 사용하기 - 객체 리터럴, 생성자 java나 c# 등 객체지향 언어를 공부해본 사람이라면 객체가 무엇인지 잘 알고 있을 것이다. javascript도 객체(Object)를 생성하여 사용할 수 있다. Object - 접근 , 추가, 삭제 아래 코드는 person이라는 Obje devkingdom.tistory.com 프로그래밍을 하다보면 함수를 호출하다 this를 잃어버리는 초보적인 실수를 하곤 한다. 오늘.. 2022. 2. 19. [JS] javascript에서 시간 제어하기 javascript에서는 특정한 함수를 이용해 시간을 제어할 수 있다. 크게 두가지로 나뉘는데 하나는 특정 시간 뒤에 동작하게 하는 setTimeout이고, 하나는 특정 시간마다 동작하게 하는 setInterval 이다. 둘다 상황에 따라 시간을 제어할때 많이 쓰는 것이니 잘 익혀두도록 하자. setTimeout 아래 예시를 보자. 굉장히 간단한 예시이다. function func() { console.log('3초 지남'); } setTimeout(func, 3000); 이렇게 하면 func라는 함수가 3초 뒤에 실행된다. 여기서 숫자의 단위는 ms 이다(1000 ms당 1초) 아 ! 그리고 여기서 주의해야할게 저기 숫자에 0을 넣는다고해도 바로 실행되지는 않는다. ( 4ms 정도의 딜레이가 있다.) .. 2022. 2. 19. [JS] javascript Closure(클로저) 정리 javascript를 공부하시다 보면 처음으로 '아... javascript 쉽다고 들었는데... 어렵네... 하는 구간이 있다.' 바로 이 Closure를 마주치는 순간이 그 순간 중 하나가 아닐까 생각한다. 오늘은 이 Closure 에 대해 정리해두고자 하니, 잘 따라오시길 바란다. Closure "클로저는 함수와 그 함수가 선언 됐을 때의 렉시컬 환경과의 조합이다." MDN 에 나온 클로저의 정의이다. 이걸보고 오 ~ 클로저 별거 아니네 하면 ... 당신은 천재다. (대부분의 경우는 잘 모르실 것이라 예상을 하고 ..!) 클로저를 비교적 쉽게 설명드리도록 하겠다. 자바스크립트는 어휘적 환경( Lexical Environment)을 가진다. 이 말이 무슨말인지를 지금부터 잘 기억하길 바란다. 아래 예.. 2022. 2. 19. [JS] javascript에서 ... 을 이용하기 (Rest parameters, Spread syntax) 오늘은 javascript에서 ...을 이용해서 배열이나 객체를 간편하게 조작하는 것을 포스팅 해볼 예정이다. Rest parameters (나머지 매개변수) 한글로 말하면 나머지 매개변수라고 하는데, 먼저 Rest Parmeters를 알아보기 전에 Arguments부터 알아보자. ES6 이전에는 Arguments를 이용해서 가변의 입력 파라미터를 처리했었다. 아래 예시를 보자. function printName(name) { console.log(arguments.length); console.log(arguments[0]); console.log(arguments[1]); } printName('kang', 'kim'); Arguments를 이용해서 입력된 값들의 길이, 각각의 값들을 함수내에서 활용.. 2022. 2. 18. 이전 1 2 3 4 다음
